这篇文章是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 字体或指定字体栈,例如:
|
|
什么是短代码?
在 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 中设置:
|
|
然后在 Markdown 中直接写:
|
|
方式 2:在模板文件中使用
在 .html 模板中调用:
|
|
方式 3:自定义短代码(如需局部控制)
- 创建
layouts/shortcodes/emoji.html,下入下面代码:
|
|
- 在 Markdown 中使用:{{% emojify “:smile:” %}} 会被渲染为 😄
注意:不能更改themes文件夹下的文件,要复制到主文件夹对应文件夹下,如下图:
总结
| 方法 | 是否可行 | 说明 |
|---|---|---|
| {{% emojify “:smile:” %}} | ❌ | emojify 不是短代码,不能这样用 |
全局 enableEmoji: true + :smile: |
✅ | 最简单,推荐 |
模板中 {{ emojify "..." }} |
✅ | 适用于主题开发者,不推荐 |
自定义短代码包装 emojify |
✅ | 需手动创建短代码文件,推荐 |
所以文档示例中提到的"Inline Shortcodes"是指可以创建自定义短代码来调用 emojify 函数,而不是 emojify 本身是短代码。