Flask实战2问答平台-首页布局,功能完成

首页需要用来显示文章
index.html如下

{% extends 'base.html' %}

{% block title %} 首页 {% endblock %}

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

{% block main %} 

    <ul class="question-list-group">
    {% for question in questions %}
        <li>
            <div class="avatar-group">
                <img src="{{url_for('static',filename='Logo/猫.png')}}" class="user-logo">
            </div>
            <div class="question-group">
                <p class="question-title"><a href="{{url_for('detail',question_id = question.id)}}">{{question.title}}</a></p>
                <p class="question-content">{{question.content}}</p>
                <div class="question-info">
                    <span class="question-author">作者:{{question.author.username}}</span>
                    <span class="question-time">时间:{{question.create_time}}</span>
                </div>
            </div>
        </li>
        {% endfor %}
    </ul>   
{% endblock %}

index.css

.user-logo{
    width: 30px;
    height: 25px;
    margin: 10px;
}

ul.question-list-group{
    list-style: none;
    padding-left: 0;
}

.question-list-group li{
    border-bottom: 1px solid #c5afaf;
    overflow: hidden;
    padding: 10px 0;
}

/*头像,问题部分*/
.avatar-group{
    width:38px;
    height: 100%; 
    float: left;
}

/*答案,作者部分*/
.avatar-group .avatar{
    width: 38px;
    height: 38px;
}

.question-group{
    float: left;
    width: 660px;
    margin-left: 10px;
    padding-top: 10px;
}

/*改变问题链接的颜色*/
.question-title a{
    color: #259;
    font-weight: 900;

    /*margin-top: 20px;*/
}

.question-info{
    text-align: left;
}

.question-info .question-author{
    margin-right: 10px;
}

主py文件中

@app.route('/')
def index():
    context = {
        #将文章内容按时间倒序显示
        'questions' :Question.query.order_by('-create_time').all()
    }
    return render_template('index.html',**context)