Today I bring you the actual template project. Let me first show you the rendering description: after clicking on the picture, you will jump to the corresponding details page data: movies = [ { 'id': '34532', 'title': u'Fatty Action Team', 'thumbnail': u'ht

2025/06/1416:19:41 hotcomm 1997

Today I bring you the actual template project. Let me first show you the renderings

Description:

Click on the picture and will jump to the corresponding details page
Data:

movies = [{'id': '34532','title': u'Fatty Action Team','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp','rating': u'7.6','comment_count': 39450,'authors': u'Baby / Li Chengmin Clara Lee / Article Zhang Wen'},{'id': '394558','title': u'Li Cha's aunt','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp','rating': u'6.3','comment_count': 38409,'authors': u'Qian Chenguang / Wu Jinrong / Huang Cailun'},{'id': '26921827','title': u'find you','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp','rating': u'4.3','comment_count': 682,'authors': u'Yao Chen / Ma Yili / Yuan Wenkang'},{'id': '26287884','title': u's sorrow is coming back into a river','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp','rating': u'7.5','comment_count': 33060,'authors': u'Zhao Yingbo / Ren Min / Xin Yunlai'},{'id': '26287884','title': u'Hiccup','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp','rating': u'7.5','comment_count': 33060,'authors': u'Rani Makheji / Neraji Kabi / Sachin'}]# TV series tvs = [{'id': '235434','title': u'Ruyi's Royal Love in the Palace,'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg','rating': u'7.4','comment_count': 49328,'authors': u'Rani Makheji / Neraji Kabi / Sachin'},{'id': '48373095','title': u'Doess Season 5','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg','rating': u'8.4','comment_count': 2483,'authors': u'Sali Ito / Nakagawa Daishi / Uehara Mitsuo / Morie Erika / Sakurada Tsuki /'},{'id': '27005982','title': u'Dearest You','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg','rating': u'7.6','comment_count': 25532,'authors': u'Jesse Plemon / Molly Shannon /  Bradley Whitford  / Maude Apatow / Madison Betty /'},{'id': '30290917','title': u'We can't be wild beasts','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg','rating': u'3.7','comment_count': 8493,'authors': u'Wall Wallace Chung / Angelababy / Gan Tingting / Sun Yizhou / Qi Hang /'},{'id': '292843','title': u'Adventure of Life','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg','rating': u'8.2','comment_count': 23456,'authors': u'Thomas Harden Church / Terrence Howard  / Boyd Holbrook / Ris Wakefield  / Marlo Thomas /'}]

Description

Page only shows three

under the light blue as the background color.

Today I bring you the actual template project. Let me first show you the renderings

Description:

Click on the picture and will jump to the corresponding details page
Data:

movies = [{'id': '34532','title': u'Fatty Action Team','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp','rating': u'7.6','comment_count': 39450,'authors': u'Baby / Li Chengmin Clara Lee / Article Zhang Wen'},{'id': '394558','title': u'Li Cha's aunt','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp','rating': u'6.3','comment_count': 38409,'authors': u'Qian Chenguang / Wu Jinrong / Huang Cailun'},{'id': '26921827','title': u'find you','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp','rating': u'4.3','comment_count': 682,'authors': u'Yao Chen / Ma Yili / Yuan Wenkang'},{'id': '26287884','title': u's sorrow is coming back into a river','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp','rating': u'7.5','comment_count': 33060,'authors': u'Zhao Yingbo / Ren Min / Xin Yunlai'},{'id': '26287884','title': u'Hiccup','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp','rating': u'7.5','comment_count': 33060,'authors': u'Rani Makheji / Neraji Kabi / Sachin'}]# TV series tvs = [{'id': '235434','title': u'Ruyi's Royal Love in the Palace,'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg','rating': u'7.4','comment_count': 49328,'authors': u'Rani Makheji / Neraji Kabi / Sachin'},{'id': '48373095','title': u'Doess Season 5','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg','rating': u'8.4','comment_count': 2483,'authors': u'Sali Ito / Nakagawa Daishi / Uehara Mitsuo / Morie Erika / Sakurada Tsuki /'},{'id': '27005982','title': u'Dearest You','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg','rating': u'7.6','comment_count': 25532,'authors': u'Jesse Plemon / Molly Shannon /  Bradley Whitford  / Maude Apatow / Madison Betty /'},{'id': '30290917','title': u'We can't be wild beasts','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg','rating': u'3.7','comment_count': 8493,'authors': u'Wall Wallace Chung / Angelababy / Gan Tingting / Sun Yizhou / Qi Hang /'},{'id': '292843','title': u'Adventure of Life','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg','rating': u'8.2','comment_count': 23456,'authors': u'Thomas Harden Church / Terrence Howard  / Boyd Holbrook / Ris Wakefield  / Marlo Thomas /'}]

Description

Page only shows three
under the light blue as the background color.

Let's complete the homepage function first

You can try it yourself first, and then look at the captain's code:

Create a new project microPro:

app.py

# coding: utf-8from flask import Flaskimport flaskapp = Flask(__name__)# type: Flaskapp.debug = True# Movies = [{'id': '34532','title': u'Fatty Action Team','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp','rating': u'7.6','comment_count': 39450,'authors': u'Baby / Li Chengmin Clara Lee / Article Zhang Wen'},{'id': '394558','title': u'Li Cha's aunt,'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp','rating': u'6.3','comment_count': 38409,'authors': u'Qian Chenguang / Wu Jinrong / Huang Cailun'},{'id': '26921827','title': u'find you','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp','rating': u'4.3','comment_count': 682,'authors': u'Yao Chen / Ma Yili / Yuan Wenkang'},{'id': '26287884','title': u'Sadness is coming back into a river,'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp','rating': u'7.5','comment_count': 33060,'authors': u'Zhao Yingbo / Ren Min / Xin Yunlai'},{'id': '26287884','title': u'Hiccup','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp','rating': u'7.5','comment_count': 33060,'authors': u'Rani Makheji / Neraji Kabi / Sachin'}]# TV series tvs = [{'id': '235434','title': u'Ruyi's Royal Love in the Palace,'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg','rating': u'7.4','comment_count': 49328,'authors': u'Rani Makheji / Neraji Kabi / Sachin'},{'id': '48373095','title': u'Doess Season 5','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg','rating': u'8.4','comment_count': 2483,'authors': u'Sali Ito / Nakagawa Daishi / Uehara Mitsuo / Morie Erika / Sakurada Tsuki /'},{'id': '27005982','title': u'Dearest You','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg','rating': u'7.6','comment_count': 25532,'authors': u'Jesse Premont / Molly Shannon / Bradley Whitford / Maude Apatow / Madison Betty /'},{'id': '30290917','title': u'We can't be beasts,'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg','rating': u'3.7','comment_count': 8493,'authors': u'Wall Wallace Chung / Angelababy / Gan Tingting / Sun Yizhou / Qi Hang /'},{'id': '292843','title': u'Adventure Life','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg','rating': u'8.2','comment_count': 23456,'authors': u'Thomas Harden Church / Terrence Howard / Boyd Holbrook / Reese Wakefield / Marlo Thomas /'}]@app.route('/')def hello_world():context = {"movies": movies,"tvs": tvs}return flask.render_template('index.html', **context)if __name__ == '__main__':app.run()

Here you only need to render data, and you will pass the ** context to the template.

index.html

!DOCTYPE html html lang="en" headmeta charset="UTF-8"titleHome/titlestyle *{ padding: 0;margin: 0; list-style: none; text-decoration: none; font-family: "Microsoft Ya Hei";} .page{ width: 375px; height: 667px;background: #d1fcff;} .page .searich-group{ padding: 14px 8px; background: #41b357;} .page .searich-group .search-input{ {# Block-level element #} display: block; height: 30px;width: 100%;background: #fff; {# Match the box as a whole #} box-sizing: border-box; {# Search box does not display #} border: none; {# Border does not display after clicking the search box #} outline: none; {# Border rounded corners #} border-radius: 5px;}.list-group{ background: #fff; padding: 17px 18px;}.list-group .group-top{ font-size: 18px; {# Get floating element #} overflow: hidden;}.group-top .group-title{ float: left; color: #000;}.group-top .more-btn{ float: right;}.any-group{ margin-top: 20px; overflow: hidden;}.any-group .item-group{ width: 100px; float: left; margin-right: 8px;}.item-group .thumbnail{ width: 100%; height: 140px;}.item-group .item-title{ text-align: center; margin-top: 12px;}.item-group .item-rating{ color: #acacac; text-align: center; font-size: 12px;}.item-rating img{ width: 10px; height: 10px;}/style /head bodydiv class="page"{# Search box #}div class="searich-group"input class="search-input" type="text" placeholder="Please enter query conditions"/div{# Movie #}div class="list-group"div class="group-top"span class="group-title"movie/spana href="#" class="more-btn"more/a/divdiv class="any-group"{% for movie in movies[0:3] %}div class="item-group"img src="{{ movie.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ movie.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((movie.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((movie.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half highlighted stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ movie.rating }}/p/div{% endfor %}/div/div{# TV series #} div class="list-group" div class="group-top" span class="group-title" TV series/span a href="#" class="more-btn"More/a /div div class="any-group"{% for tv in tvs[0:3] %}div class="item-group"img src="{{ tv.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ tv.title }}/p p class="item-rating"{# Determine the number of whole stars #}{% set lights = ((tv.rating|int)/2)|int %} {# Determine the number of half stars #}{% set halfs = ((tv.rating|int)%2) %}{# Determine the number of grays #}{% set grays = 5 - lights - halfs %}{# Render the highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half-high stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ tv.rating }}/p/div {% endfor %} /div /div/div/body /htmlhtml

The above code combines the knowledge learned before, including: flask for loop, set template assignment, the rest are front-end content, and I won't explain it too much here.

analysis optimization

Observe the number of stars displayed in index.html. We found that the code in the two parts of movie and TV series is generally consistent. When encountering duplicate code, you need to think of optimization. Here you can use the macros we have learned to simplify the above code:

div class="list-group"div class="group-top"span class="group-title"movie/spana href="#" class="more-btn"More/a/divdiv class="any-group"{% for movie in movies[0:3] %}div class="item-group"img src="{{ movie.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ movie.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((movie.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((movie.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render the highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half-high stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ movie.rating }}/p/div{% endfor %}/div

extracts the above code as a macro, we found that there are only two that have changed - movies/TV series, movies/tvs, and the rest are the same, so we can pass these two into it as variables:

first optimization - macro

!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleHomepage/titlestyle*{padding: 0;margin: 0;list-style: none;text-decoration: none;font-family: "Microsoft Ya Hei";}.page{width: 375px;height: 667px;background: #d1fcff;}.page .searich-group{padding: 14px 8px;background: #41b357;}.page .searich-group .search-input{{# Block-level element #}display: block;height: 30px;width: 100%;background: #fff;{# Match the box as a whole #}box-sizing: border-box;{# Search box does not display #}border: none;{# Border does not display after clicking the search box #}outline: none;{# Border rounded corners #}border-radius: 5px;}.list-group{background: #ffff;padding: 17px 18px;}.list-group .group-top{font-size: 18px;{# Get floating elements #}overflow: hidden;}.group-top .group-title{float: left;color: #000;}.group-top .more-btn{float: right;}.any-group{margin-top: 20px;overflow: hidden;}.any-group .item-group{width: 100px;float: left;margin-right: 8px;}.item-group .thumbnail{width: 100%;height: 140px;}.item-group .item-title{text-align: center;margin-top: 12px;}.item-group .item-rating{color: #acacac;text-align: center;font-size: 12px;}.item-rating img{width: 10px;height: 10px;}/style/headbody{% macro listGroup(category, items) %}div class="list-group"div class="group-top"span class="group-title"{{ category }}/spana href="#" class="more-btn"More/a/divdiv class="any-group"{% for item in items[0:3] %}div class="item-group"img src="{{ item.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ item.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((item.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((item.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render semi-high highlighted stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ item.rating }}/p/div{% endfor %}/div/div{% endmacro %}div class="page"{# Search box #}div class="searich-group"input class="search-input" type="text" placeholder="Please enter query criteria"/div{# Movie #}{{ listGroup('Movie', movies) }}{# TV series #}{{ listGroup('TV series', tvs) }}/div/body/html

We used macros to optimize the home page code for the first time.If we have other pages now, imagine whether the search box

and the page background

can be extracted as public? Will other pages be implemented through inheritance when applied? The answer is yes.

So we now create a new base.html file and put the page layout code, and think about it again. Since it is called public, it means that other codes can also inherit this base.html, then the page content:

can't be in base.html again [Answer: Yes], but we have to insert part of the code above into base.html again, so what should we use? Block is right. In addition, according to custom, we also extract the style style in the form of a file. At this time, the head search style and the content part style must not be extracted in a file, because all code will be loaded in a file every time, so there is no need to load the content style in the head. Therefore, we extract the styles into the css file, one is the search bar and the page background, named base.css:

*{padding: 0;margin: 0;list-style: none;text-decoration: none;font-family: "Microsoft Ya Hei";}.page{width: 375px;height: 667px;background: #d1fcff;}.page{width: 375px;height: 667px;background: #d1fcff;}.page .searich-group{padding: 14px 8px;background: #41b357;}.page .searich-group .search-input{/* {# Block-level element #} */display: block;height: 30px;width: 100%;background: #fff;/* {# Match the box as a whole #} */box-sizing: border-box;/* {# Search box does not display #} */border: none;/* {# Border does not display after clicking the search box #} */outline: none;/* {# Border rounded corners #} */border-radius: 5px;}

Another is the page style, named index_page.css:

.list-group{background: #fff;padding: 17px 18px;}.list-group .group-top{font-size: 18px;/* {# Get floating elements #} */overflow: hidden;}.group-top .group-title{float: left;color: #000;}.group-top .more-btn{float: right;}.any-group{margin-top: 20px;overflow: hidden;}.any-group .item-group{width: 100px;float: left;margin-right: 8px;}.item-group .thumbnail{width: 100%;height: 140px;}.item-group .item-title{text-align: center;margin-top: 12px;}.item-group .item-rating{color: #acacac;text-align: center;font-size: 12px;}.item-rating img{width: 10px;height: 10px;}

Create a new css folder under the static folder, and then create the above two files respectively:

Total, our last base.html file code should be as follows:

base.html

!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleHome/titlelink rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"{% block head %}{% endblock %}/headbodydiv class="page"{# Search box #}div class="searich-group"input class="search-input" type="text" placeholder="Please enter query conditions"/div{% block content %}{% endblock %}/div/body/htmlhtml

where block head is filled with the style code of the content part. Now that the public part has been extracted, back to index.html, we found that the only thing we want to do is

1. Inherit `base.html`2\. Fill in `block`

index.html

{% extends 'base.html' %}{% block head %}link rel="stylesheet" href="{{ url_for('static', filename='css/index_page.css') }}"{% endblock %}{% block content %}{% macro listGroup(category, items) %}div class="list-group"div class="group-top"span class="group-title"{{ category }}/spana href="#" class="more-btn"More/a/divdiv class="any-group"{% for item in items[0:3] %}div class="item-group"img src="{{ item.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ item.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((item.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((item.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half highlighted stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ item.rating }}/p/div{% endfor %}/div/div{% endmacro %}{# Movie #}{{ listGroup('Movies', movies) }}{# TV series #}{{ listGroup('TV series', tvs) }}{% endblock %}

executes the file, the page display remains unchanged.

Next we will complete more modules. After clicking more, the page will display the effect as shown in the picture above.

Let’s analyze the above page first. We found that except for the some changes in the image area below the search bar, the rest are the layout of base.html. So we first think that we can inherit base.html, and the image display rules are exactly the same as the macros we defined earlier, so we can import the written macros. So we first create a new moreList.html file in the templates folder:

We have retained the block in base.html, so the new layout of the page only needs to be inserted through the 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 %}

Of course, we need to add more links, we first define the function:

@app.route('/list/int:category/')def itemList(category):# If category is equal to 1: Return to movie# If category is equal to 2: Return to TV series# Otherwise, return empty array items = []if category == 1:items = movieselif category == 2:items = tvselse:items = []return flask.render_template('moreList.html', items=items)

Here we have added an integer category parameter to facilitate our decision whether the page we entered is a movie or a TV series. More links need to be added to the macros.html file:

a href="{{ url_for('itemList', category=category) }}" class="more-btn"More/a

This will complete the page redirection after clicking more and the page layout after the jump is completed. The above is a complete project practical operation.

If you are interested in interfaces, performance, automation testing, interview experience exchange, etc., you can follow my headline account. I will issue free information from time to time. These information are collected and sorted out from various technical websites. If you have good learning materials, you can send them privately. I will indicate the source and share it with you. Welcome to share, comments, and forward. Students who need information can follow the editor + forward the article + private message [Test information]

index.html

!DOCTYPE html html lang="en" headmeta charset="UTF-8"titleHome/titlestyle *{ padding: 0;margin: 0; list-style: none; text-decoration: none; font-family: "Microsoft Ya Hei";} .page{ width: 375px; height: 667px;background: #d1fcff;} .page .searich-group{ padding: 14px 8px; background: #41b357;} .page .searich-group .search-input{ {# Block-level element #} display: block; height: 30px;width: 100%;background: #fff; {# Match the box as a whole #} box-sizing: border-box; {# Search box does not display #} border: none; {# Border does not display after clicking the search box #} outline: none; {# Border rounded corners #} border-radius: 5px;}.list-group{ background: #fff; padding: 17px 18px;}.list-group .group-top{ font-size: 18px; {# Get floating element #} overflow: hidden;}.group-top .group-title{ float: left; color: #000;}.group-top .more-btn{ float: right;}.any-group{ margin-top: 20px; overflow: hidden;}.any-group .item-group{ width: 100px; float: left; margin-right: 8px;}.item-group .thumbnail{ width: 100%; height: 140px;}.item-group .item-title{ text-align: center; margin-top: 12px;}.item-group .item-rating{ color: #acacac; text-align: center; font-size: 12px;}.item-rating img{ width: 10px; height: 10px;}/style /head bodydiv class="page"{# Search box #}div class="searich-group"input class="search-input" type="text" placeholder="Please enter query conditions"/div{# Movie #}div class="list-group"div class="group-top"span class="group-title"movie/spana href="#" class="more-btn"more/a/divdiv class="any-group"{% for movie in movies[0:3] %}div class="item-group"img src="{{ movie.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ movie.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((movie.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((movie.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half highlighted stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ movie.rating }}/p/div{% endfor %}/div/div{# TV series #} div class="list-group" div class="group-top" span class="group-title" TV series/span a href="#" class="more-btn"More/a /div div class="any-group"{% for tv in tvs[0:3] %}div class="item-group"img src="{{ tv.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ tv.title }}/p p class="item-rating"{# Determine the number of whole stars #}{% set lights = ((tv.rating|int)/2)|int %} {# Determine the number of half stars #}{% set halfs = ((tv.rating|int)%2) %}{# Determine the number of grays #}{% set grays = 5 - lights - halfs %}{# Render the highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half-high stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ tv.rating }}/p/div {% endfor %} /div /div/div/body /htmlhtml

The above code combines the knowledge learned before, including: flask for loop, set template assignment, the rest are front-end content, and I won't explain it too much here.

Today I bring you the actual template project. Let me first show you the renderings

Description:

Click on the picture and will jump to the corresponding details page
Data:

movies = [{'id': '34532','title': u'Fatty Action Team','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp','rating': u'7.6','comment_count': 39450,'authors': u'Baby / Li Chengmin Clara Lee / Article Zhang Wen'},{'id': '394558','title': u'Li Cha's aunt','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp','rating': u'6.3','comment_count': 38409,'authors': u'Qian Chenguang / Wu Jinrong / Huang Cailun'},{'id': '26921827','title': u'find you','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp','rating': u'4.3','comment_count': 682,'authors': u'Yao Chen / Ma Yili / Yuan Wenkang'},{'id': '26287884','title': u's sorrow is coming back into a river','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp','rating': u'7.5','comment_count': 33060,'authors': u'Zhao Yingbo / Ren Min / Xin Yunlai'},{'id': '26287884','title': u'Hiccup','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp','rating': u'7.5','comment_count': 33060,'authors': u'Rani Makheji / Neraji Kabi / Sachin'}]# TV series tvs = [{'id': '235434','title': u'Ruyi's Royal Love in the Palace,'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg','rating': u'7.4','comment_count': 49328,'authors': u'Rani Makheji / Neraji Kabi / Sachin'},{'id': '48373095','title': u'Doess Season 5','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg','rating': u'8.4','comment_count': 2483,'authors': u'Sali Ito / Nakagawa Daishi / Uehara Mitsuo / Morie Erika / Sakurada Tsuki /'},{'id': '27005982','title': u'Dearest You','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg','rating': u'7.6','comment_count': 25532,'authors': u'Jesse Plemon / Molly Shannon /  Bradley Whitford  / Maude Apatow / Madison Betty /'},{'id': '30290917','title': u'We can't be wild beasts','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg','rating': u'3.7','comment_count': 8493,'authors': u'Wall Wallace Chung / Angelababy / Gan Tingting / Sun Yizhou / Qi Hang /'},{'id': '292843','title': u'Adventure of Life','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg','rating': u'8.2','comment_count': 23456,'authors': u'Thomas Harden Church / Terrence Howard  / Boyd Holbrook / Ris Wakefield  / Marlo Thomas /'}]

Description

Page only shows three
under the light blue as the background color.

Let's complete the homepage function first

You can try it yourself first, and then look at the captain's code:

Create a new project microPro:

app.py

# coding: utf-8from flask import Flaskimport flaskapp = Flask(__name__)# type: Flaskapp.debug = True# Movies = [{'id': '34532','title': u'Fatty Action Team','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp','rating': u'7.6','comment_count': 39450,'authors': u'Baby / Li Chengmin Clara Lee / Article Zhang Wen'},{'id': '394558','title': u'Li Cha's aunt,'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp','rating': u'6.3','comment_count': 38409,'authors': u'Qian Chenguang / Wu Jinrong / Huang Cailun'},{'id': '26921827','title': u'find you','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp','rating': u'4.3','comment_count': 682,'authors': u'Yao Chen / Ma Yili / Yuan Wenkang'},{'id': '26287884','title': u'Sadness is coming back into a river,'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp','rating': u'7.5','comment_count': 33060,'authors': u'Zhao Yingbo / Ren Min / Xin Yunlai'},{'id': '26287884','title': u'Hiccup','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp','rating': u'7.5','comment_count': 33060,'authors': u'Rani Makheji / Neraji Kabi / Sachin'}]# TV series tvs = [{'id': '235434','title': u'Ruyi's Royal Love in the Palace,'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg','rating': u'7.4','comment_count': 49328,'authors': u'Rani Makheji / Neraji Kabi / Sachin'},{'id': '48373095','title': u'Doess Season 5','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg','rating': u'8.4','comment_count': 2483,'authors': u'Sali Ito / Nakagawa Daishi / Uehara Mitsuo / Morie Erika / Sakurada Tsuki /'},{'id': '27005982','title': u'Dearest You','thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg','rating': u'7.6','comment_count': 25532,'authors': u'Jesse Premont / Molly Shannon / Bradley Whitford / Maude Apatow / Madison Betty /'},{'id': '30290917','title': u'We can't be beasts,'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg','rating': u'3.7','comment_count': 8493,'authors': u'Wall Wallace Chung / Angelababy / Gan Tingting / Sun Yizhou / Qi Hang /'},{'id': '292843','title': u'Adventure Life','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg','rating': u'8.2','comment_count': 23456,'authors': u'Thomas Harden Church / Terrence Howard / Boyd Holbrook / Reese Wakefield / Marlo Thomas /'}]@app.route('/')def hello_world():context = {"movies": movies,"tvs": tvs}return flask.render_template('index.html', **context)if __name__ == '__main__':app.run()

Here you only need to render data, and you will pass the ** context to the template.

index.html

!DOCTYPE html html lang="en" headmeta charset="UTF-8"titleHome/titlestyle *{ padding: 0;margin: 0; list-style: none; text-decoration: none; font-family: "Microsoft Ya Hei";} .page{ width: 375px; height: 667px;background: #d1fcff;} .page .searich-group{ padding: 14px 8px; background: #41b357;} .page .searich-group .search-input{ {# Block-level element #} display: block; height: 30px;width: 100%;background: #fff; {# Match the box as a whole #} box-sizing: border-box; {# Search box does not display #} border: none; {# Border does not display after clicking the search box #} outline: none; {# Border rounded corners #} border-radius: 5px;}.list-group{ background: #fff; padding: 17px 18px;}.list-group .group-top{ font-size: 18px; {# Get floating element #} overflow: hidden;}.group-top .group-title{ float: left; color: #000;}.group-top .more-btn{ float: right;}.any-group{ margin-top: 20px; overflow: hidden;}.any-group .item-group{ width: 100px; float: left; margin-right: 8px;}.item-group .thumbnail{ width: 100%; height: 140px;}.item-group .item-title{ text-align: center; margin-top: 12px;}.item-group .item-rating{ color: #acacac; text-align: center; font-size: 12px;}.item-rating img{ width: 10px; height: 10px;}/style /head bodydiv class="page"{# Search box #}div class="searich-group"input class="search-input" type="text" placeholder="Please enter query conditions"/div{# Movie #}div class="list-group"div class="group-top"span class="group-title"movie/spana href="#" class="more-btn"more/a/divdiv class="any-group"{% for movie in movies[0:3] %}div class="item-group"img src="{{ movie.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ movie.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((movie.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((movie.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half highlighted stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ movie.rating }}/p/div{% endfor %}/div/div{# TV series #} div class="list-group" div class="group-top" span class="group-title" TV series/span a href="#" class="more-btn"More/a /div div class="any-group"{% for tv in tvs[0:3] %}div class="item-group"img src="{{ tv.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ tv.title }}/p p class="item-rating"{# Determine the number of whole stars #}{% set lights = ((tv.rating|int)/2)|int %} {# Determine the number of half stars #}{% set halfs = ((tv.rating|int)%2) %}{# Determine the number of grays #}{% set grays = 5 - lights - halfs %}{# Render the highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half-high stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ tv.rating }}/p/div {% endfor %} /div /div/div/body /htmlhtml

The above code combines the knowledge learned before, including: flask for loop, set template assignment, the rest are front-end content, and I won't explain it too much here.

analysis optimization

div class="list-group"div class="group-top"span class="group-title"movie/spana href="#" class="more-btn"More/a/divdiv class="any-group"{% for movie in movies[0:3] %}div class="item-group"img src="{{ movie.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ movie.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((movie.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((movie.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render the highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half-high stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ movie.rating }}/p/div{% endfor %}/div

extracts the above code as a macro, we found that there are only two that have changed - movies/TV series, movies/tvs, and the rest are the same, so we can pass these two into it as variables:

first optimization - macro

!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleHomepage/titlestyle*{padding: 0;margin: 0;list-style: none;text-decoration: none;font-family: "Microsoft Ya Hei";}.page{width: 375px;height: 667px;background: #d1fcff;}.page .searich-group{padding: 14px 8px;background: #41b357;}.page .searich-group .search-input{{# Block-level element #}display: block;height: 30px;width: 100%;background: #fff;{# Match the box as a whole #}box-sizing: border-box;{# Search box does not display #}border: none;{# Border does not display after clicking the search box #}outline: none;{# Border rounded corners #}border-radius: 5px;}.list-group{background: #ffff;padding: 17px 18px;}.list-group .group-top{font-size: 18px;{# Get floating elements #}overflow: hidden;}.group-top .group-title{float: left;color: #000;}.group-top .more-btn{float: right;}.any-group{margin-top: 20px;overflow: hidden;}.any-group .item-group{width: 100px;float: left;margin-right: 8px;}.item-group .thumbnail{width: 100%;height: 140px;}.item-group .item-title{text-align: center;margin-top: 12px;}.item-group .item-rating{color: #acacac;text-align: center;font-size: 12px;}.item-rating img{width: 10px;height: 10px;}/style/headbody{% macro listGroup(category, items) %}div class="list-group"div class="group-top"span class="group-title"{{ category }}/spana href="#" class="more-btn"More/a/divdiv class="any-group"{% for item in items[0:3] %}div class="item-group"img src="{{ item.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ item.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((item.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((item.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render semi-high highlighted stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ item.rating }}/p/div{% endfor %}/div/div{% endmacro %}div class="page"{# Search box #}div class="searich-group"input class="search-input" type="text" placeholder="Please enter query criteria"/div{# Movie #}{{ listGroup('Movie', movies) }}{# TV series #}{{ listGroup('TV series', tvs) }}/div/body/html

We used macros to optimize the home page code for the first time.If we have other pages now, imagine whether the search box

and the page background

can be extracted as public? Will other pages be implemented through inheritance when applied? The answer is yes.

*{padding: 0;margin: 0;list-style: none;text-decoration: none;font-family: "Microsoft Ya Hei";}.page{width: 375px;height: 667px;background: #d1fcff;}.page{width: 375px;height: 667px;background: #d1fcff;}.page .searich-group{padding: 14px 8px;background: #41b357;}.page .searich-group .search-input{/* {# Block-level element #} */display: block;height: 30px;width: 100%;background: #fff;/* {# Match the box as a whole #} */box-sizing: border-box;/* {# Search box does not display #} */border: none;/* {# Border does not display after clicking the search box #} */outline: none;/* {# Border rounded corners #} */border-radius: 5px;}

Another is the page style, named index_page.css:

.list-group{background: #fff;padding: 17px 18px;}.list-group .group-top{font-size: 18px;/* {# Get floating elements #} */overflow: hidden;}.group-top .group-title{float: left;color: #000;}.group-top .more-btn{float: right;}.any-group{margin-top: 20px;overflow: hidden;}.any-group .item-group{width: 100px;float: left;margin-right: 8px;}.item-group .thumbnail{width: 100%;height: 140px;}.item-group .item-title{text-align: center;margin-top: 12px;}.item-group .item-rating{color: #acacac;text-align: center;font-size: 12px;}.item-rating img{width: 10px;height: 10px;}

Create a new css folder under the static folder, and then create the above two files respectively:

Total, our last base.html file code should be as follows:

base.html

!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleHome/titlelink rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"{% block head %}{% endblock %}/headbodydiv class="page"{# Search box #}div class="searich-group"input class="search-input" type="text" placeholder="Please enter query conditions"/div{% block content %}{% endblock %}/div/body/htmlhtml

where block head is filled with the style code of the content part. Now that the public part has been extracted, back to index.html, we found that the only thing we want to do is

1. Inherit `base.html`2\. Fill in `block`

index.html

{% extends 'base.html' %}{% block head %}link rel="stylesheet" href="{{ url_for('static', filename='css/index_page.css') }}"{% endblock %}{% block content %}{% macro listGroup(category, items) %}div class="list-group"div class="group-top"span class="group-title"{{ category }}/spana href="#" class="more-btn"More/a/divdiv class="any-group"{% for item in items[0:3] %}div class="item-group"img src="{{ item.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ item.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((item.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((item.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half highlighted stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ item.rating }}/p/div{% endfor %}/div/div{% endmacro %}{# Movie #}{{ listGroup('Movies', movies) }}{# TV series #}{{ listGroup('TV series', tvs) }}{% endblock %}

executes the file, the page display remains unchanged.

Next we will complete more modules. After clicking more, the page will display the effect as shown in the picture above.

We have retained the block in base.html, so the new layout of the page only needs to be inserted through the 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 %}

Of course, we need to add more links, we first define the function:

@app.route('/list/int:category/')def itemList(category):# If category is equal to 1: Return to movie# If category is equal to 2: Return to TV series# Otherwise, return empty array items = []if category == 1:items = movieselif category == 2:items = tvselse:items = []return flask.render_template('moreList.html', items=items)

Here we have added an integer category parameter to facilitate our decision whether the page we entered is a movie or a TV series. More links need to be added to the macros.html file:

a href="{{ url_for('itemList', category=category) }}" class="more-btn"More/a

This will complete the page redirection after clicking more and the page layout after the jump is completed. The above is a complete project practical operation.

If we have other pages now, imagine whether the search box

and the page background

can be extracted as public? Will other pages be implemented through inheritance when applied? The answer is yes.

*{padding: 0;margin: 0;list-style: none;text-decoration: none;font-family: "Microsoft Ya Hei";}.page{width: 375px;height: 667px;background: #d1fcff;}.page{width: 375px;height: 667px;background: #d1fcff;}.page .searich-group{padding: 14px 8px;background: #41b357;}.page .searich-group .search-input{/* {# Block-level element #} */display: block;height: 30px;width: 100%;background: #fff;/* {# Match the box as a whole #} */box-sizing: border-box;/* {# Search box does not display #} */border: none;/* {# Border does not display after clicking the search box #} */outline: none;/* {# Border rounded corners #} */border-radius: 5px;}

Another is the page style, named index_page.css:

.list-group{background: #fff;padding: 17px 18px;}.list-group .group-top{font-size: 18px;/* {# Get floating elements #} */overflow: hidden;}.group-top .group-title{float: left;color: #000;}.group-top .more-btn{float: right;}.any-group{margin-top: 20px;overflow: hidden;}.any-group .item-group{width: 100px;float: left;margin-right: 8px;}.item-group .thumbnail{width: 100%;height: 140px;}.item-group .item-title{text-align: center;margin-top: 12px;}.item-group .item-rating{color: #acacac;text-align: center;font-size: 12px;}.item-rating img{width: 10px;height: 10px;}

Create a new css folder under the static folder, and then create the above two files respectively:

Total, our last base.html file code should be as follows:

base.html

!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleHome/titlelink rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"{% block head %}{% endblock %}/headbodydiv class="page"{# Search box #}div class="searich-group"input class="search-input" type="text" placeholder="Please enter query conditions"/div{% block content %}{% endblock %}/div/body/htmlhtml

where block head is filled with the style code of the content part. Now that the public part has been extracted, back to index.html, we found that the only thing we want to do is

1. Inherit `base.html`2\. Fill in `block`

index.html

{% extends 'base.html' %}{% block head %}link rel="stylesheet" href="{{ url_for('static', filename='css/index_page.css') }}"{% endblock %}{% block content %}{% macro listGroup(category, items) %}div class="list-group"div class="group-top"span class="group-title"{{ category }}/spana href="#" class="more-btn"More/a/divdiv class="any-group"{% for item in items[0:3] %}div class="item-group"img src="{{ item.thumbnail }}" class="thumbnail" alt=""p class="item-title"{{ item.title }}/pp class="item-rating"{# Determine the number of whole stars #}{% set lights = ((item.rating|int)/2)|int %}{# Determine the number of half stars #}{% set halfs = ((item.rating|int)%2) %}{# Number of gray stars #}{% set grays = 5 - lights - halfs %}{# Render highlighted stars #}{% for light in range(0, lights) %}img src="{{ url_for('static', filename='img/rate_light.png') }}"{% endfor %}{# Render half highlighted stars #}{% for light in range(0, halfs) %}img src="{{ url_for('static', filename='img/rate_half.jpg') }}"{% endfor %}{# Render gray stars #}{% for light in range(0, grays) %}img src="{{ url_for('static', filename='img/rate_gray.png') }}"{% endfor %}{{ item.rating }}/p/div{% endfor %}/div/div{% endmacro %}{# Movie #}{{ listGroup('Movies', movies) }}{# TV series #}{{ listGroup('TV series', tvs) }}{% endblock %}

executes the file, the page display remains unchanged.

Next we will complete more modules. After clicking more, the page will display the effect as shown in the picture above.

We have retained the block in base.html, so the new layout of the page only needs to be inserted through the 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 %}

Of course, we need to add more links, we first define the function:

@app.route('/list/int:category/')def itemList(category):# If category is equal to 1: Return to movie# If category is equal to 2: Return to TV series# Otherwise, return empty array items = []if category == 1:items = movieselif category == 2:items = tvselse:items = []return flask.render_template('moreList.html', items=items)

Here we have added an integer category parameter to facilitate our decision whether the page we entered is a movie or a TV series. More links need to be added to the macros.html file:

a href="{{ url_for('itemList', category=category) }}" class="more-btn"More/a

This will complete the page redirection after clicking more and the page layout after the jump is completed. The above is a complete project practical operation.