我们在编程的时候,往往会将一些功能封装成函数,以达到可以重复使用的目的,而对于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

回复

  • 最新随笔

  • 对我来说,写东西很好的一点是,自己写的东西,后面基本都会再看,一遍或者很多遍。这样就可以很好地发现自己之前的漏洞,并看看现在有什么变化。
  • 前段时间应该是百度更新了页面结构,那个黑帽泛目录网站我也没有去更新代码,就导致了文章页没有相关推荐,没想到这时候谷歌开始收录了,而且效果还不错。其实之前在谷歌一直不收录的时候就有怀疑过没有尽头的相关推荐很可能是导致不收录的原因,不过也一直没有去管它,而这次误打误撞的收录也恰恰证实了这个想法。(btw,其实这个网站从出现固定链接开始叫泛目录应该不太准确)
  • 最近吉他谱网站iloveguitar上线了,这几天在填充一些内容花了一些时间,这个网站也是使用flask作为后端框架的,前端UI框架使用的是bootstrap4,喜欢吉他的小伙伴欢迎来这里逛一逛哟,有什么建议欢迎在留言板提一下哟。
  • 那个泛目录网站发布了几个星期了,百度没怎么来爬,收了一个首页,谷歌直接就不收了,倒是一个查外链的网站天天来爬(笑哭),还有建议一点就是泛目录还是用在有建站历史的域名比较好(因为已经过了审核期),新域名就尽量不要用了。
  • 刚刚又发了一篇,最近文章百度都不太收录,orz,哈哈
  • 之前那个用python做的静态资源服务器,我又发现了一大用处,现在我都用来在局域网里的不同电脑之间传输文件,真的好用哈哈
  • 今天交换到了博客有史以来第一条友情链接
  • 刚刚更新了一下博客,修复了一些bug,添加了一个项目页