可以使用你的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>末伏的博客</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 rel="stylesheet" href="{% static 'css/blog.css' %}">
  8.         <link href="https://fonts.googleapis.com/css?family=Baloo+Tammudu" rel="stylesheet">
  9.     </head>
  10.     <body>
  12.     <div class="page-header">
  13.         <h1><a href="/">末伏的博客</a></h1>
  14.     </div>
  16.     <div class="content container">
  17.         <div class="row">
  18.             <div class="col-md-8">
  19.                 {% for post in posts %}
  20.                     <div class="post">
  21.                         <div class="date">
  22.                             {{ post.published_date }}
  23.                         </div>
  24.                         <h1><a href="">{{ post.title }}</a></h1>
  25.                         <div class="neirong">
  26.                         <p>{{ post.text|linebreaksbr }}</p>
  27.                         </div>
  28.                     </div>
  29.                 {% endfor %}
  30.             </div>
  31.         </div>
  32.     </div>
  34.     </body>
  35. </html>

替换 body内的 post内容
20170827150381843974756.png
替换为

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

block是一个块。这个模板标签允许在其中插入扩展自base.html的内模板的HTML代码。

让 post_list.html 引用base.html

删除多余代码

删除{% for post in posts %}...{% endfor %}以外的代码
这个时候，post_list.html里内容如下。

  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 %}

引用 base.html

将这行加到文件的开始：

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

用 block 代码包围 post 代码

  1. {% block content %}
  3. ...post代码...
  5. {% endblock content %}

最后的代码看起来是这样。

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

20170827150381954026630.png

博客显示一切和以前一样

20170827150381957373337.png

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