05-模板层3——模板语法之继承

Django模版引擎中最强大也是最复杂的部分就是模版继承了。模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的blocks。

模板继承的一般步骤

1-创建一个模板.html文件,

2-需要继承的子文件中必须在“开头“位置引入模板文件~{% extends '模板.html' %}

3-模板.html 中将需要被子文件修改的部分指出来:{% block content %} xxxxxxx{% endblock %} ~还可以指定名字结束{% endblock content%}

4.1-继承模板的子文件里面开始写自己的内容: {% block content %} 自己html里面的内容{% endblock %}

4.2-保留模板内容的写法 {% block content %} {{ block.super }}自己html里面的内容{% endblock %}
        如果不加{{ block.super }}的话,模板中写的内容在子页中是无法显示的~加上的话就显示出来了~而且加的位置不一样显示的位置也不一样!

具体过程

app01的url中加一个base的路由

re_path('^base/$',views.base),

app01的views中加一个base视图函数返回model.html页面

def base(request):
    return render(request,'base.html')  

templates包中加入base.html文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="style.css" />
        <title>{% block title %}My amazing site{% endblock %}</title>
    </head>

    <body>
        <div id="sidebar">
            {% block sidebar %}
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/blog/">Blog</a></li>
            </ul>
            {% endblock %}
        </div>

        <div id="content">      
            {% block content %}{% endblock %}
        </div>
    </body>
    </html>

说明:

#这个模版,我们把它叫作 base.html,它定义了一个可以用于两列排版页面的简单HTML骨架。“子模版”的工作是用它们的内容填充空的blocks。
#在这个例子中,block标签定义了三个可以被子模版内容填充的block。
#block 告诉模版引擎:子模版可能会覆盖掉模版中的这些位置。

子模板我们命名为child1

在url中添加路由

re_path('^child1$',views.child1),

在views视图函数中添加逻辑

def child1(request):
    list_w = [111,222,333]
    return render(request,'child1.html',{'list_w':list_w})

child1.html文件是这样的

{% extends 'base.html' %}

{% block title %} 哈哈哈哈 {% endblock %}
{% block content %}
    <p>{{ list_w }}</p>
{% endblock %}

说明1:

###extends标签是这里的关键。它告诉模版引擎,这个模版“继承”了另一个模版。当模版系统处理这个模版时:
##首先,它将定位父模版——在此例中,就是“base.html”。
##然后,模版引擎将注意到 base.html 中的三个 block标签,并用子模版中的内容来替换这些block。

说明2:根据 child1.html 的值,输出可能看起来是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>哈哈哈哈</title>
</head>

<body>
    <div id="sidebar">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
    </div>

    <div id="content">
        <p> [111,222,333]</p>
    </div>
</body>
</html>

说明3:

#这种方式使代码得到最大程度的复用,并且使得添加内容到共享的内容区域更加简单,例如,部分范围内的导航。
#请注意,子模版并没有定义 sidebar block,所以系统使用了父模版中的值。
#父模版的 {% block %} 标签中的内容总是被用作备选内容(fallback)。

这里是使用继承的一些提示

(1)如果你在模版中使用 {% extends %} 标签,它必须是模版中的第一个标签。其他的任何情况下,模版继承都将无法工作。
(2)在base模版中设置越多的 {% block %} 标签越好。请记住,子模版不必定义全部父模版中的blocks,所以,
 你可以在大多数blocks中填充合理的默认内容,然后,只定义你需要的那一个。多一点钩子总比少一点好。
(3)如果你发现你自己在大量的模版中复制内容,那可能意味着你应该把内容移动到父模版中的一个 {% block %} 中。
(4)为了更好的可读性,你也可以给你的{% endblock %} 标签一个 名字 。例如:
    {% block content %}
    ...
    {% endblock content %}
在大型模版中,这个方法帮你清楚的看到哪一个  {% block %} 标签被关闭了。  
(5)不能在一个模版中定义多个相同名字的 block 标签。 
(6)If you need to get the content of the block from the parent template, the variable will do the trick. This is useful if you want to add to the contents of a parent block instead of completely overriding it. Data inserted using will not be automatically escaped (see the next section), since it was already escaped, if necessary, in the parent template.

组件 {% include %}的用法

组件的概念

将一个完整功能模块,放到一个hmtl文件中,使用这个模块的其他页面,直接在页面中引入即可,
引入方式{% include '模块.html' %} ,任意位置引入

组件和插件的简单区别

组件是提供某一完整功能的模块,如:编辑器组件,QQ空间提供的关注组件 等。
而插件更倾向封闭某一功能方法的函数。
这两者的区别在 Javascript 里区别很小,组件这个名词用得不多,一般统称插件。

一个简单的例子

这里我有两个页面:1.html与2.html
1.html的内容是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>哈哈哈哈</title>
</head>

<body>
    <div id="sidebar">
        {% include '2.html' %}
    </div>

    
</body>
</html>

2.html的内容是这样的

<div>
    <a>哈哈哈哈哈</a>
</div>

如果1.html与2.html这两个文件在同一个package中,那么1.html可以直接显示2.html的内容了!

posted on 2019-05-17 22:13  江湖乄夜雨  阅读(220)  评论(0编辑  收藏  举报