7. 真正的 django 博客首页视图

作者: 追梦人物 | 来源:发表于2017-04-11 16:47 被阅读790次

本教程内容已过时，更新版教程请访问： Django 博客开发入门教程。

这是 Django 博客教程的第 7 篇，在阅读此篇教程以前，请确保你已阅读 Django 博客教程的前 6 篇：
1. Django 博客教程：前言
 2. 搭建开发环境
 3. 建立我们的 django 博客应用
 4. 创建 django 博客的数据库模型
 5. 让 django 完成翻译——迁移数据库模型
 6. django 博客首页视图

上一节编写了 blog 的首页视图，并且配置了 url，模板，让 django 能够正确地处理 http 请求并返回合适的 http 响应。但是我们仅仅在首页返回了一句话“欢迎访问我的博客”。这只是个 hello world 级别的视图。这一节里我们需要编写真正的首页视图函数，当用户访问我们的博客首页时，他（她）将看到我们发表的博客文章列表，就像演示项目里展示的这样。

上一节我们阐明了 django 的开发流程。首先把 url 和相应的处理函数绑定，一般写在 urls.py 文件里，然后在工程的 urls.py 文件引入。其次是编写我们的视图函数，视图中需要渲染模板，我们也在 settings.py 中进行了模板相关的配置，让 django 能够找到需要渲染的模板。最后把渲染完成的 http 响应返回就可以了。相关的配置和准备工作都在上一节完成了，本节我们只需专心编写视图函数，让它实现我们想要的功能即可。

首页的视图函数其实很简单，代码像这样：

from django.shortcuts import render

from .models import Post


def index(request):
    post_list = Post.objects.all()
    return render(request, 'blog/index.html', context={'post_list': post_list})

我们曾经在前面的章节讲解过模型管理器 objects 的使用。这里我们使用 all() 方法从数据库里获取了全部的文章，存在了 post_list 变量里，然后如前一节所做，我们渲染了 blog/index.html 模板文件，并且把包含文章列表的 post_list 变量传给了模板。

处理 css 与 js文件

我们的项目使用了从网上下载的一套博客模板（点击这里下载全套模板），这里面除了 html 文档外，还包含了一些 css 文件和 js 文件以让网页呈现出我们现在看到的样式。同样我们需要对 django 做一些必要的配置，才能让 django 知道如何在开发服务器中引入这些 css 和 js 文件，这样才能让博客页面的 css 样式生效。

按照惯例，我们把 css 和 js 文件放在 blog 应用的 static 文件夹下。因此，先在 blog 应用下建立一个 static 文件夹。同时，为了避免和其它 app 中的 css 和 js 文件命名冲突，我们再在 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 和 js 文件。css 样式文件通常在 html 文档的 head 标签里引入，打开 index.html 文件，在文件的开始处找到 head 标签包裹的内容，大概像这样：

<head>
    <title>Black & White</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="css/pace.css">
    <link rel="stylesheet" href="css/custom.css">

    <!-- js -->
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/pace.min.js"></script>
    <script src="js/modernizr.custom.js"></script>
</head>

css 样式文件在 link 标签的 href 属性里，而 js 文件在 script 标签的 src 属性里。可以看到诸如 href="css/bootstrap.min.css" 或者 src="js/jquery-2.1.3.min.js" 这样的引用，由于引用文件的路径不对，所以引入失败。我们需要把它们改成正确的路径。把代码改成下面样子，正确地引入 static 文件下的 css 和 js 文件：

<head>
    <title>Black & White</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    + {% load staticfiles %}
    <!-- css -->
    - <link rel="stylesheet" href="css/bootstrap.min.css">
    + <link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    - <link rel="stylesheet" href="css/pace.css">
    - <link rel="stylesheet" href="css/custom.css">
    + <link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">
    + <link rel="stylesheet" href="{% static 'blog/css/custom.css' %}">

    <!-- js -->
    - <script src="js/jquery-2.1.3.min.js"></script>
    - <script src="js/bootstrap.min.js"></script>
    - <script src="js/pace.min.js"></script>
    - <script src="js/modernizr.custom.js"></script>
    + <script src="{% static 'blog/js/jquery-2.1.3.min.js' %}"></script>
    + <script src="{% static 'blog/js/bootstrap.min.js' %}"></script>
    + <script src="{% static 'blog/js/pace.min.js' %}"></script>
    + <script src="{% static 'blog/js/modernizr.custom.js' %}"></script>
</head>

我们把引用路径放在了一个奇怪的符号里，例如：href="{% static 'blog/css/bootstrap.min.css' %}"。用 {% %} 包裹起来的叫做模板标签。我们前面说过用 {{ }} 包裹起来的叫做模板变量，其作用是在最终渲染的模板里显示由视图函数传过来的变量的值。而这里我们使用的模板标签的功能则类似于函数，例如这里的 static 模板标签，它把跟在它后面的字符串 'css/bootstrap.min.css' 转换成正确的文件引入路径。这样 css 和 js 文件才能被正确加载，样式才能正常显示。注意这里有一个标签 <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 我们没有使用模板标签，因为这里的引用的文件是一个外部文件，不是我们项目里 css 目录下的文件，因此无需使用模板标签。

如果你开发服务器还没关的话（关了就重新运行），刷新首页，这次应该能看到期望的效果了。但目前我们看到的只是模板中预先写好的一些数据（还都是英语的...），我们得让它显示我们从数据库中获取的数据。下面来稍微改造一下模板：

在模板 index.html 中你会找到一系列 article 标签：

...
<article class="post post-1">
  ...
</article>

<article class="post post-2">
  ...
</article>

<article class="post post-3">
  ...
</article>
...

这里面包裹的内容就是显示的文章数据了。我们前面在视图函数 index 里给模板传了一个 post_list 变量，它里面包含着从数据库中取出的文章数据列表。就像 Python 一样，我们可以在模板中循环这个列表，把文章一篇篇循环出来，然后一篇篇显示文章的数据。要在模板中使用循环，需要使用到前面提到的模板标签，这次使用 {% for %} 模板标签。删掉多余的 article 标签，只留下一个 article 标签，然后写下列代码：

...
{% for post in post_list %}
  <article class="post post-1">
    ...
  </article>
{% empty %}
  <div class="no-post">暂时还没有发布的文章！</div>
{% endfor %}
...

可以看到语法和 Python 的 for 循环类似，只是被 {% %} 这样一个模板标签符号包裹着。{% empty %} 的作用是当 post_list 为空，即数据库里没有文章时显示 {% empty %} 下面的内容，最后我们用 {% endfor %} 告诉 django 循环在这里结束了。

现在我们可以在循环体内通过 post 变量访问单篇文章了。分析 article 标签里面的 html 内容，h1 显示的是文章的标题，

<h1 class="entry-title">
    <a href="single.html">Adaptive Vs. Responsive Layouts And Optimal Text Readability</a>
</h1>

我们把标题替换成 post 中的数据

<h1 class="entry-title">
    <a href="single.html">{{ post.title }}</a>
</h1>

这里 post 是 Post 类的一个实例，通过引用它的 title 属性获取 title 的值。注意要把它包裹在模板变量里，因为它最终要被替换成实际的 title 值。

<div class="entry-meta">
    <span class="post-category"><a href="#">Web Design</a></span>

    <span class="post-date"><a href="#"><time class="entry-date"
                                              datetime="2012-11-09T23:15:57+00:00">February 2, 2013</time></a></span>

    <span class="post-author"><a href="#">Albert Einstein</a></span>

    <span class="comments-link"><a href="#">4 Comments</a></span>
</div>

这 4 个 span 标签里分别显示了分类（category）、文章发布时间、文章作者、评论数。再次替换掉一些数据，由于评论数暂时没法替换，因此先留着，我们在实现了评论功能后再来修改它：

<div class="entry-meta">
    <span class="post-category">
      <a href="#">{{ post.category.name }} </a>
    </span>

    <span class="post-date">
      <a href="#">
        <time class="entry-date" datetime="{{ post.created_time }}">{{ post.created_time }}         </time>
      </a>
    </span>

    <span class="post-author"><a href="#">{{ post.author }} </a></span>

    <span class="comments-link"><a href="#">4 Comments</a></span>
</div>

<div class="entry-content clearfix">
    <p>...</p>
    <div class="read-more cl-effect-14">
        <a href="#" class="more-link">Continue reading <span class="meta-nav">→</span></a>
    </div>
</div>

这里 p 标签里显示的是摘要，替换成 post 的摘要，另外 Continue reading 表示继续阅读，汉化一下：

<div class="entry-content clearfix">
    <p>{{ post.excerpt }}</p>
    <div class="read-more cl-effect-14">
        <a href="#" class="more-link">继续阅读 <span class="meta-nav">→</span></a>
    </div>
</div>

再次访问首页，它显示：暂时还没有发布的文章！好吧，做了这么多工作，但是数据库中其实还没有任何数据呀。下一节我们就实际写几篇文章保存到数据库里，看看显示的效果究竟如何。

网友评论

yushengzhou: + {% load staticfiles %} 请问这里面的staticfiles是什么变量前面好像没有提到这个变量的意义
yushengzhou:@追梦人物另外再问一下我在admin中添加了一篇文章但是显示的都是问号，在网上查了些解决办法但是都没有生效请问这个该怎么解决？
yushengzhou:@追梦人物 ok
追梦人物:@yushengzhou 这是为了使用 static 标签引入的，不用管。
bf41d4534437:你好，请问一下for循环里的post_list是什么
bf41d4534437:@追梦人物 Thanks
追梦人物:@bf41d4534437 这是通过视图函数传过来的模板变量
e936bd950684:您好请问有完整的代码么谢谢
e936bd950684:谢谢
追梦人物:@辣条辣条5毛一包教程全部更新完毕后会有
童话小当家:最底下有一个script.js没有导入。
644fcbafc50b:好像下载模板的百度链接失效了哦
煮茶忘放糖:好巧哦！今天我就找到这个模板也在用Django做自己的博客。
追梦人物:@谌于
2e77e2d0582e:你好，一对多的分类和多对多的标签，在model中都有建立类。
怎么在首页（复用的base.html）中显示？
是和上面的Article一样？那怎么区分 {% block content %} {% endblock %}
追梦人物:@海呆呆嗯，后面会说到的
2e77e2d0582e:@追梦人物对的，我看的其他人以及你们以前的教程做的，基本已经实现了。加油更新吧
追梦人物:@海呆呆好像还没有写到这里吧？

7. 真正的 django 博客首页视图

处理 css 与 js文件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Python

python学习实践

python加油站