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>
1 {% extends ‘base.html‘ %} 2 {% block title %} 3 个人中心 4 {% endblock %} 5 6 {% block link %} 7 8 {% endblock %} 9 10 {% block box %} 11 <div class="container"> 12 <div class="row clearfix"> 13 <div class="col-md-2 column"> 14 </div> 15 <div class="col-md-8 column"> 16 <ul class="nav nav-tabs"> 17 <li role="presentation"><a href="#">Home</a></li> 18 <li role="presentation"><a href="#">Profile</a></li> 19 <li role="presentation"><a href="#">Messages</a></li> 20 </ul> 21 {% subComment block %}{% endblock %} 22 </div> 23 <div class="col-md-2 column"> 24 </div> 25 </div> 26 </div> 27 {% endblock %} 28 29 {% block script %} 30 31 {% endblock %}
2.user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。
1 <div class="col-md-8 column"> 2 <ul class="nav nav-tabs"> 3 <li role="presentation"><a href="#">Home</a></li> 4 <li role="presentation"><a href="#">Profile</a></li> 5 <li role="presentation"><a href="#">Messages</a></li> 6 </ul> 7 {% subComment block %}{% endblock %} 8 </div>
3.让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
1 {% extends ‘comment.html‘ %} 2 {% subComment block %} 3 <ul class="list-group" style=""> 4 <h1>全部问题</h1> 5 {% for foo in questions %} 6 <li class="list-group-item" style="width: 800px"> 7 <a class="wrap-img" href="#" target="_blank"> 8 <img src="http://www.bookmarkye.com/3.jpg" width="50px"> 9 </a> 10 <span class="glyphicon glyphicon-left" aria-hidden="true"></span> 11 <a href="{{ url_for(‘comment‘,user_id=foo.author.id) }}" 12 target="_blank">{{ foo.author.username }}</a> 13 <br> 14 <a href="{{ url_for(‘detail‘,question_id=foo.id) }}">{{ foo.title }}</a> 15 <span class="badge">{{ foo.creat_time }}</span> 16 <p style="">{{ foo.detail }} 17 </p> 18 </li> 19 {% endfor %} 20 </ul> 21 {% endblock %}
4.制作个人中心的三个子页面，重写user.html中定义的user块。
1 {% extends ‘comment.html‘ %} 2 {% subComment block %} 3 <ul class="list-group" style=""> 4 <h1>全部问题</h1> 5 {% for foo in questions %} 6 <li class="list-group-item" style="width: 800px"> 7 <a class="wrap-img" href="#" target="_blank"> 8 <img src="http://www.bookmarkye.com/3.jpg" width="50px"> 9 </a> 10 <span class="glyphicon glyphicon-left" aria-hidden="true"></span> 11 <a href="{{ url_for(‘comment‘,user_id=foo.author.id) }}" 12 target="_blank">{{ foo.author.username }}</a> 13 <br> 14 <a href="{{ url_for(‘detail‘,question_id=foo.id) }}">{{ foo.title }}</a> 15 <span class="badge">{{ foo.creat_time }}</span> 16 <p style="">{{ foo.detail }} 17 </p> 18 </li> 19 {% endfor %} 20 </ul> 21 {% endblock %}
1 {% extends ‘comment.html‘ %} 2 {% subComment block %} 3 <ul class="list-group" style="margin-top: 30px;"> 4 <h1>全部评论</h1> 5 {% for com in comment %} 6 <li class="list-group-item" style="width: 800px"> 7 <a class="wrap-img" href="#" target="_blank"> 8 <img src="http://www.bookmarkye.com/3.jpg" width="50px"> 9 </a> 10 <span class="glyphicon glyphicon-left" aria-hidden="true"></span> 11 <a href="{{ url_for(‘comment‘,user_id=com.author.id) }}" 12 target="_blank">{{ com.author.username }}</a> 13 <br> 14 <span class="badge">{{ com.creat_time }}</span> 15 <p style="">{{ com.detail }}</p> 16 </li> 17 {% endfor %} 18 </ul> 19 {% endblock %}
1 {% extends ‘comment.html‘ %} 2 {% subComment block %} 3 <div class="list-group-item" style="margin-top: 30px;width: 800px;"> 4 <h1>名称： 5 <small>{{ user.username }}</small> 6 </h1> 7 <h1>问题数： 8 <small>{{ questions|length }}</small> 9 </h1> 10 <h1>评论数： 11 <small>{{ comment|length }}</small> 12 </h1> 13 </div> 14 {% endblock %}
5.思考 如何实现点标签页导航到达不同的个人中心子页面。
1 # 某用户发布过的所有评论 2 @app.route(‘/comment/<user_id>‘,methods=[‘GET‘,‘POST‘]) 3 def comment(user_id): 4 user = User.query.filter(User.id == user_id).first() 5 content = { 6 ‘comment‘:user.comment, 7 ‘questions‘:user.question, 8 ‘user2‘:user 9 } 10 return render_template(‘comment.html‘, **content)
