ZHENG Zi'ou

为什么使用shortcode

由于Hugo支持在文本内容中使用html标签，因此在文本中的文字如果需要高亮可以直接使用<mark>标签即可。但是code fence中的代码如何进行高亮呢？直接在code fence中使用html标签会被默认为文本（理应有办法转义，但暂时还不了解）。

之前我的方案是使用highlight shortcode(参见Blog养成记3 Hugo的语法高亮配置)，但是由于highlight渲染的风格难以调整的关系，对于这个使用起来非常不灵活。而且使用hightlight shortcode只能一行一行地高亮，不够灵活，有时只想高亮代码段中部分代码怎么办？

什么是shortcode模板

Hugo官网对Shortcode介绍为出现在内容文件中可以自定义的代码片段(snippets)，可以减少作者在Markdown的内容中增加大段html的标签内容。Hugo本身提供了一些内建的shortcode，比如我之前使用的highlight就是其中一个，还有一些其他常用的片段内容。

Shortcode不会在Hugo模板(template)中起作用，对应在Hugo模板中的片段应放在partial文件夹中作为partial模板。

新建shortcode改变背景色

在/layouts/shortcodes/文件夹中新建一个html文件，文件名是shortcode的代码名。

在这个场景中，我想要改变选中文字的背景色，因此我新建了bgstyle.html文件。

在该文件中写shortcode的内容：

{{- if eq (.Get 0)  "yellow" -}}
    <mark style="background: #ffeb92fd;">
        {{- .Inner -}}
    </mark>
{{- else if eq (.Get 0) "red" -}}
    <mark style="background: #fa9494;">
        {{- .Inner -}}
    </mark>
{{- else if eq (.Get 0) "blue" -}}
    <mark style="background: #9ccaff;">
        {{- .Inner -}}
    </mark>
{{- else if eq (.Get 0) "green" -}}
    <mark style="background: #acffea;">
        {{- .Inner -}}
    </mark>
{{- else if eq (.Get 0)  "purple" -}}
    <mark style="background: #eeb4ff;">
        {{- .Inner -}}
    </mark>
{{- else -}}
    <mark style="background: .Get 0 ;">
        {{- .Inner -}}
    </mark>    
{{- end -}}

在这个样例中，.Get 0是获得shortcode的第一个参数，在这里是背景颜色参数，.Inner是shortcode开始和结束标记之间的内容，{{- code -}}与{{ code }}的区别是前者会将html标签间的空格换行都去了，而后者会保留。由于我不希望改变高亮的格式，因此选择前者。

实际上shortcode模板中有更多的内容，包括传入多个参数等，这些就需要参看官方文档了。

如何使用shortcode

有两组使用方法，前者(%)在开始/结束标记之间会出现Markdown语法，后者不会：

<!-- 会出现Markdown语法 -->
{{% myshortcode %}}Hello **World!**{{% /myshortcode %}}

<!-- 不会出现Markdown语法 -->
{{< myshortcode >}}<p>Hello <strong>World!</strong></p>{{< /myshortcode >}}

在我上面的例子中，使用方式和效果如下：

我就想{{% bgstyle blue %}}尝试一下{{% /bgstyle %}}如何使用shortcode.
我就想尝试一下如何使用shortcode.

Resource资源链接汇总

Hugo官网对Shortcode介绍

版本控制