当前位置：首页 > news >正文

Django项目页面样式如何“传给”客户端浏览器

news 2025/7/6 16:15:15

前言

django项目在视图函数中借助render函数可以返回HTML页面，但是HTML页面中如果引入了外部CSS文件或者JavaScript文件在浏览器页面无法加载，因此就必须有一种方式能够将HTML文档中引入的外部文件能够在客户端浏览器上加载，这种方式就是配置静态文件。

啥是静态文件

静态文件就是前端已经写好了的能够直接调用或者使用的文件都可以称之为静态文件，比如：

①外部JavaScript文件

②外部CSS文件

③项目需要的图片文件

④第三方的前端框架或者库，比如jQuery，bootstrap

为啥要配置静态文件

在使用django框架进行全栈开发(前端+后端)时前端页面用到的外部文件尽量不要使用cdn上的网址，应该使用本地文件，将本地的外部引用文件传给浏览器客户端。而本地文件如果不配置静态文件是无法传给浏览器客户端的，比如下述报错，因此，配置静态文件就是要实现将HTML文档引用的外部本地文件一同返回给浏览器客户端。

如何配置静态文件

项目使用的静态文件默认都放在项目文件下的static目录下，通常该目录还会做进一步划分比如：

- static- js(自己写的js代码)- css(自己写的css代码)- img其他第三方文件

静态文件的配置需要在项目的配置文件(settings.py)中增加如下代码，静态文件配置完成后，HTML文档如果需要静态文件就会去静态文件配置列表中从上往下依次查找所需的文件，找不到才会报错：

# settings.py中增加下述代码
STATIC_URL = '/static/'   #  相当于访问静态文件的令牌或钥匙，如果想要访问静态文件，就必须以static开头，相当于钥匙，静态文件就是房间
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static'),
]  # 静态文件的路径

如果想要在HTML文档中引用静态文件目录中的文件，就必须以/static/开头，比如：

<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/test.css">  <!--使用静态文件中的css样式文件-->
</head>

在HTML文档中引入静态文件还有另一种更加方便的方式 - 动态解析令牌，令牌指的就是STATIC_URL的值，其实静态文件的目录名称可以是随意的，并且令牌的值也可以是任意的，但是约定俗称就是static，如果改了令牌名称，按照上述前端HTML引入静态文件的方式就需要更改路径，如果静态文件非常多改起来会是一件非常闹心的事情，而动态令牌解析可以解决这一问题，无论令牌名称怎么改，前端HTML页面中引入静态文件的方式都不变，代码如下：

<head><meta charset="UTF-8"><title>Title</title><!--动态令牌解析-->{%  load static %}<link rel="stylesheet" href="{% static 'test.css' %}"></head>

总结

总结来看在django项目中静态文件的配置如下：

在项目的配置文件中需要增加令牌和静态文件路径的代码：

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static'),
]

在HTML文档中引入静态文件时推荐使用动态令牌解析的方式：

<head><meta charset="UTF-8"><title>Title</title><!--动态令牌解析-->{%  load static %}<link rel="stylesheet" href="{% static 'test.css' %}"><script src="{% static 'test.js' %}"></script>
</head>

Django项目页面样式如何“传给”客户端浏览器

前言

啥是静态文件

为啥要配置静态文件

如何配置静态文件

总结

相关文章：

Django项目页面样式如何“传给”客户端浏览器

python 进程间通信 Queue()、Pipe()、manager.list()、manager.dict()、manager.Queue()

你想要的【微前端】都在这里了！ | 京东云技术团队

人生若只如初见，你不来看看Django吗

项目人力资源管理

提供接口给第三方调用，应该注意什么

ESL设计概述

探究C语言数组的奥秘：大小可省略的定义、内存存储、数组名、传参、指针遍历、数组指针和指针数组、柔性数组等

python3 强制使用任意父级相对导入，越过python相对导入限制，拒绝 ImportError

面了一个4年经验的测试工程师，自动化都不会也要15k，我也是醉了····

Java 实现 YoloV7 人体姿态识别

跨越屏幕：桌面PC端的多端开发框架介绍

高效学习方法和工具推荐，让你事半功倍！

查看Docker容器中RabbitMQ的密码

探索Qt线程编程的奥秘：多角度深入剖析

【R语言】鉴于计算10亿以内训练模型记录for循环的加速

C++类和对象 ——构造函数

第2章-分治法

20天能拿下PMP吗？

Word处理控件Aspose.Words功能演示：在 Java 中将 Word DOC/DOCX 转换为 PDF

c++ 面试题(1)-----深度优先搜索（DFS）实现

（二）原型模式

Mac软件卸载指南，简单易懂！

【决胜公务员考试】求职OMG——见面课测验1

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

算法：模拟

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

Caliper 负载(Workload)详细解析

关于easyexcel动态下拉选问题处理