Tệp tĩnh

Thuộc phần Kiến thức cơ bản về Django trong hành trình Django của Coddy. Bài học 20 trên 23.

Trang của quán cà phê có nền trắng và chữ đen. Một tệp CSS sẽ thay đổi giao diện đó. Tệp CSS, tập lệnh và hình ảnh là tệp tĩnh: máy chủ gửi chúng nguyên trạng, không cần view. Django tìm chúng giống như cách tìm template, trong thư mục static/ của mỗi app đã cài đặt, bên trong lại có thư mục mang tên app:

shop/static/shop/cart.js

Django phân phối các tệp này tại những địa chỉ bắt đầu bằng STATIC_URL, có giá trị là "static/" trong settings.py, nên tệp đó nằm tại /static/shop/cart.js. Template tạo địa chỉ bằng {% static %}, sau {% load static %}:

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

Thẻ <link rel="stylesheet" href="..."> của tệp CSS nằm trong <head>. Đặt thẻ này trong base.html để mọi trang kế thừa tệp đó đều có nó.

Thử thách

Dễ

Thêm tệp CSS cho trang web.

Tạo menu/static/menu/style.css với ít nhất body { background: #fdf8f2; }.
Trong base.html, tải các thẻ static và liên kết tệp CSS trong <head>, để mọi trang đều liên kết đến /static/menu/style.css.

Nhấn Chạy: các trang chuyển sang màu kem.

Tự làm thử

<!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>