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)

总结

以上是生活随笔为你收集整理的Flask实战2问答平台-首页布局,功能完成的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。