Django模板语言之母板、组件及template tag

之前写了一个关于Django里的模板语言的Filter,笔记有点多,所以还没写完,本计划写完后在写这块的笔记,怕忘记就先写这块的笔记了。/(ㄒoㄒ)/~~

python-django

0x00 母板介绍及建立

A 母板的介绍
对于类似于长安大学主页的网站(只是类似了!),可以看出在学校概况、机构设置等标签下,几乎每个页面变化的内容都是长安大学照片下方的内容和底部蓝色内容之间的东西。

而每个页面都有很多一样的地方,则可以将相同的地方提取出来做一个母板,只用将不同的内容替换到模板中即可。

B 母板的建立
将共有的部分的代码拷贝出来,将需要填充的地方预留出来,建立一个块。
块的建立如下:

{% block 块名 %}

{% endblock %}

下面代码做一个简单的示例,一个名为base.html的文件。不过一般习惯于有三大类块,一个位于<head></head>标签之前来加载子页面特有的css元素,母板底部还会预留一个子页面独有的引入JavaScript的块,这里没写。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>模板测试</title>
    {% block pagecss %}

    {% endblock %}
</head>
<body>
<h1>这个是模板标题</h1>

{% block mainblock %}

{% endblock %}

<h1>这个是模板页脚</h1>
</body>
</html>

上面的代码就以及将母板建立完毕了,之后子页面的内容回被加入到mainblock中,子页面的特有的css文件则也引入到pagecss的块中。例子过于简单,就假设了2个h1标签为上部和下部共有的代码部分。

0x01 母板的使用——继承

由于不同的页面都包含了母板的代码,所以要使用母板之前,页面第一步需要继承之前我们创建的那个母板HTML文件。

{% extends 'base.html' %}

继承完母板,则页面有了母板的内容,需要将自己页面的内容填充到母板中。内容的填充需要用到之前声明的块了,在声明的块中填写需要填充的内容。
完整页面代码如下:

{% extends "base.html" %}

{% block pagecss %}
    <style>
        .mylist {
            color: red;
        }
    </style>
{% endblock %}

{% block mainblock %}

    <ul class="mylist">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>

{% endblock %}

最终页面就可以显示出了,我们所需要的样式,这样不同的页面,我们仅仅需要将其特有的地方的block块中的代码完成就创建出了我们所想要的样子,大大的节省了我们代码量。

0x02 组件

组件就是常用的代码块独立出来的东西,之后再需要用到的页面上仅仅需要导入即可,类似于常用的东西独立出来了一个模块,需要使用的时候“import”以下就行了。其常常用于导航条、页尾信息等组件。

比如在很多的页面中都会通用相同的徽章按钮(Bootstrap组件中的“徽章”),比如好多页面都有一个给他点赞按钮,但又不是全部都有这个原则,则将这个徽章按钮做成一个独立的组件。

制作方法很简单,建立一个badgebutton.html文件,清空内容,将徽章按钮的代码贴入即可。

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

在需要的页面需要使用的地方加入进行引入该组件即可。

{% include "badgebutton.html" %}

我想将其放入母板h1标签之下,页面特有的list之上。

{% extends "base.html" %}

{% block pagecss %}
    <style>
        .mylist {
            color: red;
        }
    </style>
{% endblock %}

{% block mainblock %}

    {% include "badgebutton.html" %}

    <ul class="mylist">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>

{% endblock %}

这样就引入我们组件,所以需要在需要使用组件的地方使用include即可。

0x03 simple_tag

在使用simple tag之前,你需要在你的app下建立一个名为templatetags(固定名字的文件夹),其次你的app要在Django项目中进行注册了。

simple tag可以来处理一些较为复杂的python代码,比如可以接收更多的参数,而自定义Filter虽然可以接收2个参数,但是又一个参数是传入的对象,因而约等于只能接收一个参数,当遇到逻辑业务较复杂的情况是,则可以使用simple tag。

在templatetags下建立一个mytags.py的文件用来存储你的simple tag。

在自定义tag之前,需要引入template,且生成一个注册器register。

from django import template

register = template.Library();

之后可以创建自己的simple tag。如创建一个输入年月日后,生成中文的年月日标签。

from django import template

@register.simple_tag
def cndate(year, month, day):
    return "{}年{}月{}日".format(year, month, day)

此外也可以给该simple tag指定别的名字,因而在引用使用使用别名,这里知识介绍,后面讲以上面的函数为例。

@register.simple_tag(name = 'zhongwendate')
def cndate(year,month,day):
    return "{}年{}月{}日".format(year,month,day)

要使用simple tag则需要在使用它的地方引入py文件后,方可使用。

{% load mytags %}
{% extends "base.html" %}

{% block pagecss %}
    <style>
        .mylist {
            color: red;
        }
    </style>
{% endblock %}

{% block mainblock %}

    {% include "badgebutton.html" %}

    <ul class="mylist">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>

    {% load mytags %}
    {% cndate 2019 5 2 %}

{% endblock %}

0x04 inclusion_tag

inclusion tag的使用要求与simple tag的一样,都需要位于templatetags文件夹下。inclusion tag类似于一个动态的组件,可以动态的生成一类东西。如一个列表。

还是使用装饰器的方式来注册inclusion tag,不过需要注意的是这里需要指明其要作用于哪一个组件。

from django import template

register = template.Library()

@register.inclusion_tag("genlist.html")
def genlist(num):
    num if num < 1 else int(num)
    data = [i for i in range(1, num + 1)]
    return {"result": data}

上面的代码指明了需要作用域genlist.html这个文件,所以需要创造一个html文件。函数还返回了一个字典,在“组件”中可以直接使用“键”。下面是genlist.html代码。

<ul>
    {% for i in result %}
        <li>{{ i }}</li>
    {% endfor %}
</ul>

在也没上也需要使用load引入后方可使用。

{% extends "base.html" %}

{% block pagecss %}
    <style>
        .mylist {
            color: red;
        }
    </style>
{% endblock %}

{% block mainblock %}

    {% include "badgebutton.html" %}

    <ul class="mylist">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>

    {% load mytags %}
    {% cndate 2019 5 2 %}

    <hr>
    {% genlist 10 %}

{% endblock %}

这样就可以使用inclusion tag来生成一个动态的“组件”。

发表评论