博客首页
django 框架的工作流程已经大致了解了，接下来就是真正的完成博客首页
博客模板
django 的优点之一就是将模板（Templates）独立出来，而本博客的模板是我自己使用Bootstrap框架编写的，完整代码我放在了github上，只是简单实现博客的部分功能。将其clone到本地以供使用。
安装
# 选择一个目录放置模板源文件，进入目录
$ git clone https://github.com/fbckf/blog-template.git
Cloning into 'blog-template'...
remote: Counting objects: 42, done.
remote: Total 42 (delta 0), reused 0 (delta 0), pack-reused 42
Unpacking objects: 100% (42/42), done.
Checking connectivity... done.
clone到本地之后，目录中会多出一个blog-template目录，里面就是博客模板的源文件。
# 查看 blog-template/ 目录结构
$ tree blog-template
blog-template
├── article.html
├── category.html
├── css
│ ├── base.css
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── font-awesome.css
│ └── font-awesome.min.css
├── fonts
│ ├── FontAwesome.otf
│ ├── fontawesome-webfont.eot
│ ├── fontawesome-webfont.svg
│ ├── fontawesome-webfont.ttf
│ ├── fontawesome-webfont.woff
│ └── fontawesome-webfont.woff2
├── img
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ ├── carousel1.jpg
│ ├── carousel2.jpg
│ └── carousel3.jpg
├── index.html
├── js
│ ├── base.js
│ ├── bootstrap.min.js
│ ├── bootstrap.min.js.map
│ ├── jquery-3.2.1.min.js
│ └── popper.min.js
└── README.md
index.html博客首页article.html文章详情页面category.html类别页面css/存放 css 文件fonts/存放 Font Awesome 图标字体 文件img/存放 图片资源js/存放 js 文件
预览
首页
修改模板
原先的首页模板只是简单编写的一个 html 文件，现在把它替换成新的的博客首页。
$ cp index.html ~/fbckf/templates/blog/
刷新页面，发现没有显示出预计的效果
按F12查看报错信息
...
Failed to load resource: the server responded with a status of 404 (Not Found)
base.css
Failed to load resource: the server responded with a status of 404 (Not Found)
font-awesome.css
Failed to load resource: the server responded with a status of 404 (Not Found)
font-awesome.min.css
Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-3.2.1.min.js
Failed to load resource: the server responded with a status of 404 (Not Found)
base.js
Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap.min.js
Failed to load resource: the server responded with a status of 404 (Not Found)
base.js
...
原因是静态文件加载错误，静态文件与模板文件的相对位置发生改变，原先的加载路径无法加载到文件，所以无法现实样式效果
静态文件
django 中，处理静态文件和模板文件差不多，都是放到指定的目录集中管理。在 blog 应用目录中创建static/blog/目录用以存放应用自身的静态文件，之后将博客模板的静态文件复制到static/blog/目录中
# 在 blog/ 目录中创建目录
$ mkdir static
$ mkdir static/blog
# 将静态文件复制到 blog/static/blog/ 目录中
$ cp -R css js img fonts ~/fbckf/blog/static/blog
django 会自动在应用目录下搜索静态文件，也可以将公共的静态文件分离出来单独存放，只需在 settings.py 中指定路径即可
# fbckf/settings.py
...
# 静态文件的 url 映射
STATIC_URL = '/static/'
# 部署网站时指定的收集静态文件的路径
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# 在配置文件最末尾添加 STATICFILES_DIRS 列表，在其中添加静态文件路径
# 注意 STATICFILES_DIRS 中路径不可与 STATIC_ROOT 一致
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'blog/static'),
]
django 在加载静态文件时，会在STATICFILES_DIRS列表中的目录下搜索目标文件进行加载，这里指定的目录是~/fbckf/blog/static/。
在模板文件中，原本加载静态文一般是使用src属性，如或者等。而在 django 中，则要用到 模板标签 {% %}。
...
...
...
...
...
...
修改完成之后再刷新页面，可以看到静态文件已经加载成功，样式效果也出来了。
首页数据
之前编写的的视图函数中，只获取了指定的一篇文章，然而首页中显示的文章显然不止一篇，所以需要对视图函数进行修改。
文章列表
# blog/views.py
from django.shortcuts import render
from .models import Category, Article
def index(request):
# 之前使用 get() 方法只是返回符合指定条件的文章
# 而 all() 方法则返回所有的文章，返回的对象是一个QuerySet类型数据
article_list = Article.objects.all()
# 同样的方法获取所以类别
category_list = Category.objects.all()
# 将 article_list 和 category_list 放到字典中，将该字典传递给模板
context = {
'article_list': article_list,
'category_list': category_list
}
return render(request, 'blog/index.html', context=context)
再修改模板文件，显示文章数据
...
...
{% for article in article_list %}
{% empty %}
暂无文章，敬请期待！
{% endfor %}
...
在模板文件中，可以找到 `` 这个注释，在这个注释之后找到 标签和他的子标签 ，如上所示。而每一篇文章都包含在一个 标签中
使用 {% for %} 模板标签循环遍历article_list列表，并赋值给 article变量，每一个 article 都是一个对象（Article类的实例），{{ article.title }}就是调用 title 属性。
{% empty %} 表示当 article_list 为空是执行标签中的代码。
{% endfor %} 是 {% for %} 模板标签的结束标签
分类列表
分类列表中需要两个数据，第一个是分类名称，第二个是分类下的文章数量，因为之前没有考虑到文章数量，所以现在要修改数据模型，在 category 模型中加入 article_count 字段来存储文章数量这一数据。
# blog/models.py
...
class Category(models.Model):
name = models.CharField(max_length=20, unique=True)
instructions = models.TextField(max_length=100, default="")
# 添加文章数量这一字段，该字段只能是正整数，默认为零
article_count = models.PositiveIntegerField(default=0)
def __str__(self):
return self.name
...
修改完模型之后，需要进行数据库迁移，更改数据库中的结构
$ python manage.py makemigrations
Migrations for 'blog':
blog/migrations/0002_category_article_count.py
- Add field article_count to category
$ python manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
在数据库表 category 中增加了文章数量的字段之后，还没有真正完成。现在只是增加了这个字段，但是还没有去更新它，用户也不可能每次在增加文章之后，手动的去更新这个字段，所以还需要让它能够自动的去更新该字段的值。
办法有很多，这用的是最简单的一种。每次在刷新首页时更新 article_count 字段
# blog/views.py
...
def index(request):
...
category_list = Category.objects.all()
for category in category_list:
# 使用 filter() 将各个分类下的文章筛选出来，再使用 count() 方法获取数量
count = Article.objects.all().filter(category=category).count()
# 之后更新字段
category.article_count = count
category.save()
...
更改保存，之后每次用户刷新首页，都会更新文章所属类别的 article_count字段，这个方法简单，但是效率却不高
...
...
在 标签内找到 分类
登陆后台管理系统，添加一个新的文章进行测试，添加完成之后刷新博客首页
image
文章列表和分类列表都正确的显示出数据
总结
博客首页的大概轮廓已经搭建完成，但是还有一些细节部分还需要调整，另外分页和搜索功能放到后面完成。