个人中心标签页导航

    1. 新页面userbase.html,用<ul ><li role="presentation">实现标签页导航。
      <ul class="nav nav-tabs">
      <li role="presentation"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
      </ul>

    2. 让userbase.html继承base.html。
      重写title,head,main块.
      将上述<ul>的样式放在head块,<ul>放在main块中.
      定义新的块user。
      {% extends 'base.html' %}
      {% block title %}
      
      {% endblock %}
      {% block main %}
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      
      
      <ul class="nav nav-pills" >
          <li><a href="{{ url_for('usercenter',user_id=user_id) }}">question</a></li>
          <li><a href="#">comment</a></li>
          <li><a href="#">information</a></li>
      </ul>
      {% block ab %}{% endblock %}
      {% endblock %}
    3. 让上次作业完成的个人中心页面,继承userbase.html,原个人中心就自动有了标签页导航。

    4. 制作个人中心的三个子页面,重写userbase.html中定义的user块,分别用于显示问答、评论、个人信息。

    5. 思考 如何实现点标签页导航到达不同的个人中心子页面。
      {% extends 'userbase.html' %}
      {% block title %}
          question
      {% endblock %}
      
      {% block ab %}
      
                  <div class="col-md-8 column">
                      <ul class="list-unstyled">
                          {% for foo in comments %}
                              <li class="list-group-item">
      
                                  {{ foo.create_time }}
                                  <p>文章标题:{{ foo.question.title }}</p>
                                  <p>评论内容:{{ foo.detail }}</p>
                                  <img style="width: 30px" src="{{ url_for('static',filename='css/tx.jpg') }}" alt="64">
                                  <small><a>{{ foo.author.username }}</a></small>
                                  <br>
                              </li>
                          {% endfor %}
                      </ul>
                  </div>
                  <div class="col-md-2 column">
                  </div>
              </div>
          </div>
      
      {% endblock %}
      {% extends 'userbase.html' %}
      {% block title %}
          question
      {% endblock %}
      
      {% block ab %}
      <div class="container">
          <div class="row clearfix">
              <div class="col-md-2 column">
              </div>
              <div class="col-md-8 column"><ul style="margin-left:-20%" class="list-group">
                              {% for foo in questions %}
                                  <li class="list-group-item" style="width: 800px">
                                      <img style="width: 30px" src="{{ url_for('static',filename='css/touxiang.jpg') }}"
                                           alt="64">
                                      <a href="#">{{ username }}</a><br>
                                      <a href="{{ url_for('detail',question_id=foo.id) }}">问题:{{ foo.title }}</a><br>
                                      <p style="align-content: center">{{ foo.detail }}</p>
                                      <span>评论数: ({{ foo.comments|length }})
                                      {{ foo.create_time }}
                                      <p style="margin-left: 25%"></p><br>
                                  </li>
                              {% endfor %}
                          </ul>
              </div>
              <div class="col-md-2 column">
              </div>
          </div>
      </div>{% endblock %}
      {% extends 'userbase.html' %}
      {% block title %}
          question
      {% endblock %}
      
      {% block ab %}
      <div class="container">
          <div class="row clearfix">
              <div class="col-md-2 column">
              </div>
              <div class="col-md-8 column"> <ul style="margin-left:-20%" class="list-group">
                              <li class="list-group-item" style="width: 800px">
                                  <h3 align="center">个人信息</h3>
                                  <img style="width: 30px" src="{{ url_for('static',filename='css/touxiang.jpg') }}" alt="64">
                                  <a href="#">用户名{{ username }}</a><br>
                                  <a>文章篇数:{{ questions|length }}</a>
                                  <p style="margin-left: 25%"></p><br>
                              </li>
                          </ul>
              </div>
              <div class="col-md-2 column">
              </div>
          </div>
      </div>{% endblock %}