Flask学习笔记之模板(三)

大纲

我们都知道html模板中,很多内容都是有重复的,譬如前面的head和后面的footer部分,这里的部分都是重复的,我们可以通过今天的学习的技术,减少代码的使用量,避免重复。

  • include
  • 模板继承

宏的使用方法很类似于函数的使用。首先我们新建一个html文件。

{% macro test(fruit)%}
    <li>{{ fruit }}</li>
{% endfor %}

这样我们在index.html中就可以这样来写:

{% import 'macros.html' as macros %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>罗罗攀</title>
</head>
<body>
    <ul>
        {% for fruit in fruits %}
            {{ macros.test(fruit) }}
        {% endfor %}
    </ul>
</body>
</html>

include

大量重复代码,可以使用include方法,我们新建一个common.html文件,用于存放共有代码。

<div>
    <a href="#">首页</a>
    <a href="#">详情页</a>
    <a href="#">个人中心</a>
</div>

然后在index.html就可以使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>罗罗攀</title>
</head>
<body>
    {% include 'common.html' %}
</body>
</html>

模板继承

在大型网站中,常用到模板继承。我们首先新建一个base.html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>罗罗攀</title>
</head>
<body>
    <div>
        <a href="#">首页</a>
        <a href="#">详情页</a>
        <a href="#">个人中心</a>
    </div>
    {% block body %}{% endblock %}
</body>
</html>

然后在index中,就可以少写很多代码了。

{% extends 'base.html' %}

{% block body %}
    <h1>hello</h1>
{% endblock %}

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我是攻城师

简述ElasticSearch里面复杂关系数据的存储方式

80270
来自专栏FreeBuf

微信也被监控:HackingTeam语音监控代码分析

在HackingTeam泄漏的文件,我们发现了有针对主流聊天软件中的语音进行监控的代码,其中包括国内常用的微信。下面就以微信为例,来分析一下HackingTea...

32980
来自专栏mathor

软件破解逆向工程实战(一)

本系列教程无需任何基础,直接学习即可,对于没有c/c++基础的同学来说也没有什么坎,多看,多做就能掌握,同时说一下,我们的QQ群:689696631,因为本系列...

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

JavaScript设计模式与实践--适配器模式

适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协...

22710
来自专栏博客园迁移

工作中的一些经验小结

控制层   返回值统一 AOP 也方便前台 AOP 统计执行时间记录日志   参数不要出现Request, Response   返回码定义 不...

8020
来自专栏CDA数据分析师

Python 快速教程(标准库)

Python有一套很有用的标准库(standard library)。标准库会随着Python解释器,一起安装在你的电脑中的。它是Python的一个组成部分。这...

21690
来自专栏Zchannel

基于 Python 实现的用于命令行的速查工具:cheat.sh

13250
来自专栏Bug生活2048

利用Python好好的整理你的附件

可以整理出一份excel用于导航(类似目录),可以通过excel来快速定位到所要的附件,如下图效果:

11530
来自专栏沈唁志

写给PHP开发者的五个建议

18440
来自专栏Android干货

Android项目实战(四十六):Usb转串口通讯(CH34xUARTDriver)

40460

扫码关注云+社区

领取腾讯云代金券