Python Web开发基于flask的博客系统教程（3-6）复用模板的方式：继承和组件化

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

Python Web开发基于flask的博客系统教程（3-6）复用模板的方式：继承和组件化

复用方法一：继承

复用模板二：组件化

其他

Felix 管理员

最新文章

最新随笔