Flask 学习系列（四）---Jinjia2 模板继承

1.基模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基模板</title>
    <style type="text/css">
        /* DIVCSS5-CSS初始化模板-www.divcss5.com */
        body, div, ul, li {
            margin: 0;
            padding: 0;
            font-style: normal;
            font: 12px/22px "\5B8B\4F53", Arial, Helvetica, sans-serif
        }

        /* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
        ol, ul, li {
            list-style: none
        }

        img {
            border: 0;
            vertical-align: middle
        }

        body {
            color: #000000;
            background: #FFF;
            text-align: center
        }

        .clear {
            clear: both;
            height: 1px;
            width: 100%;
            overflow: hidden;
            margin-top: -1px
        }

        a {
            color: #000000;
            text-decoration: none
        }

        a:hover {
            color: #BA2636
        }

        .red, .red a {
            color: #F00
        }

        .lan, .lan a {
            color: #1E51A2
        }

        .pd5 {
            padding-top: 5px
        }

        .dis {
            display: block
        }

        .undis {
            display: none
        }

        ul#nav {
            width: 100%;
            height: 60px;
            background: #00A2CA;
            margin: 0 auto
        }

        ul#nav li {
            display: inline;
            height: 60px
        }

        ul#nav li a {
            display: inline-block;
            padding: 0 20px;
            height: 60px;
            line-height: 60px;
            color: #FFF;
            font-family: "\5FAE\8F6F\96C5\9ED1";
            font-size: 16px
        }

        ul#nav li a:hover {
            background: #0095BB
        }

    </style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.divcss5.com/">首页</a></li>
<li><a href="http://www.divcss5.com/html/">HTML教程</a></li>
<li><a href="http://www.divcss5.com/rumen/">CSS基础</a></li>
<li><a href="http://www.divcss5.com/css-tool/">CSS开发工具</a></li>
<li><a href="http://www.divcss5.com/css-texiao/">CSS特效</a></li>
<li><a href="http://www.divcss5.com/wenji/">CSS问题</a></li>
</ul>
<div>
    {% block conent %}{% endblock %}

</div>
</body>
</html>

block 是子模板关键字，content在子模板块名称。

不能砸同一个模板中定义多个同名的block标签。

子模板

{% extends "base.html" %}
{% block conent %}
    <p class="import">
        我是在子模板中
    </p>
{% endblock %}

extends 继承父模板的关键字，该标签必须是子模板中的第一个标签。

渲染子模板的python代码：

@app.route("/sub")def subhtml():   return render_template("sub.html",site_name="繼承測試")

运行截图：

渲染后子页面的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基模板</title>
    <style type="text/css">
        /* DIVCSS5-CSS初始化模板-www.divcss5.com */
        body, div, ul, li {
            margin: 0;
            padding: 0;
            font-style: normal;
            font: 12px/22px "\5B8B\4F53", Arial, Helvetica, sans-serif
        }

        /* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
        ol, ul, li {
            list-style: none
        }

        img {
            border: 0;
            vertical-align: middle
        }

        body {
            color: #000000;
            background: #FFF;
            text-align: center
        }

        .clear {
            clear: both;
            height: 1px;
            width: 100%;
            overflow: hidden;
            margin-top: -1px
        }

        a {
            color: #000000;
            text-decoration: none
        }

        a:hover {
            color: #BA2636
        }

        .red, .red a {
            color: #F00
        }

        .lan, .lan a {
            color: #1E51A2
        }

        .pd5 {
            padding-top: 5px
        }

        .dis {
            display: block
        }

        .undis {
            display: none
        }

        ul#nav {
            width: 100%;
            height: 60px;
            background: #00A2CA;
            margin: 0 auto
        }

        ul#nav li {
            display: inline;
            height: 60px
        }

        ul#nav li a {
            display: inline-block;
            padding: 0 20px;
            height: 60px;
            line-height: 60px;
            color: #FFF;
            font-family: "\5FAE\8F6F\96C5\9ED1";
            font-size: 16px
        }

        ul#nav li a:hover {
            background: #0095BB
        }

    </style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.divcss5.com/">首页</a></li>
<li><a href="http://www.divcss5.com/html/">HTML教程</a></li>
<li><a href="http://www.divcss5.com/rumen/">CSS基础</a></li>
<li><a href="http://www.divcss5.com/css-tool/">CSS开发工具</a></li>
<li><a href="http://www.divcss5.com/css-texiao/">CSS特效</a></li>
<li><a href="http://www.divcss5.com/wenji/">CSS问题</a></li>
</ul>
<div>

    <p class="import">
        我是在子模板中
    </p>

</div>
</body>
</html>

时间： 2024-11-05 18:48:17

Flask 学习系列（四）---Jinjia2 模板继承的相关文章

Flask 学习（四）静态文件

Flask 学习(四)静态文件动态 web 应用也需要静态文件,一般是 CSS 和 JavaScript 文件.理想情况下你的服务器已经配置好提供静态文件的服务. 在开发过程中, Flask 也能做好这个工作. 静态文件引用我们先来看下普通的 html 引用静态文件,如 css(js也同样,就不多加示例了),以下为一简单实例,直接打开html: flask 处理 —— static 若直接将该html 当成 flask 模板,相对路径自然就失效了,静态文件将不会被成功读取. 那在flask中

Identity Server4学习系列四之用户名密码获得访问令牌

1.简介 Identity Server4支持用户名密码模式,允许调用客户端使用用户名密码来获得访问Api资源(遵循Auth 2.0协议)的Access Token,MS可能考虑兼容老的系统,实现了这个功能,但是不建议这么做. 2.实战一服务端配置接着Identity Server4学习系列三的基础上,直接扩展里面的项目代码,让服务端同时支持密钥认证和用户名密码认证第一步:扩展ThirdClients类,如下: /// <summary> /// 配置可以访问IdentityServer4

Flask 学习系列（三）---Jinjia2使用过滤器

再Jinjia2中过滤器是一种转变变量输出内容的技术.··过滤器通过管道符号"|与变量链接,并且可以通过圆括号传递参数" .举例说明: {{my_variable|default('my_variable is not defined')}} my_variable 为变量,default为过滤器,my_variable is not defined是过滤器的参数.default过滤器的含义是:判断被转换的变量是否被定义过,如果没有被定义,则用字符串参数替换被转换的变量. 下面列出几个

Vue学习系列(四)——理解生命周期和钩子

前言在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过实例,探究vue的生命周期. 万物皆有灵,世间万物都拥有灵魂,小到山河湖海,花草树木,蚂蚁到人类,以及所有的动植物,大到地球星空和宇宙,都拥有灵魂,可以说他们都是有生命的,只是他们的生命形态是我们人类所不能理解的存在.在生产中,生命周期通俗来讲,就是从自然中来回到自然中去的全过程,也就是从采集材料设

Android SDK范例源码学习系列四 AppNavigation

(本系列基于Jelly Bean,Android OS4.2,API 17版本) 就算是最简单的应用程序也会拥有不止一项功能,因此我们经常要应对多个Activity.主Activity随应用程序启动而启动,可以通过触发事件开启另外的Activity.要想激活应用中的某个特定组件,可以用显式命名的Intent来实现,也可以采用隐式Intent,尽可能选用隐式的,它能为模块化功能提供强大的框架. 隐式Intent不需要指定要使用哪个组件,它们通过过滤器指定所需的功能,而Android系统必须决定使

[jQuery学习系列四 ]4-Jquery学习四-事件操作

前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷青年中国说 SELF格致论道参考:http://www.365mini.com/page/tag/jquery-event-methods 1,readyready()函数用于在当前文档结构载入完毕后立即执行指定的函数.该函数的作用相当于window.onload事件. 2,blindbind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数.举例:

Mysql++学习（四）------模板查询

MySQL++提供的另外一个强大的功能就是模板查询,它提供像c语言中printf类似的机制:你提供给MySQL++一个包含固定串和变量占位符的查询字符串,之后可以替换这些占位符的变量. 下面例子显示了如何使用这一特性 1 #include <iostream> 2 #include <mysql++.h> 3 #include <errno.h> 4 #include <stdlib.h> 5 #include <stdio.h> 6 7 usi

Maven学习小结(四聚合与继承)

1.聚合一次构建多个项目模块,将多个Maven项目合并为一个大的项目. 2.继承为了消除重复,把很多相同的配置提取出来,例如groupid和version: 3.示例 3.1创建4个Maven项目,放在相同的目录下,其中hello_parent为父项目(聚合模块),hello_1/hello_2/hello_3为子项目(被聚合的模块):hello_parent的POM既是聚合POM,又是父POM这么做主要是为了方便. 3.1.1 hello_parent项目POM <project xmln

maven学习笔记四(聚合和继承)

聚合现在假如,我创建了3个maven项目, user-core.2.user-log,3.user-service 这个时候,假如我们要打包这些项目,要一个一个来,会很麻烦.那么我们有没有更好的办法通过只打包一个,来让其他都打包呢?ma 这个时候,我们就可以利用maven的聚合特性来实现.新建一个空的maven项目.如下图: 创建完毕后,打开pom.xml编写如下的配置: 这个时候,我们只需要执行这一个空的maven项目即完成了所有的项目的打包. 继承现在假如,我创建了3个maven项目,