2.5 共用刚刚写好的页面模版

首先体会一下共用模版的应用

1、将webpage.html就作为我们的共用模版的基本模版（我的理解是类似于.NET里的masterpage），在各个页面可能要变化的部分增加两行代码。

    {% block mainbody %}
    {% endblock %}

在这里，我定义了一个mainbody的块，用来其他页面放置内容。

2、新建立一个index.html文件，作为首页。先测试一下，所以就简单写个代码如下：

{% extends 'webpage.html' %}
{% block mainbody %}
    MainBody
{% endblock %}

extends： 扩展自webpage.html
block mainbody: 将mainbody的内容写在这一块。在这里我为了测试，就简单地使用了加粗的Mainbody字符串。

3、修改视图函数index中渲染的页面为刚刚建立的index.html。

    return render_template('index.html',username=username)

4、运行测试成功，效果如下：

显示效果

写真正的index.html代码

1、有了信心，于是我继续在mainbody块里写下以下代码，最后成为这样：

{% extends 'webpage.html' %}

{% block mainbody %}
    
    

    

      
关于工作和生活
      
 生活不止眼前的苟且，还有诗与远方。周振宇的个人网站，逐步完善中。
    
    



    
    
    

        


          
          

            

              ![]({{ url_for('static',filename='img/portfolio01.jpg') }})
              

                
互联网+
                
“互联网+”不是把业务或者信息系统放到网上而已，而是通过互联网的技术和思维，对传统业态进行颠覆，或是直接创造新的业态。
                
前去看看..
              
            
          

        
         

            

              ![]({{ url_for('static',filename='img/portfolio04.jpg') }})
              

                
人工智能
                
30年前，自动化控制就是智能；20年前，信息系统就是智能；10年前，聊天机器人就是智能；现在，像人一样学习和思考就是人工智能。
                
前去看看..
              
            
          

         
          

            

              ![]({{ url_for('static',filename='img/portfolio03.jpg') }})
              

                
大数据
                
大数据时代，要是想分一杯羮，请注意在以下三个方面发力：1、拥有大数据；2、拥有应用大数据的商业模式；3、拥有处理大数据的技术能力。
                
前去看看..
              
            
          

          
          

            

              ![]({{ url_for('static',filename='img/portfolio02.jpg') }})
              

                
生活札记
                
生活不止眼前的苟且，还有诗与远方。
虽然不喜欢这个死胖子，但是还是很欣赏他的歌。。。
                
前去看看..
              
            
          

        
    
 
{% endblock %}

2、得有图，于是制作了几张图片，放到static/img/下面。

3、运行看效果。

运行效果一

还是响应式的：

运行效果2