【前端】模板继承

最新推荐文章于 2025-05-31 22:32:56 发布

lilydedbb

最新推荐文章于 2025-05-31 22:32:56 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： FE 文章标签：前端

本文链接：https://blog.youkuaiyun.com/lilydedbb/article/details/53817339

FE 专栏收录该内容

2 篇文章

订阅专栏

模板继承在前端开发中用于减少重复结构，提高代码复用。基础模板作为父类，子模板通过{% extends %}继承并重写父模板的{% block %}块。在子模板中，使用{{ super() }}来调用父模板的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模板继承

模版继承可以极大限度减少模版之间重复的结构，比如header, footer, <head></head>等，而且在语法上很简单，不同的模版基本都遵循这样的继承语法。

基础模板

基础模版就相当于继承当中的父类：

block one
    .....
block two
    .....

子模板

子模版就相当于继承当中的子类：

extends super_template
    block one
        .....
    block two
        .....

以 `Jinja` 为例

在这个叫做 layout.html 的模板中定义了一个简单的 HTML 文档骨架，你可以将这个骨架用作一个简单的双栏页面。而子模板负责填充空白的 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 href="http://domain.invalid/">you</a>.
        {% endblock %}
    </div>
</body>

在这个例子中，使用 {% block %} 标签定义了四个子模板可以重载的块。 block 标签所做的的所有事情就是告诉模板引擎:

一个子模板可能会重写父模板的这个部分。

{% 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 %}

是这个例子的关键，它会告诉模板引擎这个模板继承自另一个模板的，模板引擎分析这个模板时首先会定位其父父模板。extends标签必须是模板的首个标签。想要渲染父模板中的模板需要使用 {{ super() }}。

以 `jade` 为例

父模板

html
    head
        h1 My Site - #{title}
        block scripts
            script(src='/jquery.js')
    body
        block content
        block foot
            #footer
                p some footer content

子模版

extends extend-layout

block scripts
    script(src='/jquery.js')
    script(src='/pets.js')

block content
    h1= title
    each pet in pets
        include pet