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

django开发中html继承模板样式

存在问题:
django开发中,不同页面样式相同,如何共用一套母版,避免每个页面都重复写样式;


解决方案:

  1. 添加一个母版,如“layout.html”,在需要继承的位置添加{% block content %}{% endblock %} ;
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面通用模板(其他页面可继承)</title><link rel="stylesheet" href="{% static 'css/bootstrap.css' %}"><link rel="stylesheet" href="{% static 'fonts/glyphicons-halflings-regular.woff' %}"><style>.navbar{border-radius: 0;}</style></head>
<body><!-- 导航栏-->
<nav class="navbar navbar-default"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">用户管理系统</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><!--点击菜单栏部门管理,跳转到部门列表--><li><a href="/depart/list/">部门管理</a></li><li><a href="#">用户管理</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">无佩奇 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">个人资料</a></li><li><a href="#">我的信息</a></li><li role="separator" class="divider"></li><li><a href="#">注销</a></li></ul></li></ul></div></div>
</nav><div>{% block content %}{% endblock %}   #该页面为母版页面,其余页面继承该页面,集成时只需要替换此句位置的内容
</div><script src="{% static 'js/jquery-3.1.1.min.js' %}"></script><script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
  1. 页面继承,在新页面需要继承母版的地方添加{% extends ‘depart_layout.html’ %}

和{% block content %}{% endblock %}

{% extends 'depart_layout.html' %}  #此处引用母版页面{% block content %}  #此处为引入母版内容标识<div class="container"><div style="margin-bottom: 10px"><!--点击按钮新建部门,跳转到部门新增页面--><a class="btn btn-success" href="/depart/add/"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>新建部门</a></div><div class="panel panel-default"><div class="panel-heading"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>部门列表</div><table class="table table-bordered"><thead><tr><th>ID</th><th>部门名称</th><th>操作</th></tr></thead><tbody>{% for obj in querySet %}<tr><th>{{ obj.id }}</th><td>{{ obj.title }}</td><td><a class="btn btn-primary btn-xs" href="/depart/edit/?nid={{ obj.id }}">编辑</a><a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a></td></tr>{% endfor %}</tbody></table></div></div>{% endblock %}  #此处为引入母版内容标识

相关文章:

django开发中html继承模板样式

存在问题&#xff1a; django开发中&#xff0c;不同页面样式相同&#xff0c;如何共用一套母版&#xff0c;避免每个页面都重复写样式&#xff1b; 解决方案&#xff1a; 添加一个母版&#xff0c;如“layout.html”&#xff0c;在需要继承的位置添加{% block content %}{% e…...

MT6769/MTK6769核心板规格参数_联发科安卓主板开发板方案

MT6769安卓核心板具有集成的蓝牙、FM、WLAN和GPS模块&#xff0c;是一个高度集成的基带平台&#xff0c;结合了调制解调器和应用处理子系统&#xff0c;以支持LTE/LTE-A和C2K智能手机应用。 该芯片集成了两个工作频率高达2.0GHz的ARMCortex-A75内核、六个工作频率高达1.70GHz的…...

鸿蒙进阶篇-状态管理之@Provide与@Consume

大家好&#xff0c;这里是鸿蒙开天组&#xff0c;今天我们来学习一下状态管理中的Provide与Consume。 一、概述 嘿&#xff01;大家还记得这张图吗&#xff1f;不记得也要记得哦&#xff0c;因为这张图里的东西&#xff0c;既是高频必考面试题&#xff0c;也是实际开发中&…...

java集合及源码

目录 一.集合框架概述 1.1集合和数组 数组 集合 1.2Java集合框架体系 常用 二. Collection中的常用方法 添加 判断 删除 其它 集合与数组的相互转换 三Iterator(迭代器)接口 3.0源码 3.1作用及格式 3.2原理 3.3注意 3.4获取迭代器(Iterator)对象 3.5. 实现…...

GraphRAG访问模式和知识图谱建模

GraphRAG访问模式和知识图谱建模 GraphRAG访问模式和知识图谱建模什么是GraphRAG了解文本分块检索模式图谱建模相关概念图结构 GraphRAG访问模式和知识图谱建模 graphrag.com是一个开源项目&#xff0c;收集了围绕GraphRAG的相关资源&#xff0c;目前正在快速收集大家的投稿。深…...

TCP/IP协议攻击与防范

一、TCP/IP协议攻击介绍 1.1 Internet的结构​ LAN&#xff1a;局域网 WAN&#xff1a;广域网 WLAN&#xff1a;无线局域网 私有IP地址与公有IP地址&#xff1f; 私有地址&#xff1a;A类&#xff1a;10.0.0.0~10.255.255.255 B类&#xff1a;172.16.0.0~172.31.255.255…...

Java基于 SpringBoot+Vue的口腔管理平台(附源码+lw+部署)

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

11.26深度学习_神经网络-数据处理

一、深度学习概述 1. 什么是深度学习 ​ 人工智能、机器学习和深度学习之间的关系&#xff1a; ​ 机器学习是实现人工智能的一种途径&#xff0c;深度学习是机器学习的子集&#xff0c;区别如下&#xff1a; ​ 传统机器学习算法依赖人工设计特征、提取特征&#xff0c;而深…...

【人工智能】Python常用库-TensorFlow常用方法教程

TensorFlow 是一个广泛应用的开源深度学习框架&#xff0c;支持多种机器学习任务&#xff0c;如深度学习、神经网络、强化学习等。以下是 TensorFlow 的详细教程&#xff0c;涵盖基础使用方法和示例代码。 1. 安装与导入 安装 TensorFlow&#xff1a; pip install tensorflow…...

微信小程序按字母顺序渲染城市 功能实现详细讲解

在微信小程序功能搭建中&#xff0c;按字母渲染城市会用到多个ES6的方法&#xff0c;如reduce&#xff0c;map&#xff0c;Object.entries()&#xff0c;Object.keys() &#xff0c;需要组合熟练掌握&#xff0c;才能优雅的处理数据完成渲染。 目录 一、数据分析 二、数据处理 …...

23省赛区块链应用与维护(房屋租凭【下】)

23省赛区块链应用与维护(房屋租凭) 背景描述 随着异地务工人员的增多,房屋租赁成为一个广阔市场。目前,现有技术中的房屋租赁是由房主发布租赁信息,租赁信息发布在房屋中介或租赁软件,租客获取租赁信息后,现场看房,并签订纸质的房屋租赁合同,房屋租赁费用通过中介或…...

数据结构-图-领接表存储

一、了解图的领接表存储 1、定义与结构 定义&#xff1a;邻接表是图的一种链式存储结构&#xff0c;它通过链表将每个顶点与其相邻的顶点连接起来。 结构&#xff1a; 顶点表&#xff1a;通常使用一个数组来存储图的顶点信息&#xff0c;数组的每个元素对应一个顶点&#xff…...

快速入门web安全

一.确定初衷 1.我真的喜欢搞安全吗? 2.我只是想通过安全赚钱钱吗? 3.我不知道做什么就是随便。 4.一辈子做信息安全吗 这些不想清楚会对你以后的发展很不利&#xff0c;与其盲目的学习web安全&#xff0c;不如先做一个长远的计划。 否则在我看来都是浪费时间。如果你考虑好了…...

rabbitMq两种消费应答失败处理方式

在rabbitMq消费端&#xff0c;有三种应答模式&#xff1a; none&#xff1a;不处理。即消息投递给消费者后立刻 ack 消息会立刻从MQ删除。非常不安全&#xff0c;不建议使用 manual&#xff1a;手动模式。需要自己在业务代码中调用api&#xff0c;发送 ack 或 reject&#xff…...

Qt C++(一) 5.12安装+运行第一个项目

安装 1. Download Qt OSS: Get Qt Online Installer 在该链接中下载qt在线安装程序 2. 安装时候&#xff0c;注意关键一步&#xff0c;archive是存档的意思&#xff0c;可以找到旧的版本&#xff0c; 比如5.12 3. 注意组件没必要全选&#xff0c;否则需要安装50个g, 经过请教…...

【RISC-V CPU Debug 专栏 1 -- RISC-V debug 规范】

文章目录 RISC-V Debug调试用例支持的功能限制和不包括的内容RISC-V 调试架构的主要组件用户与调试主机调试翻译器调试传输硬件调试传输模块(DTM)调试模块(DM)调试功能触发模块版本介绍RISC-V Debug RISC-V 调试规范为 RISC-V 处理器提供了一套标准化的调试接口和功能,旨…...

使用Gradle编译前端的项目

使用Gradle编译前端的项目 前言项目结构根项目&#xff08;parent-project&#xff09;的 settings.gradle.kts后端项目&#xff08;backend&#xff09;的 build.gradle.kts前端项目&#xff08;frontend&#xff09;的 build.gradle.kts打包bootJar 前言 最近的项目都是使用…...

网络爬虫——常见问题与调试技巧

在开发网络爬虫的过程中&#xff0c;开发者常常会遇到各种问题&#xff0c;例如网页加载失败、数据提取错误、反爬机制限制等。以下内容将结合实际经验和技术方案&#xff0c;详细介绍解决常见错误的方法&#xff0c;以及如何高效调试和优化爬虫代码。 1. 爬虫过程中常见的错误…...

【AI绘画】Midjourney进阶:色调详解(下)

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 &#x1f4af;前言&#x1f4af;Midjourney中的色彩控制为什么要控制色彩&#xff1f;为什么要在Midjourney中控制色彩&#xff1f; &#x1f4af;色调纯色调灰色调暗色调 &#x1f4af…...

springboot+redis+lua实现分布式锁

1 分布式锁 Java锁能保证一个JVM进程里多个线程交替使用资源。而分布式锁保证多个JVM进程有序交替使用资源&#xff0c;保证数据的完整性和一致性。 分布式锁要求 互斥。一个资源在某个时刻只能被一个线程访问。避免死锁。避免某个线程异常情况不释放资源&#xff0c;造成死锁…...

Autovisor:5分钟实现智慧树课程自动化学习的智能助手

Autovisor&#xff1a;5分钟实现智慧树课程自动化学习的智能助手 【免费下载链接】Autovisor 2024知道智慧树刷课脚本 基于Python Playwright的自动化程序 [有免安装发行版] 项目地址: https://gitcode.com/gh_mirrors/au/Autovisor Autovisor是一款专为智慧树在线课程平…...

实战分享:如何用Altium Designer高效搞定PCB的定位孔、散热孔和屏蔽孔?

Altium Designer实战&#xff1a;PCB定位孔、散热孔与屏蔽孔的高效设计指南 在PCB设计领域&#xff0c;机械孔的设计往往被工程师视为"简单任务"而草率处理&#xff0c;直到量产时才发现定位偏差、散热不足或EMI超标等问题。作为从业十年的硬件设计师&#xff0c;我曾…...

三步解决Windows 11卡顿难题:开源工具Win11Debloat让系统效率提升3倍

三步解决Windows 11卡顿难题&#xff1a;开源工具Win11Debloat让系统效率提升3倍 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to de…...

电视盒子播放卡顿?教你一招解决所有格式难题

电视盒子播放卡顿&#xff1f;教你一招解决所有格式难题 【免费下载链接】TVBoxOSC TVBoxOSC - 一个基于第三方项目的代码库&#xff0c;用于电视盒子的控制和管理。 项目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSC 一、破解家庭娱乐的格式困局 你是否也曾…...

React-Grid-Layout终极指南:三步构建专业级可拖拽网格布局

React-Grid-Layout终极指南&#xff1a;三步构建专业级可拖拽网格布局 【免费下载链接】react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-grid-layout React-Gri…...

别再单独部署Mosquitto了!用Docker一步搞定带MQTT插件的RabbitMQ 3.13

告别繁琐部署&#xff1a;用Docker Compose快速搭建支持MQTT的RabbitMQ集群 在物联网和微服务混合架构中&#xff0c;消息中间件选型常常让开发者陷入两难——选择轻量级的Mosquitto MQTT broker虽然能满足设备通信需求&#xff0c;却无法处理服务间的AMQP消息&#xff1b;部署…...

HARMONYOS应用实例258:反比例函数图像

反比例函数图像 功能:绘制双曲线,点击图像上的点显示坐标,验证 xy=kxy=kxy=k 的恒等关系。 应用功能: 绘制反比例函数双曲线图像 y = k/x 可调节k值,范围从1到20...

CoPaw个人助理深度体验:多通道对话+定时执行,解放双手的实用工具

CoPaw个人助理深度体验&#xff1a;多通道对话定时执行&#xff0c;解放双手的实用工具 1. CoPaw简介与核心功能 CoPaw是一款基于Qwen3-4B-Instruct-2507模型的个人助理型产品&#xff0c;由AgentScope团队开发。它最大的特点是能够部署在用户自己的环境中&#xff0c;实现数…...

MetaGPT终极指南:5步开启AI驱动软件开发新时代

MetaGPT终极指南&#xff1a;5步开启AI驱动软件开发新时代 【免费下载链接】MetaGPT &#x1f31f; The Multi-Agent Framework: First AI Software Company, Towards Natural Language Programming 项目地址: https://gitcode.com/GitHub_Trending/me/MetaGPT MetaGPT是…...

GLM-4-9B-Chat-1M惊艳效果:碳中和白皮书(120页)中的技术路径拆解、时间节点校验与政策匹配度评分

GLM-4-9B-Chat-1M惊艳效果&#xff1a;碳中和白皮书&#xff08;120页&#xff09;中的技术路径拆解、时间节点校验与政策匹配度评分 1. 项目背景与核心能力 今天要给大家展示一个让人眼前一亮的技术应用场景——用GLM-4-9B-Chat-1M这个本地部署的大模型&#xff0c;来深度分…...