1.新页面user.html,用<ul ><li role="presentation"> 实现标签页导航。
2.user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。
{% extends"lx3.html" %} {% block logintitle %}个人中心{% endblock %} {% block loginhead %} <style> .nav_ul li{ list-style: none; float: left; margin: 10px; } </style> {% endblock %} {% block body %} <ul class="nav_ul"> <li role="presentation"><a href="{{ url_for('all_question',user_id = username_id) }}">全部问答</a></li> <li role="presentation"> <a href="{{ url_for('all_comment',user_id = username_id) }}">全部评论</a></li> <li role="presentation"><a href="{{ url_for('usercenter',user_id = username_id) }}">个人信息</a></li> </ul> {% block user %}{% endblock %} {% endblock %}
3.让上次作业完成的个人中心页面,继承user.html,原个人中心就自动有了标签页导航。
4.制作个人中心的三个子页面,重写user.html中定义的user块。
{% extends 'user.html' %} {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"> </div> <div class="col-md-8 column" id="rgba1"> <p class="text-center"> <small>{{ username }}</small> </p> <hr> <h3 align="center"> <small>全部问答</small> </h3> <ul class="list-unstyled"> {% for foo in questions %} <li class="list-group-item"> <span class="glyphicon glyphicon-user"></span><a>{{ foo.author.username }}</a> <p>标题:{{ foo.title }}</p> <span class="badge pull-right">{{ foo.create_time }}</span> <p>问答内容:{{ foo.detail }}</p> <br> </li> {% endfor %} </ul> </div> <div class="col-md-2 column"> </div> </div> </div> {% endblock %}
{% extends 'user.html' %} {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"> </div> <div class="col-md-8 column" id="rgba1"> <p class="text-center"><small>{{ username }}</small></p> <hr> <h3 align="center"> <small>全部评论</small> </h3> <ul class="list-unstyled"> {% for foo in comments %} <li class="list-group-item"> <span class="badge pull-right">{{ foo.create_time }}</span> <p>文章标题:{{ foo.question.title }}</p> <p>评论内容:{{ foo.detail }}</p> <span class="glyphicon glyphicon-user"></span><small ><a>{{ foo.author.username }}</a></small> <br> </li> {% endfor %} </ul> </div> <div class="col-md-2 column"> </div> </div> </div> {% endblock %}
{% extends 'user.html' %} {% block user %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"> </div> <div class="col-md-8 column" id="rgba1"> <p class="text-center"> <small>{{ username }}</small> </p> <hr> <h3 align="center"> <small>全部问答</small> </h3> <ul class="list-unstyled"> {% for foo in questions %} <li class="list-group-item"> <span class="glyphicon glyphicon-user"></span><a>{{ foo.author.username }}</a> <p>标题:{{ foo.title }}</p> <span class="badge pull-right">{{ foo.create_time }}</span> <p>问答内容:{{ foo.detail }}</p> <br> </li> {% endfor %} </ul> </div> <div class="col-md-2 column"> </div> </div> </div> {% endblock %}
py文件:
@app.route('/all_comment/<user_id>') def all_comment(user_id): user = User.query.filter(User.id == user_id).first() context = { 'username_id': user.id, 'username': user.username, 'questions': user.question, # 用反向定义的question 'comments': user.comment } return render_template('all_comment.html',**context) @app.route('/all_question/<user_id>') def all_question(user_id): user = User.query.filter(User.id == user_id).first() context = { 'username_id': user.id, 'username': user.username, 'questions': user.question, # 用反向定义的question 'comments': user.comment } return render_template('all_question.html',**context)