django模板系统(下)

主要内容:母版,继承母版,块,组件,静态文件

母版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title>{% block page-css %}{% endblock %}
</head>
<body><h1>这是母板的标题</h1>{% block page-main %}{% endblock %}
<h1>母板底部内容</h1>
{% block page-js %}{% endblock %}
</body>
</html>

注意:我们通常会在母版中定义页面专用的CSS块和JS块,方便子页面替换

 

继承母版

在子页面中在页面最上方使用下面的语法来继承母版

{% extends 'layouts.html' %}

 

块(block)

通过在模板中使用{% block xxx %} 来定义“块”。

在子页面中通过定义母版中的block名来对应替换母版中相应的内容。

{% block page-main %}<p>花褪残红青杏小</p><p>燕子飞时</p><p>绿水人家绕</p><p>枝上柳绵吹又少</p><p>天涯何处无芳草</p>
{% endblock %}

 

组件

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

{% include 'navbar.html' %}

 

静态文件相关

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

引用JS文件时使用:

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

某个文件多出被用到可以存为一个变量

{% load static %}
{% static "images/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>

 

使用get_static_profix

{% 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")
def plus(a, b, c):return "{} + {} + {}".format(a, b, c)

使用自定义simple tag 

{% load app01_demo %}{# simple tag #}
{% plus "1" "2" "abc" %}

 

inclusion_tag

多用于返回HTML代码片段

示例:

templatetages/my_inclusion.py

from django import templateregister = template.Library()@register.inclusion_tag('result.html')
def show_results(n):n = 1 if n < 1 else int(n)data = ["第{}项".format(i) for i in range(1, n+1)]return {"data": data}

templates/result.html

<ul>{% for choice in data %}<li>{{ choice }}</li>{% endfor %}
</ul>

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>inclusion_tag test</title>
</head>
<body>{% load my_inclusion %}{% show_results 10 %}
</body>
</html>

 

转载于:https://www.cnblogs.com/ALADL/p/9767423.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/451049.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

狗窝里的小日子 ...

来&#xff0c;把平时作的菜菜整理下下&#xff1a; 1. 2. 3. 4. 5. 6. 7. 8.

面试开发人员的有效方法

伯乐在线 写道 "Alan Skorkin是一名软件开发人员&#xff0c;这是他分享的另一篇有关面试和开发人员的文章(中文)。Skorkin 认为&#xff0c;“当要雇佣开发者时&#xff0c;传统的面试方法显得力不从心&#xff0c;这是必须要面对的现实。为什么不行&#xff1f;原因也许…

Android直接用手机打包apk!

你没有看错&#xff0c;用手机浏览器访问Jenkins&#xff0c;就可以打包apk&#xff0c;并生成下载二维码&#xff0c;发送邮件通知测试人员下载&#xff0c;从此解放双手&#xff0c;告别打包测试。先上本人手机邮箱收到的打包成功通知效果图&#xff1a; 废话少说&#xff0c…

java中byte、short、char、boolean实际都是按照int处理的!

byte、char、short、boolean四种类型在汇编期或运行期间采取和int类型一样的存储方式&#xff0c;在计算时会先转换为int类型&#xff0c;后进行计算。所以两个short类型数据做算数运算&#xff0c;结果却为int类型。这主要是因为jvm的字节码为了简洁高效&#xff0c;设计时只使…

4、2 核心组件

1、Stage&#xff1a;虚的  一组RDD构成的链条并行的task集合&#xff0c;同一Stage的所有任务有着相同的Shuffle依赖。阶段的划分按照shuffle标记来进行的。一个阶段含多个RDD&#xff0c;先有RDD后有Stage一个阶段含多个taskstage通过ShuffleDependency划分&#xff0c;一个…

狗窝里的小日子- 2 ...

来&#xff0c;把平时作的菜菜整理下&#xff1a; 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.

优秀程序员必备素质——快速调试

你是否有过这些经历&#xff1a; 1.代码敲完了&#xff0c;刚想松口气&#xff0c;一运行程序&#xff0c;满满的Bug。 2.找啊找啊找&#xff0c;怎么找都找不到哪里出了问题。 3.调试了半天出不来&#xff0c;就开始便得心烦气躁。 4.一天连一个Bug也没调出来&#xff0c;…

Java程序编译运行过程

整体流程 1.首先由源程序文件编译成class文件。注意这里的源程序并不仅限于java程序&#xff0c;其他语言如果能够编译成class文件&#xff0c;并且符合jvm规范也能够在jvm上运行。 2.jvm将class文件拷贝到内存&#xff0c;解释成相应的机器语言运行。我们常用的hotspot虚拟机…

【TeeChart .NET教程】(七)使用函数

2019独角兽企业重金招聘Python工程师标准>>> 上一篇&#xff1a;【TeeChart .NET教程】&#xff08;六&#xff09;使用系列 【下载TeeChart.Net最新版本】 &#xff08;一&#xff09;功能类型 1.1 功能类型 TeeChart Pro功能是一个系列&#xff0c;几乎可以是任何…

Django的简介

一.MTV模型 Django的MTV模式: Model(模型):和数据库相关的.负责业务对象与数据库的对象(ORM) Template(,模板):放所有的HTML文件 模板语法:目的是将变量(数据库内容)如何巧妙的镶嵌到HTML页面中 View(视图):负责业务逻辑,并在适当的时候调用Model和Template 此外Django还有一个…

狗窝里的小日子- 3 ...

来&#xff0c;把平时作的菜菜整理下&#xff1a; 21. 22. 23. 24. 25. 26. 27. 28. 29. 30.

5种流行的Linux发行版:你更喜欢哪一个呢?

现如今&#xff0c;对于各种类型的用户&#xff08;如桌面用户、服务器管理员、图形设计者等&#xff09;而言Linux已经成为一种最流行的操作系统。Linux是免费且开源的&#xff0c;任何人都可以建立和编译它的源代码&#xff0c;并将它分发给别人。这就是为什么Linux会有很多个…

购物商城Web开发第二十三天

今天完成了结算页的第二个页面的编写&#xff0c;买东西的完整流程已完成了页面的部分 后面还差页面的JS部分和后台。 今天没有遇到什么大的困难&#xff0c;有一个问题是CSS的float属性的运用还是不够好&#xff0c;今 天也意识到了一些会产生的问题&#xff0c;以后还需要多注…

java装箱拆箱

所谓的拆箱装箱&#xff0c;其实就是一个简单的语法糖。我们以Integer为?。 &#xff08;一&#xff09;装箱 Integer i 1&#xff1b; 本质上就是&#xff1a; Integer i Integer.valueOf(1); &#xff08;二&#xff09;拆箱 int m i&#xff1b; 本质上就是&…

基于ASP.net耳机网店商城系统(前台页面+后台页面)

源码https://github.com/doublekai/user web文件夹 转载于:https://www.cnblogs.com/doublekai/p/9778246.html

狗窝里的小日子- 4 ...

来&#xff0c;把平时作的菜菜整理下&#xff1a; 31. 32. 33. 34. 35. 36. 37. 38. 39. 40.

硅谷观察者眼中的亚洲

摘要&#xff1a;而印度团队因为语言优势&#xff0c;更多直接涉足在硅谷和全球的创业项目竞争中。去年&#xff0c;她花了大部分时间游历了日本、韩国、中国、印度、新加坡和越南等国家&#xff0c;走访了数百位亚洲的创业者和风险投资商。 即便是如此现场丰富且高度碎片化的亚…

[Web 前端] 解决因inline-block元素导致的空白间距和元素下沉

cp from : https://www.jianshu.com/p/617e78a27c88 ** 前言&#xff1a; ** CSS 中的 display:inline-block 是笔者最为喜欢的元素之一&#xff0c;可以将原本占据一行的块级元素&#xff0c;转变为可以并列显示的行内块级元素。 display:inline-block 常被用来代替float进行页…

我的第一个随笔

自我介绍 Hello&#xff01;大家好破音&#xff0c;我叫单嘉隆&#xff0c;来自地理信息162&#xff0c;兴趣爱好有 看电影&#xff08;豆瓣已刷完&#xff0c;正在看imdb&#xff09;怪物猎人世界&#xff01;偶尔看看书 个人编程能力&#xff1a; 以前看网课大概写了100来行p…

java8中LocalDate、LocalTime、LocalDateTime介绍

很久以前java8中就推出了新的Time API&#xff0c;旨在解决旧版Date和Calendar的缺陷。讲道理真的挺好用的&#xff0c;不过由其他工具对新版time的兼容并不够完善&#xff0c;导致现在使用还不够普及。大家都还在用老的Date类&#xff0c;苦?的封装时间工具函数&#xff0c;感…