个人中心标签页导航

Posted 2020-10-17 袁颖琳

1. 新页面user.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>

    <ul class="nav nav-tabs">
       <li class="nav-item">
         <a class="nav-link" href="#">全部问题</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">全部评论</a>
       </li>
       <li class="nav-item">
         <a class="nav-link disabled" href="#">个人信息</a>
       </li>
     </ul>

    

   
   
   
2. user.html继承base.html。
   重写title,head,main块.
   将上述<ul>放在main块中.
   定义新的块user。

   {% extends ‘1101.html‘ %}
   {% block title %}个人中心{% endblock %}
   {% block head %}
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
   
   {% endblock %}
   
   {% block main %}
   <div style="padding-left: 300px;padding-right: 300px">
       <ul class="nav nav-pills">
           <li class="active"><a href="#">问答平台</a></li>
           <li><a href="#">全部评论</a></li>
           <li><a href="#">个人资料</a></li>
   
       </ul>
   </div>
   {% block user %}{% endblock %}
   {% endblock %}

    

   
   
   
3. 让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。

   {% extends ‘user.html‘ %}
   {% block user %}
   <div style="padding-left: 300px;padding-right: 300px">
       <div class="page-header">
           <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}</h3>
           <small>全部问答</small>
           <br>
           <ul class="note-list" style="padding-left: 0px;">
               {% for foo in questions %}
               <li class="list-group-item">
                   <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                   <a href="#">{{ foo.author.username }}</a>
                   <br>
                   <a href="{{ url_for(‘detail‘,question_id=foo.id) }}">{{ foo.title }}</a>
                   <span class="badge">{{ foo.time }}</span>
                   <p>{{ foo.detail }}</p>
   
               </li>
               {% endfor %}
           </ul>
       </div>
       <div class="page-header">
           <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}</h3>
           <small>全部评论</small>
           <br>
           <ul class="note-list" style="padding-left: 0px;">
               {% for foo in comments %}
               <li class="list-group-item">
                   <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                   <a href="#">{{ foo.author.username }}</a>
                   <span class="badge">{{ foo.time }}</span>
                   <br>
                   <p>{{ foo.detail }}</p>
   
               </li>
               {% endfor %}
           </ul>
   
       </div>
   </div>
   {% endblock %}

    

   
   
   
4. 重写user.html中定义的user块。

   {% extends ‘user.html‘ %}
   
   {% block user %}
   <div>
       全部问答
   </div>
   
   {% endblock %}

   {% extends ‘user.html‘ %}
   
   {% block user %}
   <div>
       全部评论
   </div>
   
   {% endblock %}

   {% extends ‘user.html‘ %}
   
   {% block user %}
   <div>
      个人信息
   </div>
   
   {% endblock %}