个人中心标签页导航

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)

原文地址:https://www.cnblogs.com/zheng01/p/8037284.html