如何使用 django 模板标签有条件地添加 "checked" 而不会导致 htmlhint 抛出错误?

How to conditionally add "checked" using a django template tag without causing htmlhint to throw an error?

我的模板中有 8 行有复选框输入。我将它们的 checked 状态保存在 cookie 中,并使用模板标记插入 checked 是否应在页面最初加载时检查。代码工作得很好。它看起来像这样:

<td><input type="checkbox" id="showaverage" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" {% get_template_cookie selfmt 'showaverage' 'checked' %} /> Average</td>

然而,当我 运行 superlinter 时,我最终得到了关于上述行的以下错误:

<td><input type="checkbox" id="showaverage" onclick="set_template_cookie('showave...
    ^ Special characters must be escaped : [ < ]. (spec-char-escape)
...rage' 'checked' %} /> Average</td>
                       ^ Special characters must be escaped : [ > ]. (spec-char-escape)

奇怪的是,如果我使用相同的 .htmlhintrc 配置文件在命令行上手动 运行 完全相同的 htmlhint 版本,我不会收到任何错误:

>npx htmlhint -c .htmlhintrc DataRepo/search/results/fcirc.html
npx: installed 32 in 3.793s

   Config loaded: .htmlhintrc

Scanned 0 files, no errors found (6 ms).

该配置文件包含:

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "attr-value-not-empty": false,
  "attr-no-duplication": true,
  "doctype-first": false,
  "tag-pair": true,
  "tag-self-close": false,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "title-require": true,
  "alt-require": true,
  "doctype-html5": true,
  "id-class-value": false,
  "style-disabled": false,
  "inline-style-disabled": false,
  "inline-script-disabled": false,
  "space-tab-mixed-disabled": "space",
  "id-class-ad-disabled": false,
  "href-abs-or-rel": false,
  "attr-unsafe-chars": true,
  "head-script-disabled": true
}

...你看到"spec-char-escape": true,的地方,所以如果它会出错,它应该在两个地方都出错...

我不明白为什么 superlinter 的 htmlhint 抱怨而我的没有,但我试图通过添加以下内容来使 superlinter 的版本静音:

<!-- htmlhint spec-char-escape:false -->

但我仍然得到错误。谁能告诉我如何避免错误?


ADDENDUM:我只是尝试通过使用条件来解决这个问题,其中我有或没有 checked,但是当我这样做时,它会抱怨关于 ID 需要是唯一的。观察:

上述问题的解决方法:

                    <td>
                        {% get_template_cookie selfmt 'showaverage' 'checked' as avgchkd %}
                        {% if avgchkd == "checked" %}
                            <input type="checkbox" id="showaverage" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" checked />
                        {% else %}
                            <input type="checkbox" id="showaverage" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" />
                        {% endif %}
                        Average
                    </td>

新问题:

<input type="checkbox" id="showaverage" onclick="set_template_cookie('showaverage',...
                      ^ The id value [ showaverage ] must be unique. (id-unique)

htmlhint 不是为了与模板框架一起使用而编写的。它会在很大程度上忽略用引号括起来的模板标签,这通常不是问题,除非您有条件地需要 html element/tag 中的属性。更糟糕的是,它会将规则应用于模板标记,例如 ID 的唯一性,因此要在不关闭其他有用的 html 提示规则的情况下解决这些问题,您必须找出一个 work-around .

这里是 work-around 我必须解决这个特定问题。解决一个本该简单的问题,代码量和复杂度都高了很多,所以如果有人有更优雅的解决方案,请分享。

为了绕过 html 提示中有条件添加的 checked 属性 spec-char-escape 错误,这有效(正如我在问题的附录中指出的那样):

<td>
    {% get_template_cookie selfmt 'showaverage' 'checked' as avgchkd %}
    {% if avgchkd == "checked" %}
        <input type="checkbox" id="showaverage" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" checked />
    {% else %}
        <input type="checkbox" id="showaverage" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" />
    {% endif %}
    Average
</td>

但这会导致另一个问题:id-unique 错误。为了解决这个问题,我添加了一个毫无意义的模板标签:

@register.simple_tag
def uniquify(retval, unused):
    return retval

然后您可以使用以下方法使 ID 对于 htmlhint 来说是唯一的:

<td>
    {% get_template_cookie selfmt 'showaverage' 'checked' as avgchkd %}
    {% if avgchkd == "checked" %}
        <input type="checkbox" id="{% uniquify 'showaverage' 1 %}" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" checked />
    {% else %}
        <input type="checkbox" id="{% uniquify 'showaverage' 2 %}" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" />
    {% endif %}
    Average
</td>