【教程】如何在 Discourse 隐藏系统自带的表情分类,只保留自定义表情

很多站长在给 Discourse 添加自定义表情之后,会发现表情选择器里依然充满了系统自带的分类(比如「笑脸和情感」「人物」「动物和自然」等等),显得冗余。

本文分享一个简单的办法,通过 CSS 就能 隐藏系统自带的分类,只保留常用和你上传的自定义表情包


:pushpin: 操作步骤

1. 打开主题自定义

进入:

管理后台 → 自定义 → 主题 → 编辑 → CSS

2. 粘贴以下 CSS

/* 1) 侧栏按钮隐藏 */
.emoji-picker__section-btn[data-section="smileys_&_emotion"],
.emoji-picker__section-btn[data-section="people_&_body"],
.emoji-picker__section-btn[data-section="animals_&_nature"],
.emoji-picker__section-btn[data-section="food_&_drink"],
.emoji-picker__section-btn[data-section="travel_&_places"],
.emoji-picker__section-btn[data-section="activities"],
.emoji-picker__section-btn[data-section="objects"],
.emoji-picker__section-btn[data-section="symbols"],
.emoji-picker__section-btn[data-section="flags"] { display: none !important; }

/* 2) 内容区隐藏 —— 兼容你这版的 .emoji-picker__section,以及老版的 .emoji-picker__category / .emoji-category */
.emoji-picker__section[data-section="smileys_&_emotion"],
.emoji-picker__section[data-section="people_&_body"],
.emoji-picker__section[data-section="animals_&_nature"],
.emoji-picker__section[data-section="food_&_drink"],
.emoji-picker__section[data-section="travel_&_places"],
.emoji-picker__section[data-section="activities"],
.emoji-picker__section[data-section="objects"],
.emoji-picker__section[data-section="symbols"],
.emoji-picker__section[data-section="flags"],
.emoji-picker__category[data-section="smileys_&_emotion"],
.emoji-picker__category[data-section="people_&_body"],
.emoji-picker__category[data-section="animals_&_nature"],
.emoji-picker__category[data-section="food_&_drink"],
.emoji-picker__category[data-section="travel_&_places"],
.emoji-picker__category[data-section="activities"],
.emoji-picker__category[data-section="objects"],
.emoji-picker__category[data-section="symbols"],
.emoji-picker__category[data-section="flags"],
.emoji-category[data-section="smileys_&_emotion"],
.emoji-category[data-section="people_&_body"],
.emoji-category[data-section="animals_&_nature"],
.emoji-category[data-section="food_&_drink"],
.emoji-category[data-section="travel_&_places"],
.emoji-category[data-section="activities"],
.emoji-category[data-section="objects"],
.emoji-category[data-section="symbols"],
.emoji-category[data-section="flags"] { display: none !important; }

/* 3) 兜底:确保“常用”可见(可保留/可删) */
.emoji-picker__section-btn[data-section="favorites"],
.emoji-picker__section[data-section="favorites"],
.emoji-picker__category[data-section="favorites"],
.emoji-category[data-section="favorites"] { display: block !important; }

:tada: 效果展示

隐藏前:
:backhand_index_pointing_right: 一堆系统分类 + 你的自定义表情在最下面

隐藏后:
:backhand_index_pointing_right: 只剩下「常用」和你上传的表情,更清爽简洁


这就是全部操作,非常简单,只需几行 CSS!

1 Like