Flask第36篇——模板项目实战（二）
前面我们利用宏将首页代码进行了第一次优化。如果我们现在还有其他页面，试想一下，首页上面的搜索框
以及页面背景
是否可以提取为公用的，其他页面在应用到的时候通过继承来实现呢？答案是肯定的。
所以我们现在新建base.html文件，并且将页面布局代码，提出，再想一下，既然名为公用也就意味着其他代码也可以继承这个base.html，那么页面内容：
这部分代码是不是就不可以再在base.html里了【答：是】，但是我们又要往base.html这里面插入上图部分代码，那要用什么呀？block对吧。此外，按照习惯，我们同样将样式style以文件的形式提取出来，此时头部搜索样式与内容部分样式肯定是不能提取在一个文件里的，因为在一个文件里每次都会加载所有的代码，这样在head中就没必要加载内容的样式，所以我们把样式分别提取成css文件，一个是搜索栏和页面背景，命名为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 .searich-group{
padding: 14px 8px;
background: #41b357;
}
.page .searich-group .search-input{
/* {# 块级元素 #} */
display: block;
height: 30px;
width: 100%;
background: #fff;
/* {# 与盒子整体匹配 #} */
box-sizing: border-box;
/* {# 搜索框不显示 #} */
border: none;
/* {# 鼠标点击搜索框后不显示边框 #} */
outline: none;
/* {# 边框圆角 #} */
border-radius: 5px;
}另一个是页面样式，命名为index_page.css：
.list-group{
background: #fff;
padding: 17px 18px;
}
.list-group .group-top{
font-size: 18px;
/* {# 获取浮动元素 #} */
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;
}在static文件夹下新建css文件夹，然后分别新建以上两个文件：
综上，我们最后base.html文件代码应该如下：
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
{% block head %}{% endblock %}
</head>
<body>
<div class="page">
{# 搜索框 #}
<div class="searich-group">
<input class="search-input" type="text" placeholder="请输入查询条件">
</div>
{% block content %}{% endblock %}
</div>
</body>
</html>其中block head填充的是内容部分的样式代码。
现在公用部分已经提取好，回到index.html，我们发现要做的工作只需要
1.继承base.html
2. 填充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 }}</span>
<a href="#" class="more-btn">更多</a>
</div>
<div 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 }}</p>
<p class="item-rating">
{# 确定整星个数 #}
{% set lights = ((item.rating|int)/2)|int %}
{# 确定半个星个数 #}
{% set halfs = ((item.rating|int)%2) %}
{# 灰色星星个数 #}
{% set grays = 5 - lights - halfs %}
{# 渲染高亮星星 #}
{% for light in range(0, lights) %}
<img src="{{ url_for('static', filename='img/rate_light.png') }}">
{% endfor %}
{# 渲染半高亮星星 #}
{% for light in range(0, halfs) %}
<img src="{{ url_for('static', filename='img/rate_half.jpg') }}">
{% endfor %}
{# 渲染灰色星星 #}
{% 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 %}
{# 电影 #}
{{ listGroup('电影', movies) }}
{# 电视剧 #}
{{ listGroup('电视剧', tvs) }}
{% endblock %}执行文件，页面显示不变。
为方便大家，代码已经上传到github上，有兴趣的可以到下面地址下载代码：
https://github.com/warrior0823/microPro
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-10-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读