今天我们来完成更多
的模块,点击更多
后页面显示效果如上图。
我们先来分析上面这个页面,我们发现除了搜索栏下面的图片区域有些变化以外,其余都是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>
这样就会完成点击`更多`后的页面跳转和跳转后的页面布局啦~~