前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flask学习笔记之模板(三)

Flask学习笔记之模板(三)

作者头像
罗罗攀
发布2018-12-18 17:02:50
3290
发布2018-12-18 17:02:50
举报

大纲

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

  • include
  • 模板继承

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

代码语言:javascript
复制
{% macro test(fruit)%}
    <li>{{ fruit }}</li>
{% endfor %}

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

代码语言:javascript
复制
{% 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文件,用于存放共有代码。

代码语言:javascript
复制
<div>
    <a href="#">首页</a>
    <a href="#">详情页</a>
    <a href="#">个人中心</a>
</div>

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

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>罗罗攀</title>
</head>
<body>
    {% include 'common.html' %}
</body>
</html>

模板继承

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

代码语言:javascript
复制
<!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中,就可以少写很多代码了。

代码语言:javascript
复制
{% extends 'base.html' %}

{% block body %}
    <h1>hello</h1>
{% endblock %}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 大纲
  • include
  • 模板继承
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档