Django 学习笔记之加载静态文件

最新推荐文章于 2024-08-28 22:18:24 发布

Taylent

最新推荐文章于 2024-08-28 22:18:24 发布

阅读量608

点赞数 1

分类专栏： Python 文章标签： Django

本文链接：https://blog.youkuaiyun.com/Taylent/article/details/89706771

版权

Python 专栏收录该内容

7 篇文章

订阅专栏

前文介绍

Django版本：2.2
PyCharm版本：2019.1.1

js/css/img等静态文件要放在static文件夹下，html页要放在templates文件夹下。
static文件夹要自己新建-目录，templates文件夹是Django创建后自动生成的。
目录如下：
在这里插入图片描述
static文件夹创建以后在settings里自动会添加如下url：

#Static files(CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'

方法一：借助load staticfiles tag

#将下面这句话句添加到html文件中 <!DOCTYPE html> 的下面
{% load staticfiles %}
#采用{% %}的方式导入js/css标签
 <script type="text/javascript" src="{% static "/js/jquery-3.3.1.min.js" %}">
 </script>
 <link rel="stylesheet" type="text/css" href="｛% static 'css/style.css' %｝" />

方法二：借助STATIC_URL

<link rel="stylesheet" type="text/css" href="/static/css/style.css" />

因为上文已经提到在建立static文件夹以后就会告诉你static的url是 /static/ ，记得前后都有 / 。

后记：加载失败的几种解决方法

本人先采用的方法二加载，因为是在别的IDE码的前端HTML页，但是copy过来以后发现不太好使，就改用了第一种方法，然后就报了以下错误。(和参考内容第一个网址里的提问很像)
在这里插入图片描述
然后就尝试了各种解决办法，罗列如下。
（但实际最后又改回第二种方法突然就好使了！就好使了！！期间因为要查怎么改连了一下网，其他代码完全没变，就很奇怪咯。）

1.在项目urls.py中，检查是否加上：

url(r'^static/(?P<path>.*)$', serve, {'document_root': settings.STATIC_ROOT}),

2.检查settings.py中的INSTALLED_APPS中包含django.contrib.staticfiles，否则映射关系错误。

（一般情况这个也没有问题，反正我这个是创建项目时就自动配置好的。）

3.在项目settings.py中检查static的配置是否正确，查找路径有没有问题

如上文提到一般情况建立static文件夹以后会自动在settings.py中加入

STATIC_URL = '/static/'

所以该方法可以尝试在这句话下面再添加以下：

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

或

STATICFILES_DIRS = (
	 #os.path.join(BASE_DIR, 'static'),
）

4.修改 urls.py

from django.conf.urls import url
from django.contrib import adminform blogs import views as blogs_views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
url(r'^admin/', admin.site.urls),　　 url(r'^$', blogs_views.index),
] + static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)

总之每个方法都试一试，多试几次，或者全都改改，肯定可以成功地，你是最棒的！
感谢阅读。

参考：
https://segmentfault.com/q/1010000012921902?_ea=3212893
https://blog.youkuaiyun.com/qq_41786195/article/details/82121103