django | 03-添加皮肤

首页视图函数

django 的开发流程。即

首先配置 URL，把 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().order_by('-created_time')
    return render(request, 'blog/index.html', context={
        'post_list': post_list
    })

.models表示引入当前目录的models.py模块
Post.objects.all()是使用了all()方法从数据库里获取了所有的文章，存到了post_list这个变量中，并按照created_time进行排序，-表示逆序，不加为正序。
最后是把post_list这个变量传递给模板。

处理静态文件

image

如上图：html构成文档的骨架，而JS可以用来定义各种动作，CSS则是定义最终的表现形式。

按照惯例，我们把 CSS 和 JavaScript 文件放在 blog 应用的 static\ 目录下，并按照下面格式新建下层文件夹

.
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│   ├── 0001_initial.py
│   └── __init__.py
├── models.py
├── static #新建该目录
│   └── blog # 新建目录
│       ├── css #新建
│       └── js # 新建
├── tests.py
├── urls.py
└── views.py

用下载的博客模板中的 index.html 文件替换掉之前我们自己写的 index.html 文件。
然后需要django 能正确地处理 CSS 和 JavaScript 等静态文件的加载路径。==CSS 样式文件通常在 HTML 文档的 head 标签里引入==，打开index.html 文件，在文件的开始处找到 head 标签包裹的内容。

CSS 样式文件的路径在 link 标签的 href 属性里
JavaScript 文件的路径在 script 标签的 src 属性里。

如下，这就是css的使用方式

    <link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/custom.css' %}">

如下为js的引用方式：

    <!-- js --> # 注释
    <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>

用 {% %}包裹起来的叫做模板标签。用 {{ }} 包裹起来的叫做模板变量，其作用是在最终渲染的模板里显示由视图函数传过来的变量值。而这里我们使用的模板标签的功能则类似于函数，例如这里的 static 模板标签，它把跟在后面的字符串 'css/bootstrap.min.css' 转换成正确的文件引入路径。这样 css 和 js 文件才能被正确加载，样式才能正常显示。

注意：为了能在模板中使用 {% static %} 模板标签，别忘了在最顶部 {% load static %} 。static 模板标签位于 static模块(目录)中，只有通过 load 模板标签将该模块引入后，才能在模板中使用 {% static %} 标签。

替换完成后你可以刷新页面并看看网页的源代码都是以文件的形式被传送过去的。

[09/Oct/2019 22:13:56] "GET /static/blog/css/pace.css HTTP/1.1" 200 177
[09/Oct/2019 22:13:56] "GET /static/blog/css/custom.css HTTP/1.1" 200 14568[
09/Oct/2019 22:13:56] "GET /static/blog/js/pace.min.js HTTP/1.1" 200 12331
[09/Oct/2019 22:13:56] "GET /static/blog/js/bootstrap.min.js HTTP/1.1" 200 35452
[09/Oct/2019 22:13:56] "GET /static/blog/css/bootstrap.min.css HTTP/1.1" 200 117150
[09/Oct/2019 22:13:56] "GET /static/blog/js/jquery-2.1.3.min.js HTTP/1.1" 200 84319
[09/Oct/2019 22:13:56] "GET /static/blog/js/script.js HTTP/1.1" 200 4310
[09/Oct/2019 22:13:56] "GET /static/blog/js/modernizr.custom.js HTTP/1.1" 200 8371

并且路径被补全成/static/blog/js/script.js

<link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">这一部分最终
<link rel="stylesheet" href="/static/blog/css/pace.css">
这正是 pace.css 文件所在的路径。

而 /static/前缀是我们在 settings.py文件中通过 STATIC_URL = '/static/'指定的。

#vim blog/settings.py
...文件最后
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'

事实上，如果我们直接把引用路径写成 /static/blog/css/pace.css 也是可以的，那么为什么要使用 {% static %} 标签呢？想一下，目前 URL 的前缀是 /static/，如果哪一天因为某些原因，我们需要把 /static/ 改成 /resource/，如果你是直接写的引用路劲而没有使用 static 模板标签，那么你可能需要改 N 个地方。如果你使用了 static 模板标签，那么只要在 settings.py 处改一个地方就可以了，即把 STATIC_URL = '/static/' 改成 STATIC_URL = '/resource/'。

修改模板

目前我们看到的只是模板中预先填充的一些数据，我们得让它显示从数据库中获取的文章数据。
在模板 templates/blog/index.html 中你会找到一系列 article标签：

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

这里面包裹的内容显示的就是文章数据了。这个这么写的没法动态展示，因此我们可以传递一个post_list的变量进去，这样可以动态更新。

要在模板中使用循环，需要使用到前面提到的模板标签，这次使用 {% for %} 模板标签。

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

{% empty %}的作用是当post_list为空时显示 {% empty %} 下面的内容，最后我们用{% endfor %} 告诉 django 循环在这里结束了。这里的 {{ post.pk }}（pk 是 primary key 的缩写，即 post 对应于数据库中记录的 id 值，该属性尽管我们没有显示定义，但是 django 会自动为我们添加）。现在我们可以在循环体内通过 post 变量访问单篇文章的数据了。
<article">标签下的内容也可以用变量进行替换，如标题用{{ post.title }}、分类用{{ post.category.name }}、创建时间{{ post.created_time }}、作者{{ post.author }}、摘要{{ post.excerpt }}