📌  相关文章
📜  在 django 模板中链接 css - CSS (1)

📅  最后修改于: 2023-12-03 15:07:38.907000             🧑  作者: Mango

在 Django 模板中链接 CSS - CSS

在 Django 模板中添加 CSS 文件，可以为网页添加样式。这篇教程将会介绍如何在 Django 模板中链接 CSS。

1. 在静态文件夹中创建 CSS 文件

首先，在 Django 项目的根目录中创建一个名为 "static" 的文件夹。在 static 文件夹中再创建一个名为 "css" 的文件夹。

现在，您可以在 "css" 文件夹中创建一个名为 "style.css" 的 CSS 文件。

.
└── static
    └── css
        └── style.css
2. 配置 STATIC_URL

在 settings.py 中，您需要配置 STATIC_URL，这是一个指向静态文件夹的 URL。假设您的 STATIC_URL 是 /static/，则添加以下行到 settings.py：

STATIC_URL = '/static/'
3. 将 CSS 文件链接到模板

现在，您只需要将 CSS 文件链接到您的模板中。假设您要链接到一个名为 index.html 的模板，代码如下：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
    <h1>Welcome to my website</h1>
    <p>This is some text.</p>
</body>
</html>

您需要使用 {% load static %} 模板标记加载静态文件，然后使用 {% static 'css/style.css' %} 模板标记链接到 CSS 文件。在此示例中，'css/style.css' 是相对于 static 文件夹的路径。

4. 运行 Django 服务器

现在您已经成功地将 CSS 文件链接到您的模板中了。运行 Django 服务器并打开您的网页，您将看到链接的 CSS 样式已经被应用到您的网页上了。

结论

本教程介绍了如何在 Django 模板中链接 CSS 文件。您只需要在静态文件夹中创建一个 CSS 文件，然后使用模板标记链接到模板中。