zoukankan      html  css  js  c++  java
  • Django模板语言的复用

    一.include标签

    由于在项目中,往往会出现多个页面拥有一个或几个相同的页面版块,或是一个页面多个页面版块是相同的,基于这个问题,我们可以采用模板语言复用include标签来帮我们解决,这样就避免了大量的复制粘贴html页面版块代码。

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

    语法:{% 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>
    View Code

    二.inclusion_tag自定义标签

    出现的问题:多个页面有一个相似的页面版块,不是完全相同的版块,版块内的细节不是完全一致的。

    解决:可以采用模板语言复用,自定义inclusion_tag标签来帮助我们解决这个问题,为了减少代码的冗余。

    运用:

    1.先封装相似的页面标签结果,为数据不同而且页面标签个数不同的地方采用Django模板语言写活(数据决定了最终标签个数)。

    2.自定义inclusion_tag,将封装的页面文件都给inclusion_tag装饰器,自定义的函数的参数为不同的数据,函数的返回值就是用关键词形式将参数传回。

    3.在拥有该相似版块的页面中导入自定义tag,并使用tag传入具体实参即可。

    自定义inclusion_tag:

    app/templatetags/my_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>
    View Code

    三.母版

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

    解决:

    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>

    继承母版的login页面:

    {% extends 'base.html' %}
    
    {% block style %}
    <link rel="stylesheet" href="/static/css/login.css">
    {% endblock %}
    
    {% block own %}
    <div class="login">登录页面独有的登录板块</div>
    {% endblock %}
  • 相关阅读:
    1058 A+B in Hogwarts (20)
    1046 Shortest Distance (20)
    1061 Dating (20)
    1041 Be Unique (20)
    1015 Reversible Primes (20)(20 分)
    pat 1027 Colors in Mars (20)
    PAT 1008 Elevator (20)
    操作系统 死锁
    Ajax的get方式传值 避免& 与= 号
    让IE浏览器支持CSS3表现
  • 原文地址:https://www.cnblogs.com/wangke0917/p/10471077.html
Copyright © 2011-2022 走看看