CSS 样式文件的路径在 link 标签的 href 属性里，而 JavaScript 文件的路径在 script 标签的 src 属性里。可以看到诸如 `href="http://www.likecs.com/css/bootstrap.min.css" 或者 src="http://www.likecs.com/js/jquery-2.1.3.min.js" 这样的引用，由于引用文件的路径不对，所以浏览器引入这些文件失败。我们需要把它们改成正确的路径。把代码改成下面样子，正确地引入 static 文件下的 CSS 和 JavaScript 文件：
templates/blog/index.html + {% load static %} <!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"> + <link href="{% static 'blog/css/bootstrap.min.css' %}"> + <link href="{% static 'blog/css/pace.css' %}"> + <link href="{% static 'blog/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> + <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> <body> <!-- 其它内容 --> - <script src="js/script.js' %}"></script> + <script src="{% static 'blog/js/script.js' %}"></script> </body> </html>这里 - 表示删掉这一行，而 + 表示增加这一行。（增加了哪些内容看仔细一点，千万别漏掉）
我们把引用路径放在了一个奇怪的符号里，例如：href="{% static 'blog/css/bootstrap.min.css' %}"。用 {% %} 包裹起来的叫做模板标签。我们前面说过用 {{ }} 包裹起来的叫做模板变量，其作用是在最终渲染的模板里显示由视图函数传过来的变量值。而这里我们使用的模板标签的功能则类似于函数，例如这里的 static 模板标签，它把跟在后面的字符串 'http://www.likecs.com/css/bootstrap.min.css' 转换成正确的文件引入路径。这样 css 和 js 文件才能被正确加载，样式才能正常显示。
注意：
为了能在模板中使用 {% static %} 模板标签，别忘了在最顶部 {% load static %} 。static 模板标签位于 static模块中，只有通过 load 模板标签将该模块引入后，才能在模板中使用 {% static %} 标签。
替换完成后你可以刷新页面并看看网页的源代码，看一看 {% static %} 模板标签在页面渲染后究竟被替换成了什么样的值。例如我们可以看到
<link href="{% static 'blog/css/pace.css' %}">这一部分最终在浏览器中显示的是：
<link href="http://www.likecs.com/static/blog/css/pace.css">这正是 pace.css 文件所在的路径，其它的文件路径也被类似替换。可以看到 {% static %} 标签的作用实际就是把后面的字符串加了一个 /static/ 前缀，比如 {% static 'blog/css/pace.css' %} 最终渲染的值是 /static/blog/css/pace.css。而 /static/ 前缀是我们在 settings.py 文件中通过 STATIC_URL = '/static/' 指定的。事实上，如果我们直接把引用路径写成 /static/blog/css/pace.css 也是可以的，那么为什么要使用 {% static %} 标签呢？想一下，目前 URL 的前缀是 /static/，如果哪一天因为某些原因，我们需要把 /static/ 改成 /resource/，如果你是直接写的引用路劲而没有使用 static 模板标签，那么你可能需要改 N 个地方。如果你使用了 static 模板标签，那么只要在 settings.py 处改一个地方就可以了，即把 STATIC_URL = '/static/' 改成 STATIC_URL = '/resource/'。
提示
有时候按 F5 刷新后页面还是很乱，这可能是因为浏览器缓存了之前的结果。按 Shift + F5（有些浏览器可能是 Ctrl + F5）强制刷新浏览器页面即可。如果还是不行，重启一下开发服务器以及清除浏览器缓存。
注意这里有一个 CSS 文件的引入
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">我们没有使用模板标签，因为这里的引用的文件是一个外部文件，不是我们项目里 static\blog\css 目录下的文件，因此无需使用模板标签。
正确引入了静态文件后样式显示正常了。