⚡ 编程实验室🏗️ HTML🎨 CSS⚡ JavaScript🐍 Python🗄️ SQL☕ Java⚛️ React💚 Vue🟢 Node.js⚙️ C语言🐘 PHP🐹 Go🔷 TypeScript🐬 MySQL🔧 C++🎯 C#🦀 Rust🅱️ Bootstrap💡 jQuery🎸 Django🍃 MongoDB👗 Sass🎪 Kotlin📊 R语言📋 XML📊 Excel🐘 PostgreSQL🐳 Docker🅰️ Angular🎮 游戏🏠 网站首页

秒传属性系统:自定义模板标签实现动态 HTML 属性注入

开发一个 {% attrs %} 模板标签,支持在模板中动态合并、覆盖 HTML 属性,解决 Bootstrap 组件属性传递的冗长问题。 · 难度:入门 · +10XP

秒传属性系统:自定义模板标签实现动态 HTML 属性注入

你是否在写 Django 模板时,为了给一个按钮加多个 class 或 data-* 属性而重复写很多代码?本教程将创建一个 {% attrs %} 模板标签,支持:1) 默认属性 + 用户传入属性的智能合并(class 合并,其他覆盖);2) 支持传递字典、关键字参数;3) 自动转义。通过注册 inclusion_tag + 自定义 Node 实现。最终你可以写出 {% button attrs="class:btn btn-primary data-id:123" %} 这样简洁的代码。

from django import template
register = template.Library()

@register.simple_tag def attrs(default_attrs=None, **kwargs): merged = default_attrs or {} merged.update(kwargs) return ' '.join( f'{k}="{v}"' for k, v in merged.items() )

# 模板中使用 <button {% attrs "class:btn" class="btn-primary" data-id=123 %}> Click </button>

Ctrl+Enter
🚀 升级VIP
解锁全部课程+AI助手

🏆 学习排行

加载中...

📊 统计

📖 189 篇
0 完成
🔥 0