fastapi: jinja2:模板继承

一，代码：

base.html

<!-- base.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 预留标题块，并可以设置默认值 -->
    <title>{% block title %}我的默认网站{% endblock %}</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>公共导航栏</nav>

    <!-- 预留核心内容块 -->
    <div class="content">
        {% block content %}{% endblock %}
    </div>

    <footer>公共页脚</footer>
</body>
</html>

 

hello.html

<!-- index.html -->
{% extends "layout/base.html" %}

<!-- 重写标题块 -->
{% block title %}首页 - 我的网站{% endblock %}

<!-- 填充核心内容块 -->
{% block content %}
    <h1>欢迎来到首页！</h1>
    <p>这里是具体的网页内容...</p>
{% endblock %}

说明：

1,禁止使用相对路径符号 ..：Jinja2 默认出于安全考虑（防止目录穿越漏洞），通常不支持类似 {% extends "../base.html" %} 的写法。请一律从模板根目录向下查找。

2,在公共的父模板（如 base.html）中，使用 {% block 块名 %}{% endblock %} 来为子模板预留可以填空或修改的位置。

3,在具体的页面模板（如 index.html）中，必须在第一行使用 {% extends "父模板名称" %} 声明继承，然后通过重写对应的 block 来填充内容。

二，测试效果：

image

posted @ 2026-07-12 23:16  刘宏缔的架构森林  阅读(4)  评论(0)    收藏  举报