Jinja {% extends %}答案

【问题标题】：Jinja {% extends %}Jinja {% extends %}
【发布时间】：2016-08-11 19:53:20
【问题描述】：

好的，所以我有了第一个 HTML 文件（header.html）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
<body class="body" style="background-color:#f9f9f9">
{% block content %}
    <ul>
        <li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li>
        <li><a href="/movies">Movies</a></li>
        <li><a class="left" href="">Search</a></li>
        <li><a class="left" href="/profile/">Profile</a></li>
        <li><a class="left" href="#about">Explore</a></li>
    </ul>
{% endblock %}
</body>
</html>

然后我有另一个（home.html）：

{% extends "START/header.html" %}

{% block content %}

<p> TEST</p> <!-- for example -->

{% endblock %}

但是当运行第二个时它并没有真正扩展，它看起来像是替换了另一个 HTML 文件正文的内容。背景颜色仍然是我的css文件中的颜色，所以我确定它正在读取它。我错过了什么？

【问题讨论】：

标签： html django jinja2

【解决方案1】：

当您在 home.html 中使用与 header.html 中相同的块标记时，您正在替换正文

{% block content %}

如果你不想替换它，你应该使用不同的名字。

另外你可以使用：

{{ block.super() }}

如果您想扩展块内容数据，请注意这是与扩展模板不同的问题。

【讨论】：

谢谢！我将把 {% block content %} 标签放在 {% endblock %} 之前

【解决方案2】：

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <title>M4A</title>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
    <link rel="icon" href="../../static/image/logo.png">
    </head>

    {% block content %}
     <body class="body" style="background-color:#f9f9f9">
        <ul>
            <li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li>
            <li><a href="/movies">Movies</a></li>
            <li><a class="left" href="">Search</a></li>
            <li><a class="left" href="/profile/">Profile</a></li>
            <li><a class="left" href="#about">Explore</a></li>
        </ul>
     </body>
    {% endblock %}

    </html>

在块内制作body并改变body背景

{% extends "START/header.html" %}

{% block content %}
<body class="body" style="background-color:#f23d49">
    <p> TEST</p> <!-- for example -->
</body>
{% endblock %}

【讨论】：

【解决方案3】：

我不清楚你在期待什么。

Jinja documentation about templates 非常清楚块的作用：

block 标签所做的只是告诉模板引擎子模板可以覆盖模板中的那些占位符。

在您的示例中，基本模板 (header.html) 具有内容块的默认值，即该块内的所有内容。通过在 home.html 中设置一个值，您将覆盖另一个块的默认值。

如果您想在导航菜单下方添加内容，只需将模板改写为以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
<body class="body" style="background-color:#f9f9f9">
    <ul>
    <li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li>
    <li><a href="/movies">Movies</a></li>
    <li><a class="left" href="">Search</a></li>
    <li><a class="left" href="/profile/">Profile</a></li>
    <li><a class="left" href="#about">Explore</a></li>
</ul>
{% block content %}<p>This will appear if you don't set a block in the inheriting template.</p>{% endblock %}
</body>
</html>

【讨论】：