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.思考 如何实现点标签页导航到达不同的个人中心子页面。
