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

xiaoxiao2021-02-28  177

首页需要用来显示文章 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)

转载请注明原文地址: https://www.6miu.com/read-22793.html

最新回复(0)