我的中心標籤頁導航

 

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>
2. user.html繼承base.html。
   重寫title,head,main塊.
   將上述<ul>放在main塊中.
   定義新的塊user。
   

   {% extends 'ba.html' %}
   {% block title %}
       ha
   {% endblock %}
   {% block main %}
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   
   
   <ul class="nav nav-pills" style="margin-left: 30%">
       <li><a href="{{ url_for('center1') }}">question</a></li>
       <li><a href="#">comment</a></li>
       <li><a href="#">information</a></li>
   </ul>
   {% block ab %}{% endblock %}
   {% endblock %}

    

4.讓上次做業完成的我的中心頁面，繼承user.html，原我的中心就自動有了標籤頁導航。

{% extends 'userr.html' %}
{% block title %}
    我的中心
{% endblock %}

{% block ab %}

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-2 column">
            </div>
            <div class="col-md-8 column">

                <ul class="list-group">
                    <li class="list-group-item" >
                        <h3 align="center">我的信息</h3>
                        <img style="width: 30px" src="{{ url_for('static',filename='css/touxiang.jpg') }}" alt="64">
                        <a href="#">用戶名：{{ username }}</a><br>
                        <a>文章篇數:{{ questions|length }}</a>
                        <p style="margin-left: 25%"></p><br>
                    </li>
                </ul>
                <ul class="list-group">
                <h3 align="center">發佈篇數</h3>
                    {% for foo in questions %}

                        <li class="list-group-item" >
                            <img style="width: 30px" src="{{ url_for('static',filename='css/touxiang.jpg') }}"
                                 alt="64">
                            <a href="#">{{ username }}</a><br>
                            <a href="{{ url_for('detail',question_id=foo.id) }}">問題：{{ foo.title }}</a><br>
                            <p style="align-content: center">{{ foo.detail }}</p>
                            <span>評論數: ({{ foo.comments|length }})</span>
                            <span class="badge" style="margin-left: 60%">{{ foo.create_time }}</span>
                            <p style="margin-left: 25%"></p><br>
                        </li>
                    {% endfor %}
                </ul>

                <ul class="list-group">
                   <h3 align="center">所有評論</h3>
                    {% 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 %}

 

usercenter2

{% extends 'userr.html' %}
{% block title %}
    question
{% endblock %}

{% block ab %}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-8 column"><ul style="margin-left:-20%" class="list-group">
                        {% for foo in questions %}
                            <li class="list-group-item" style="width: 800px">
                                <img style="width: 30px" src="{{ url_for('static',filename='css/touxiang.jpg') }}"
                                     alt="64">
                                <a href="#">{{ username }}</a><br>
                                <a href="{{ url_for('detail',question_id=foo.id) }}">問題：{{ foo.title }}</a><br>
                                <p style="align-content: center">{{ foo.detail }}</p>
                                <span>評論數: ({{ foo.comments|length }})</span>
                                <span class="badge" style="margin-left: 60%">{{ foo.create_time }}</span>
                                <p style="margin-left: 25%"></p><br>
                            </li>
                        {% endfor %}
                    </ul>
        </div>
        <div class="col-md-2 column">
        </div>
    </div>
</div>{% endblock %}

usercenter3

{% extends 'userr.html' %}
{% block title %}
    question
{% endblock %}

{% block ab %}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-8 column"> <ul style="margin-left:-20%" class="list-group">
                        <li class="list-group-item" style="width: 800px">
                            <h3 align="center">我的信息</h3>
                            <img style="width: 30px" src="{{ url_for('static',filename='css/touxiang.jpg') }}" alt="64">
                            <a href="#">用戶名{{ username }}</a><br>
                            <a>文章篇數:{{ questions|length }}</a>
                            <p style="margin-left: 25%"></p><br>
                        </li>
                    </ul>
        </div>
        <div class="col-md-2 column">
        </div>
    </div>
</div>{% endblock %}

 

5.製做我的中心的三個子頁面，重寫user.html中定義的user塊。
usercenter1

{% extends 'userr.html' %}
{% block title %}
    question
{% endblock %}

{% block ab %}
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-2 column">
            </div>
            <div class="col-md-8 column">
                <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 %}

 

 

6.思考 如何實現點標籤頁導航到達不一樣的我的中心子頁面。