配置自定义表情符号

[Discourse]

This guide explains how to configure custom emojis on your Discourse site.

Required user level: Administrator

Configuring custom emoji

Want to change emoji for your Discourse site? Let’s take a look at how to configure custom emoji for your Discourse site, including selecting emoji sets, uploading new emoji, and adjusting emoji sizes.

Selecting an emoji set

Discourse comes with seven different emoji sets:

• Apple/International style
• Google style
• Twitter style
• Emoji One style
• Win10 style
• Google Classic
• Facebook Messenger

You can select an emoji set at /admin/config/emoji/settings?filter=emoji%20set along with other emoji-related settings.

Adding custom emoji

To add custom emoji:

1. Navigate to: Discourse Admin - Config - Emoji at /admin/config/emoji
2. You can:
   • Enter a name and click Add emoji to upload a photo as an emoji
   • Drag and drop up to 10 files into the Name field to bulk upload; filenames will be used as emoji names.

Resizing custom emoji

By default, all emoji are resized via CSS to 20x20, but this can be overridden with custom CSS. To maintain the correct aspect ratio and native size in posts, add the following CSS:

/* Make emoji normal size (don't force square) */
div.topic-post img.emoji[src*="uploads"], 
div.d-editor-preview img.emoji[src*="uploads"], 
div.emoji-modal img.emoji[src*="uploads"], 
div.d-editor-textarea-wrapper img.emoji[src*="uploads"], 
div.title-wrapper img.emoji[src*="uploads"], 
td.main-link img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

To customize a specific emoji’s size, use:

img.emoji[title=":youremoji:"] { 
    height: XXpx; 
    width: YYpx; 
}

For resizing emoji in chat messages and user status in chats:

div.chat-message-text img.emoji[src*="uploads"], 
span.user-status-message img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

Last edited by @martin 2025-01-23T05:07:38Z

Check document

Perform check on document:

[Roi]

我注意到自定义表情符号/笑脸在聊天消息和聊天中的用户状态中显示为 20x20。我通过以下方式解决了这个问题：

div.chat-message-text img.emoji[src*="uploads"] { /* 聊天消息 */
    width: auto;
    height: auto;
}

span.user-status-message img.emoji[src*="uploads"] { /* 聊天中的用户状态 */
    width: auto;
    height: auto;
}

您也会这样做吗？如果是，也许可以将其添加到上面的 wiki 帖子中。如果不是，我很乐意优化我的 CSS 代码。

[Vladislav_Jandric]

我自定义了新的 Emoji，但在其他 Emoji 中找不到它。

[ondrej]

您是否已滚动到表情符号选择器的最底部？自定义表情符号组就在那里。

[Moin]

@Discourse

Discourse 提供七种不同的表情符号集：

• Apple/国际风格
• Google 风格
• Twitter 风格
• Emoji One 风格
• Win10 风格
• Google Classic
• Facebook Messenger

这些已经改变了：

Emojis update

For licensing reasons, we had to change the emoji sets. The following existing sets have been migrated automatically to a new set: apple → twemoji facebook_messenger → unicode google → noto google_classic → noto win10 → fluentui emoji_one → twemoji twitter → twemoji On top of fluent ui, noto, twemoji, and unicode, we also added the openmoji set. Admins can change the set at /admin/config/emoji/settings?filter=emoji_set If there’s an existing open-source set you would like to see available i…

[pacharanero (Marcus Baw)]

我一直在尝试批量上传自定义表情的不同选项，但一无所获，所以我想在这里问一下，最好的未来选项会是什么样的。

我有一些自定义表情，我想上传到我所有的 Discourse 论坛中。有些是 FontAwesome 图标，我想在撰写帖子时以 :icon-name: 的形式使用它们，这样我可以向用户解释 Discourse UI 图标。其他的只是为了好玩，比如约克郡的旗帜。我把它们放在文件夹里（我想它们也可以很容易地放在 GitHub 仓库里）。

我希望能够一次性将这些整个文件夹上传到自定义表情 UI 中。目前，上传限制遵循 simultaneous_uploads （“可以在编辑器中拖放的最大文件数”）站点设置，该设置限制为 20 的上限（如果尝试增加它，即使是暂时的，也会出现错误：“simultaneous_uploads: 值必须介于 0 和 20 之间。”）

我饶有兴致地研究了另一个表情符号设置 external-emoji-url，它允许为一个外部表情符号集设置一个 URL，但遗憾的是，这会替换所有“标准”表情符号，而我不想丢失这些表情符号。

我真正需要的只是自定义表情的文件夹上传能够像目前单个自定义表情一样工作。或者，如果没有允许上传的数量限制（也许可以将上传任务发送到 SideKiq 进行异步处理，并在完成后通过 PM 通知管理员，就像批量邀请一样）。

我研究了使用 Discourse REST API 来实现这一点，但是自定义表情符号没有通过 REST API 公开。上传是在 API 中公开的，而且我确实让它工作了，但是即使为上传使用 custom_emoji 类型，它也不会出现在列表中。

只是想知道社区认为最好的前进方向是什么：

• 自动化批量自定义表情符号创建的 Rake 任务？
• 在 Rails 控制台中执行？
• 更改管理 UI 上传限制，以允许一次上传数百个？
• 向管理 UI 添加“文件夹上传”？
• 使自定义表情符号成为我可以部署为主题组件的东西，我可以从 GitHub URL 添加它吗？（我喜欢这个的简单性）
• 允许多个外部表情符号 URL，这样我就可以拥有一个表情符号集和我的自定义表情符号（也许从 GitHub 页面仓库提供）
• 把一个“表情符号和自定义表情符号”库拼凑在一起，我可以通过 URL 来访问它？

或者 - 是否有另一种方法可以在撰写器中使用 :icon-name: 语法来获得 Discourse 在其 UI 中使用的所有 FontAwesome 图标？实际上，我想要做的大部分与此相关。一个启用 UI 图标在撰写器中可用的站点设置可以让我完成 90% 的任务。

[JammyDodger]

@pacharanero

实际上，我大部分想做的事情都与此相关。一个启用 UI 图标在编辑器中可用的站点设置将使我完成 90%。

我曾为类似用例使用过 Discourse Icon 主题组件，这是否有帮助？

主题中的示例：

这是 [wrap=icon id=far-square][/wrap] 图标和 [wrap=icon id=pencil][/wrap] 图标。

这是 图标和 图标。

[pacharanero (Marcus Baw)]

感谢 @JammyDodger，这很有帮助，而且绝对是我会考虑的一个选项，即使 [wrap=icon id=icon-name][/wrap] 语法的用户体验不如 :icon-name: 那么好。

Discourse 图标方法的一个缺点是，我必须手动将所有我想使用的图标列表添加到 svg icon subset 站点设置中。但至少可以通过从文本文件中的列表复制粘贴一次性完成。

[Moin]

@pacharanero

向用户解释 Discourse UI 图标

根据您的描述，我本不认为您需要添加那么多。该设置是用于添加更多图标。论坛中使用的所有图标都已可用。

[pacharanero (Marcus Baw)]

@Moin

论坛中使用的所有图标都已提供。

它们在哪里可用？如果它们可用，我欢迎。但我似乎无法使用：icon-name：类型的语法访问它们。

我只想轻松地告诉人们，例如，要将时区感知的日期时间添加到帖子中，他们可以使用“Composer”工具栏中的“:calendar-days:”按钮。但是，当我搜索包含的表情符号/图标时，我能找到的最接近的东西是：spiral_calendar：。

[Moin]

他们使用 wrap 语法和 Discourse 图标，而无需将它们添加到 svg icon subset 中。

该答案指的是您的评论，即必须添加所有图标是一个缺点。

@pacharanero

Discourse 图标方法的一个缺点是，我必须在 svg icon subset 站点设置中手动添加我想使用的所有图标的列表。

---

也许使用 watched-words 将 :calendar-days: 替换为 [wrap=icon id=calendar-days][/wrap] 会起作用

[pacharanero (Marcus Baw)]

@Moin

它们使用 wrap 语法和 Discourse 图标，而无需将它们添加到 svg icon subset。

答案指的是您关于必须添加所有图标的评论，认为这是一个缺点。

啊，好的，谢谢，很抱歉我误解了。这太棒了。所以，我可以使用 wrap 语法在任何地方使用 ！每天都是 Discourse 学校日！

唯一缺少的是能够轻松搜索我需要的图标的 Discourse 名称，但我猜我总是可以使用浏览器检查器找到 d-icon- 名称并进行相应调整。或者 FontAwesome 网站。

谢谢 @Moin

[Roi]

自从上次更新 Discourse（几天前）以来，有些东西发生了变化。

现在看起来是这样的：

而不是：

当我检查 CSS 时，有一个 element.style（所以在 HTML 中为这个表情符号添加样式）aspect-ratio: 20 / 20;，如果我禁用它，表情符号看起来应该有的样子。

该怎么办？

（顺便说一句，“Choker”没什么特别的。它与潜水有关，与其他事物无关 :-P，只是在那里看看帖子中文本的大小。）

[Steven]

您可以在主题中添加以下 CSS 行

.emoji-custom {
    aspect-ratio: unset !important;
}

[Roi]

太好了，谢谢，确实奏效了！

我可以问一下：

最新版本中设置纵横比的目的是什么？

为什么这段 CSS（以及上面提到的代码）没有包含在 Discourse 核心中？是因为会破坏其他东西，还是因为使用自定义表情符号/笑脸的人太少了？

[Steven]

我真的不知道，我猜这与这个讨论有关

Add lazy loading for emojis

Profile pictures and image elements in posts get lazyloaded by having the attribute loading="lazy" set. Emojis are missing out on this. <img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title="" class="emoji" alt=""> I could not find the location in the sources where the emoji tags are generated. Are emojis “baked” into the posts?