秒传属性系统:自定义模板标签实现动态 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>