Djiango模板导入

时间 2019-11-24

标签 djiango 模板导入繁體版

原文原文链接

1、include标签 -- 模板导入css

使用前提：多个页面有一个相同的页面版块时（多个有样式标签的集合体）html

如何运用：能够将多个样式标签的集合进行封装，对外提供板块的名字(接口)，在有该板块的页面中直接导入便可django

语法：{% include '板块页面的路径' %}app

公共的页面板块函数

<!-- templates/public.html -->
<!-- 该页面位公共的页面代码块，因此不须要完整的html页面结构 -->
<div class="public">
    <!-- 公用页面板块的详细html代码 -->
</div>

公告页面板块的样式布局

/* static/css/public.css */
/* 该样式文件是为公告页面代码块提供页面布局的css样式 */
.public {
    /* 具体的css样式块 */
}

使用公告板块的页面们spa

<!-- 拥有公共页面板块的 templates/first.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>first</title>
    <link rel="stylesheet" href="/static/css/public.css">
</head>
<body>
<!-- 该页面的其余html代码块 -->
    
<!-- 加载相同的页面板块 -->
{% include 'public.html' %}
    
<!-- 该页面的其余html代码块 -->
</body>
</html>

<!-- 拥有公共页面板块的 templates/second.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>second</title>
    <link rel="stylesheet" href="/static/css/public.css">
</head>
<body>
<!-- 该页面的其余html代码块 -->
    
<!-- 加载相同的页面板块 -->
{% include 'public.html' %}
    
<!-- 该页面的其余html代码块 -->
</body>
</html>

2、inclusion_tag自定义标签code

使用前提：与include标签出现的页面需求很相似，可是这些不是彻底相同的板块，由于板块内的细节不是彻底一致htm

如何使用：blog

1. 先封装类似的页面标签结果，为数据不一样而页面标签个数不一样的地方采用Django模板语言写活（数据决定了最终标签个数）；
2. 自定义inclusion_tag，将封装的页面文件都给inclusion_tag装饰器，自定义的函数的参数为不一样的数据，函数的返回值就是用关键词形式将参数返回；
3. 在拥有该类似板块的页面中导入自定义tag，并使用自定义tag传入具体实参便可。

自定义inclusion_tag

# app/templatetags/owen_tags.py

from django.template import Library
register = Library()

@register.inclusion_tag('public_tag.html')
def header_list(list):
    return {'list': list}

公共相似的页面板块

<!-- templates/public_tag.html -->
<!-- 该页面位公共的页面代码块，因此不须要完整的html页面结构 -->
<ul class="public_tag">
    <!-- 公用页面板块的详细html代码 -->
    {% for foo in list %}
    <li>{{ foo }}</li>
    {% endfor %}
</ul>
<!-- 注：拥有该公共页面代码块的页面会为其提供存放不一样数据的 list变量  -->

使用公告板块的页面们

<!-- 拥有公共页面板块的 templates/first_tag.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>first_tag</title>
</head>
<body>
<!-- 该页面的其余html代码块 -->
    
<!-- 加载共同相似的页面板块 -->
{% load owen_tags %}
{% with [1, 2, 3, 4, 5] as list %}
    {% header_list list %}
{% endwith %}
    
<!-- 该页面的其余html代码块 -->
</body>
</html>

<!-- 拥有公共页面板块的 templates/second_tag.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>second_tag</title>
</head>
<body>
<!-- 该页面的其余html代码块 -->
    
<!-- 加载共同相似的页面板块 -->
{% load owen_tags %}
{% with [10, 30, 50] as list %}
    {% header_list list %}
{% endwith %}
    
<!-- 该页面的其余html代码块 -->
</body>
</html>

3、母版

前提：多个页面的多个板块相同或类似，只有少部分板块是本身独有的，将共有的部分所有提出封装，包含了页面大部分版块结构，因此咱们称呼其为母版。
如何运用：
1. 先封装母版：大部分版块相同或类似的base.html，在特色的位置留出响应的block接口；
2. 每一个须要运用母版页面的页面来继承母版 {% extends '母版页面的路径' %}；
3. 在本身页面中的任意位置书写block中自身独有的页面内容 {{% block block名 %} ... {% endblock %}}；
4. 若是须要继承母版block中原有的内容，使用 {{ block.super }} 来获取。

公共的母版页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/static/css/base.css">
    {% block style %}
        {# 为继承该母版的页面引入自身样式文件经过的block #}
    {% endblock %}
</head>
<body>
<!-- 母版有有大量的共同板块 -->
<!-- 母版有有大量的共同板块 -->
    
<!-- 母版有有大量的共同板块 -->
{% block own %}
    {# 为继承该母版的页面提供书写本身页面独有内容的block #}
{% endblock %}
    
<!-- 母版有有大量的共同板块 -->
<!-- 母版有有大量的共同板块 -->
</body>
</html>

页面样式文件均放在static/css中，每一个html文件按需导入本身的css文件

/* static/css/base.css */
/* static/css/login.css */
/* static/css/register.css */

继承母版的login页面

{% extends 'base.html' %}

{% block style %}
<link rel="stylesheet" href="/static/css/login.css">
{% endblock %}

{% block own %}
<div class="login">登陆页面独有的登陆板块</div>
{% endblock %}

继承母版的register页面

{% extends 'base.html' %}

{% block own %}
<div class="register">注册页面独有的注册板块</div>
{% endblock %}

{% block style %}
<link rel="stylesheet" href="/static/css/register.css">
{% endblock %}

<!-- 继承母版的页面经过替换母版留出的block块，来实现本身页面独有的板块 -->
<!-- 替换block块的顺序随意 -->