为什么我的“扩展”在Django的html文件中不起作用?

时间:2019-06-13 09:56:18

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

这真令人讨厌。我不知道我在做什么错,哪里错了,因为从字面上看我没有错误。但这是问题所在。我的其他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>

您可以看到该文件很快变得杂乱无章,甚至还没有完成。我更喜欢使用“扩展”方式,因为在必要时我可以更轻松地进行编辑和修改。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:1)

  

我的view.py提供了main.html

然后,您可能想重新阅读该手册,这不是模板继承的工作方式。您可能想要在这里

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

2 /创建一个新的“ center / main.html”模板,该模板仅填充这些块:

singleton

IOW在这里移动其他两个“子模板”的内容。

现在,当您渲染“ 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 %} templatetag-硬编码网址是个坏主意。