
今天我们来完成更多的模块,点击更多后页面显示效果如上图。
我们先来分析上面这个页面,我们发现除了搜索栏下面的图片区域有些变化以外,其余都是base.html的布局,所以我们首先想到可以继承base.html,而图片显示规则则和我们前面定义过的宏完全一致,我们就可以导入写好的宏。
所以我们先在templates文件夹下新建moreList.html文件:

我们已经在base.html中保留了block,所以页面新的布局只需要通过block进行插入即可:
moreList.html
{% extends 'base.html' %}
{% from 'macros/macros.html' import itemGroup %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/item.css') }}">
<style>
.content{
padding: 25px 10px;
}
</style>
{% endblock %}
{% block content %}
<div class="content">
{% for item in items %}
{{ itemGroup(item) }}
{% endfor %}
</div>
{% endblock %}当然,我们还要将更多加上链接,我们先定义函数:
@app.route('/list/<int:category>/')
def itemList(category):
# 如果category等于1:返回电影
# 如果category等于2:返回电视剧
# 否则返回空数组
items = []
if category == 1:
items = movies
elif category == 2:
items = tvs
else:
items = []
return flask.render_template('moreList.html', items=items)这里我们新加了一个整型的category参数,方便我们对进入的页面到底是电影还是电视剧进行分辨,在macros.html文件中需要加上更多的链接:
<a href="{{ url_for('itemList', category=category) }}" class="more-btn">更多</a>这样就会完成点击`更多`后的页面跳转和跳转后的页面布局啦~~


