用组件拓展Hugo站点

这里的组件指的是 Hugo Theme Components1,可以用来给现有的 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 实现下面的四个等级的提示框。

{{< notice warning >}}
这是一条警告
{{< /notice >}}

警告

这是一条警告

{{< notice note >}}
这是一条注释
{{< /notice >}}

注释

这是一条注释

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

信息

这是一条信息

{{< notice tip >}}
这是一条提示
{{< /notice >}}

提示

这是一条提示

hugo-cloak-email

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

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

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

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

经过 shortcodes 处理后:

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

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


  1. https://gohugo.io/hugo-modules/theme-components/ ↩︎

  2. https://discourse.gohugo.io/t/cloak-email-shortcode-component/17925/11 ↩︎

使 MPC-HC 使用独显

让 Windows 中的 Vim 支持 Python