用组件拓展Hugo站点

这里的组件指的是 Hugo Theme Components¹，可以用来给现有的 Theme 增加一些功能、组件等等。通常，这些组件为 Hugo 站点提供 shortcodes 来拓展 Hugo 站点的功能。

使用起来也很简单，在网站根目录下的配置文件 config.toml 中添加如下内容：

theme = ["my-shortcodes", "base-theme", "hyde"]

这是官方文档中的一段示例，其中最后一项 "hyde" 为站点使用的主题，前面的两项就是 Theme Components。可以添加任意多个 Theme Components，甚至可以在主题目录下的 config 文件中进行嵌套使用。Hugo 会从左到右对 theme 中的文件系统进行合并。

下面两个 Theme Components 是我自己使用的，感觉很好用。

hugo-notice

hugo-notice 给 Hugo 网站增加了一组提示框。使用 shortcodes 实现下面的四个等级的提示框。

我修改的 notepadium-mod 主题里面自带了提示框，所以已经不用 hugo-notice 了。效果如下：

{{< tips info >}}
这是一条信息
{{< /tips >}}

{{< tips warn >}}
这是一条警告
{{< /tips >}}

{{< tips error >}}
这是一条错误
{{< /tips >}}

{{< tips success >}}
这是一条成功的提示
{{< /tips >}}

hugo-cloak-email

hugo-cloak-email 可以“隐藏”网页上的电子邮箱地址，当然，是对爬虫来说。使用这个组件提供的 shortcodes，既能把邮箱地址、电话等一些信息公布在页面上，又能尽可能地避免爬虫爬走你的这些信息。

最简单的方法就是在需要显示电子邮箱的地方，用 shortcodes 包住邮箱地址。假设我们的邮箱地址是 john.doe@example.com，使用 shortcodes 后为：

{{< cloakemail address="jane.doe@example.com" >}}

这个项目的作者在 Hugo 论坛中给出了原理的简单解释²：

经过 shortcodes 处理后：

• Hugo 生成的网页中会出现包含反转字符串的标签 <span class="cloaked-e-mail" data-user="eod.nhoj" data-domain="moc.elpmaxe"></span>。
• hugo-cloak-mail 中的这段 CSS 会还原原本的字符串，并添加@符号。
• 这段 JavaScript 代码会给上一步生成的邮箱地址字符串加上<a href=...>标签，使其变成链接。

我的关于页面中的邮箱地址就是使用这段 shortcodes 展示出来的。更多定制选项、使用方法可以查看项目文档。