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

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

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

<!--主体部分开始-->
    {% block mainbody %}
    {% endblock %}
<!--主体部分结束-->

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

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

{% extends 'webpage.html' %}
{% block mainbody %}
    <b>MainBody</b>
{% 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 %}
    <!----1.巨幕------------>
    <div class="jumbotron">
    <div class="container">
      <h1>关于工作和生活</h1>
      <p> 生活不止眼前的苟且，还有诗与远方。<small>周振宇的个人网站，逐步完善中。</small></p>
    </div><!---end container--->
    </div><!---end jumbotron--->



    <!----2.主体内容--------------->
    <!--- 按bootstrap习惯放在容器里--->
    <div class="container">
        <div class="row">

          <!---2.1第一个框，小的显示器占6个位，大的显示器占3个位。（bootstrap的栅格系统）------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio01.jpg') }})
              <div class="caption">
                <h3>互联网+</h3>
                <p>“互联网+”不是把业务或者信息系统放到网上而已，而是通过互联网的技术和思维，对传统业态进行颠覆，或是直接创造新的业态。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

        <!---2.2第二个框------>
         <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio04.jpg') }})
              <div class="caption">
                <h3>人工智能</h3>
                <p>30年前，自动化控制就是智能；20年前，信息系统就是智能；10年前，聊天机器人就是智能；现在，像人一样学习和思考就是人工智能。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

         <!---2.3第三个框------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio03.jpg') }})
              <div class="caption">
                <h3>大数据</h3>
                <p>大数据时代，要是想分一杯羮，请注意在以下三个方面发力：1、拥有大数据；2、拥有应用大数据的商业模式；3、拥有处理大数据的技术能力。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

          <!---2.4第三个框------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio02.jpg') }})
              <div class="caption">
                <h3>生活札记</h3>
                <p>生活不止眼前的苟且，还有诗与远方。<br />虽然不喜欢这个死胖子，但是还是很欣赏他的歌。。。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

        </div><!--end row-->
    </div> <!--End container------>
{% endblock %}

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

3、运行看效果。

运行效果一

还是响应式的：

运行效果2