首页列表显示全部问答，完成问答详情页布局。

1.首页列表显示全部问答：

1. 将数据库查询结果传递到前端页面 Question.query.all()
2. 前端页面循环显示整个列表。
3. 问答排序

@app.route('/')
def home():
    context={
        'questions': Question.query.all()
    }
    return render_template('home.html',**context)

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block head %}
    <link href="{{ url_for('static',filename='CSS/home.css') }}" rel="stylesheet" type="text/css">
{% endblock %}

{% block main %}
<div class="img">
        <ul>
            <img class="view" src="{{ url_for('static',filename='image/view.png') }}">
            {% for foo in questions %}
                <li>
                    <div class="content">
                        <div class="author">
                            <img src="{{ url_for('static',filename='image/body.png') }}">
                            <a href="#">{{ foo.author.username }}</a>
                            <span>{{ foo.creat_time }}</span>
                        </div>
                        <br>
                        <a class="title" href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a><br>
                        <p>{{ foo.detail }}</p>
                    </div>
                </li>
            {% endfor %}
        </ul>

{#    <div>#}
{#        <a href="#"><img src="{{ url_for('static',filename='image/1.jpg') }}" width="230" height="230"></a>#}
{#    </div>#}
{#    <div>#}
{#        <a href="#"><img src="{{ url_for('static',filename='image/2.jpg') }}" width="230" height="230"></a>#}
{#    </div>#}
</div>
{% endblock %}

2.完成问答详情页布局：

1. 包含问答的全部信息
2. 评论区
3. 以往评论列表显示区。

{% extends 'base.html' %}

{% block title %}Detail{% endblock %}

{% block head %}
    <link href="{{ url_for('static',filename='CSS/detail.css') }}" rel="stylesheet" type="text/css">
{% endblock %}

{% block main %}
<div class="detail">
    <h2>title</h2>
    <a href="#">username</a>
    <span>creat_time</span>
    <div class="p">
        <p>detail</p>
    </div>
    <textarea rows="5"></textarea><br>
    <button >发送</button>
    <br>
    <ul>
        <p>Comment</p>
        <li>
            <img src="{{ url_for('static',filename='image/body.png') }}">
            <a href="#">username</a>
            <span>creat_time</span><br>
            <p>comment</p>
        </li>
        <li>
            <img src="{{ url_for('static',filename='image/body.png') }}">
            <a href="#">username</a>
            <span>creat_time</span><br>
            <p>comment</p>
        </li>
    </ul>
</div>
{% endblock %}

a{
    color: black;
}
.detail{
    border:1px solid black;
    width: 750px;
    height:auto;
    margin: 0 auto;
    margin-top: 40px;
}
.detail h2{
    font-size: 25px;
}
.detail span{
    font-size: 13px;
    background-color: sandybrown;
    border-radius: 20px;
    vertical-align: middle;
    height: 13px;
    line-height: 14px;
}
.detail textarea{
    width: 700px;
}
.detail button{
    float: left;
    margin: 2px;
    margin-left: 22px;
}
.p{
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
    margin-top: 8px;
    margin-bottom: 8px;
}
.p p{
    text-align: left;
    margin: 8px;
    margin-right: 25px;
    margin-left: 25px;
}
ul{
    padding:0;
    margin:0;
    margin-bottom: 10px;
    margin-top: 10px ;
}
ul li{
    list-style: none;
    margin: 5px;
    border: 1px dashed black;
    margin-left: 25px ;
    margin-right: 25px;
    height: auto;
}
ul li img{
    float: left;
    margin: 5px;
    width: 18px;
    height: auto;
}
ul li a{
    float:left;
    margin-top:2px;
}
ul li span{
    float: right;
    font-size: 13px;
    background-color: sandybrown;
    border-radius: 20px;
    vertical-align: middle;
    height: 14px;
    line-height: 13px;
    margin: 5px;
}
ul li p{
    margin-top: 2px;
    text-align: left;
    word-break: break-all;
    margin-bottom: 5px;
}

3.在首页点击问答标题，链接到相应详情页。

@app.route('/detail/')
def detail():
    return render_template('detail.html')