个人中心标签页导航

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。
   
   
3. 让上次作业完成的个人中心页面，继承userbase.html，原个人中心就自动有了标签页导航。
   
   
4. 制作个人中心的三个子页面，重写userbase.html中定义的user块，分别用于显示问答、评论、个人信息。
   
   
5. 思考 如何实现点标签页导航到达不同的个人中心子页面。

 

{% extends 'base.html' %}
{% block title %}
    个人中心
{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">#}
{##}
{#    <style>#}
{#        .nav_ul li{#}
{#            list-style:none;#}
{#            float: left;#}
{#            margin: 10px;#}
{#        }#}
{#    </style>#}

{% endblock %}

{% block main %}
<div  style="width:50rem; margin:0 auto">
<ul class="list-group list-group-flush">
    <h2>{{ user.username }}</h2>
    </ul>
    <li role="presentation"class="btn btn-light"><a href="{{ url_for('usercenter',user_id=user.id) }}">全部问答</a> </li>
    <li role="presentation"class="btn btn-light"><a href="#">全部评论</a> </li>
    <li role="presentation"class="btn btn-light"><a href="#">个人信息</a> </li>

</ul>
</div>
    {% block user %}
    {% endblock %}
{% endblock %}

{% extends 'userbase.html' %}


{% block user %}
<div class="card" style="width:50rem; margin:0 auto">

<ul class="list-group list-group-flush">

<h3>全部问答</h3>


{% for foo in user.questions %}

        <li class="list-group-item">
            <span class="icon" aria-hidden="true"></span>

            <br>

            <h3><img   src="../static/image/yezi.jpg" width="20"
                    height="20"> <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a></h3>

            <p>{{ foo.detail }}</p>
        <span class="badge"style="float:right">{{ foo.creat_time}}</span>
           <img   src="../static/image/touxiang.jpg" width="20"
                    height="20">
            <a href="{{ url_for('usercenter',user_id=foo.author.id) }}">{{ foo.author.username}}</a>
        </li>

        {% endfor %}

</ul>
</div>

{% endblock %}

{% extends 'userbase.html' %}

{% block user %}
    
<div class="card" style="width:50rem; margin:0 auto">
<ul class="list-group list-group-flush">
<h3>全部问答</h3>


{% for foo in user.questions %}

        <li class="list-group-item">
            <span class="icon" aria-hidden="true"></span>

            <br>

            <h3><img   src="../static/image/yezi.jpg" width="20"
                    height="20"> <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a></h3>

            <p>{{ foo.detail }}</p>
        <span class="badge"style="float:right">{{ foo.creat_time}}</span>
           <img   src="../static/image/touxiang.jpg" width="20"
                    height="20">
            <a href="{{ url_for('usercenter',user_id=foo.author.id) }}">{{ foo.author.username}}</a>
        </li>

        {% endfor %}

</ul>
</div>
    
{% endblock %}

{% extends 'userbase.html' %}

{% block user %}
    
<div class="card" style="width:50rem; margin:0 auto">
<ul class="list-group list-group-flush">
<h3>全部问答</h3>


{% for foo in user.questions %}

        <li class="list-group-item">
            <span class="icon" aria-hidden="true"></span>

            <br>

            <h3><img   src="../static/image/yezi.jpg" width="20"
                    height="20"> <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a></h3>

            <p>{{ foo.detail }}</p>
        <span class="badge"style="float:right">{{ foo.creat_time}}</span>
           <img   src="../static/image/touxiang.jpg" width="20"
                    height="20">
            <a href="{{ url_for('usercenter',user_id=foo.author.id) }}">{{ foo.author.username}}</a>
        </li>

        {% endfor %}

</ul>
</div>

    
{% endblock %}

{% extends 'userbase.html' %}

{% block user %}
    
   <div class="card" style="width:50rem; margin:0 auto">
<h3>{{ username }}个人信息</h3>
<ul class="list-group list-group-flush">


        <li class="list-group-item">
            <span class="icon" aria-hidden="true">
                用户：{{ user.username }}<br>
                编号：{{ user.id }}<br>
                昵称：{{ user.nickname }}<br>
                文章篇数：{{ user.questions|length }}
            </span>

        </li>


    </ul>

</div>


    
{% endblock %}