个人中心标签页导航
新页面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>
user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。
<!DOCTYPE html>
<html lang="en">
<head>
{% extends 'index.html' %}
<meta charset="UTF-8">
<title>{% block title %}
个人
{% endblock %}</title>
{% block head %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}">
{% endblock %}
</head>
<body>
{% block body %}
<div class="all">
<ul class="nav_ul">
<li role="presentation"><a href="#">问答</a></li>
<li role="presentation"><a href="#">评论</a></li>
<li role="presentation"><a href="#">个人信息</a></li>
</ul>
</div>
{% block user %}{% endblock %}
{% endblock %}
</body>
</html>
> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> <hr> <div> <h4>{{ user }} <br> <small>用户资料</small> </h4> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px">用户：{{ username }}</li> <li class="list-group-item" style="width: 900px">编号：</li> <li class="list-group-item" style="width: 900px">昵称：</li> </ul> </div> </div>{% endblock %}</body></html
让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title> {% block title %} 个人中心 {% endblock %} </title> {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/geren.css') }}"> {% endblock %} {#<link rel="stylesheet" href="../static/css/geren.css">#} </head> <body> {% block user %} <div class="all have-img"> <div> <h4>用户名：{{ username }} <br> <small>全部问答</small> </h4> {% for foo in sent %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px"> <a href="">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> <hr> <div> {# <h4>用户名：{{ sent_username }}#} {# <br>#} <small>全部评论</small> {# </h4>#} {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px"> <a href="#">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> <hr> <div> <h4>{{ user }} <br> <small>用户资料</small> </h4> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px">用户：{{ username }}</li> <li class="list-group-item" style="width: 900px">编号：</li> <li class="list-group-item" style="width: 900px">昵称：</li> </ul> </div> </div> {% endblock %} </body> </html>
制作个人中心的三个子页面，重写user.html中定义的user块。
问答子页面
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title>{% block title %} 问答 {% endblock %}</title> </head> <body> {% block user %} <div> {# <h4>用户名：{{ username }}#} {# <br>#} <small>全部问答</small> {# </h4>#} {% for foo in sent %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px"> <a href="">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> {% endblock %} </body> </html>
评论子页面
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title>{% block title %} 评论 {% endblock %}</title> </head> <body> {% block user %} <div> {# <h4>用户名：{{ sent_username }}#} {# <br>#} <small>全部评论</small> {# </h4>#} {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px"> <a href="#">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> </ul> {% endfor %} </div> {% endblock %} </body> </html>
个人中心子页面
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title>{% block title %} 个人中心 {% endblock %}</title> </head> <body> {% block user %} <div> <h4>{{ user }} <br> <small>用户资料</small> </h4> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li class="list-group-item" style="width: 900px">用户：{{ username }}</li> <li class="list-group-item" style="width: 900px">编号：</li> <li class="list-group-item" style="width: 900px">昵称：</li> </ul> </div> {% endblock %} </body> </html>
