配置自定义表情符号

:bookmark: 本指南介绍了如何通过可选择的表情符号集、上传新表情符号、配置站点设置以及调整表情符号大小来自定义您的 Discourse 站点上的表情符号。

:person_raising_hand: 所需用户级别:管理员

选择表情符号集

Discourse 目前支持五种表情符号集:

  • Fluent UI
  • Noto
  • OpenMoji
  • Twemoji
  • Standard (Unicode)

有关不同集合外观的概述,您可以查看此表情符号集比较。您可以在 /admin/config/emoji/settings 处配置 emoji_set 站点设置以及其他与表情符号相关的设置。

添加自定义表情符号

要添加自定义表情符号:

  1. 导航至 Admin -> Appearance -> Emoji,地址为 /admin/config/emoji

  2. 点击 \text{Add emoji} 按钮来命名、分类和上传您的表情符号图像
    :information: 如果您有多个表情符号文件要上传,您可以在文件选择器中选择最多 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。留空则使用默认设置。
  • discourse_reactions_enabled_reactions - 定义已启用反应的列表,此处允许任何表情符号。默认反应:+1、laughing、open_mouth、clap、confetti_ball 和 hugs。
  • 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;
}
33 个赞

15 个帖子已拆分到新主题:关于表情符号的各种讨论