Skip to main content

Hugo 中使用嵌套 Shortcode 显示异常的解决

最近我想增加一个 timeline 的 shortcode 来优化一些界面上的展示。我定义的 timeline 中单个事件的 shortcode 如下,

<div class="timeline-container">
  <div class="event-content">
    <div class="event-body">
      {{ .Inner }}
    </div>
    <div class="date">
      {{.Get "date"}}
    </div>
  </div>
</div>

正常使用时展示正常,

{{% event date="2023-10-23" %}}
test1
{{% /event %}}

{{% event date="2023-10-22" %}}
test2
{{% /event %}}

但当我嵌套使用时,显示出现了异常,一部分 html 代码被当作了代码块展示。

{{% event date="2023-10-23" %}}
test1

{{% event date="2023-10-22" %}}
test2
{{% /event %}}

{{% /event %}}

一番搜索后,我找到了问题所在,使用{{% %}}调用 shortcode 的结果会被当作 markdown 进行渲染。而在 markdown 中,如果内容有缩进,就会当作代码块处理(新学到的知识)。

一个解决办法是在嵌套的外层使用 {{< >}} 调用 shortcode,这样结果就不会被当作 markdown 进行渲染了。但这个不满足我的需求,我会在内容中使用 markdown,改成使用 {{< >}}后下面这种结果不是我想要的。

{{< event date="2023-10-23" >}}
**test1**

{{% event date="2023-10-22" %}}
test2
{{% /event %}}

{{< /event >}}

另一个解决办法是取消在 shortcode 定义中 {{ .Inner }} 处的缩进,这样可以避免 markdown 将其当作代码块处理,修改后问题解决。