为什么我的“extend”不能在Django的html文件中工作?

2024-05-20 17:21:24 发布

您现在位置:Python中文网/ 问答频道 /正文

这真让人恼火。我不知道我做错了什么,也不知道我做错了什么,因为从字面上说我没有错误。但这就是问题所在。我的其他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)教程\u 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)导航栏.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>

正如你所看到的,文件很快就会变得凌乱,甚至还没有完成。我更喜欢使用'扩展'的方式,因为它更容易为我编辑和修改时,必要的。感谢任何帮助


Tags: 文件divtitlehtmljsscriptstaticli
1条回答
网友
1楼 · 发布于 2024-05-20 17:21:24

my view.py serves the 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 %}

把你另外两个“子模板”的内容移到这里

现在,当您呈现“center/main.html”时,它应该按预期工作(当然,除非代码中有其他错误)

顺便说一句:您可能想学习并使用{% url %}templatetag-硬编码URL是个坏主意

相关问题 更多 >