个人中心标签页导航

Posted 2020-10-17 陌上寻

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)