当前位置: 首页 > 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;造成死锁…...

创业团队如何利用taotoken管理多项目ai调用成本

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 创业团队如何利用Taotoken管理多项目AI调用成本 对于同时推进多个AI应用原型开发的创业团队而言&#xff0c;一个常见的挑战是如何…...

DCNv4:重塑视觉模型核心,三倍速率的动态稀疏卷积如何炼成?

1. 从标准卷积到DCNv4的进化之路 计算机视觉领域的核心算子就像乐高积木里的基础模块&#xff0c;决定了整个模型的表达能力。传统卷积就像用固定形状的积木拼图&#xff0c;虽然稳定但缺乏灵活性。2017年诞生的可变形卷积&#xff08;DCN&#xff09;首次给积木加上了"可…...

从NUCLEO板载调试器到独立ST-LINK:打造高效STM32开发环境

1. 为什么需要独立ST-LINK调试器&#xff1f; 很多STM32开发者刚开始接触NUCLEO开发板时&#xff0c;都会发现板子上自带了一个ST-LINK调试器。这个设计本来是为了方便初学者快速上手&#xff0c;但随着项目复杂度提升&#xff0c;你会发现这个板载调试器存在不少限制。比如每次…...

左手库克,右手马斯克,她凭什么坐 C 位?15岁辍学,从打工妹逆袭成中国女首富。网友:顶配大女主

①特朗普访华&#xff0c;5 月 14 日晚上在人民大会堂金色大厅举行欢迎晚宴&#xff0c;有很多中方企业家也受邀去了&#xff0c;小程程那天晚上的推文只介绍了雷军那一桌的中方大佬。这一桌大佬偏互联网行业&#xff0c;所以他们曝光度更高&#xff0c;大家能认出来的更多。其…...

ImageToSTL:将二维图片转化为可打印三维模型的艺术

ImageToSTL&#xff1a;将二维图片转化为可打印三维模型的艺术 【免费下载链接】ImageToSTL This tool allows you to easily convert any image into a 3D print-ready STL model. The surface of the model will display the image when illuminated from the left side. 项…...

CTF逆向新手必看:用Python脚本搞定AES、Z3、Base64这些常见加密(附避坑指南)

CTF逆向实战手册&#xff1a;Python脚本自动化破解高频加密算法 1. 逆向工程中的加密算法挑战 在CTF逆向题目中&#xff0c;加密算法就像迷宫中的隐形墙壁&#xff0c;看似无形却处处设障。最近三年赛事数据显示&#xff0c;AES、Base系列和Z3约束求解三类题型出现频率合计占比…...

基于ESP32的嵌入式AI语音交互系统:从硬件设计到软件实现全解析

1. 项目概述&#xff1a;从零打造一个会聊天的嵌入式AI伙伴几年前&#xff0c;当我第一次把“小爱同学”拆开&#xff0c;看到里面密密麻麻的芯片和电路时&#xff0c;一个念头就冒了出来&#xff1a;能不能自己动手&#xff0c;用一块开发板&#xff0c;从头搭建一个能听会说、…...

技术博主都在悄悄用的Perplexity高级搜索语法,11个未公开符号组合全曝光

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Perplexity高级搜索语法的底层逻辑与设计哲学 Perplexity 的高级搜索语法并非简单的关键词匹配扩展&#xff0c;而是基于语义意图建模与查询图谱重构的设计实践。其核心在于将用户自然语言查询实时编译为可执行…...

Zotero期刊标签:从数据映射到视觉呈现的自动化实践

1. 科研文献管理的视觉化革命 作为一名常年泡在文献堆里的科研狗&#xff0c;我最头疼的就是面对几百篇PDF时那种无从下手的窒息感。直到三年前偶然发现Zotero的标签染色功能&#xff0c;才真正体会到什么叫"一眼定位关键文献"。想象一下&#xff1a;当你打开文献库&…...

如何彻底解决C盘空间不足问题:Windows Cleaner开源工具终极指南

如何彻底解决C盘空间不足问题&#xff1a;Windows Cleaner开源工具终极指南 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否曾因C盘爆红而束手无策&#xf…...