首頁需要用來顯示文章
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)

總結

以上是生活随笔為你收集整理的Flask实战2问答平台-首页布局,功能完成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。