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

原文发布于微信公众号 - 自动化测试实战(gh_839e78b6ba28)

原文发表时间:2018-10-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第十六天 EasyUI【悟空教程】

使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

27820
来自专栏北京马哥教育

最全整理 | 121个Ubuntu终端常用快捷键

Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手。在Ubuntu中打开终端的快捷键是Ctrl+Alt+T。其他的一...

356120
来自专栏前端小叙

如何把大段文字转为带html标签的文字

开发网页的时候,有时候会遇到大段的隐私声明,用户协议等等,我们呀要复制粘贴展示出来,必须加大量的p标签,h1,h2,空格符,br标签,这对我们来说无疑是泪崩的,...

70610
来自专栏Hongten

一个小巧的HTML编辑器_CLEditor_源码下载

CLEditor是一个开源的jQuery插件提供了一个轻量级的、全功能、跨浏览器、可扩展、

38210
来自专栏前端下午茶

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着...

74420
来自专栏程序员的知识天地

python爬虫爬取海量高清图片!这绝对是动漫迷们的福音

这链接还是比较好获取的,直接 F12 审核元素,或者右键查看代码,手机上chrome和firefox在url前面加上 "view-source"

39110
来自专栏鹅厂优文

小程序入坑指南 | 鹅厂优文

前段时间,手上刚好接手一个小程序的项目,心想之前自学过一段时间的小程序,终于有项目可以练练手了,可惜,万万没想到,加了两个周末的班结果却成了飞机稿...

1.6K110
来自专栏美丽应用

PPIICC:简洁易用的长截图工具

14220
来自专栏张戈的专栏

一行代码彻底禁用WordPress缩略图自动裁剪功能

记得在博客分享七牛缩略图教程的时候,提到过 WordPress 默认会将上传的图片裁剪成多个,不但占用磁盘空间,也会拖慢网站性能,相当闹心! 当时也提到了解决办...

40760
来自专栏Bug生活2048

微信小程序版博客——列表页相关问题汇总

首先是分页加载列表,从网上例子和文档来看有两种实现方式,一种是根据Page()上的 onReachBottom属性:页面上拉触底事件的处理函数,另一种就是通过s...

13020

扫码关注云+社区

领取腾讯云代金券