Jinja {% extends %}

新手上路,请多包涵

好的,我有了第一个 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 文件中的颜色,所以我确定它正在读取它。我错过了什么?

原文由 Miguel Antunes 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 308
2 个回答

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

{% block content %}

如果您不想替换它,您应该使用不同的名称。

此外,您还可以使用:

 {{ block.super() }}

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

原文由 lapinkoira 发布,翻译遵循 CC BY-SA 4.0 许可协议

    <!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>

在块中制作身体并改变身体背景

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

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

原文由 Pushpendra Kumar 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏