jinja2-模版继承
一 简要
简单的来说模板继承包含基本模板和子模板。其中基本模板里包含了你这个网站里的基本元素的基本骨架,但是里面有一些空的或者是不完善的块(block)需要用子模板来填充。
二 基本模版样例
这个模板,我们会把它叫做 base.html ,定义了一个简单的 HTML 骨架文档
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2008 by <a href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body> 在本例中, {% block %} 标签定义了四个字幕版可以填充的块。所有的 block 标签 告诉模板引擎子模板可以覆盖模板中的这些部分
三 子模版样例
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
子模板没有定义 footer 块,会 使用父模板中的值
可以调用 super 来渲染父级块的内容。这会返回父级块的结果
四 嵌套块和作用域
嵌套块可以胜任更复杂的布局。而默认的块不允许访问块外作用域中的变量:
{% for item in seq %}
<li>{% block loop_item %}{{ item }}{% endblock %}</li>
{% endfor %}
这个例子会输出空的 <li> 项,因为 item 在块中是不可用的。其原因是,如果 块被子模板替换,变量在其块中可能是未定义的或未被传递到上下文。
从 Jinja 2.2 开始,你可以显式地指定在块中可用的变量,只需在块声明中添加 scoped修饰,就把块设定到作用域中:
{% for item in seq %}
<li>{% block loop_item scoped %}{{ item }}{% endblock %}</li>
{% endfor %}
当覆盖一个块时,不需要提供 scoped 修饰。
jinja2-模版继承的更多相关文章
- 5 JInja2模版(适用于Django和Flask)
模版 在生产环节下,我们要把后端程序(其实就是python)计算出来的数据和html页面结合起来做,这个时候模版就派上大用处了. Flask下的模版---Jinja2 Jinja是日本寺庙的意思,并且 ...
- 第四章 Jinja2模版
模板简介: 在之前的章节中,视图函数只是直接返回文本,而在实际生产环境中的页面大多是带有样式和复杂逻辑的HTML代码,这可以让浏览器渲染出非常漂亮的页面.目前市面上有非常多的模板系统,其中最知名好用的 ...
- Jinja2模版语言自定义filter的使用
Jinja2模版语言,自带有一些filter,能够在前端的模版中控制数据按照相应的方式显示.比如以下两种filter,分别能在前端控制数字的近似精度显示和根据字符串长度补齐: round(value, ...
- ansible基础-Jinja2模版 | 过滤器
Jinja2模版介绍 注:本文demo使用ansible2.7稳定版 在ansible基础-变量的「8.2 模版使用变量」章节中关于模版与变量也有所提及,有兴趣的同学可以去回顾一下. ansible通 ...
- Django 模本(Template--for--csrf--if--filter--simple_tag模版继承等)
前提 关于html寻找路线: template 如果在各个APP中存在, Django 会优先找全局template 文件下的html文件,如果全局下的template文件没有相关的html Dja ...
- flask模版继承和block
模版继承和block的目的就是为了减少前端代码量 flask_ones.py #encoding:utf-8 from flask import Flask,url_for,redirect,rend ...
- django系列4.1--模版系统,过滤器,标签,模版继承,组件
django 模版系统 一. 语法 { { 变量 } } {% 表达式 %} 二. 变量 { {变量名} } 深度查询据点符( . )在模版语言中有特殊的含义. 当模版系统遇到点(.) 查询顺序如下: ...
- tornado 模版继承 函数和类的调用
模版继承.函数和类的调用 目录结构 lesson5.py # -*- coding:utf-8 -*- import tornado.web import tornado.httpserver imp ...
- Flask的Jinja2模版过滤器
Jinja2模版过滤器 过滤器是通过管道符号(|)进行使用的,例如:{{ name|length }},将返回name的长度.过滤器相当于是一个函数,把当前的变量传入到过滤器中,然后过滤器根据自己的功 ...
- 测开之路三十:Flask基础之jinja2模板继承
实现某些位置的内容固定,某些位置的内容动态展示,如: 中文文档地址:http://docs.jinkan.org/docs/jinja2/templates.html#template-inherit ...
随机推荐
- ArrayList和CopyOnWriteArrayList(转载)
这篇文章的目的如下: 了解一下ArrayList和CopyOnWriteArrayList的增删改查实现原理 看看为什么说ArrayList查询快而增删慢? CopyOnWriteArrayList为 ...
- Java 面向对象(四)继承
一.继承的概述(Inherited) 1.由来 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那个类即可. 其中,多个类可以称为 子类(派生类 ...
- springboot 上传图片,地址,在页面展示图片
package com.cxwlw.zhcs.controller.api;import org.springframework.stereotype.Controller;import org.sp ...
- 如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用
如果我们手上已经有可以正常工作的OData服务,无论位于ABAP on-premise系统还是public上的internet OData service,都可以用SAP WebIDE里的Fiori创 ...
- with语句和空语句
with语句能够为一组语句创建缺省的对象,在一组语句中,任何不指定对象的属性引用都将被认为是缺省对象. 语法如下: with(object){ statements; } <body> & ...
- 阿里P7告诉你什么是java并发包、线程池、锁
并发包 java.util.concurrent从jdk1.5开始新加入的一个包,致力于解决并发编程的线程安全问题,使用户能够更为快捷方便的编写多线程情况下的并发程序. 同步容器 同步容器只有包括Ve ...
- linux之mariadb的安装
1.概述 mysql为关系型数据库. mysql的分支-- mysql (自己本身) -- 2008前后的被SUN收购 SUN之后又被oracle收购 系统集成--什么都干(- 套解决方案) mari ...
- Signal Processing and Pattern Recognition in Vision_15_RANSAC:Performance Evaluation of RANSAC Family——2009
此部分是 计算机视觉中的信号处理与模式识别 与其说是讲述,不如说是一些经典文章的罗列以及自己的简单点评.与前一个版本不同的是,这次把所有的文章按类别归了类,并且增加了很多文献.分类的时候并没有按照传统 ...
- golang使用sftp连接服务器远程上传、下载文件
安装github.com/pkg/sftp 我们之前介绍了,golang如何通过ssh连接服务器执行命令,下面我们来如何上传文件,上传文件同样需要之前的ssh,但是除此之外还需要一个模块,直接使用go ...
- 2.Vue调试工具vue-devtools的安装步骤和使用
1.安装步骤: 打开谷歌浏览器设置 -->扩展程序 -->勾选开发者模式 --->加载已解压的扩展程序 --->选择“chrome扩展”文件夹即可: