How to Enable Emoji Rendering As Hugo Theme

Bissetii supports emoji rendering starting from version v1.9.0 when used as Hugo Theme. It is enabled by default and uses 'Noto Color Emoji' font set as its primary artwork.

Currently, Bissetii only serves Noto Color Emoji either sourcing from:

  1. CDN Network - requires network connection; always up-to-date. Fallback to this mode if localized version is unavailable.
  2. Localized Version - works locally; may be outdated. Manual maintenance and updating efforts required.

For CDN Network, the file is available at:

https://gitcdn.xyz/repo/googlefonts/noto-emoji/master/fonts/NotoColorEmoji.ttf

Enable/Disable Rendering

There are different mechanism to enable/disable emoji rendering depending on your Bissetii version.

Version v1.13.0 and above

Enable/Disable rendering is entirely depends on the data located inside data/bissetii/emoji.toml. By default, it defines a single child that has something as such:

1
2
3
4
5
6
[0]
Name = "emoji"
Src = [
	"/fonts/NotoColorEmoji.ttf",
	"https://gitcdn.xyz/repo/googlefonts/noto-emoji/master/fonts/NotoColorEmoji.ttf",
]
  1. LINE 1 - the items are arranged in array form. Keep the numeric naming.
  2. LINE 2 - Name’s value is always hardcoded to emoji.
  3. LINE 3 - Src is the list of source URLs for your emoji fonts.
  4. LINE 4 - Bissetii compatible relative URL is accepted for local linking. You are free to add as many as you want with your own URLs.

By default, Bissetii keeps and serves a localized version in static/fonts/NotoColorEmoji.ttf.

Version v1.12.5 and below

There are 3 steps to fully enable emoji rendering. You will need to enable both of them in order to have good experience.

For Localized Path, the file should be made available at:

Local directory    :              static/css/fonts/NotoColorEmoji.ttf
Repo-docs directory:       .sites/static/css/fonts/NotoColorEmoji.tff
URL                : https://domain.name/css/fonts/NotoColorEmoji.ttf

To enable/disable it, you can refer to Emoji Component - Enabling Emoji

Markdown Encoding Configurations

Hugo provided a configuration to enable emoji encoding. You need to add:

enableEmoji = true

into your local config/_default/config.toml. This allows you to write emoji codes in your Markdown without needing to extract their unicodes explictly.

To disable it, set it to false:

enableEmoji = false

Composing Emoji

To write emoji, simply use the :emoji: pattern in your Markdown. You may refers to the Emoji Cheat Sheet or Emoji Manual for some guidance. Example:

CodeUnicodeEmoji
:grinning:U+1F600๐Ÿ˜€
:white_check_mark:U+2705โœ…
:x:U+274CโŒ
:woman_raising_hand:U+1F64B U+200D U+2640 U+FE0F๐Ÿ™‹โ€โ™€๏ธ
:man_raising_hand:U+1F64B U+200D U+2642 U+FE0F๐Ÿ™‹โ€โ™‚๏ธ

Other than that, try and error would be your best friend.