为什么我的“扩展”不能在 django 的 html 文件中工作？答案

【问题标题】：Why isn't my 'extend' working in html file in django?为什么我的“扩展”不能在 django 的 html 文件中工作？
【发布时间】：2019-06-13 09:56:18
【问题描述】：

这真的很烦人。我不知道我做错了什么，什么是错的，因为从字面上看，我没有收到任何错误。但这就是问题所在。我的其他 html 文件没有显示在 main.html 文件中。这是三个文件：

1)main.html

{% load static %}
<link href="{% static 'tinymce/css/prism.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!DOCTYPE html>
<head>
<title></title>
</head>
<html>
  <body>
    {% block nav_bar %}
    {% endblock %}
    {% block tutorial_blocks %}
    {% endblock %}
    <script src="{% static 'tinymce/js/prism.js' %}"></script>
  </body>
</html>

2)tutorial_blocks.html

{% extends 'center/main.html' %}
{% block tutorial_blocks %}
{% for x in tutorials %}
    <div class="col s12 m6 l4">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title"><b>{{ x.tutorial_title|safe }}</b></span>
            <p><font color="black">{{ x.tutorial_content|safe }}</font></p>
            <p>Uploaded: <i>{{ x.tutorial_published }}</i></p>
        </div>
        <!--
        <div class="card-action">
          <a href="#">Visit</a>
        </div>
        -->
      </div>
    </div>
  {% endfor %}
{% endblock %}

3)nav_bar.html

{% extends 'center/main.html' %}
{% block nav_bar %}
<nav>
    <div class="nav-wrapper">
      <a href="/" class="brand-logo">Tutorials!</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="/">Home</a></li>
        <li><a href="/register">Register</a></li>
        <li><a href="/login">Login</a></li>
      </ul>
    </div>
</nav>
{% endblock %}

每当我运行服务器时，我都会收到一个空白页。但是，如果我这样做，它可以工作：

{% load static %}
<link href="{% static 'tinymce/css/prism.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!DOCTYPE html>
<head>
    <title></title>
</head>
<html>
<body>
<nav>
    <div class="nav-wrapper">
      <a href="/" class="brand-logo">Tutorials!</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="/">Home</a></li>
        <li><a href="/register">Register</a></li>
        <li><a href="/login">Login</a></li>
      </ul>
    </div>
</nav>
{% for x in tutorials %}
    <div class="col s12 m6 l4">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title"><b>{{ x.tutorial_title|safe }}</b></span>
            <p><font color="black">{{ x.tutorial_content|safe }}</font></p>
            <p>Uploaded: <i>{{ x.tutorial_published }}</i></p>
        </div>
        <!--
        <div class="card-action">
          <a href="#">Visit</a>
        </div>
        -->
      </div>
    </div>
  {% endfor %}
<script src="{% static 'tinymce/js/prism.js' %}"></script>
</body>
</html>

如您所见，文件很快变得凌乱，甚至还没有完成。我更喜欢使用“扩展”方式，因为在必要时更容易编辑和修改。任何帮助表示赞赏。

【问题讨论】：

您的视图提供什么模板？如果是main.html，则不包含其他两个模板。您必须为此使用include 标签。
@Lomtrur 是的，我的 view.py 服务于 main.html。我在哪里使用包含标签？
"是的，我的 view.py 服务于 main.html" => 那么它显然不会工作。 “我在哪里使用包含标签？” =>实际上可能不是解决方案......
@brunodesthuilliers 那么解决方案是什么？
这就是我现在真正想的xD

标签： python django python-3.x django-templates

【解决方案1】：

我的 view.py 服务于 main.html

您可能想重新阅读手册，这不是模板继承的工作方式。你可能想要的是

1/ 将“center/main.html”重命名为“center/base.html”

2/ 创建一个新的“center/main.html”模板来填充块：

{% extends 'center/base.html' %}

{% block tutorial_blocks %}
{% for x in tutorials %}
    <div class="col s12 m6 l4">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title"><b>{{ x.tutorial_title|safe }}</b></span>
            <p><font color="black">{{ x.tutorial_content|safe }}</font></p>
            <p>Uploaded: <i>{{ x.tutorial_published }}</i></p>
        </div>
        <!--
        <div class="card-action">
          <a href="#">Visit</a>
        </div>
        -->
      </div>
    </div>
  {% endfor %}
{% endblock %}
{% block nav_bar %}
<nav>
    <div class="nav-wrapper">
      <a href="/" class="brand-logo">Tutorials!</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="/">Home</a></li>
        <li><a href="/register">Register</a></li>
        <li><a href="/login">Login</a></li>
      </ul>
    </div>
</nav>
{% endblock %}

IOW 将其他两个“子模板”的内容移到此处。

现在，当您渲染“center/main.html”时，它应该可以按预期工作（当然，除非您的代码中还有其他问题）。

附带说明：您可能想学习和使用 {% url %} 模板标签 - 硬编码网址是个坏主意。

【讨论】：