Django2练习项目：开发个人博客系统（3）

这一篇教程，我们一起为项目创建模板，也就是我们最终用来呈现数据的页面。

因为，我们是通过Django2搭建一个个人博客系统，首先要考虑的是个人博客所包含的页面以及页面的布局、功能与元素。

我们再来看一下我们的项目结构：

根据这张图中包含的页面与页面结构，我们进行页面布局，并将相同的部分抽象为模板。

1、布局规划

一个网站的外观应该有统一布局，整个站点才会显得协调一致。

根据上面结构图中列出的页面，我们规划整体的布局和每个页面的布局。

2、模板组成

有了上面的布局，我们把布局中的每一块通用内容做成页面的子模板。

这些模板包括：

导航栏：nav.html

底部：bottom.html

侧边栏：sidebar.html

分页条：paginator.html

另外，为了不在每个页面模板中都重复一些相同的HTML代码以及包含这么多的模板，我们还需要创建一个基本模板。

base.html

完成这些模板之后，我们再分别创建具体页面的模板：

这些模板除了基本模板“base.html”，都可以把PyCharm自动生成的代码清空。

3、Bootstrap框架

为了能够让我们的博客系统有一个漂亮的外观，这里我们使用bootstrap这个前端框架（包括HTML、CSS 和 JS 框架）帮助我们完成视觉的优化。

首先，下载Bootstrap V3.3.7版，下载地址：https://v3.bootcss.com/getting-started/#download。

这里我们只需要下载用于生产环境的Bootstrap，下载之后解压缩。

Django项目的应用目录下新建“static”文件夹。

将解压缩之后的内容，也就是css、js和fonts三个文件夹复制到“static”文件夹中。

然后，在模板中使用Bootstrap，我们可以通过以下代码实现。

示例代码：

...{% load static %}

这段代码中，红色部分的代码就是加载Bootstrap样式表、脚本以及JQuery脚本的代码。

注意：因为Bootstrap的这些文件都存放在“static”目录中，我们需要通过“{% load static %}”引用。

完成了以上的准备工作之后，我们就可以在模板中添加代码了。

在这篇教程中，我们先根据整体布局，完成基本模板“base.html”。

示例代码：

{% block title %}页面标题{% endblock %} {% load static %}

{% include 'nav.html' %}

{% block content %}主要内容{% endblock %}

{% include 'sidebar.html' %}

{% include 'bottom.html' %}

在上方代码中，红色部分的代码用于支持响应式布局，加上之后才能够使用Bootstrap的响应式布局功能。

另外，代码中使用了一些Bootstrap属性，这些属性的作用，大家可以根据代码中注释进行理解。

最后，给大家一个建议。

很多朋友对HTML不是特别了解，如果想做出美观的页面还是比较有难度的。

我们可以借助一些现有的工具，降低开发难度。

例如，这个项目的教程中使用到的HTML代码，都是通过工具生成，部分代码略加改动。

这里给大家推荐，使用菜鸟教程的在线工具。

以导航栏为例：http://www.runoob.com/bootstrap/bootstrap-navbar.html

大家打开页面之后，就能够看到左侧的组件以及插件等列表，点击左侧右侧就会出现相应的示例和说明，并且可以通过【尝试一下】的功能修改代码查看效果。

当效果达到满意的程度，我们就可以将相应的代码复制到我们项目的模板文件中。