个人中心标签页导航

• 新页面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>
• 让userbase.html继承base.html。 重写title,head,main块. 将上述<ul>的样式放在head块，<ul>放在main块中. 定义新的块user。

  {% extends 'base.html' %}
  {% block title %}个人中心{% endblock %}
  
  {% block head %}
       <style>
           .nav_ul li{
               list-style: none;
               float:left;
               margin:10px;
           }
       </style>
  {% endblock %}
  
  {% block main %}
       <ul class="nav_ul">
          <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id,tag='user1') }}">全部问答</a></li>
          <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id,tag='user2') }}">全部评论</a></li>
          <li role="presentation"><a href="{{ url_for('usercenter',user_id=user.id,tag='user3') }}">个人信息</a></li>
       </ul>
  {% endblock %}

   

• 让上次作业完成的个人中心页面，继承userbase.html，原个人中心就自动有了标签页导航。
• 制作个人中心的三个子页面，重写userbase.html中定义的user块，分别用于显示问答、评论、个人信息。

  {% extends 'userbase.html' %}
  
  {% block user %}
  
      <div class="page-header">
          <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span> {{ username }}<br><small>全部问答 <span class="badge"></span></small></h3>
          <ul class="list-group" style="...">
              {% for foo in questions %}
                  <li class="list-group-item">
                      <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                      <a href="#">{{ foo.author.username }}</a>
                      <span class="badge">{{ foo.creat_time }}</span>
  
                      <p style="..."> {{ foo.detail }}</p>
                  </li>
              {% endfor %}
          </ul>
  
      </div>
  
       <div class="page-header">
           <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span> {{ user }}<br><small>全部评论 <span class="badge"></span></small></h3>
          <ul class="list-group" style="...">
              {% for foo in comments %}
                  <li class="list-group-item">
                      <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                      <a href="#">{{ foo.author.username }}</a>
                      <span class="badge">{{ foo.creat_time }}</span>
  
                      <p style="..."> {{ foo.detail }}</p>
                  </li>
              {% endfor %}
          </ul>
  
       </div>
  
       <div class="page-header">
           <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span> {{ user }}<br><small>个人信息 <span class="badge"></span></small></h3>
          <ul class="list-group" style="...">
  
                   <li class="list-group-item">用户：{{ username }}</li>
                   <li class="list-group-item">编号：</li>
                   <li class="list-group-item">昵称：</li>
                   <li class="list-group-item">文章篇数：</li>
          </ul>
  
       </div>
  
  
  {% endblock %}

  {% extends 'userbase.html' %}
  
  {% block user %}
  
  <div class="page-header">
           <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span> {{ user }}<br><small>全部评论 <span class="badge"></span></small></h3>
          <ul class="list-group" style="...">
              {% for foo in comments %}
                  <li class="list-group-item">
                      <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                      <a href="#">{{ foo.author.username }}</a>
                      <span class="badge">{{ foo.creat_time }}</span>
  
                      <p style="..."> {{ foo.detail }}</p>
                  </li>
              {% endfor %}
          </ul>
  
       </div>
  
  {% endblock %}

  {% extends 'userbase.html' %}
  
  {% block user %}
  
      <div class="page-header">
           <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span> {{ user }}<br><small>个人信息 <span class="badge"></span></small></h3>
          <ul class="list-group" style="...">
  
                   <li class="list-group-item">用户：{{ username }}</li>
                   <li class="list-group-item">编号：</li>
                   <li class="list-group-item">昵称：</li>
                   <li class="list-group-item">文章篇数：</li>
          </ul>
  
       </div>
  
  {% endblock %}

   

• 思考 如何实现点标签页导航到达不同的个人中心子页面。