include标签--模版导入

  1. '''
  2. 前提：项目中，往往会出现多个页面拥有一个或几个相同的页面版块，或是一个页面多个页面版块是相同的
  3. 如何运用：可以将多个样式标签的集合进行封装，对外提供版块的名字(接口)，在有该版块的页面中直接导入即可
  4. 语法：{% include '版块页面的路径' %}
  5. '''

公共的页面版块

  1. <!-- templates/public.html -->
  2. <!-- 该页面位公共的页面代码块，所以不需要完整的html页面结构 -->
  3. <div class="public">
  4.     <!-- 公用页面版块的详细html代码 -->
  5. </div>

公告页面版块的样式

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

使用公告版块的页面们

  1. <!-- 拥有公共页面版块的 templates/first.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>first</title>
  7.     <link rel="stylesheet" href="/static/css/public.css">
  8. </head>
  9. <body>
  10. <!-- 该页面的其他html代码块 -->
  11.  
  12. <!-- 加载相同的页面版块 -->
  13. {% include 'public.html' %}
  14.  
  15. <!-- 该页面的其他html代码块 -->
  16. </body>
  17. </html>
  1. <!-- 拥有公共页面版块的 templates/second.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>second</title>
  7.     <link rel="stylesheet" href="/static/css/public.css">
  8. </head>
  9. <body>
  10. <!-- 该页面的其他html代码块 -->
  11.  
  12. <!-- 加载相同的页面版块 -->
  13. {% include 'public.html' %}
  14.  
  15. <!-- 该页面的其他html代码块 -->
  16. </body>
  17. </html>
  1. '''
  2. link导入静态的css样式
  3. include标签导入静态的html页面
  4. '''

inclusion_tag自定义标签--模版导入

  1. '''
  2. 前提：与include标签出现的页面需求很类似，但是这些不是完全相同的版块，因为版块内的细节不是完全一致
  3. 如何运用：
  4. 1. 先封装相似的页面标签结构，为数据不同且页面标签个数也不同的地方采用Django模版语言写活（数据决定了最终标签个数）
  5. 2. 自定义inclusion_tag，将封装的页面文件丢给inclusion_tag装饰器，自定义的函数的参数为不同的数据，函数的返回值就是用关键词形式将参数返回
  6. 3. 在拥有该相似版块的页面中导入自定义tag，并使用自定义tag传入具体实参即可
  7. '''

公共类似的页面版块

  1. <!-- templates/public_tag.html -->
  2. <!-- 该页面位公共的页面代码块，所以不需要完整的html页面结构 -->
  3. <ul class="public_tag">
  4.     <!-- 公用页面版块的详细html代码 -->
  5.     {% for foo in list %}
  6.     <li>{{ foo }}</li>
  7.     {% endfor %}
  8. </ul>
  9. <!-- 注：拥有该公共页面代码块的页面会为其提供存放不同数据的 list变量  -->

自定义inclusion_tag

  1. # app/templatetags/owen_tags.py
  2.  
  3. from django.template import Library
  4. register = Library()
  5.  
  6. @register.inclusion_tag('public_tag.html')
  7. def header_list(list):
  8.     return {'list': list}

使用公告版块的页面们

  1. <!-- 拥有公共页面版块的 templates/first_tag.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>first_tag</title>
  7. </head>
  8. <body>
  9. <!-- 该页面的其他html代码块 -->
  10.  
  11. <!-- 加载共同类似的页面版块 -->
  12. {% load owen_tags %}
  13. {% with [1, 2, 3, 4, 5] as list %}
  14.     {% header_list list %}
  15. {% endwith %}
  16.  
  17. <!-- 该页面的其他html代码块 -->
  18. </body>
  19. </html>
  1. <!-- 拥有公共页面版块的 templates/second_tag.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>second_tag</title>
  7. </head>
  8. <body>
  9. <!-- 该页面的其他html代码块 -->
  10.  
  11. <!-- 加载共同类似的页面版块 -->
  12. {% load owen_tags %}
  13. {% with [10, 30, 50] as list %}
  14.     {% header_list list %}
  15. {% endwith %}
  16.  
  17. <!-- 该页面的其他html代码块 -->
  18. </body>
  19. </html>

母版

  1. '''
  2. 前提：多个页面的多个版块相同或相似，只有少部分版块是自己独有的，将共有的部分全部提出封装，因为包含了页面大部分版块结构，所以我们称呼其为 母版
  3. 如何运用：
  4. 1. 先封装母版：大部分版块相同或相似的base.html，在特定的位置留出相应的block接口
  5. 2. 每个需要运用母版页面的页面来继承母版 {% extends '母版页面的路径' %}
  6. 3. 在自己页面中的任意位置书写block中自身独有的页面内容 {{% block block名 %} ... {% endblock %}}
  7. 4. 如果需要继承母版block中原有的内容，使用 {{ block.super }} 来获取
  8. '''

公共的母版页面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>{{ title }}</title>
  6.     <link rel="stylesheet" href="/static/css/base.css">
  7.     {% block style %}
  8.         {# 为继承该母版的页面引入自身样式文件通过的block #}
  9.     {% endblock %}
  10. </head>
  11. <body>
  12. <!-- 母版有有大量的共同版块 -->
  13. <!-- 母版有有大量的共同版块 -->
  14.  
  15. <!-- 母版有有大量的共同版块 -->
  16. {% block own %}
  17.     {# 为继承该母版的页面提供书写自己页面独有内容的block #}
  18. {% endblock %}
  19.  
  20. <!-- 母版有有大量的共同版块 -->
  21. <!-- 母版有有大量的共同版块 -->
  22. </body>
  23. </html>

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

  1. /* static/css/base.css */
  2. /* static/css/login.css */
  3. /* static/css/register.css */

继承母版的login页面

  1. {% extends 'base.html' %}
  2.  
  3. {% block style %}
  4. <link rel="stylesheet" href="/static/css/login.css">
  5. {% endblock %}
  6.  
  7. {% block own %}
  8. {{ block.super }}  {# 继承该母版的block中原有的内容 #}
  9. <div class="login">登录页面独有的登录版块</div>
  10. {% endblock %}

继承母版的register页面

  1. {% extends 'base.html' %}
  2.  
  3. {% block own %}
  4. <div class="register">注册页面独有的注册版块</div>
  5. {% endblock %}
  6.  
  7. {% block style %}
  8. <link rel="stylesheet" href="/static/css/register.css">
  9. {% endblock %}
  10.  
  11. <!-- 继承母版的页面通过替换母版留出的block块，来实现自己页面独有的版块 -->
  12. <!-- 替换block块的顺序随意 -->

Django模版语言的复用 1. include标签--模版导入 2.inclusion_tag自定义标签--模版导入 3.母版的更多相关文章

  1. Django模板语言的复用

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

  2. MyEclipse默认标签TODO,XXX,FIXME和自定义标签的使用

    MyEclipse默认标签TODO,XXX,FIXME和自定义标签的使用 MyEclipse中的一些特殊的注释技术包括:1.    // TODO —— 表示尚未完成的待办事项.2.    // XX ...

  3. java_自定义标签,我的第一个自定义标签!

    自定义标签,我的第一个自定义标签! 总共分两步 编写一个实现tag接口的java类,把jsp页面中的java代码移到这个类中,(标签处理器类) 编写标签库描述符(tld)文件,在tld文件中把标签处理 ...

  4. Eclipse默认标签TODO,XXX,FIXME和自定义标签[转]

    http://www.blogjava.net/Guides/archive/2011/11/14/363686.html   Eclipse中的一些特殊的注释技术包括:    1.    // TO ...

  5. JSP标准标签库的安装以及自定义标签的创建

    JSTL 库安装 Apache Tomcat安装JSTL 库步骤如下: 从Apache的标准标签库中下载的二进包(jakarta-taglibs-standard-current.zip). 官方下载 ...

  6. Eclipse默认标签TODO,XXX,FIXME和自定义标签

    1 TODO 表示需要实现,但目前还未实现的功能 2 XXX 勉强可以工作,但是需要改进的功能 3 FIXME 代码是错误的,不能工作,需要修复 4.自定义标签 window-->prefere ...

  7. [原创]java WEB学习笔记41：简单标签之带属性的自定义标签(输出指定文件，计算并输出两个数的最大值 demo)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. django第七天(模板的复用性,include标签和母版)

    django第7天模板 include标签 模板的共用 a 模板需要到使用到 登陆界面 b 模板需要使用到 登陆界面 可以把登陆界面提取到公共的模板c 为什么要用: 都需要使用相同的界面,减少代码冗余 ...

  9. django -- 模版语言之过滤器Filters和for循环

    前戏 在前面写的图书管理系统中,我们对模版语言应该已经不陌生了,使用{{ }}包裹起来的就是模版语言,只需要记住两种就可以了 {{ 变量名 }}            变量相关的 {% %}      ...

随机推荐

  1. MyBatis基础入门《一》环境搭建

    MyBatis基础入门<一>环境搭建 参考资料链接:http://www.mybatis.org/mybatis-3/ 使用maven构建项目,STS开发工具,jdk1.8 项目结构: m ...

  2. Vue项目中跨域的几种方式

    经常使用vue + webpack搭建项目,但在请求某些json数据时存在跨域问题,此时有几种修改方法 1. 修改后台header, 但如果只是请求外部数据,是没法修改后台配置的 header('Ac ...

  3. JAVA8流操作

    * Stream 的三个操作步骤: * 1创建Stream * 2中间操作 * 3终止操作 package airycode_java8.nice6; import airycode_java8.ni ...

  4. Nginx加载ngx_pagespeed模块，加快网站打开的速度

    [页面加速]配置Nginx加载ngx_pagespeed模块,加快网站打开的速度   ngx_pagespeed 是一个 Nginx 的扩展模块,可以加速你的网站,减少页面加载时间,它会自动将一些提升 ...

  5. TP图片上传

    //控制器文件 public function index(){ if(!empty($_POST)){ $file = $_FILES["file"]; if(!isset($f ...

  6. https加密过程

    https加密完整过程 step1: “客户”向服务端发送一个通信请求 “客户”->“服务器”:你好 step2: “服务器”向客户发送自己的数字证书.证书中有一个公钥用来加密信息,私钥由“服务 ...

  7. DX9 空间坐标变换示例代码

    // @time 2012.3.25 // @author jadeshu #include <Windows.h> #include <d3d9.h> #include &l ...

  8. html5-div布局

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. 从windows本地IDE启动远程Linux文件进行调试

    1)  因为WingIDE调用putty和plink进行ssh连接,需要先设置putty. 点击下载putty,并解压,把解压路径附到操作系统PATH环境变量中,之后重新启动WingIDE,让它重新读 ...

  10. 异常检测LOF

    局部异常因子算法-Local Outlier Factor(LOF)在数据挖掘方面,经常需要在做特征工程和模型训练之前对数据进行清洗,剔除无效数据和异常数据.异常检测也是数据挖掘的一个方向,用于反作弊 ...