我们在编程的时候,往往会将一些功能封装成函数,以达到可以重复使用的目的,而对于web模板来说,我们也是可以写好一些基础内容框架,然后在之后重复使用的。

复用方法一:继承

这个我们之前有讲过,先写好一个基础的页面模板(如base.html),之后新的模板在这个基础模板上继承拓展,就可以减少重复写一些部分代码的工作了。

templates/base.html

<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        <link rel='stylesheet' href="{{ url_for('static',filename='style.css') }}">
        <script src="{{ url_for('static',filename='myfunction.js') }}"></script>
    </head>
    <body>
        <div class="nav">
            <a href='/'>Frog</a>
            <a href='/'>首页</a>
            <a href="{{ url_for('posts') }}">文章</a>
        </div>
        <div class='container'>
            {% block content %}{% endblock %}
        </div>
    </body>
</html>

我们在基础模板上用{% block name %}{% endblock %}的形式预留好位置,之后在子模板上就可以根据预留的位置放上一些新的内容了。

templates/index.html

{% extends 'base.html' %}

{% block title %}Index - Frog{% endblock %}

{% block content %}
<h1>hello world!</h1>
{% endblock %}

在新模板上用{% extends 'base.html' %}的形式声明需要继承的模板,如这个模板要继承base.html,那就在里面写上base.html即可。(这个地址是相对templates目录的)

然后在根据{% block name %}{% endblock %}预留的位置,填上新的内容即可。

复用模板二:组件化

组件化的模板组织方式在一些php的cms上经常可以看到,可以这样理解:首先写好一个头部header.html,写好一个尾部footer.html,而index.html则可以通过header.html+index content+footer.html来表示。

templates/header.html

<html>
    <head>
        <title>{{ title }}</title>
        <link rel='stylesheet' href="{{ url_for('static',filename='style.css') }}">
        <script src="{{ url_for('static',filename='myfunction.js') }}"></script>
    </head>
    <body>
        <div class="nav">
            <a href='/'>Frog</a>
            <a href='/'>首页</a>
            <a href="{{ url_for('posts') }}">文章</a>
        </div>
        <div class='container'>

templates/footer.html

        </div>
    </body>
</html>

templates/index.html

{% include 'header.html' %}
<h1>hello world!</h1>
{% include 'footer.html' %}

在模板中,通过{% include ‘template.html' %}的方式引入一个部分的代码。

而像title这种不同页面可能有变化的,就可以在路由函数中渲染页面时传入

frog.py

@app.route('/index')
def index()
    return render_template('index.html',title='Index - Frog')

其他

以上就是模板复用的常见方式了,而搭配上模板中的宏macro还可以设计更多复杂的功能呢。如果有什么错误或疑问的话欢迎在评论区里讨论一下。

评论

Felix 管理员

仓库地址: http://codemole.cn/felix/Frog/src/frog3.6

回复

  • 最新随笔

  • (°ー°〃) (°ー°〃) 看你睡得那么香就不赶你了,整个抬走,换把椅子ㄟ(▔ ,▔)ㄏ
  • 还有这个移动端之前的随笔显示效果图片做对比,现在这样就更方便阅读一些
  • 找了点时间,重新调整了一下随笔的页面,这样看就顺眼多了,附上一张以前的随笔页图片。
  • 对于自己暂时没有能力改变的事情,屏蔽相关信息是保持平常心的方法之一,毕竟人的精力和注意力是有限的,投入眼前的事情反倒能在这个浮躁的世界收获一些自己的东西。专注脚下,偶尔抬头。
  • 这个随笔的页面找时间得改一改,阅读体验不太好......
  • 对于一些娱乐片段或者碎片化阅读的记忆,别穷思竭虑般地唤起回忆,想变得清晰,不能马上想起就放弃。毕竟在信息时代每天接受的信息量级巨大,若想大脑都填满这些碎片化的信息也是天方夜谭,而且在无法想起时也不建议有苦恼的情绪(如:我是不是有健忘症?是不是越来越严重了?之类的),因为频繁给自己这类心理暗示真的很有可能会往相关趋势发展。另外对于一些系统性学习的知识也建议保持类似的态度,因为除了一些频繁使用的知识,人脑真的记忆不过来那么多东西,在想不起时依靠记忆中相关的知识索引在世界中找到对应的内容即可。
  • 发现一个有趣现象,看了看发的文章,我用“我们”比用“我”更频繁,这是为啥。(随便一提,这是2022年第一条随笔,(笑哭))
  • 对我来说,写东西很好的一点是,自己写的东西,后面基本都会再看,一遍或者很多遍。这样就可以很好地发现自己之前的漏洞,并看看现在有什么变化。