企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] 前面我们编写了一个经过测试的投票应用,现在让我们给它添加一张样式表和一张背景图片。 <br /> 除了由服务器生成的HTML文件外,WEB应用一般需要提供一些其它的必要文件,比如图片文件、JavaScript脚本和CSS样式表等等,用来为用户呈现出一个完整的网页。在Django中,我们将这些文件统称为“静态文件”,因为这些文件的内容基本是固定不变的,不需要动态生成。 <br /> 对于小项目,这些都不是大问题,你可以将静态文件放在任何你的web服务器能够找到的地方。但是对于大型项目,尤其是那些包含多个app在内的项目,处理那些由app带来的多套不同的静态文件是个麻烦活。 <br /> 但这正是`django.contrib.staticfiles`的用途:它收集每个应用(和任何你指定的地方)的静态文件到一个统一指定的地方,并且易于访问。 <br /> ## **一、使用静态文件** 首先在你的polls目录中创建一个`static`目录(一定要注意,不是statics,不要多写了一个s)。Django将在那里查找静态文件,这与Django在polls/templates/中寻找对应的模板文件的方式是一致的。 <br /> Django的`STATICFILES_FINDERS`设置项中包含一个查找器列表,它们知道如何从各种源中找到静态文件。 其中一个默认的查找器是`AppDirectoriesFinder`,它在每个`INSTALLED_APPS`下查找`static`子目录,例如我们刚创建的那个`static`目录。admin管理站点也为它的静态文件使用相同的目录结构。 <br /> 在刚才的`static`目录中新建一个`polls`子目录,再在该子目录中创建一个`style.css`文件。换句话说,这个css样式文件应该是`polls/static/polls/style.css`。你可以通过书写`polls/style.css`在Django中访问这个静态文件,与你如何访问模板的路径类似。 <br /> **静态文件的命名空间:** 与模板类似,我们可以将静态文件直接放在`polls/static`(而不是创建另外一个polls 子目录),但实际上这是一个坏主意。Django将使用它所找到的第一个匹配到的静态文件,如果在你的不同应用中存在两个同名的静态文件,Django将无法区分它们。我们需要告诉Django该使用其中的哪一个,最简单的方法就是为它们添加命名空间。也就是说,将这些静态文件放进以它们所在的应用的名字同名的另外一个子目录下(白话讲:多建一层与应用同名的子目录)。 <br /> **PS:良好的目录结构是每个应用都应该创建自己的urls、forms、views、models、tests、apps、templates和static,每个templates包含一个与应用同名的子目录,每个static也包含一个与应用同名的子目录。** <br /> 将下面的代码写入样式文件`polls/static/polls/style.css`: ~~~ li a { color: green; } ~~~ 接下来在模板文件`polls/templates/polls/index.html`的头部加入下面的代码: ~~~ {% load static %} # 这一行放到文件最顶部 # 这一行放到head标签中 <link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}"> ~~~ <br /> `{% static %}`模板标签会生成静态文件的绝对URL路径。 需要在settings中设置下面代码才可以工作,否则找不到css文件路径: ``` # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/3.2/howto/static-files/ STATIC_ROOT = "./" STATIC_URL = '/static/' ``` <br /> 重启服务器,在浏览器访问`http://localhost:8000/polls/`,你会看到Question的超级链接变成了绿色(Django风格!),这意味着你的样式表被成功导入了。(如果不行就ctrl + F5强制刷新浏览器页面,防止缓存。) <br /> ## **二、添加背景图片** 下面,我们在`polls/static/polls/`目录下创建一个用于存放图片的`images`子目录,在这个子目录里放入`background.jpg`文件。换句话说,这个文件的路径是`polls/static/polls/images/background.jpg`。(你可以使用任何你想要的图片) 在css样式文件`polls/static/polls/style.css`中添加下面的代码: ~~~ body { background: white url("images/background.jpg") no-repeat; } ~~~ 重新加载`http://localhost:8000/polls/`(CTRL+F5),你会在屏幕的左上角看到载入的背景图片。 下面是张参考效果图: ![](https://img.kancloud.cn/da/04/da04417220377b5af370ca510ab78e43_1082x243.png) **提示:** 很显然,`{% static %}`模板标签不能用在静态文件,比如样式表中,因为他们不是由Django生成的。 你应该使用相对路径来相互链接静态文件,因为这样你可以改变`STATIC_URL`( static模板标签用它来生成URLs)而不用同时修改一大堆静态文件中路径相关的部分。 <br /> ## **三、直接访问静态文件** 实际上不管是在Django开发服务器上,还是在`nginx+uwsgi+django`部署的服务器上,都可以直接通过url访问静态文件,不需要在Django中专门为每个静态文件编写url路由和视图。 比如,通过[http://www.liujiangblog.com/static/images/default\_avatar\_male\_50.gif](http://www.liujiangblog.com/static/images/default_avatar_male_50.gif)你就可以直接获得网站用户的默认头像图片了。 本节简要的介绍了如何使用静态文件,更多的内容留待后续。