个人中心标签页导航

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>

<ul class="nav_ul">
        <li role="presentation"><a href="#">Questions</a></li>
        <li role="presentation"><a href="#">Comments</a></li>
        <li role="presentation"><a href="#">Info</a></li>
    </ul>

2.user.html继承base.html。
重写title,head,main块.
将上述<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) }}">Questions</a></li>
        <li role="presentation"><a href="#">Comments</a></li>
        <li role="presentation"><a href="#">Info</a></li>
    </ul>
    {% block user %}
    {% endblock %}
{% endblock %}

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

 

{% extends 'myweb.html' %}
{% block title %}个人中心 {% endblock%}
{% block main%}
 
<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 user.question %}
            <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 user.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 %}

 

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

{% extends 'user.html' %}


{% block user %}


<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-6 column">


<h1><img src="{{ img }}" width="50px">{{usern }}</h1>

    <br>全部问答


<div class="basic_box" style="padding-bottom: 50px;">
    <ul class="list-group">

           {% for foo in ques %}

            <li class="list-group-item" style="width: 800px">

<a class="wrap-img" href="#" target="_blank">
                    <img src="{{ foo.author.image }}" width="50px">
                </a>
                <span class="glyphicon glyphicon-left" aria-hidden="true"></span>
                <a href="{{ url_for('person',user_id=qu.author.id) }}" target="_blank">{{ foo.author.username }}</a>
                <br>
                <a href="{{ url_for('detail',question_id=qu.id) }}">{{foo.title }}</a>

                <br>
                <span class="badge">发布时间:{{ foo.creat_time }}</span>
                <p style="">{{ foo.detail }}
                </p>



            </li>
     {% endfor %}
    </ul>
</div>

        <div class="col-md-4 column">
        </div>
    </div>
</div>

</div>

</div>

{% endblock %}

{% extends 'user.html' %}


{% block user %}


<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-6 column">



<h1><img src="{{ img }}" width="50px">{{usern }}</h1>
    <br>全部评论



<div class="basic_box" style="padding-bottom: 50px;">
    <ul class="list-group" style="margin-bottom: 10px">
      {% for foo in users %}


            <li class="list-group-item" style="width: 800px">


                <a class="wrap-img" href="#" target="_blank">
                    <img src="{{ foo.author.image }}" width="50px">
                </a>
                <span class="glyphicon glyphicon-left" aria-hidden="true"></span>

                <br>
                <a href="#">{{ foo.author.username }}</a>
                <span class="badge">评论时间:{{ foo.creat_time }}</span>
                <p style="">{{ foo.detail }}
                </p>


            </li>
     {% endfor %}
    </ul>


        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>



</div>


</div>

{% endblock %}

{% extends 'user.html' %}


{% block user %}


<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-6 column">


<h1><img src="{{ img }}" width="50px">{{usern }}</h1>
    <br>个人信息

<div class="basic_box" style="padding-bottom: 50px;">
    <ul class="list-group" style="margin-bottom: 10px">



          <li class="list-group-item" style="width: 800px"> 用户：{{ usern }}</li>
          <li class="list-group-item" style="width: 800px"> 编号：{{ id }}</li>
          <li class="list-group-item" style="width: 800px"> 问答数：{{ ques|length }}</li>
          <li class="list-group-item" style="width: 800px"> 评论数：{{ comment|length }}</li>

    </ul>

        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>

</div>


</div>

{% endblock %}