文中涉及的示例代码，已同步更新到 HelloGitHub-Team 仓库
在此之前我们已经编写了博客的首页视图，并且配置了 URL 和模板，让 django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应。不过我们仅仅在首页返回了一句话：“欢迎访问我的博客“，这是个 Hello World 级别的视图函数，毫无美感。
这篇文章我们需要编写真正的首页视图函数，当用户访问我们的博客首页时，他将看到我们发表的博客文章列表，就像 演示项目 里展示的这样。
首页视图函数上一节我们阐明了 django 的开发流程。即首先配置 URL，把 URL 和相应的视图函数绑定，一般写在 urls.py 文件里，然后在工程的 urls.py 文件引入。其次是编写视图函数，视图中需要渲染模板，我们也在 settings.py 中进行了模板相关的配置，让 django 能够找到需要渲染的模板。最后把渲染完成的 HTTP 响应返回就可以了。相关的配置和准备工作都在之前完成了，这里我们只需专心编写视图函数，让它实现我们想要的功能即可。
首页的视图函数其实很简单，代码像这样：
blog/views.py from django.shortcuts import render from .models import Post def index(request): post_list = Post.objects.all().order_by('-created_time') return render(request, 'blog/index.html', context={'post_list': post_list})我们曾经在前面的章节讲解过模型管理器 objects 的使用。这里我们使用 all() 方法从数据库里获取了全部的文章，存在了 post_list 变量里。all 方法返回的是一个 QuerySet（可以理解成一个类似于列表的数据结构），由于通常来说博客文章列表是按文章发表时间倒序排列的，即最新的文章排在最前面，所以我们紧接着调用了 order_by 方法对这个返回的 queryset 进行排序。排序依据的字段是 created_time，即文章的创建时间。- 号表示逆序，如果不加 - 则是正序。 接着如之前所做，我们渲染了 blog\index.html 模板文件，并且把包含文章列表数据的 post_list 变量传给了模板。
处理静态文件我们的项目使用了从网上下载的一套博客模板（点击这里下载全套模板）。这里面除了 HTML 文档外，还包含了一些 CSS 文件和 JavaScript 文件以让网页呈现出我们现在看到的样式。同样我们需要对 django 做一些必要的配置，才能让 django 知道如何在开发服务器中引入这些 CSS 和 JavaScript 文件，这样才能让博客页面的 CSS 样式生效。
按照惯例，我们把 CSS 和 JavaScript 文件放在 blog 应用的 static 目录下。因此，先在 blog 应用下建立一个 static 文件夹。同时，为了避免和其它应用中的 CSS 和 JavaScript 文件命名冲突（别的应用下也可能有和 blog 应用下同名的 CSS 、JavaScript 文件），我们再在 static 目录下建立一个 blog 文件夹，把下载的博客模板中的 css 和 js 文件夹连同里面的全部文件一同拷贝进这个目录。最终我们的 blog 应用目录结构应该是这样的：
blog\ __init__.py static\ blog\ css\ .css 文件... js\ .js 文件... admin.py apps.py migrations\ __init__.py models.py tests.py views.py用下载的博客模板中的 index.html 文件替换掉之前我们自己写的 index.html 文件。如果你好奇，现在就可以运行开发服务器，看看首页是什么样子。
如图所示，你会看到首页显示的样式非常混乱，原因是浏览器无法正确加载 CSS 等样式文件。需要以 django 的方式来正确地处理 CSS 和 JavaScript 等静态文件的加载路径。CSS 样式文件通常在 HTML 文档的 head 标签里引入，打开 index.html 文件，在文件的开始处找到 head 标签包裹的内容，大概像这样：
templates/blog/index.html <!DOCTYPE html> <html> <head> <title>Black & White</title> <!-- meta --> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1"> <!-- css --> <link href="http://www.likecs.com/css/bootstrap.min.css"> <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link href="http://www.likecs.com/css/pace.css"> <link href="http://www.likecs.com/css/custom.css"> <!-- js --> <script src="http://www.likecs.com/js/jquery-2.1.3.min.js"></script> <script src="http://www.likecs.com/js/bootstrap.min.js"></script> <script src="http://www.likecs.com/js/pace.min.js"></script> <script src="http://www.likecs.com/js/modernizr.custom.js"></script> </head> <body> <!-- 其它内容 --> <script src="http://www.likecs.com/js/script.js"></script> </body> </html>