模板扩展

另一个有趣的事情Django已经为你做好了就是模板扩展。这是什么意思呢？它意味着你可以使用你的HTML相同代码为你网站不同的网页共享。

通过这种方法，当你想使用同样的信息或布局，或者你想改变某些模板内容时，你不必在每个文件中都重复着相同的代码。你仅仅只需要改变一个文件，而不是所有的。

创建一个基础模板

一个基础模板是最重要的模板，你扩展到你网站的每一页。

让我们创建一个base.html文件到blog/templates/blog/:

  1.     blog
  2.     └───templates
  3.         └───blog
  4.                 base.html
  5.                 post_list.html

然后将它打开，从post_list.html中复制所有东西到base.html文件，就像这样：

  1.     {% load staticfiles %}
  2.     <html>
  3.         <head>
  4.             <title>Django Girls blog</title>
  5.             <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  6.             <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  7.             <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  8.             <link rel="stylesheet" href="{% static 'css/blog.css' %}">
  9.         </head>
  10.         <body>
  11.             <div class="page-header">
  12.                 <h1><a href="/">Django Girls Blog</a></h1>
  13.             </div>
  15.             <div class="content container">
  16.                 <div class="row">
  17.                     <div class="col-md-8">
  18.                     {% for post in posts %}
  19.                         <div class="post">
  20.                             <div class="date">
  21.                                 {{ post.published_date }}
  22.                             </div>
  23.                             <h1><a href="">{{ post.title }}</a></h1>
  24.                             <p>{{ post.text|linebreaksbr }}</p>
  25.                         </div>
  26.                     {% endfor %}
  27.                     </div>
  28.                 </div>
  29.             </div>
  30.         </body>
  31.     </html>

然后在base.html中，替换你所有的 <body>(所有的在<body> 和 </body>之间的内容)像这样：

  1.     <body>
  2.         <div class="page-header">
  3.             <h1><a href="/">Django Girls Blog</a></h1>
  4.         </div>
  5.         <div class="content container">
  6.             <div class="row">
  7.                 <div class="col-md-8">
  8.                 {% block content %}
  9.                 {% endblock %}
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </body>

用如下内容替换所有在 {% for post in posts %}{% endfor %}之间的代码：

  1.     {% block content %}
  2.     {% endblock %}

这是什么意思呢？ 你刚刚创建了一个block（块），这个模板标签允许你在其中插入扩展自base.html的模板的HTML代码。 我们一会儿将给你展示这个如何使用。

现在保存它，然后再次打开你的blog/templates/blog/post_list.html。 删除一切body外的代码，然后删除 <div class="page-header"></div>，此时文件会看起来像这样：

  1.     {% for post in posts %}
  2.         <div class="post">
  3.             <div class="date">
  4.                 {{ post.published_date }}
  5.             </div>
  6.             <h1><a href="">{{ post.title }}</a></h1>
  7.             <p>{{ post.text|linebreaksbr }}</p>
  8.         </div>
  9.     {% endfor %}

然后现在将这行加到文件的开始：

  1.     {% extends 'blog/base.html' %}

{% raw %}这意味着我们在 post_list.html模板文件中扩展了 base.html 模板的内容。 还有一件事：将所有(除了我们刚刚加入的那行) 内容置于{% block content %}和 {% endblock %}之间。。 像这样:{% endraw %}

  1.     {% extends 'blog/base.html' %}
  3.     {% block content %}
  4.         {% for post in posts %}
  5.             <div class="post">
  6.                 <div class="date">
  7.                     {{ post.published_date }}
  8.                 </div>
  9.                 <h1><a href="">{{ post.title }}</a></h1>
  10.                 <p>{{ post.text|linebreaksbr }}</p>
  11.             </div>
  12.         {% endfor %}
  13.     {% endblock %}

好了，就是它了！检查你的网站还能正常工作：）

如果你有任何错误 TemplateDoesNotExists 这意味着没有 blog/base.html 文件，你需要 runserver 运行在控制台，尝试去关掉它（通过按下Ctrl+C -Control和C按钮一切）然后重新运行python manage.py runserver 命令行。