目前我的博客采用 Hugo 框架，使用 Markdown 进行写作。Markdown 语法的特点是简洁，但有时我们在写作的过程中需要插入一些特殊的样式，然而 Markdown 并没有相对应的语法，我们就不得不额外插入一些 HTML 语言。Hugo 提供了简码（Shortcodes）的功能，我们事先设定好某种样式的模板和对应的简码，当你需要插入这种样式的时候，直接使用简码插入，Hugo 能够自动将其转化为 HTML 语言。这样便节省了书写大量繁琐的 HTML 语言的时间。
Hugo 在其官网上介绍了自带的一些简码的形式和自定义简码的方法。对于官方自带简码的介绍和如何插入简码，请阅读上述的两篇文章，这里不再赘述。下面我来分享一些我的博客目前使用的自定义简码。需要注意的是，部分简码需要搭配 MemE 主题使用，如果你使用的是其他主题，可能需要做适当的修改。
align
这个简码的功能是设定文字的位置（居左、居中、居右、两端对齐等等），支持的样式基于 CSS 语法。你需要在 ~/layouts/shortcodes/ 下创建 align.html 文件，其内容如下：
| |
具体简码和样式如下：
| |
文字居左
| |
文字居中
| |
文字居右
github
这个简码的功能是插入 GitHub 仓库。有时候我们会在文中分享某个 GitHub 仓库，但如果只是放一个超链接，样式有些单一，不能吸引读者的注意力。所以我模仿 GitHub 仓库的形式写了这个简码。首先创建 github.html 文件，内容如下所示：
| |
然后添加自定义 CSS 样式。在 ~/assets/scss/custom/_custom.scss 文件中添加如下内容：
| |
最后需要在 ~/data/SVG.toml 文件中插入图标：
| |
你需要在简码中填写仓库名 name，仓库链接 link，仓库描述 description，代码语言 language，代码语言对应的颜色 color。
具体简码和样式如下：
| |
A program used in estimating organic carbon stocks in oceans. 计算指定海域的有机碳存量，包括颗粒有机碳与溶解有机碳，数据依赖于 NASA 中分辨率成像光谱仪 MODIS 遥感产品。
MATLAB
notice
之前在使用 Hexo 的 NexT 主题的时候，主题中自带了很多标签样式，其中就有一个类似的提示标签。在 Hugo 中，也有人写了一个类似的简码：
如果你在 MenM 主题中直接使用这个短代码的话，其样式会有一些错误。因此我对原有的代码进行了小小的修改，改成了和 Hexo 的 NexT 主题 Note 标签类似的样式。
首先创建 notice.html 文件，内容如下所示：
| |
然后添加自定义 CSS 样式：
| |
最后同样需要在 ~/data/SVG.toml 文件中插入图标：
| |
具体简码和样式如下：
| |
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
| |
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
| |
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
| |
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
simple-notice
simple-notice 是 notice 的简化版本。代码构成和 notice 基本一致，其样式参考了 web.dev 的设计。虽然说 simple-notice 和 notice 都是四种配色，但颜色的深浅不同。主要是因为，simple-notice 的文字也带有相应的颜色，如果采用 notice 的配色，明模式下颜色过浅，暗模式下颜色过深，不易识别。
创建 simple-notice.html 文件，内容如下所示：
| |
添加自定义 CSS 样式：
| |
在 ~/data/SVG.toml 文件中插入图标：
| |
具体简码和样式如下：
| |
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
| |
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
| |
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
| |
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
quote
这个简码是用来替代 Mardown 默认的引用样式。我常常将这个简码插入到随笔的引用中。首先创建 quote.html 文件，其内容如下：
| |
然后添加自定义 CSS 样式：
| |
具体简码和样式如下：
中文：
| |
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
英文：
| |
To see a world in a grain of sand. And a heaven in a wild flower. Hold infinity in the palm of your hand. And eternity in an hour.
quote-center
这是一个用于居中引用的简码，其样式也是借鉴自 Hexo 的 NexT 主题。首先创建 quote-center.html 文件，其内容如下：
| |
然后添加自定义 CSS 样式：
| |
具体简码和样式如下：
| |
十里青山远，潮平路带沙
数声啼鸟怨年华
又是凄凉时候，在天涯
白露收残月，清风散晓霞
绿杨堤畔问荷花
记得年时沽酒，那人家
注：因为简码的具体形式写出来会直接被 Hugo 转义渲染，所以需要在简码的括号内加入 /* */ 来防止被转义[1]。即你需要在 Markdown 中输入：
| |
渲染出来的结果是：
| |