什么是 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 html >}}  
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/

主题扩展的 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 官网。