个人中心标签页导航

Posted 2020-10-17 029郭媚婷

 

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 role="presentation"><a href="{{ url_for(‘usercenter‘,user_id= user.id,tag=1) }}">全部问答</a></li>
    <li role="presentation"><a href="{{ url_for(‘usercenter‘,user_id= user.id,tag=2) }}">全部评论</a></li>
    <li role="presentation"><a href="{{ url_for(‘usercenter‘,user_id= user.id,tag=3) }}">个人资料</a></li>
</ul>

 

 

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

 

{% extends ‘moban.html‘ %}
{% block title %}个人中心{% endblock %}

{% block head %}
    <style>
        .nav li{
            list-style: none;
            float: left;
            margin: 10px;
        }

    </style>
{% endblock %}

{% block main %}

   <ul class="nav nav-tabs">
    <li role="presentation"><a href="{{ url_for(‘usercenter‘,user_id= user.id,tag=1) }}">全部问答</a></li>
    <li role="presentation"><a href="{{ url_for(‘usercenter‘,user_id= user.id,tag=2) }}">全部评论</a></li>
    <li role="presentation"><a href="{{ url_for(‘usercenter‘,user_id= user.id,tag=3) }}">个人资料</a></li>
</ul>
{% block user %}{% endblock %}
{% endblock %}

 

 

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

{% extends ‘user.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 wendas %}
            <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=""></p>{{ foo.detial }}
            </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=""></p>{{ foo.detial }}
            </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>


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

 

 

4、制作个人中心的三个子页面，重写user.html中定义的user块。

{% extends ‘usercenter.html‘ %}

{% block user %}

<div class="page-header">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>全部问答
    <ul class="list-group" style="">
        {% for foo in wendas %}
            <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=""></p>{{ foo.detial }}
            </li>

        {% endfor %}


    </ul>
</div>

{% endblock %}

{% extends ‘usercenter.html‘ %}

{% block user %}

<div class="page-header">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>全部评论
    <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=""></p>{{ foo.detial }}
            </li>

        {% endfor %}


    </ul>
</div>


{% endblock %}

{% extends ‘usercenter.html‘ %}

{% block user %}

<div class="page-header">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人资料
    <ul class="list-group" style="">
            <li class="list-group-item">用户：{{ username }} </li>
            <li class="list-group-item">编号： </li>
            <li class="list-group-item">昵称：{{ nickname }} </li>
            <li class="list-group-item">文章数：</li>


    </ul>
</div>


{% endblock %}