【Django 2021年最新版教程4】为项目添加资源文件（css,js,image)

我不是女神ヾ 2022-10-17 00:36 175阅读 0赞

## **1、新建static文件夹存放资源文件，结构如下：** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70][]

demo.css

#title {
        color:red;
    }

##   **2、修改index.html如下：** ##

** **![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    {% load static %}
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="{% static 'css/demo.css' %}">
    </head>
    <body>
        <h2 id="title">hello world</h2>
        <img src="{% static 'image/demo.png' %}">
    </body>
    </html>

**  3、在settings.py文件的最后增加如下配置**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 3][]

**注意：** 在给STATICFILES\_DIRS设置静态文件目录的时候注意设置的目录是个列表或元组，其中每个元组或列表的值之间必须要用逗号分隔。即使是最后一个值的后面也要加逗号

## 4.重新运行 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 4][]

参考[https://www.cnblogs.com/lone5wolf/p/13826626.html][https_www.cnblogs.com_lone5wolf_p_13826626.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70]: /images/20221014/ef9d6409f9fd436fa34043997ee8c0a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 1]: /images/20221014/f4eb103724ef4692aedd1899c0b946d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 2]: /images/20221014/dec6b44c4c2a4e3086a2eedd21479bbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 3]: /images/20221014/38e070c4a1554900804261f6848929a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyODgxOTA_size_16_color_FFFFFF_t_70 4]: /images/20221014/84f61a42965441758d4c8d16fd8dbd88.png
[https_www.cnblogs.com_lone5wolf_p_13826626.html]: https://www.cnblogs.com/lone5wolf/p/13826626.html