我的中心標籤頁導航

時間 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 %}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。