Django的可重用HTML模板示例

01-配置并运行Django项目

首先按照博文 https://blog.csdn.net/wenhao_ir/article/details/131166889配置并运行Django项目。

02-创建可重用模板文件

templates目录下新建目录common,然后在目录common下新建文件:navbar.html,并写入下面的代码:

html 复制代码
<p>这里是网站的Logo!</p>
<p>这里是网站的菜单导航!</p>

03-创建调用重用模板文件的HTML文件

templates目录下新建文件:index.html,并写入下面的代码:

html 复制代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

<!-- 引入共享的顶部部分 -->
{% include './common/navbar.html' %}

<div style="color:red;font-size:24px;">你好 Django !!!我是昊虹AI笔记!</div>

</body>
</html>

然后访问URL:

bash 复制代码
http://127.0.0.1:8010/index/

效果如下:

相关推荐
HappRobot11 分钟前
python类和对象
开发语言·python
盼哥PyAI实验室24 分钟前
Python YAML配置管理:12306项目的灵活配置方案
开发语言·python
哈哈老师啊36 分钟前
Springboot简单二手车网站qs5ed(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
数据库·spring boot·后端
JIngJaneIL41 分钟前
基于Java+ vue图书管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
Github掘金计划1 小时前
开发者狂喜!GitHub 官方开源:支持 Copilot/Cursor,规范即代码,27k Star 封神!
java·python·kafka·github·copilot
shenzhenNBA1 小时前
python用openpyxl操作excel-单元格样式操作
python·excel·openpyxl·单元格样式
IT_陈寒1 小时前
Vue 3.4 实战:5个被低估的Composition API技巧让我的开发效率提升40%
前端·人工智能·后端
VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue考勤管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
岁月宁静1 小时前
多模态 Agent 技术全景解析 — 从模型能力、Agent 架构到工程化与商业落地
python·agent
试着1 小时前
【VSCode+AI+测试】连接ai大模型
ide·人工智能·vscode·python·学习·编辑器·ai-test