include和set语句
include.语句可以把一个模板引入到另外一个模板中,类似于把一个模板的代码copy到另外一个模板的指定位置
{% include 'xxx.html' %}
{% include 'header.html' %}
主体内容
{% include 'footer.html' %}
set赋值语句 -想在在模板中添加变量,赋值语句(set)
{% set name='xxx' %} 全局
{% with %}
{% set name='xxx' %} 局部
{% endwith %}
{% with xxx = '' %} 局部
{% endwith %}
模板继承
{% extends 'xxx.html' %}
{% block footer %}
{% endblock %}
加载静态资源文件
静态资源文件夹:
static/css/xxx.css
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css')
static/js/xxx.js
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
static/images/xxx.jpg
<img src="{{ url_for('static', filename='images/index.jpeg') }}" alt="">
模板案例
效果图
数据准备
1 # 电影
2 movies = [
3 {
4 'id': '11211',
5 'thumbnail':
'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499792043.webp',
6 'title': u'王牌特工2:黄金圈',
7 'rating': u'7.3',
8 'comment_count': 12000,
9 'authors': u'科林·费尔斯 / 塔伦·埃格顿 / 朱丽安·摩尔'
10 },
11 {
12 'id': '34532',
13 'title': u'羞羞的铁拳',
14 'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2499793218.webp',
15 'rating': u'7.6',
16 'comment_count': 39450,
17 'authors': u'艾伦/马丽/沈腾'
18 },
19 {
20 'id': '394558',
21 'title': u'情圣',
22 'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2409022364.jpg',
23 'rating': u'6.3',
24 'comment_count': 38409,
25 'authors': u'肖央 / 闫妮 / 小沈阳'
26 },
27 {
28 'id': '9384089',
29 'title': u'全球风暴',
30 'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2501863104.webp',
31 'rating': u'7.4',
32 'comment_count': 4555,
33 'authors': u'杰拉德·巴特勒/吉姆·斯特'
34 },
35 {
36 'id': '26921827',
37 'title': u'大卫贝肯之倒霉特工熊',
38 'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2408893200.jpg',
39 'rating': u'4.3',
40 'comment_count': 682,
41 'authors': u'汤水雨 / 徐佳琪 / 杨默'
42 },
43 {
44 'id': '26287884',
45 'title': u'追龙',
46 'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499052494.webp',
47 'rating': u'7.5',
48 'comment_count': 33060,
49 'authors': u'查理兹·塞隆 / 阿特·帕金森 / 拉尔夫·费因斯'
50 }
51 ]
52
53 # 电视剧
54 tvs = [
55 {
56 'id': '235434',
57 'title': u'鬼吹灯之精绝古城',
58 'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2404604903.jpg',
59 'rating': u'8.4',
60 'comment_count': 49328,
61 'authors': u'靳东 / 陈乔恩 / 赵达 / 付枚 / 金泽灏 /'
62 },
63 {
64 'id': '9498327',
65 'title': u'孤芳不自赏',
66 'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2407425119.jpg',
67 'rating': u'3.7',
68 'comment_count': 8493,
69 'authors': u'钟汉良 / 杨颖 / 甘婷婷 / 孙艺洲 / 亓航 /'
70 },
71 {
72 'id': '26685451',
73 'title': u'全球风暴',
74 'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2501769525.webp',
75 'rating': u'8.2',
76 'comment_count': 345,
77 'authors': u' 卢克·崔德威 / 琼安·弗洛加特 / 露塔·格德米纳斯 / 安东尼·海德 / 卡罗琳·古多尔 /'
78 },
79 {
80 'id': '235434',
81 'title': u'其他人',
82 'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2371503632.jpg',
83 'rating': u'7.6',
84 'comment_count': 25532,
85 'authors': u'杰西·普莱蒙 / 莫莉·香侬 / 布莱德利·惠特福德 / Maude Apatow / 麦迪逊·贝蒂 /'
86 },
87 {
88 'id': '48373095',
89 'title': u'全员单恋',
90 'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2367986708.jpg',
91 'rating': u'6.4',
92 'comment_count': 2483,
93 'authors': u'伊藤沙莉 / 中川大志 / 上原实矩 / 森绘梨佳 / 樱田通 /'
94 },
95 {
96 'id': '292843',
97 'title': u'废纸板拳击手',
98 'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2380194237.jpg',
99 'rating': u'8.2',
100 'comment_count': 23456,
101 'authors': u'托马斯·哈登·丘奇 / 泰伦斯·霍华德 / 波伊德·霍布鲁克 / 瑞斯·维克菲尔德 / 马尔洛·托马斯 /'
102 }
103 ]