如何为Django的django-simple-svg包添加Alpine.js属性支持

问题原因 #

Python 不允许关键字参数名包含冒号、@ 等特殊字符，Django 模板引擎解析模板标签时，:class 这类带特殊符号的参数名无法被正常识别为 kwargs 的键，因此不会传入你的 svg 处理函数。

解决方案 #

我们可以通过属性名转换规则来兼容特殊前缀的属性，只需少量修改核心代码即可支持 Alpine.js 常用的:、@等前缀属性：

1. 修改 svg.py 核心逻辑 #

调整属性拼接部分的代码，增加命名转换规则：

# 替换原有属性拼接逻辑即可
if kwargs:
    attr_list = []
    for k, v in kwargs.items():
        # 转换规则1：双下划线__替换为冒号:  比如__class 转为 :class
        attr_name = k.replace('__', ':')
        # 转换规则2：at_开头的属性替换为@开头  比如at_click 转为 @click
        if attr_name.startswith('at_'):
            attr_name = '@' + attr_name[3:]
        attr_list.append(f'{attr_name}="{v}"')
    attributes = " ".join(attr_list)
    svg = svg.replace("<svg", "<svg " + attributes)

2. 模板调用方式 #

按照约定的转换规则传参即可实现你要的效果：

{% load svg %}
{% svg 'icon-chevron-down' __class="{'rotate-180': open, 'rotate-0': !open}" class="inline -mb-0.5 w-4 h-4 ml-0.5 transition-transform duration-200 transform fill-current text-gray-400" %}

如果需要绑定点击事件，也可以这么写：

{% svg 'icon-chevron-down' at_click="open = !open" __class="{'rotate-180': open}" %}

3. 补充测试用例 #

在tests.py中增加特殊属性的测试逻辑，保证功能稳定：

def test_should_support_alpine_attributes(self):
    svg_file = open(
        os.path.join(settings.BASE_DIR, "static", "svg", "django.svg")
    ).read()
    template = Template("{% load svg %}{% svg 'django' __class='{\"rotate-180\": open}' at_click='open = !open' %}")
    rendered_content = template.render(Context({'open': True}))
    
    self.assertNotEqual(svg_file, rendered_content)
    self.assertIn(':class="{"rotate-180": open}"', rendered_content)
    self.assertIn('@click="open = !open"', rendered_content)

内容的提问来源于stack exchange，提问作者xshapira