Django 2.0 学习(09):Django 静态文件(样式和背景图片)
时间: 2023-06-19 22:03:27 浏览: 67
在 Django 中,静态文件(如样式文件、JavaScript 文件和图像)通常存放在一个名为 "static" 的目录中。在应用程序的根目录中创建 static 目录,然后在其中创建一个名为 "css" 的子目录。在 css 目录下创建一个名为 "style.css" 的文件。这个文件将包含我们的 CSS 样式。
接下来,需要在 settings.py 文件中配置静态文件目录。在 INSTALLED_APPS 中添加 'django.contrib.staticfiles',这个应用程序提供了 Django 处理静态文件所需的所有功能。然后在 settings.py 中添加 STATICFILES_DIRS 和 STATIC_URL 配置。STATICFILES_DIRS 是存放静态文件的目录列表。STATIC_URL 是静态文件的 URL 前缀。
```
INSTALLED_APPS = [
# ...
'django.contrib.staticfiles',
]
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
STATIC_URL = '/static/'
```
在 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>Hello World!</h1>
<img src="{% static 'img/background.jpg' %}" alt="Background">
</body>
</html>
```
其中,{% load static %} 是加载静态文件模板标签,{% static 'css/style.css' %} 生成了静态文件的 URL,这样浏览器就能正确地加载样式文件和图片了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)