个人中心标签页导航

Posted 2020-10-18 093陈泽琪

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">
   
                               <span class="badge pull-right">{{ foo.create_time }}</span>
                               <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/tx.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 }})</span>
                                   <span class="badge" style="margin-left: 60%">{{ foo.create_time }}</span>
                                   <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/tx.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 %}