简单来理解，Shortcodes 就是一组内容样式模板，你可以在 markdown 里像使用 HTML 一样使用 Shortcodes

什么是 Shortcodes

Hugo 喜欢 Markdown 是因为它的内容格式简单，但有时 Markdown 也不尽如人意。有时候为了达到想要的效果，内容作者不得不将原始 HTML 添加到 Markdown 里。但是，这与 Markdown 语法的优美简洁不是相矛盾了吗。所以 Hugo 创建了 Shortcodes 来避免这些限制。

简单来理解，Shortcodes 就是一组内容样式模板，你可以在 markdown 里像使用 HTML 一样使用 Shortcodes。例如：

例 1：

1

{{< figure src="/images/文件.png" title="my-blog" >}}

第一个词figure是该 Shortcode 的名称，其后均为参数（选项）。

例2：

1
2
3

{{< highlight >}}
A bunch of code here
{{< /highlight >}}

和上面一样，但你可能注意到了，这个例子比上一个多了一个闭合标签{{< /highlight >}}，在渲染时可以引用两个标签之间的内容，当内容很长或者更复杂时，比起用单标签来说就很方便了。

总之，Shortcodes 使内容更加简洁，写作也更加流畅。但是说了这么多，到底有哪些Shortcodes，又该怎么使用呢？

Hugo 内置的 Shortcodes

Hugo 内置了一组预定义的 Shortcodes，有关其详细介绍请移步：

推荐中文版：https://hugoloveit.com/zh-cn/theme-documentation-built-in-shortcodes/
官方英文版：https://gohugo.io/content-management/shortcodes/

NewBee 扩展的 Shortcodes

除了Hugo内置的Shortcodes，NewBee主题还提供了如下的Shortcodes。

你也可以在 Markdown 文件中用更简单的语法实现部分 shortcodes 的功能，详情见：

mermaid

基于 Mermaid 的mermaidshortcode，可绘制图表和流程图。

示例：

1
2
3
4

{{< mermaid >}}
flowchart LR
   A -- text --> B -- text2 --> C
{{< /mermaid >}}

输出：

更多语法请移步：Mermaid 官网。

mathjax

基于 MathJax 的mathshortcode，可编辑公式。

例1（行内公式，用\(和\)表示公式的开始和结束）：

1
2
3

{{< math >}}
这是一个行内公式：\( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)
{{< /math >}}

输出：

例2（公式块，用$$和$$表示公式的开始和结束）：

1
2
3

{{< math >}}
这是一个公式块：$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
{{< /math >}}

输出：

更多语法请移步：MathJax 官网。