个人中心标签页导航

Posted 2020-10-18 dream higher

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 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(‘usercenter1‘,user_id=user.id) }}">所有问答</a></li>
        <li role="presentation"><a href="{{ url_for(‘usercenter2‘,user_id=user.id) }}">所有评论</a></li>
        <li role="presentation"><a href="{{ url_for(‘usercenter3‘,user_id=user.id) }}">个人信息中心</a></li>
    </ul>
    {% block usercenter %}{% endblock %}

{% endblock %}

 

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

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

usercenter1.html

{% extends‘userbase.html‘ %}
{% block usercenter %}


<div class="all question">
     <h2><a href="{{ url_for(‘usercenter‘,user_id=user.id) }}"> {{ user.username }}</a>全部问答</h2>
      <ul class="wenda" style="width: auto">
          {% for foo in user.question %}
             <li class="wenti">
                 <a href="#">{{ foo.author.username }} </a>
                <span>{{ foo.creat_time }}</span><br>
                <a class="title" href="{{ url_for(‘detail‘,question_id=foo.id) }}">{{ foo.title }}</a><br>
                <p>{{ foo.detail }}</p>
             </li>
         </ul>
     </div>
           {% endfor %}
{% endblock %}

 usercenter2.html

{% extends‘userbase.html‘ %}
{% block usercenter %}
<div class="all detail" >
    <h2><a href="{{ url_for(‘usercenter‘,user_id=user.id) }}"> {{ user.username }}</a>全部评论</h2>
    <ul class="pinglun" style="width: auto">
        {% for foo in user.comments %}
        <li class="comment">
             <a href="#">{{ foo.author.username }} </a>
                <span>{{ foo.creat_time }}</span><br>
                <p>{{ foo.detail }}</p>
        </li>
        {% endfor %}
    </ul>
</div>
{% endblock %}

 usercenter3.html

{% extends ‘center1.html‘ %}

{% block usercenter %}
 <div class="usercenter">
     <h2><a href="{{ url_for(‘usercenter‘,user_id=user.id) }}"> {{ user.username }}</a>个人中心</h2>
     <ul class="yonghu" style="width: auto">
            <li><p>用户：{{ user.username }}</p></li>
            <li><p>编号：{{ user.id }}</p></li>
            <li><p>昵称：{{ user.nickname}}</p></li>
            <li><p>文章篇数：{{ user.question|length }}</p></li>
     </ul>
</div>
{% endblock %}

 

5.思考 如何实现点标签页导航到达不同的个人中心子页面。