之前说到index.html和post.html中有很多重复的内容，如果要修改布局两个网页都要修改，这就很麻烦。因此，把每一个页面共同的部分独立出来成为另一个文件，才是正确的做法。
文件名用途说明base.html网站的基础模板，提供网站的主要设计、外观风格header.html网站中每一个网页共享的标题元素，通常是放置网站logo的地方footer.html网站中每一个网页的共享页尾，用来放置版权声明或其他参考信息index.html此范例网站的首页post.html范例网站用来展示单篇文章的页面base.html的内容
{# base.html #} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> {% block title %}{% endblock %} </title> </head> <body> {% include 'header.html' %} {% block headmessage %}{% endblock %} <hr> {% block content %}{% endblock %} <hr> {% include 'footer.html' %} </body> </html>index.html的内容
{# index.html #} {% extends 'base.html' %} {% block title %}欢迎光临我的博客{% endblock %} {% block headmessage %} <h3>本站文章列表</h3> {% endblock %} {% block content %} {% for post in posts %} <p> <a href="/post/{{ post.slug }}">{{ post.title }}</a> </p> {% endfor %} {% endblock %}post.html的内容
{% extends 'base.html' %} {% block title %}{{ post.title }} - 文学天地{% endblock %} {% block headmessage %} <h3>{{ post.title }}</h3> <a href="/">回首页</a> {% endblock %} {% block content %} <p>{{ post.body }}</p> {% endblock %}header.html的内容
<h1>欢迎光临 文学天地</h1>footer.html的内容
{% block footer %} {% if now %} <p>现在时刻：{{ now }}</p> {% else %} <p>本文内容取自网络，如有侵权请来信通知下架</p> {% endif %} {% endblock %}使用共同模板功能的网站如图所示
我们统一将这类文件(.js .css .jpg .png)放在static文件夹下，.js放在js子目录，.css放在css子目录，图像文件放在images子目录中。在settings.py中，加入一下配置
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]在base.html中引入bootstrap cdn，然后使用Panel来安排首页的外观
{# base.html #} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> {% block title %}{% endblock %} </title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> {% include 'header.html' %} <div class="row"> <div class="col-sm-4 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3>MENU</h3> </div> <div class="panel-body"> <div class="list-group"> <a href="/" class="list-group-item">HOME</a> <a href="#" class="list-group-item">新闻</a> <a href="#" class="list-group-item">新闻</a> </div> <script type="text/javascript" src="http://feedjit.com/serve/?vv=1515&tft=3&dd=0&wid=&pid=0&proid=0&bc=FFFFFF&tc=000000&brd1=012B6B&lnk=135D9E&hc=FFFFFF&hfc=2853A8&btn=C99700&ww=190&wne=6&srefs=0"></script> <noscript><a href="http://feedjit.com/">Live Traffic Stats</a></noscript> </div> </div> </div> <div class="col-sm-8 col-md-8"> <div class="panel panel-default"> <div class="panel-heading"> {% block headmessage %}{% endblock %} </div> <div class="panel-body"> {% block content %}{% endblock %} </div> <div class="panel-footer"> {% include 'footer.html' %} </div> </div> </div> </div> </div> </body> </html>将header.html修改为如下
{% load static %} <div class="well"> <img src="{% static 'images/logo.png' %}"> </div>首页效果如下
在博客网站中，每一篇标题下显示都会显示这篇文章的摘要。一般显示摘要有两种方式，一种是直接在定义数据库的时候，同时把这个字段给定义了。另一种方式是用模板引擎的过滤器截取文章的一部分内容进行显示。
我们希望在显示的首页文章中可以列出摘要，也需要显示出文章的发布时间，所以我们可以使用truncatechars和date这两个过滤器。
除此之外，改进后的主页面希望可以让每篇文章的标题、摘要以及发布时间有整体感，因为他们属于同一篇文章的3个显示项目，通过bootstrap中的panel设置，分别设置为panel的heading、body和footer。此外，也会这只背景颜色，让每篇文章能够进行区分
index.html内容如下
{# index.html #} {% extends 'base.html' %} {% block title %}欢迎光临我的博客{% endblock %} {% block headmessage %} <h3>本站文章列表</h3> {% endblock %} {% block content %} {% for post in posts %} <div class="panel panel-default"> <div class="panel-heading"> <p> <a href="/post/{{ post.slug }}">{{ post.title }}</a> </p> </div> <div class="panel-body" style="background-color: #ffffdd"> <p> {{ post.body | truncatechars:40 }} </p> </div> <div class="panel-footer" style="background-color: #efefef"> <p> 发布时间：{{ post.pub_date | date:"Y M d, h:m:s" }} </p> </div> </div> {% endfor %} {% endblock %}效果如图所示
文章所用到的图片文件以从第三方图像文件服务网站（例如：imgur.com）获取为主。也就是说，所有需要张贴的图片文件，在处理后上传到该网站，取得连接后再放到我们的文章中。
增加博客文章时，可在适当的地方直接粘贴此段html程序代码
将鼠标放在图片上，找到getsharelink 将代码像下图这样写，就相当于放入图片了。 然后还要修改post.html，不然显示的不是图片，而是文字 加上safe后，放入的图片就可以顺利地显示在文章中了。
先安装django-markdown-deux
pip install django-markdown-deux在settings.py中加入该文件
修改post.html，将safe过滤器换成markdown
{% extends 'base.html' %} {% load markdown_deux_tags %} {% block title %}{{ post.title }} - 文学天地{% endblock %} {% block headmessage %} <h3>{{ post.title }}</h3> <a href="/">回首页</a> {% endblock %} {% block content %} <p>{{ post.body | markdown }}</p> {% endblock %}修改成markdown语句
由于首页显示页面是index.html，我们没有进行解读，所以只在post.html中有效
