如何在 Hugo 中的段落中添加 CSS 类

Question

我是 Hugo 的新手，我已经尝试了 30 多分钟来获得一个段落的课程，但它没有。

我正在使用TailwindCSS并且需要向段落标记添加一些 css 类。

代码：

在我的.md文件中我有

This is some paragraph text.
{.font-normal .text-lg}

根据文档（向下滚动一点），上面的内容应该有效，但我得到：

<p>This is some paragraph text.
{.font-normal .text-lg}</p>

我真正想要的是：

<p class="font-normal text-lg">This is some paragraph text.</p>

我究竟做错了什么？hugo version给我hugo v0.105.0+extended linux/amd64 BuildDate=unknown

Answer 1

查看文档，您可以看到block in的[markup.goldmark.parser.attribute]默认值为false。您需要将该值设置为true：

配置文件

[markup]
  [markup.goldmark]
    [markup.goldmark.parser]
      [markup.goldmark.parser.attribute]
        block = true

例如这一段：

This is some paragraph text.
{.font-normal .text-lg}

渲染block = false如下：

<p>This is some paragraph text.
{.font-normal .text-lg}</p>

_{（就像问题中的例子）}

像block = true这样：

<p class="font-normal text-lg">This is some paragraph text.</p>

测试于Hugo v0.108.0+extended linux/amd64 BuildDate=unknown.

_{PS：本例中无需unsafe = false设置[markup.goldmark.renderer]。}

Answer 2

[编辑]我的原始答案如下所示，但对于遇到此问题的其他人来说，这是一个更好的答案。

Hugo 使用 Goldmark 来解析 markdown，默认情况下它将 markup > goldmark > renderer > unsafe 设置为“false”。这意味着如果您将 HTML 与 Markdown 混合，hugo 将抛出错误而不是渲染 HTML。

如果您将“不安全”设置更改为“true”，hugo 将呈现您的 HTML。您可以在 config.yaml 文件（或 config.toml 或 config.json，无论您使用哪个）中进行此设置。有关如何应用此设置的信息，请参阅https://gohugo.io/getting-started/configuration-markup/#goldmark。

请注意，当 unsafe=true 时，如果您编写了错误的 HTML，则可能会破坏页面布局。不过，通常情况下，您只想添加类似 [div class="whatever"][/div] 的内容。大多数人都很聪明，不会搞砸。

[原创回复] 这确实是一件很痛苦的事。您需要创建自己的短代码。在 Hugo 项目目录中，在以下位置创建一个名为 attr.html 的文件：

/layouts/shortcodes/attr.html

然后将其放入 attr.html 中：

<p
    {{ if .Get "class"}}class="{{ .Get "class" }}"{{ end }}
    {{ if .Get "id" }}id="{{ .Get "id" }}"{{ end }}
    {{ if .Get "name" }}name="{{ .Get "name" }}"{{ end }}
    {{ if .Get "style" }}style="{{ .Get "style" }}"{{ end }}
>{{ .Inner }}</p>

然后，返回到您的 Markdown 文件，执行以下操作：

{{< attr class=".font-normal .text-lg" >}}This is some paragraph text.{{< /attr >}}

您最终应该得到以下输出：

<p class=".font-normal .text-lg">This is some paragraph text.</p>

上面的短代码也支持 id、name 和 style 属性。如果您需要更多，则必须将它们添加到短代码模板中。另请注意，此模板假设您希望在输出中包含“p”标签。