这真令人讨厌。我不知道我在做什么错,哪里错了,因为从字面上看我没有错误。但这是问题所在。我的其他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>
您可以看到该文件很快变得杂乱无章,甚至还没有完成。我更喜欢使用“扩展”方式,因为在必要时我可以更轻松地进行编辑和修改。任何帮助表示赞赏。
答案 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-硬编码网址是个坏主意。