shortcode 是内容文件中调用内置或自定义模板的简单片段。
shortcode 的好处是抽象了 HTML 片段,一次定义多次调用,大大降低了编写和维护的成本,能方便地保持重复内容的一致性,就像编程语言中的函数一样。
警告
部分 shortcode 因为其实现代码或懒加载行为,可能会造成页面布局偏移问题,影响页面的 CLS 分数。
自定义
要自定义 shortcode,需要将 HTML 源码放到 layouts/shortcodes
目录下,HTML 文件的名称即为 shortcode 的名称。
Admonition 提醒
备注
Fork from martignoni/hugo-notice: A Hugo theme component to display nice notices.
在写作和文档撰写中,admonition 是一种用于强调或提醒读者的特殊文本块或元素。admonition 通常以一种特定的样式或格式呈现,以引起读者的注意。这种元素通常用于突出重要信息、提供警告、注意事项、提示或其他特殊类型的内容。
语法:
{{< admonition note >}}
用户即使在略读内容时也应该了解的有用信息。
{{< /admonition >}}
{{< admonition tip >}}
有助于更好或更轻松地做事的建议。
{{< /admonition >}}
{{< admonition important >}}
用户为实现目标需要了解的关键信息。
{{< /admonition >}}
{{< admonition warning >}}
需要用户立即注意以避免出现问题的紧急信息。
{{< /admonition >}}
{{< admonition caution >}}
针对某些行动的风险或负面结果提出建议。
{{< /admonition >}}
{{< admonition changelog >}}
文章的变动历史。
{{< /admonition >}}
效果:
备注
用户即使在略读内容时也应该了解的有用信息。
提示
有助于更好或更轻松地做事的建议。
重要
用户为实现目标需要了解的关键信息。
警告
需要用户立即注意以避免出现问题的紧急信息。
危险
针对某些行动的风险或负面结果提出建议。
变更日志
文章的变动历史。
显示 shortcode 源代码
要想让 shortcode 在页面中不渲染,而是显示其源代码,需要在 shortcode 中添加 /* */
,如:
{{< admonition note >}}
用户即使在略读内容时也应该了解的有用信息。
{{< /admonition >}}
变为:
{{</* admonition note */>}}
用户即使在略读内容时也应该了解的有用信息。
{{</* /admonition */>}}