使用 Django "include" 模板标记作为嵌套 - 副作用?

using Django "include" template tag as nested - side effects?

有没有人知道或有过使用“嵌套包含标签”的不良副作用的经验? (我的意思是包含一个模板文件,它本身包含另一个模板)

例如:

文件x.html:

{% include "z.html" %}

文件y.html:

{% inclide "x.html" %}

没问题!通常在 Django 模板中使用继承。您可以制作一个包含一些块的模板,并在子模板中覆盖块,子模板的子项可以覆盖或使用超级块内容。

我在链接 include 时没有遇到任何问题。如果包含的模板中有具有相似名称的扩展或块,您可能会遇到问题。

不好的副作用是搞乱了 CSS 规则,并且在调试时有些令人头疼。通常最好让它们保持平坦。

x.html:

{% extends "_base.html" %}

{% block main_content %}
    <h1>I am X</h1>

    {% include "includes/z.html" %}
    
{% endblock main_content %}

y.html:

{% block main_content %}
    <h1>I am Y</h1>

    {% include "x.html" %}
    
{% endblock main_content %}

z.html:

<h2>I am Z</h2>

检查代码: https://github.com/almazkun/templating

包含多个模板时没有问题。

例如 base.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    {% block title %}{% endblock %}
  </head>
  <body>
    {% block content %}
    {% endblock %}

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

a.html

<h1>I am from A</h1>

b.html

<h2>I am from B</h2>

c.html

{% extends 'base.html' %}
{% load static %}
{% block title %}<title>Welcome in C!</title>{% endblock %}
<h3>I am from C . I am mother of A and B </h3>
{% block content %}
{% include 'a.html' %}
{% include 'b.html' %}
{% endblock %}

我认为你混淆了 includeextends

从逻辑上讲,在 base.html 之类的地方使用时扩展模板非常好,如果您设计模板的方式允许您为某些部分扩展某些基础 html 文件你的网站。这通常是在他们分享了 html 的片段时,例如主 css 块、元块、脚本块等。

您可以延长 n 次。

您对 include 感到困惑的地方在于,它更多地用于包含附加代码片段或某种“插入式”代码片段,很好的例子是侧边栏、导航栏,甚至自定义 css 或 javascript!

问题是,您是要共享 html 片段,还是要将额外的片段添加到某些部分而不是其他部分?

如果是后者,你需要包含,对于前者,你需要扩展。

编辑 #1: 您要求澄清上述两个模板标签的缺点。当我坐在这里思考这个问题时,我想不出使用 includeextends 有什么明显的缺点,前提是你已经在应该使用它们的地方使用了它们。如果您使用了包含,实际上您应该使用扩展模板,您可能会发现,正如其他人的回答中所述,css 规则可能不会按照您期望的方式应用。

问题是关于嵌套的 include 标签,答案显示“如果您知道您期望什么以及如何处理它,就没有实际问题”。

the docs 中有一段关于设置一些限制的 include 标签,但是:

The include tag should be considered as an implementation of “render this subtemplate and include the HTML”, not as “parse this subtemplate and include its contents as if it were part of the parent”. This means that there is no shared state between included templates – each include is a completely independent rendering process.

  • 在渲染和解析方面努力维持生计:

  • 即使对于大型前端框架,如 React,也是一个复杂的问题。