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