Django 学习笔记（三） --- HTML 模版加载 css、js、img 静态文件

时间 2019-11-20

标签 django 学习笔记 html 模版加载 css img 静态文件栏目 Python 繁體版

原文原文链接

人生苦短 ~ css

Tips：仅适用于 Python 3+（反正差异不大，py2 改改也能用）。由于据 Python 之父 Guido van Rossum 说会在 2020 年中止对 Python 2 的官方支持，因此若是你还在使用 Python 2 那就要早作准备了，毕竟没有官方的支持使用起来也不顺心的。html

1. 建立目录web

在咱们的项目中建立静态文件存放目录，HelloDjango 目录下建立文件夹 static，而后在 static 文件目录中新建 js、css、images 三个文件夹用于存放静态资源文件sql

HelloDjango
|----HelloDjango
|----manage.py
|----db.sqlite3 
|----mydjango
|----templates
|----static
    |----images
    |----css
    |----js

2. 设置静态文件目录django

打开文件 settings.py，在该文件中查找变量 STATIC_URL，在该变量下添加以下代码：浏览器

STATICFILES_DIRS = [ 
    os.path.join(BASE_DIR, "static"), 
    os.path.join(BASE_DIR, "recommend", "static"), 
]

STATIC_URL 定义了 web 服务连接媒体的 URL 地址，STATICFILES_DIRS 容许自定义新的 static 目录。工具

3. 访问图片ui

在咱们的静态目录中（/static/images/）放入一张 2018.jpg 图片，打开咱们的 Django 服务访问咱们的图片（http://127.0.0.1:8000/static/images/2018.jpg）：spa

若是没有出现请查看 setings.py 文件是否设置正确，并重启服务。若是出现了，试着加入其余类型的文件到 static 目录并在浏览器上访问。code

4. 模版中加载图片

把咱们的模版文件 index.html 文件修改以下：

<!DOCTYPE html>
{% load static %} <!-- 模板标签加载静态文件路径，也能够改为 load staticfiles -->
<html>
<head>
    <title>HelloDjango</title>
</head>
<body>
    <a href="/mydjango/index/">Index</a><hr />
    <h3>HelloDjango</h3>
    动态数据：<strong>{{ mydata }}</strong>
    <hr />
    <img src="{% static 'images/2018.jp' %}" /> <!-- 加载咱们的静态图片 -->
</body>
</html>

在这里须要注意的是头部的 {% load static %} 是不能够缺乏的，由于不引用的话就不能在加载图片时使用 static。

最后若是幸运的话输入网址（http://127.0.0.1:8000/mydjango/hello/）将会出现以下界面：

须要注意的一点是：

在 settings.py 文件中 DEBUG = True 的时候，Django 会帮咱们加载咱们的静态资源文件；

可是，在 DEBUG = False 的时候，Django 就不会帮咱们加载咱们的静态资源文件，会出现 404 错误，这时候须要其余工具来配置访问咱们的静态资源文件，如 Nginx。

~ 我学 Python