我的中心标签页导航

时间 2019-11-29

标签我的中心标签导航繁體版

原文原文链接

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>css

<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。html

<!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，原我的中心就自动有了标签页导航。url

<!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块spa

user 1code

{% 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 htm

{% 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 3blog

{% 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 %}