母板和继承

母版

  1. html页面,提取多个页面的公共部分

  2. 定义多个block块,需要让子页面进行填充

<head>
{% block page-css %} {% endblock %}
</head>
<body>

<h1>这是母板的标题</h1>

{% block page-main %} # 设置block块,可以在模板中进行个性化设置
{% endblock %}

<h1>母板底部内容</h1>
{% block page-js %}

{% endblock %}
</body>

继承

  1. 在模板的左上方写上{% extends '母板文件名' %}

  2. 重写block块 ,写在block内部

  3. 块block

     {% extends 'home.html'%}
    {% block page-main %}
    <p>《叽叽喳喳的世界》</p>
    <p>作者:叽叽喳喳</p>
    {% endblock %}  

注意

  1. {% extends 'base.html' %} 带上引号 不带的话会当做变量

  2. {% extends 'base.html' %} 上面不要写其他内容

  3. 要显示的内容写在block块中

  4. 母板定义多个block 用于定义 css 或者 js

组件

可以将常用的页面内容如导航条,页尾信息等不会已经写完不会经常更改的组件保存在单独的文件中,然后在需要使用的地方按如下语法导入即可。

 {% include '组件模板' %}

静态文件相关

静态文件引入
 引用CSS
{% load static %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">

引用JS
{% load static %}
<script src="{% static "mytest.js" %}"></script>

引用图片
{% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!" />

某个文件多处被用到可以存为一个变量
{% load static %}
{% static "images/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>
使用get_static_prefix
# 方式一
{% load static %}
<img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />

# 方式二
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}

<img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
<img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />
自定义simpletag

和自定义filter类似,只不过接收更灵活的参数。

定义注册simple_tag

 @register.simple_tag(name="plus")  # 可以省略(name="plus")
def plus(a, b, c):
return f"{a} + {b} + {c}"

使用自定义simple_tag

 {% load tag %}  #(load 文件名)即可

{% plus "1" "2" "abc" %}

【与filter的区别】

  • filter是过滤器,simple_tag是标签

  • filter最多传入两个参数

inclusion_tag

多用于返回html代码片段

templatetags/my_inclusion.py设计功能

 from django import template

register = template.Library()

@register.inclusion_tag('page.html') # 结合的是page.html模板
def page(num):
return {'num':range(1,num+1)} # 返回必须是一个字典

templates/page.html进行组件设计

# page模板中存放的是一个分页组件

<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li> {% for i in num %}
<li>
<a href="#">{{ i }}</a>
</li>
{% endfor %}

<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>

templates/jjzz.html中进行调用

 <body>

{% load my_inclusion %}
{% page 5 %}

</body>
</html>

Django模板系统-母板和继承的更多相关文章

  1. Django 模板系统

    Django模板系统 常用语法 {{}} 变量相关 {%%} 逻辑相关 变量 格式 {{ 变量名 }} 命名规则 包括任何字母数字以及下划线 ("_")的组合 变量名称中不能有空格 ...

  2. Python学习(二十八)—— Django模板系统

    转载自http://www.cnblogs.com/liwenzhou/p/7931828.html Django模板系统 官方文档 一.常用语法 只需要记两种特殊符号: {{  }}和 {% %} ...

  3. django模板系统基础

    模板系统基础Django模板是一个string文本,它用来分离一个文档的展现和数据 模板定义了placeholder和表示多种逻辑的tags来规定文档如何展现 通常模板用来输出HTML,但是Djang ...

  4. Django模板系统(非常详细)(后台数据如何展示在前台)

    前面的章节我们看到如何在视图中返回HTML,但是HTML是硬编码在Python代码中的这会导致几个问题:1,显然,任何页面的改动会牵扯到Python代码的改动网站的设计改动会比Python代码改动更频 ...

  5. python MVC、MTV 框架介绍 Django 模板系统常用语法

    Django 框架简介一.MVC框架和MTV框架1.MVC 全名Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分.优势: 耦合性低 重用性高 生命 ...

  6. (转)Django学习之 第四章:Django模板系统

    前面的章节我们看到如何在视图中返回HTML,但是HTML是硬编码在Python代码中的 这会导致几个问题: 1.显然,任何页面的改动会牵扯到Python代码的改动 网站的设计改动会比Python代码改 ...

  7. python终极篇 ---django 模板系统

                                                模板系统                                                . MV ...

  8. Django模板系统:Template

    一.模板常用语法 1.1 变量 符号:{{ }} 表示变量,在模板渲染的时候替换成值 使用方式:{{ 变量名 }}:变量名由字母数字和下划线组成 点(.)在模板语言中有特殊的含义,用来获取对象的相应属 ...

  9. Django模板系统

    创建模板对象Template类在django.template模板中 // 用django-admin.py startproject 命令创建一个项目目录django-admin.py startp ...

随机推荐

  1. hadoop中的JournalNode

    1.在HADOOP扮演的角色 JournalNode是在MR2也就是Yarn中新加的,journalNode的作用是存放EditLog的, 在MR1中editlog是和fsimage存放在一起的然后S ...

  2. 201871010126 王亚涛 《面向对象程序设计 (Java)》第十七周学习总结

    内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/12 ...

  3. Java-IPDeal工具类

    /** * IP处理类 */ import java.sql.*; public class IPDeal { /** * 通过ip地址查询地区名称 * @param strip * @return ...

  4. springboot整合jetty(转)

    jdk1.8 springboot替换容器在网上搜索只需要两步如果不是可能就会报错Unable to start EmbeddedWebApplicationContext due to missin ...

  5. JProfiler集成在eclipse中(转)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/sinat_38259539/articl ...

  6. Servlet中的乱码问题及解决办法

    假设现在有个form表单,当页面中提交一个包含中文的请求时,在服务端有可能出现中文乱码问题. <!DOCTYPE html> <html> <head> <m ...

  7. 微信小程序开发入门教程(一)---hello world

    由于无法备案网站,前期做了个微信小程序(开发版)就搁置了,几乎忘了开发过程.现在重新梳理,做个记录. 一.最基本的小程序前端例子hello 1.下载安装  微信开发者工具  官网: https://d ...

  8. 什么是SYN Flood攻击?

    SYN Flood (SYN洪水) 是种典型的DoS (Denial of Service,拒绝服务) 攻击.效果就是服务器TCP连接资源耗尽,停止响应正常的TCP连接请求. 说到原理,还得从TCP如 ...

  9. return返回方法值:狮子玩具

    public class Lion { String color ="黄色"; public void run(){ System.out.println("正在以0.1 ...

  10. Vue 新手学习笔记:vue-element-admin 之安装,配置及入门开发

    所属专栏: Vue 开发学习进步 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手架 ...