在 Django 中添加静态文件及其用法

📌 相关文章

📜 在 Django 中添加静态文件及其用法 - Python (1)

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

在 Django 开发中，我们经常需要使用到静态文件，如图片、样式表等。在本文中，我们将介绍如何在 Django 中添加静态文件，以及如何使用这些文件。

添加静态文件

在 Django 中，我们可以通过创建一个 static 目录来存放静态文件。具体步骤如下：

在你的应用中创建一个名为 static 的目录。
在 static 目录下创建一个或多个子目录，用于存放不同类型的静态文件。例如，可以创建一个 css 目录用于存放 CSS 样式表文件。
将所需的静态文件放置到相应的子目录中。

例如，如果你希望在应用中添加一个名为 main.css 的样式表文件，则可以按照以下步骤操作：

在你的应用中创建一个名为 static 的目录：

myapp/
    static/

在 static 目录中创建一个名为 css 的子目录：

myapp/
    static/
        css/

将 main.css 文件放置到 css 子目录中：

myapp/
    static/
        css/
            main.css

这样就成功添加了一个名为 main.css 的静态文件。

使用静态文件

在 Django 中，我们可以使用模板语言和标签来引用静态文件。具体使用方法如下：

引用 CSS 文件

要在 HTML 页面中引用 CSS 文件，可以使用 link 标签，并将 href 属性设置为样式表文件的路径。

例如，在以下示例中，我们引用了 myapp/static/css/main.css 文件：

<!DOCTYPE html>
<html>
<head>
    <title>MyApp Home Page</title>
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
<body>
    <h1>Welcome to MyApp</h1>
    <p>This is the home page of my app.</p>
</body>
</html>

在上述示例中，{% static 'css/main.css' %} 是 Django 的静态文件标签，该标签会自动将 css/main.css 路径转换为真正的静态文件路径，例如 /static/css/main.css。

引用 JavaScript 文件

要在 HTML 页面中引用 JavaScript 文件，可以使用 script 标签，并将 src 属性设置为 JavaScript 文件的路径。

例如，在以下示例中，我们引用了 myapp/static/js/main.js 文件：

<!DOCTYPE html>
<html>
<head>
    <title>MyApp Home Page</title>
</head>
<body>
    <h1>Welcome to MyApp</h1>
    <p>This is the home page of my app.</p>
    <script src="{% static 'js/main.js' %}"></script>
</body>
</html>

在上述示例中，{% static 'js/main.js' %} 是 Django 的静态文件标签，该标签会自动将 js/main.js 路径转换为真正的静态文件路径，例如 /static/js/main.js。

总结

在 Django 中，添加和使用静态文件非常简单。我们只需在应用中创建一个 static 目录，并将所需的静态文件放置到相应的子目录中。然后，我们就可以使用 Django 的静态文件标签来引用这些文件，无需手动指定文件的路径。