静态文件

本课属于 Coddy Django 学习旅程的“Django 基础”单元。第 20 课，共 23 课。

咖啡馆的页面是白底黑字。样式表可以改变这一点，而样式表、脚本和图片都是静态文件：服务器会原样发送它们，不经过视图处理。Django 查找静态文件的方式和查找模板一样：在每个已安装应用的 static/ 文件夹中查找，里面还会再包含应用的名称：

shop/static/shop/cart.js

Django 会在以 STATIC_URL 开头的地址提供这些文件。在 settings.py 中，STATIC_URL 的值是 "static/"，所以该文件的地址是 /static/shop/cart.js。模板使用 {% static %} 来生成地址，并且要先使用 {% load static %}：

{% load static %}
<script src="{% static 'shop/cart.js' %}"></script>

样式表的 <link rel="stylesheet" href="..."> 要放在 <head> 中。把它放进 base.html，所有继承它的页面都会包含它。

挑战

简单

为网站添加样式表。

创建 menu/static/menu/style.css，至少包含 body { background: #fdf8f2; }。
在 base.html 中加载静态标签，并在 <head> 中链接样式表，这样每个页面都会链接到 /static/menu/style.css。

按下运行：页面会变成奶油色。

亲手试试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}Corner Café{% endblock %}</title>
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        {% block content %}{% endblock %}
    </main>
</body>
</html>