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

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

news 2026/2/8 8:24:47

前言

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项目在视图函数中借助render函数可以返回HTML页面&#xff0c;但是HTML页面中如果引入了外部CSS文件或者JavaScript文件在浏览器页面无法加载&#xff0c;因此就必须有一种方式能够将HTML文档中引入的外部文件能够在客户端浏览器上加载&#xff0c;这种方式就是配置…...

编程日记 2023/5/5 19:57:50

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

&#x1f468;‍&#x1f4bb;个人简介&#xff1a; 深度学习图像领域工作者 &#x1f389;总结链接&#xff1a; 链接中主要是个人工作的总结&#xff0c;每个链接都是一些常用demo&#xff0c;代码直接复制运行即可。包括&#xff1a; &am…...

编程日记 2023/5/5 19:52:49

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

作者&#xff1a;京东零售 郑炳懿 开篇&#xff1a; 如果你不知道微前端是什么&#xff0c;或者不知道微前端能解决什么问题&#xff0c;那么你可能不需要微前端。 在我看来&#xff0c;对于每一个没有使用过的新技术&#xff0c;都应该有以下几个过程&#xff1a; 1、调研…...

编程日记 2023/6/1 10:19:33

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

前言 本文介绍python三大主流web框架之一的Django框架的基本使用&#xff0c;如何创建django项目&#xff0c;如何运行django项目以及django项目的目录结构&#xff0c;另外django又是如何返回不同的数据和页面&#xff1f; python三大主流web框架 Python有三大主流的web框架…...

编程日记 2023/5/5 19:42:47

项目人力资源管理

项目人力资源管理的 4 个过程&#xff1a;规划人力资源管理、组建项目团队、建设项目团队、管理项目团队等内容 单项选择题、案例分析题 人力资源管理领域输入、输出、工具和技术表&#xff1a; 过程名输入工具和技术输出编写项目人力资源计划 项目管理计划活动资源需求事业…...

编程日记 2023/5/5 19:37:46

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

1.如果我们要提供一个接口给第三方调用&#xff0c;首先我们需要考虑的就是接口安全&#xff0c;一定要做鉴权&#xff0c;至于鉴权的方式&#xff1a;大家可以在网上自行查找&#xff0c;今天我主要记录如何编写一个既能能支持并发的&#xff0c;且不会影响到我们自身业务的的…...

编程日记 2023/5/5 19:32:45

ESL设计概述

‍‍ ‍‍前言 随着芯片面临着应用场景丰富多变、集成功能模块越来越多、片内通信及模块间接口越来越复杂、设计规模越来越大以及PPA要求越来越高的需求&#xff0c;芯片设计方法面临越来越大的挑战。架构的合理性、完备性和一致性很大程度上决定了芯片设计的成败。基于同样的I…...

编程日记 2023/5/5 19:27:44

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

也许你认为&#xff0c;C语言中的数组非常好理解&#xff0c;就是把一组相同类型的元素存储在同一块空间里。但是你可能并没有真正理解数组的本质&#xff0c;不信的话请回答一下下面的几个小问题&#xff0c;如果你能非常清晰的回答这些问题&#xff0c;那么你对C语言中的数组…...

编程日记 2023/5/5 19:22:42

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

前言 单纯不喜欢 python 对 点开头的包的限制&#xff0c;好麻烦&#xff0c;遂写了本包&#xff0c;来解决这个问题启用本模块后&#xff0c;你可以随时使用 单个点来导入当前目录的模块&#xff0c;也可以使用多个 点导入多级父目录内的模块&#xff0c;而不会报错烦人的模块…...

编程日记 2023/5/5 19:17:41

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

在深圳这家金融公司也待了几年&#xff0c;被别人面试过也面试过别人&#xff0c;大大小小的事情也见识不少&#xff0c;今天又是团面的一天&#xff0c; 一百多个人都聚集在一起&#xff0c;因为公司最近在谈项目出来面试就2个人&#xff0c;无奈又被叫到面试房间。 整个过程…...

编程日记 2023/5/5 19:12:40

Java 实现 YoloV7 人体姿态识别

1 OpenCV 环境的准备 这个项目中需要用到 opencv 进行图片的读取与处理操作&#xff0c;因此我们需要先配置一下 opencv 在 java 中运行的配置。 首先前往 opencv 官网下载 opencv-4.6 &#xff1a;点此下载&#xff1b;下载好后仅选择路径后即可完成安装。 此时将 opencv\b…...

编程日记 2023/5/5 19:07:39

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

目前&#xff0c;随着互联网和移动互联网的发展&#xff0c;多端开发框架已经成为越来越多开发者更好的选择。主要有以下几个方面的前景&#xff1a; 跨平台开发需求不断增加&#xff1a;由于不同平台和设备的差异性&#xff0c;开发人员需要使用不同的编程语言和开发工具来为各…...

编程日记 2023/5/5 19:02:38

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

本文介绍了五种高效学习方法&#xff0c;包括制定详细的学习计划、集中注意力、不断复习、采用多种学习方式和利用小休息。同时&#xff0c;还推荐了五个高效学习工具和平台&#xff0c;包括Coursera、Duolingo、Quizlet、Khan Academy和Anki&#xff0c;让你在学习中事半功倍&…...

编程日记 2023/5/5 18:57:37

查看Docker容器中RabbitMQ的密码

要查看Docker容器中RabbitMQ的密码&#xff0c;可以尝试以下几个步骤&#xff1a; 1. 查看容器运行时的环境变量 在Docker容器中&#xff0c;可以通过环境变量来设置RabbitMQ的用户名和密码。因此&#xff0c;可以使用以下命令查看容器的环境变量&#xff1a; docker inspect…...

编程日记 2023/5/5 18:52:36

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

探索Qt线程编程的奥秘&#xff1a;多角度深入剖析 一、Qt线程编程基础&#xff08;Qt Threading Basics&#xff09;1.1 线程概念与基本概念&#xff08;Thread Concepts and Fundamentals&#xff09;1.2 Qt线程类简介&#xff1a;QThread&#xff08;Introduction to Qt Thre…...

编程日记 2023/5/5 18:47:34

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

文章目录 1 前言2 几个循环2.1 100以内的和2.2 100以内奇数和/偶数和 3 多重循环3.1 向量化3.2 合并循环3.3 apply函数3.4 矩阵运算3.5 foreach分解任务 4 讨论 1 前言 笔者主力机是MBAM1芯片&#xff08;8256&#xff09;&#xff0c;某个下午巩固循环突然思考到个问题&#…...

编程日记 2023/5/5 18:42:33

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

C拷贝构造函数详解 什么是拷贝构造函数&#xff1f;拷贝构造函数的特征默认拷贝构造函数为什么需要显示定义构造函数&#xff1f;拷贝构造函数的调用场景什么时候不需要自己定义拷贝构造函数 什么是拷贝构造函数&#xff1f; 在现实生活中&#xff0c;拷贝构造函数就好像我们上…...

编程日记 2023/5/5 18:37:32

第2章-分治法

第2章-分治法 总分&#xff1a;100分 得分&#xff1a;20.0分 1 . 多选题 中等 10分 有关以下代码&#xff0c;说法正确的是&#xff08; ABCE&#xff09; def BinarySearch(s, x, low, high):if (low > high):return -1middle (low high) / 2if (x s[mid…...

编程日记 2023/5/5 18:32:31

20天能拿下PMP吗？

新版大纲&#xff0c;专注于人员、过程、业务环境三个领域&#xff0c;内容贯穿价值交付范围&#xff08;包括预测、敏捷和混合的方法&#xff09;。除了考试时间由240分钟变更为230分钟、200道单选题变为180道&#xff08;包含单选和多选&#xff09;之外&#xff0c;新考纲还…...

编程日记 2023/5/31 7:49:53

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

Aspose.Words是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。 Aspose API支持流行文件格式处理&#xff0c;并…...

编程日记 2023/5/5 18:22:29

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06