个人中心标签页导航
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 class="nav" role="presentation"><a href="#"><h3>全部问答</h3></a></li> <li class="nav" role="presentation"><a href="#"><h3>全部评论</h3></a></li> <li class="nav" role="presentation"><a href="#"><h3>个人中心</h3></a></li> </ul>
2.user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。
<!DOCTYPE html> <html lang="en"> <head> {% extends 'test1.html' %} <meta charset="UTF-8"> {% block title %} 个人中心 {% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}" charset="utf-8"/> {% endblock %} </head> <body> {% block body %} <ul class="zx"> <li role="presentation"><a href="#">question</a></li> <li role="presentation"><a href="#">comments</a></li> <li role="presentation"><a href="#">infomation</a></li> </ul> {% block user %} {% endblock %} {% endblock %} </body> </html>
3.个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
<!DOCTYPE html> <html lang="en"> <head> {% extends 'user.html' %} <meta charset="UTF-8"> <title> {% block title %} 用户中心 {% endblock %} </title> {% block head %} {% endblock %} </head> <body> {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h3>{{ username }}><br> <small>全部问答 <span class="badge"></span></small> </h3> <ul> {% for foo in question %} <li> <a href="#">{{ foo.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> </div> </div> <h3>{{ username }}><br> <small>全部评论 <span class="badge"></span></small> </h3> {% for foo in comments %} <ul style="padding-left: 0px;margin-bottom: 0px;"> <li style="width: 800px"> <a href="">{{ foo.author.username }}</a> <span class="badge">{{ foo.creat_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> <div> <h3>{{ user }}<br> <small>个人信息</small> </h3> <ul style="padding-left: 0px;margin-bottom: 0px;"> <li>用户：</li> <li>编号：</li> <li>昵称：</li> </ul> </div> {% endblock %} </body> </html>
4.制作个人中心的三个子页面，重写user.html中定义的user块
user 1
{% extends 'user.html' %} {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"> </div> <div class="col-md-6 column"> <h1><img src="{{ img }}" width="50px">{{usern }}</h1> <br>全部问答 <div class="basic_box" style="padding-bottom: 50px;"> <ul class="list-group"> {% for foo in ques %} <li class="list-group-item" style="width: 800px"> <a class="wrap-img" href="#" target="_blank"> <img src="{{ foo.author.image }}" width="50px"> </a> <span class="glyphicon glyphicon-left" aria-hidden="true"></span> <a href="{{ url_for('person',user_id=qu.author.id) }}" target="_blank">{{ foo.author.username }}</a> <br> <a href="{{ url_for('detail',question_id=qu.id) }}">{{foo.title }}</a> <br> <span class="badge">发布时间:{{ foo.creat_time }}</span> <p style="">{{ foo.detail }} </p> </li> {% endfor %} </ul> </div> <div class="col-md-4 column"> </div> </div> </div> </div> </div> {% endblock %}
user 2
{% extends 'user.html' %} {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"> </div> <div class="col-md-6 column"> <h1><img src="{{ img }}" width="50px">{{usern }}</h1> <br>全部评论 <div class="basic_box" style="padding-bottom: 50px;"> <ul class="list-group" style="margin-bottom: 10px"> {% for foo in users %} <li class="list-group-item" style="width: 800px"> <a class="wrap-img" href="#" target="_blank"> <img src="{{ foo.author.image }}" width="50px"> </a> <span class="glyphicon glyphicon-left" aria-hidden="true"></span> <br> <a href="#">{{ foo.author.username }}</a> <span class="badge">评论时间:{{ foo.creat_time }}</span> <p style="">{{ foo.detail }} </p> </li> {% endfor %} </ul> </div> <div class="col-md-4 column"> </div> </div> </div> </div> </div> {% endblock %}
user 3
{% extends 'user.html' %} {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"> </div> <div class="col-md-6 column"> <h1><img src="{{ img }}" width="50px">{{usern }}</h1> <br>个人信息 <div class="basic_box" style="padding-bottom: 50px;"> <ul class="list-group" style="margin-bottom: 10px"> <li class="list-group-item" style="width: 800px"> 用户：{{ usern }}</li> <li class="list-group-item" style="width: 800px"> 编号：{{ id }}</li> <li class="list-group-item" style="width: 800px"> 问答数：{{ ques|length }}</li> <li class="list-group-item" style="width: 800px"> 评论数：{{ comment|length }}</li> </ul> </div> <div class="col-md-4 column"> </div> </div> </div> </div> </div> {% endblock %}
