• 模板的导入,自定义模板的导入,母版的作用


    一:include标签(模板导入)

      前提:多个页面有一个相同的页面板块(多个有样式标签的集合体)

      运用:将多个样式标签的集合进行封装,对外提供板块的名字(接口),在有该版块的页面中直接导入即可

      语法:{% include '版块页面的路径'%}

    公共的页面版块

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

    公告页面版块的样式

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

    使用公告版块的页面们

    <!-- 拥有公共页面板块的 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>

    二:inclusion_tag自定义标签

      前提:与include标签出现的页面需求很类似,但是这些不是完全相同的版块,因为版块内的细节不是完全一致的

      解决:采用模板语言复用,自定义inclusion_tag标签来帮我们解决,同样来减少代码父冗余

      运用: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>

    三:母版

      前提:多个页面的多个版块相同或相似,只有少部分版块是自己独有的,将共有的部分全部提出封装,包含了页面大部分版块结构,所以我们称呼其为母版

      解决:采用模板语言复用 母版 来解决,通过多个页面继承母版,值书写自己独有的版块俩减少代码的冗余

      运用: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块的顺序随意 -->
  • 相关阅读:
    Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染4支持构建bundle
    Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染3配置webpack支持ssr
    使用graalvm.js调用promise
    backup
    使用babel与@babel/node
    Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目
    Vue SSR配合Java的Javascript引擎j2v8实现服务端渲染1概述
    CSS图片垂直居中
    Yarn && npm设置镜像源
    Spring 使用介绍(八)—— 零配置(一)
  • 原文地址:https://www.cnblogs.com/liuxiaolu/p/10479490.html
Copyright © 2020-2023  润新知