【Django】 templates模板与static静态文件

1.templates模板

在app01(你创建的app名称)文件夹下,创建templates文件夹,其中存放想要返回的html文件

对应关系如下

除了上面的方式,还可以在项目根目录下创建templates文件夹,这时需要在settings.py文件中增加一行代码(如红框所示)

os.path.join(BASE_DIR, 'templates')

查找逻辑:

(1)Django 会在项目根目录下的 templates 目录中查找模板文件。

(2)如果未找到,再查找每个app的 templates 目录(前提是 APP_DIRS 为 True)。

user_list.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用户列表</h1></body>
</html>

运行结果

2.static静态文件

和templates类似,static放在app目录下,里面存放各种静态文件,我习惯把不同文件分类,放在不同的子文件夹中,例如css、img、js、plugins等

以图片为例,在上面user_list.html文件的基础上,增加一个img标签,把图片放上去,注意路径

结果

规范的引入静态文件

还是以user_list.html文件为例

{% load static %}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.3/css/bootstrap.css' %}">
</head>
<body>
<h1>用户列表</h1>
<img src="{% static 'img/p1.png' %}" alt=""><!-- 测试 Bootstrap 按钮 -->
<div class="container mt-4"><button class="btn btn-primary">这是一个 Bootstrap 按钮</button>
</div><script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-5.3.3/js/bootstrap.bundle.js' %}"></script></body>
</html>

结果

学习:【最新Python的web开发全家桶(django+前端+数据库)-哔哩哔哩】 https://b23.tv/QIMXaZU

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/69789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解锁电商数据宝藏:淘宝商品详情API实战指南

在电商蓬勃发展的今天&#xff0c;数据已成为驱动业务增长的核心引擎。对于商家、开发者以及数据分析师而言&#xff0c;获取精准、实时的商品数据至关重要。而淘宝&#xff0c;作为国内最大的电商平台&#xff0c;其海量商品数据更是蕴含着巨大的价值。 本文将带你深入探索淘…

YOLO11 【二】 【速通 训练+推理+导出】

一、 vscode 配置 conda 环境 选择默认配置修改配置文件 %windir%\System32\cmd.exe “/K” D:\Software\Anaconda3\Scripts\activate.bat D:\Software\Anaconda3 将该命令加到配置文件后面 ** “/K” D:\Software\Anaconda3\Scripts\activate.bat D:\Software\Anaconda3 **…

UWB功耗大数据插桩调研

一、摘要 UWB功耗点 插桩点 日志关键字 电流 蓝牙持锁 BatteryStats的锁统计 vendor_bluetooth_lock 30~40mA 测距 UwbSessionManager.startRanging UwbSessionManager.stoptRanging 或接入fadiKey Uwb状态广播 "com.fadiui.dkservice.action.uwb.state.change&q…

开发完的小程序如何分包

好几次了&#xff0c;终于想起来写个笔记记一下 我最开始并不会给小程序分包&#xff0c;然后我就各种搜&#xff0c;发现讲的基本上都是开发之前的小程序分包&#xff0c;可是我都开发完要发布了&#xff0c;提示我说主包太大需要分包&#xff0c;所以我就不会了。。。 好了…

前端vue项目打包部署

一、打包 可以在vscode中输入命令打包&#xff0c;也可以通过vscode的图形化界面打包 打包完成后&#xff0c;目录中&#xff0c;会生成dist文件。打包后&#xff0c;数据占用空间更小&#xff0c;比如把换行都去掉了。 完成打包 二、部署 前端主流部署服务器是 Ngix &#x…

PyTorch 中 `torch.cuda.amp` 相关警告的解决方法

在最近的写代码过程中&#xff0c;遇到了两个与 PyTorch 的混合精度训练相关的警告信息。这里随手记录一下。 警告内容 警告 1: torch.cuda.amp.autocast FutureWarning: torch.cuda.amp.autocast(args...) is deprecated. Please use torch.amp.autocast(cuda, args...) i…

C++ STL容器之set使用及复现

cset 1. 关联式容器 vector、list、deque、forward_list(C11) 等STL容器&#xff0c;其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身&#xff0c;这样的容器被统称为序列式容器。而 map、set 是一种关联式容器&#xff0c;关联式容器也是用来存储数据的&#x…

激光工控机在精密制造中的应用与优势

在精密制造中&#xff0c;激光工控机可以用于许多场景例如 激光切割与雕刻&#xff1a;用于金属、塑料、陶瓷等材料的精密切割和雕刻&#xff0c;适用于汽车、航空航天、电子等行业&#xff1b;可实现复杂图案和高精度加工&#xff0c;满足微米级精度要求。 激光焊接&#xf…

第 12 天:行为树(Behavior Tree),让 AI 更智能!

&#x1f3af; 目标&#xff1a; ✅ 理解 Unreal Engine 5 行为树&#xff08;Behavior Tree&#xff09; ✅ 创建行为树&#xff08;BT&#xff09;和黑板&#xff08;Blackboard&#xff09;管理 AI 状态 ✅ 使用任务&#xff08;Task&#xff09;让 AI 巡逻、追踪、攻击玩家…

公然上线传销项目,Web3 的底线已经被无限突破

作者&#xff1a;Techub 热点速递 撰文&#xff1a;Yangz&#xff0c;Techub News 今天早些时候&#xff0c;OKX 将上线 PI 的消息在圈内引起轩然大波&#xff0c;对于上线被板上钉钉为传销盘子的「项目」 &#xff0c;Techub News 联系了 OKX 公关&#xff0c;但对方拒绝置评…

Zabbix告警队列清理教程

文章来源&#xff1a;乐维社区 场景&#xff1a;由于网络故障导致&#xff0c;导致zabbix几百上千台机子告警&#xff0c;邮件失败多次尝试发送&#xff0c;导致堆积了很多告警队列&#xff0c;其他邮件产生了时延。一下是两种解决方法。 方法一&#xff1a; 1、查看alerts目…

windows使用cmake编译工程教学:libcurl库源码编译--qt6使用ftp服务--vcpkg下载的包cmake如何使用

windows使用cmake编译工程教学:libcurl库源码编译–qt6使用ftp服务–vcpkg下载的包cmake如何使用 前言 qt6中取消了对ftp协议的支持,所以如果要想在qt中使用tfp服务,需要接入第三方库,也就是libcurl,libcurl需要在本地进行编译,趁这个机会学习一下cmake的使用,记录一下…

网易易盾接入DeepSeek,数字内容安全“智”理能力全面升级

今年农历新年期间&#xff0c;全球AI领域再度掀起了一波革命性浪潮&#xff0c;国产通用大模型DeepSeek凭借其强大的多场景理解与内容生成能力迅速“出圈”&#xff0c;彻底改写全球人工智能产业的格局。 作为国内领先的数字内容风控服务商&#xff0c;网易易盾一直致力于探索…

42页精品PPT | 数字政府智慧政务大数据平台建设方案

这份《数字政府智慧政务大数据平台建设方案》PPT详细阐述了数字政府智慧政务大数据平台的建设背景、目标、架构以及实施策略。方案围绕解决当前政务服务中的痛点&#xff0c;如“互联网政务服务”推进中的数据共享难题、数据安全风险以及部门间业务流程整合等问题展开。 通过构…

CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层

CSS 小技巧 —— CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层 1. 两个元素实现 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>纯 CSS 实现 Tooltip 功能-鼠标 hover 之后出现弹层</titl…

网络工程师 (34)生成树协议

前言 生成树协议&#xff08;Spanning Tree Protocol&#xff0c;STP&#xff09;是一种工作在OSI网络模型中第二层&#xff08;数据链路层&#xff09;的通信协议&#xff0c;其基本应用是防止交换机冗余链路产生的环路&#xff0c;确保以太网中无环路的逻辑拓扑结构&#xff…

基于CanMV IDE 开发软件对K210图像识别模块的开发

简介 CanMV IDE 是一款专为 K210 芯片设计的图形识别 Python 软件&#xff0c;它提供了强大的功能&#xff0c;帮助开发者轻松实现基于 K210 芯片的图形识别应用。无论你是初学者还是经验丰富的开发者&#xff0c;CanMV IDE 都能为你提供便捷的开发环境和丰富的资源。 硬件资…

linux的三剑客和进程处理

Linux三剑客&#xff1a; grep&#xff1a;查找 sed&#xff1a;编辑 awk&#xff1a;分析 grep - 正则表达式 [rootlocalhost ~]# grep ^a hello.txt abc grep - 忽略大小写&#xff0c;还有一些场景需要查询出来对应字符串所在的行号&#xff0c;方便我们快速在文件中定位字…

Python虚拟环境管理工具 pyenv

情景 我现在在部署一个python 项目&#xff0c;需要用到Python 3.10。但是我本地已经有了一个3.12解释器&#xff0c;有没有一种方法&#xff0c;可以管理python 环境&#xff0c;还可以随意切换。怎么做&#xff1f; window 安装pyenv-win 使用 PowerShell&#xff08;以管…

基于 PyTorch 的树叶分类任务:从数据准备到模型训练与测试

基于 PyTorch 的树叶分类任务&#xff1a;从数据准备到模型训练与测试 1. 引言 在计算机视觉领域&#xff0c;图像分类是一个经典的任务。本文将详细介绍如何使用 PyTorch 实现一个树叶分类任务。我们将从数据准备开始&#xff0c;逐步构建模型、训练模型&#xff0c;并在测试…