Django:<ul>里面的help_text字段

Question

我想<ul>在help_text一个django表格字段里面.

不幸的是,django渲染了help_text内部<span>.

根据HTML规范,<span>一定不能包含<ul>.至少这是我的验证工具所说的.

这是django的来源:https://github.com/django/django/blob/master/django/forms/forms.py#L283

def as_table(self):
    "Return this form rendered as HTML <tr>s -- excluding the <table></table>."
    return self._html_output(
        normal_row='<tr%(html_class_attr)s><th>%(label)s</th><td>%(errors)s%(field)s%(help_text)s</td></tr>',
        error_row='<tr><td colspan="2">%s</td></tr>',
        row_ender='</td></tr>',
        help_text_html='<br><span class="helptext">%s</span>',
        errors_on_separate_row=False)

我能做些什么,以获得<ul>在help_text 和有效的HTML.

覆盖as_table()不起作用,因为表单来自"core_app",而字段来自插件.两者都是两个不同的git repos,我不想因为这个而修改核心.

Answer 1

正如您已经提到的,在HTML中有一个块和内联元素的概念.
简而言之,块元素生成一个新行,并可能包含其他块和内联元素.内联元素不会生成新行,并且可能包含其他内联元素,但不包含块元素.

MDN Web文档提供了有关块和内联元素的更多信息.

由于span是内联元素,因此您不能放置ul哪个是块级元素.或者,你可以,但那时它不是一个有效的HTML,而这不是你想要的.

由于您使用的是第三方代码,因此修改它可能会引入其他问题.
你可以分叉它,修改你需要的部件,然后使用你的叉子.但是当第三方代码更新时,您必须重复整个过程.

在这种情况下你可以做猴子修补.
对于您的特定问题,我们可以这样做:

from django import forms

class MyBaseForm(forms.BaseForm):
    def as_table(self):
        "Return this form rendered as HTML s -- excluding the ."
        return self._html_output(
            normal_row='%(label)s%(errors)s%(field)s%(help_text)s',
            error_row='%s',
            row_ender='',
            help_text_html='<div class="helptext">%s</div>',
            errors_on_separate_row=False)

BaseForm.as_table = MyBaseForm.as_table

您可以将此代码放在forms.py适合您的文档或任何其他文件中.

现在help_text将把它呈现为一个div元素,它是一个块级元素.您可以在其中放置无序列表ul并拥有有效的HTML.

修补猴子并不是解决问题最美妙的方式,但在我看来,这是克服一些棘手问题的实用方法.

Answer 2

我认为你想要的并不是" <ul>在你的内心help_text",而是"在你的帮助文本中显示一个子弹列表".

因此,如果您无法覆盖as_table()或使用其他内容as_table(),我希望您仍然可以更改样式表.在这种情况下,你可以伪造你ul的span:

from django.utils.safestring import mark_safe

help_text=mark_safe(
    '<span class="fake-ul">'
    '<span class="fake-li">foo</span>'
    '<span class="fake-li">bar</span>'
    '</span>'
)

这是你的CSS:

.fake-ul {
  display: block;
  padding-left: 40px;
  list-style-type: disc;
}
.fake-li {
  display: list-item;
}