配置自定义表情符号

[Discourse]

本指南说明了如何在您的 Discourse 站点上配置自定义表情符号。

所需用户级别：管理员

配置自定义表情符号

想要更改您的 Discourse 站点的表情符号？让我们看看如何为您的 Discourse 站点配置自定义表情符号，包括选择表情符号集、上传新表情符号以及调整表情符号大小。

选择表情符号集

Discourse 附带七种不同的表情符号集：

• 苹果/国际风格
• 谷歌风格
• 推特风格
• Emoji One 风格
• Win10 风格
• 谷歌经典
• Facebook Messenger

您可以在 /admin/config/emoji/settings?filter=emoji%20set 处选择表情符号集，以及其他与表情符号相关的设置。

添加自定义表情符号

要添加自定义表情符号：

1. 导航至：Discourse 管理 - 配置 - 表情符号，路径为 /admin/config/emoji
2. 您可以：
   • 输入名称并点击 添加表情符号 以上传图片作为表情符号
   • 将最多 10 个文件拖放到 名称 字段中进行批量上传；文件名将用作表情符号名称。

表情符号设置

您可以访问 /admin/config/emoji/settings 处的表情符号设置，以自定义表情符号在您的站点上的行为方式。

• enable_emoji - 启用您的 Discourse 实例中表情符号的显示和使用。如果禁用，表情符号将不会被渲染，用户将无法在文本字段中访问或使用它们。
• emoji_set - 选择您首选的表情符号样式。不同的表情符号集可以为站点上显示的表情符号提供独特的外观。
• max_emojis_in_title - 主题标题中允许的最大表情符号数（默认值：1）。如果设置值为零，则禁止在主题标题中使用任何表情符号。
• enable_emoji_shortcuts - 常见的笑脸文本，如 :) :p :( 将被转换为表情符号。
• emoji_autocomplete_min_chars - 触发自动完成表情符号弹出窗口所需的最小字符数（默认值：0）。
• enable_inline_emoji_translation - 为内联表情符号（前面没有空格或标点符号）启用翻译。
• emoji_deny_list - 这些表情符号将不可在菜单或简码中使用。
• external_emoji_url - 表情符号图片的外部服务 URL（默认值：https://emoji.discourse-cdn.com）。留空则禁用。
• discourse_reactions_enabled_reactions - 定义已启用反应的列表，此处允许任何表情符号。默认反应包括：心形、大笑、哭泣、爆炸头、鼓掌、五彩纸屑球、拥抱、大厨之吻、100、+1、火箭、惊奇、Discourse 标志和眼睛。
• discourse_reactions_excluded_from_like - 不计为“赞”的反应。不在此列表中的任何反应都将计为“赞”，用于徽章、报告和其他目的。
• discourse_reactions_allow_any_emoji - 如果启用此项，将添加一个按钮，允许用户在反应选择器中选择任何表情符号。成员将被允许为反应选择任何表情符号，包括自定义表情符号。要限制可用反应，请使用 emoji_deny_list 站点设置。

调整自定义表情符号大小

默认情况下，所有表情符号都通过 CSS 调整为 20x20 像素，但这可以通过自定义 CSS 覆盖。要在帖子中保持正确的纵横比和原生大小，请添加以下 CSS：

/* 使表情符号恢复正常大小（不强制为方形） */
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;
}

要自定义特定表情符号的大小，请使用：

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

要调整聊天消息和聊天中用户状态的表情符号大小：

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

[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?