Flask 學習系列（四）---Jinjia2 模板繼承

阿新 • • 發佈：2017-11-05

list size border padding sub -- margin nbsp 中文

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>

Flask 學習系列（四）---Jinjia2 模板繼承

list size border padding sub -- margin nbsp 中文 1.基模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

Flask 學習系列（三）---Jinjia2使用過濾器

ide 數位指定字段模板小數 else capital 12px 效果圖再Jinjia2中過濾器是一種轉變變量輸出內容的技術。··過濾器通過管道符號“|與變量鏈接，並且可以通過圓括號傳遞參數” 。舉例說明： {{my_variable|default(‘my_var

flask學習筆記（四）：渲染模板和引數

1、渲染模板需要先匯入render_templatem模組，然後先在檔案所在目錄建立一資料夾，命名為templates，然後在資料夾中新建一個html網頁檔案。（渲染時框架會自動尋找網頁檔案，不必新增"templates"這個路徑，這是由flask框架決定的） &l

C語言學習系列（四）C語言基本語法和數據類型

.html 二進制占用 efault html pac 精度 es2017 %d 一、基本語法 C的令牌（Tokens）　　C 程序由各種令牌組成，令牌可以是關鍵字、標識符、常量、字符串值，或者是一個符號。關鍵字（保留字） auto else long swit

Html5 學習系列（四）文件操作API

activex 出了 1.0 for AD con dsta buffer 們的原文:Html5 學習系列（四）文件操作API 引言在之前我們操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技術，由於使用了這些技術後

日誌學習系列（四）——NLog實例

bsp 分享安裝不想介紹 simple get sim 解決方案具體不想介紹了，新建一個解決方案，直接用NuGet安裝就行了具體項目代碼可以在https://github.com/qiuxianhu/SimpleNLog下載日誌學習系列（四）——NLo

分散式快取技術redis學習系列（四）——redis高階應用（叢集搭建、叢集分割槽原理、叢集操作）

Redis叢集簡介 Redis 叢集是3.0之後才引入的，在3.0之前，使用哨兵（sentinel）機制（本文將不做介紹，大家可另行查閱）來監控各個節點之間的狀態。Redis 叢集可謂是讓很多人久等了。 Redis 叢集是一組能進行資料共享的Redis 例項（

Flask學習筆記（四）

進入虛擬環境我的電腦的虛擬環境在F盤裡，命令列進入F盤後，直接打入Virtualenv\flask-env\Scripts\activate即可進入我的虛擬環境中使用flask。退出虛擬環境：deactivate flask_sqlalchemy（連線資料庫

docker學習系列（四）製作基礎的base專案映象--jdk+tomcat

前面已經完成了docker的安裝以及使用，現在我們要將自己的javaweb專案與docker結合 1.1準備jdk+tomcat軟體我下載了apache-tomcat-7.0.68.tar.gz

zookeeper學習系列（四）zookeeper資料模型

本文主要講述ZooKeeper的資料模型，包括ZooKeeper的資料檢視，節點的層次結構以及節點型別等基本屬性。Zookeeper的檢視結構類似標準的Unix檔案系統，但是沒有引入檔案系統相關概念

SpringBoot入門系列（四）整合模板引擎Thymeleaf

前面介紹了Spring Boot的優點，然後介紹瞭如何快速建立Spring Boot 專案。不清楚的朋友可以看看之前的文章：https://www.cnblogs.com/zhangweizhong/category/1657780.html。今天我們主要來看看 Thymeleaf 在 Spring Boo

c++學習總結（四）——運算子過載與標準模板庫（STL）

一、心得總結運算子過載使得使用者自定義的資料以一種更簡潔的方式工作。例如在做ATM模擬系統時，使用過載“<”來比較時間，可以簡化程式，減少程式碼。另外，我們也可以過載運算子函式，將運算子用於操作自定義的資料型別。過載運算子函式可以對運算子做出新的解釋，即定義使用

零基礎學習OpenGL（四）--模板測試

模板測試在深度測試之前。當片段著色器處理完一個片段後，模板測試會開始執行，被保留下來的才會進入深度測試。模板測試對應模板緩衝。模板緩衝：每個模板值8位表示，這樣每個片段就有2的8次方，2

各種音視訊編解碼學習詳解之編解碼學習筆記（四）：Mpeg系列——Mpeg 4

最近在研究音視訊編解碼這一塊兒，看到@bitbit大神寫的【各種音視訊編解碼學習詳解】這篇文章，非常感謝，佩服的五體投地。奈何大神這邊文章太長，在這裡我把它分解成很多小的篇幅，方便閱讀。大神部落格傳送門：https://www.cnblogs.com/skyofbitbit

flask（四）jinja2模板

from flask import Flask,render_template @app.route("/index/") def index(): return render_template("",) render_templ

深度學習目標檢測(object detection)系列（四） Faster R-CNN

Faster R-CNN簡介 RBG團隊在2015年，與Fast R-CNN同年推出了Faster R-CNN，我們先從頭回顧下Object Detection任務中各個網路的發展，首先R-CNN用分類+bounding box解決了目標檢測問題，SP

室內定位系列（四）——位置指紋法的實現（測試各種機器學習分類器）

位置指紋法中最常用的演算法是k最近鄰（kNN）。本文的目的學習一下python機器學習scikit-learn的使用，嘗試了各種常見的機器學習分類器，比較它們在位置指紋法中的定位效果。匯入資料 # 匯入資料 import numpy as np import scipy.io as scio offl

Django 學習筆記（四）模板變數

關於Django模板變數官方網址：https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.傳入普通變數在hello/Hello World/temlplates/index.html中，修改html檔案 <!DOCTYPE h

flask學習筆記（六）：繼承模板和block的使用

繼承的作用就是為了少寫一些重複的程式碼，例如導航欄的實現就需要在模板中定義一個導航欄，其他頁面使用繼承即可：新建一個base.html，而block main的部分就是導航欄下每個頁面不同的介面，由每個頁面負責實現。剩下的index和login頁面通過對base的繼承

深度學習基礎系列（四）之 sklearn SVM

1、背景 1.1 最早是由 Vladimir N. Vapnik 和 Alexey Ya. Chervonenkis 在1963年提出 1.2 目前的版本(soft margin)是由Corinna Cortes 和 Vapnik在1993年提出，並在199

Flask 學習系列（四）---Jinjia2 模板繼承

相關推薦