模板扩展
另一个有趣的事情Django已经为你做好了就是模板扩展。这是什么意思呢?它意味着你可以使用你的HTML相同代码为你网站不同的网页共享。
通过这种方法,当你想使用同样的信息或布局,或者你想改变某些模板内容时,你不必在每个文件中都重复着相同的代码。你仅仅只需要改变一个文件,而不是所有的。
创建一个基础模板
一个基础模板是最重要的模板,你扩展到你网站的每一页。
让我们创建一个base.html
文件到blog/templates/blog/
:
blog
└───templates
└───blog
base.html
post_list.html
然后将它打开,从post_list.html
中复制所有东西到base.html
文件,就像这样:
{% load staticfiles %}
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</body>
</html>
然后在base.html
中,替换你所有的 <body>
(所有的在<body>
和 </body>
之间的内容)像这样:
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
用如下内容替换所有在 {% for post in posts %}{% endfor %}
之间的代码:
{% block content %}
{% endblock %}
这是什么意思呢? 你刚刚创建了一个block(块)
,这个模板标签允许你在其中插入扩展自base.html
的模板的HTML代码。 我们一会儿将给你展示这个如何使用。
现在保存它,然后再次打开你的blog/templates/blog/post_list.html
。 删除一切body外的代码,然后删除 <div class="page-header"></div>
,此时文件会看起来像这样:
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
然后现在将这行加到文件的开始:
{% extends 'blog/base.html' %}
这意味着我们在 post_list.html
模板文件中扩展了 base.html
模板的内容。 还有一件事:将所有(除了我们刚刚加入的那行) 内容置于{% block content %}
和 {% endblock %}
之间。。 像这样:
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
{% endblock %}
好了,就是它了!检查你的网站还能正常工作:)
如果你有任何错误
TemplateDoesNotExists
这意味着没有blog/base.html
文件,你需要runserver
运行在控制台,尝试去关掉它(通过按下Ctrl+C -Control和C按钮一切)然后重新运行python manage.py runserver
命令行。