Django Girls 教程模板扩展
Django 的另一件有趣的事情就是模板扩展。这意味着什么呢？它意味着你可以在你的网站的不同页面使用 HTML 的相同的部分。
当你想在不止一个地方使用相同的信息和布局，模板可以帮助你。你不必在每个文件中重复着相同的代码。当你想要作出修改，你不必在每个模板里那样做，而仅仅只需要改变一个模板。
创建一个基础模板
一个基础模板是你扩展到你的网站上的每一页上的最基本的模板。
让我们创建一个 base.html 文件到 blog/templates/blog/:
blog
└───templates
└───blog
base.html
post_list.html
然后在代码编辑器将它打开，从 post_list.html 中复制所有东西到base.html 文件，就像这样：
{% load static %}
<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>
<h2><a href="">{{ post.title }}</a></h2>
<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（块）! 你用模板标签{% block %}创建了一个 HTML 可以嵌入的区段。那是来自于另一个模板的 HTML ，用于扩展这个模板 （base.html）。我们一会儿将给你展示如何操作。
现在保存 base.html，然后再次打开你的 blog/templates/blog/post_list.html。 你将需要删除在{% for post in posts %} 上面以及{% endfor %}下面的所有内容。完成之后，文件看起来会像这样：
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
我们想将它作为我们的模板的一部分，用在所有的内容块。是时候为这个文件添加块标记了！
你想要你的块标记能够匹配base.html 的块标记。你也想让它包含所有内容块中的所有代码。为了做到它，将块内所有的内容放在 {% block content %} 和 {% endblock %}之间。像这样:
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
{% endblock %}
只剩下一件事：我们需要将两个模板连接在一起。模板扩展的本质就在于此！我们将通过在文本开头添加一个扩展标记来实现。像这样:
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
{% endblock %}
就是这样！保存文件，检查你的网站是否依旧正确地工作。:blush:
假如你得到
TemplateDoesNotExist的错误，意味着blog/base.html文件不存在，并且你已经在控制台运行runserver。尝试停止运行（同时按下 Ctrl+C –控制键和 C 键) 并运行python manage.py runserver指令重启。
本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：