zoukankan      html  css  js  c++  java
  • 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 %}
            &copy; 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 修饰。



  • 相关阅读:
    webpack 打包性能分析工具
    npm 使用
    npm 构建时,次要版本变化引起的问题
    AtomicStampedReference、AtomicMarkableReference 区别
    vue-cli 中的静态资源处理
    vue-cli 构建项目中 config/index.js 文件解读
    webpack的3个路径配置项: assetsRoot、assetsSubDirectory、assetsPublicPath
    Vue2 dist 目录下各个文件的区别
    DllPlugin、DllReferencePlugin 可以提取的第三方库列表
    JUC集合之 CopyOnWriteArrayList
  • 原文地址:https://www.cnblogs.com/sysnap/p/6555385.html
Copyright © 2011-2022 走看看