Django：在模板中渲染表单字段时添加CSS类

Question

我在一个模板中输出表单的字段，比如用 {{ form.first_name }} 这样的方式。我想给它加一个样式类（比如蓝图框架的 span-x-类）。所以我想知道有没有现成的解决方案（模板过滤器），可以让我像这样使用 {{ form.first_name|add_class:"span-4" }}？（我只是想知道Django的开发者或者其他人有没有想到这个问题，而不是我自己去实现）

Answer 1

另一种方法是使用 as_widget 这个方法来修改字段，这种方法比用正则表达式简单安全，而且不需要额外的依赖。

你可以定义一个 自定义模板过滤器：

@register.filter
def add_class(field, class_name):
    return field.as_widget(attrs={
        "class": " ".join((field.css_classes(), class_name))
    })

然后在你的模板中使用：

{{ form.first_name|add_class:"span-4" }}

你还可以用 as_widget 来添加其他属性，比如 placeholder 等等。

Answer 2

你只需要安装 Django 的 widget_tweaks 这个工具。

pip install django-widget-tweaks

安装完成后，你可以在你的模板中做类似这样的事情：

{{ form.search_query|attr:"type:search" }}

--

想了解更多信息，可以点击 这里。

Answer 3

为了解决这个问题，我自己做了一个模板过滤器，你可以把它应用到任何标签上，不仅仅是输入元素哦！

class_re = re.compile(r'(?<=class=["\'])(.*)(?=["\'])')
@register.filter
def add_class(value, css_class):
    string = unicode(value)
    match = class_re.search(string)
    if match:
        m = re.search(r'^%s$|^%s\s|\s%s\s|\s%s$' % (css_class, css_class, 
                                                    css_class, css_class), 
                                                    match.group(1))
        print match.group(1)
        if not m:
            return mark_safe(class_re.sub(match.group(1) + " " + css_class, 
                                          string))
    else:
        return mark_safe(string.replace('>', ' class="%s">' % css_class))
    return value