Flask 模板繼承

2021-08-11 10:11 更新

Jinja 最為強(qiáng)大的地方在于他的模板繼承功能，模板繼承允許你創(chuàng)建一個(gè)基礎(chǔ)的骨架模板， 這個(gè)模板包含您網(wǎng)站的通用元素，并且定義子模板可以重載的 blocks 。

聽(tīng)起來(lái)雖然復(fù)雜，但是其實(shí)非常初級(jí)。理解概念的最好方法就是通過(guò)例子。

基礎(chǔ)模板

在這個(gè)叫做 layout.html 的模板中定義了一個(gè)簡(jiǎn)單的 HTML 文檔骨架，你可以 將這個(gè)骨架用作一個(gè)簡(jiǎn)單的雙欄頁(yè)面。而子模板負(fù)責(zé)填充空白的 block:

<!doctype html>
<html>
  <head>
    {% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='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 2010 by <a  rel="external nofollow" target="_blank" >you</a>.
    {% endblock %}
  </div>
</body>

在這個(gè)例子中，使用 {% block %} 標(biāo)簽定義了四個(gè)子模板可以重載的塊。 block 標(biāo)簽所做的的所有事情就是告訴模板引擎: 一個(gè)子模板可能會(huì)重寫(xiě)父模板的這個(gè)部分。

子模板

子模板看起來(lái)像這個(gè)樣子:

{% extends "layout.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.
{% endblock %}

{% extends %} 是這個(gè)例子的關(guān)鍵，它會(huì)告訴模板引擎這個(gè)模板繼承自另一個(gè)模板的， 模板引擎分析這個(gè)模板時(shí)首先會(huì)定位其父父模板。extends 標(biāo)簽必須是模板的首個(gè)標(biāo)簽。 想要渲染父模板中的模板需要使用 {{ super() }}。

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)