Emoji 支持

Tue, 05 Mar 2019 00:00:00 +0000

这篇文章是Hugo默认生成的文件，翻译版。

在 Hugo 项目中，可通过多种方式启用 Emoji 支持。

可在模板或内联短代码（Inline Shortcodes）中直接调用 emojify 函数。

如需全局启用 Emoji：在站点配置文件中将 enableEmoji 设为 true，即可在内容文件中直接输入 Emoji 简写代码。例如：

🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:

Emoji 速查表（cheat sheet）是查询简写代码的实用参考资源。

注意：上述步骤可在 Hugo 中启用 Unicode 标准 Emoji 字符与序列，但实际渲染效果取决于浏览器及操作系统平台。如需自定义 Emoji 样式，可使用第三方 Emoji 字体或指定字体栈，例如：

1
2
3

.emoji {
  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
}

什么是短代码？

在 Hugo 中，内联短代码（Inline Shortcodes） 是指可以在文章内容中直接使用的简短标记语法，用于插入动态内容或特殊功能。

短代码是一种 Hugo 提供的模板功能，允许你在 Markdown 内容中嵌入可重用的代码片段。

内联短代码的特点：

直接嵌入内容中 - 可以在段落中间使用，不会打断文本流
语法简洁 - 使用花括号 {{ }} 包裹
可传递参数 - 可以接收参数来控制行为

示例：

这是一个段落，中间可以使用 {{< highlight go >}}这样的内联短代码 {{< /highlight >}}。

或者调用 emoji 函数：{{% emojify “:smile:” %}}

当你在内容中写 {{% emojify “:smile:” %}} 时，Hugo 会去 layouts/shortcodes/ 目录下寻找 emojify.html 模板文件。

具体操作看本文5.2.3。

与块级短代码的区别：

内联短代码：在行内使用，不独占一行
块级短代码：单独成块，通常用于插入图片、视频等较大元素

在 Emoji 场景中的使用：

{{% emojify “:smile:” %}} // 会渲染为 😄

这样你就可以在不启用全局 enableEmoji 的情况下，有选择性地在特定位置使用 Emoji 了。

但是好像这样做不行，下面是解决方案：

`emojify` 不是短代码，而是模板函数

Hugo 的 emojify 是一个模板函数（template function），不是内置短代码。因此以下写法无法直接使用：

{{% emojify “:smile:” %}} // 无效（Hugo会报错）

正确用法

方式 1：全局启用（推荐）

在 hugo.toml/hugo.yaml 中设置：

`1`	`enableEmoji = true`

然后在 Markdown 中直接写：

`1`	`:smile: # 会自动渲染为 😄`

方式 2：在模板文件中使用

在 .html 模板中调用：

`1`	`{{ emojify "Hello :smile:" }}`

方式 3：自定义短代码（如需局部控制）

创建 layouts/shortcodes/emoji.html，下入下面代码：

`1`	`{{ emojify (.Get 0) }}`

在 Markdown 中使用：{{% emojify “:smile:” %}} 会被渲染为 😄

注意：不能更改themes文件夹下的文件，要复制到主文件夹对应文件夹下，如下图：

总结

方法	是否可行	说明
{{% emojify “:smile:” %}}	❌	`emojify` 不是短代码，不能这样用
全局 `enableEmoji: true` + `:smile:`	✅	最简单，推荐
模板中 `{{ emojify "..." }}`	✅	适用于主题开发者，不推荐
自定义短代码包装 `emojify`	✅	需手动创建短代码文件，推荐

所以文档示例中提到的"Inline Shortcodes"是指可以创建自定义短代码来调用 emojify 函数，而不是 emojify 本身是短代码。

Emoji on RuHeYun