将流行功能引入Discourse：头部搜索、欢迎横幅和类别图标/表情符号

[lindsey (Lindsey Fogle)]

我们为 Discourse 添加了几个基于热门 主题组件 的新功能，让您可以更轻松地自定义社区的设计。在本主题中，我们将详细介绍这些新的核心功能、如何使用它们，并提供有关它们与启发它们的那些主题组件的比较信息。

标题搜索

标题搜索功能将搜索从右上角的放大镜移至站点标题中一个更显眼的输入字段。

当需要更多标题空间时（例如滚动主题时），搜索将恢复为放大镜以节省空间。

启用标题搜索…

1. 在管理员区域，转到 主题和组件。
2. 点击活动主题的 编辑 按钮。
3. 找到 搜索体验 设置。
4. 将此设置更新为“站点标题中的搜索字段”。
5. 点击绿色复选标记保存。

标题搜索功能 vs. 高级标题搜索组件

标题搜索功能受到标题搜索主题组件的启发，我们已将其重命名为 高级标题搜索 以区别于核心功能。

当您需要支持外部搜索（即 Discourse 社区之外的搜索）时，应使用高级标题搜索组件。否则，您可以使用现在已成为 Discourse 核心一部分的标题搜索功能。

欢迎横幅

欢迎横幅会向成员和访问者致意，并在您的主题列表中添加一个醒目的搜索栏。

欢迎横幅和标题搜索功能彼此兼容，因此当欢迎横幅可见时，标题搜索将隐藏。

启用欢迎横幅…

1. 在管理员区域，转到 主题和组件。
2. 点击活动主题的 编辑 按钮。
3. 找到 启用欢迎横幅 设置。
4. 启用此设置。
5. 点击绿色复选标记保存。

要自定义横幅上显示的邮件，请转到 站点文本 区域，然后搜索“welcome_banner”。您可以修改已注册成员问候语、匿名用户问候语和搜索字段的文本字符串。

欢迎横幅 vs. 高级搜索横幅组件

欢迎横幅功能受到搜索横幅组件的启发，我们已将其重命名为 高级搜索横幅 以区别于核心功能。

当您想为横幅使用自定义背景图片、在横幅中输入多行文本或更改谁可以看到横幅（即登录成员、未登录用户或两者）时，应使用高级搜索横幅组件。否则，您可以使用现在已成为 Discourse 核心一部分的欢迎横幅功能。

分类图标和表情符号

现在，您可以使用图标和表情符号来区分分类，而不是使用彩色方块。

使用分类图标/表情符号…

1. 创建或编辑分类时，将 样式 设置更改为 图标 或 表情符号。
2. 选择要使用的图标或表情符号。颜色将决定图标的颜色（如果使用）并影响与分类相关联的颜色的其他区域，例如在 /categories 页面上。
3. 点击 保存分类。

分类图标和表情符号 vs. 分类图标组件

分类图标和表情符号功能受到 分类图标 组件的启发，我们将很快弃用该组件，转而使用此核心功能，因为它支持更多自定义（例如表情符号）并提供更简单的设置体验。

对于目前使用分类图标的用户，我们建议将您的图标自定义从分类图标组件迁移到核心分类设置，以获得长期支持和持续的功能改进。在我们的测试中，组件设置会覆盖核心功能设置，但它们并非设计为一起使用。

[AquaL1te]

我想切换到原生的分类图标方法。但我注意到主题组件有更多的图标。在我使用的所有图标中，只有一小部分现在可以使用原生的分类图标。我猜区别在于一个是使用 FontAwesome，另一个是使用表情符号？我确实使用了“图标”选项，但当我搜索它们时，它们没有显示出来（在禁用分类图标的主题组件后）。

我现在使用的一个例子：

[Arkshine]

您可以在 SVG 图标子集 站点设置中添加缺失的图标。

[krystal (Krystal S)]

@lindsey

当您需要支持外部搜索（即 Discourse 社区之外的搜索）时，应使用“高级标题搜索”组件。

这是如何工作的？ 这是否意味着您可以在 Discourse 中搜索外部来源？还是这仅仅意味着从外部来源搜索 Discourse？

[Heliosurge (Dan DeMontmorency)]

@lindsey

分类图标和表情符号

您现在可以使用图标和表情符号来区分分类，而不是使用彩色方块。

这是一个很棒的补充！谢谢！结合自定义表情符号，增加了令人印象深刻的自定义功能！

[AquaL1te]

@lindsey

类别图标和表情符号

不过还是有区别，使用主题组件时，子类别会获得这种漂亮的触感：

使用原生的类别图标选项时则看不到这一点。顶部的图标就消失了。

[tomtjes (Thomas Reintjes)]

我使用类别图标来指示类别是公开的、对已登录会员可见的，还是仅限于某些组。新设置是否可以复制这一点？我喜欢图标是灰色的，但不想将所有类别颜色都设置为灰色。

[Arkshine]

@AquaL1te

使用原生的分类图标选项无法实现这一点。顶部的图标将消失。

我认为一旦此 PR 合并，这将得到支持：

FIX: add category badge style to category list

@tomtjes

我使用分类图标来指示分类是公开的、对已登录会员可见的，还是仅限于特定群组。使用新设置是否可以复制这一点？我喜欢图标是灰色的，但不想将所有分类颜色都设置为灰色。

这应该可以通过 CSS 实现。
您可以为所有图标设置默认颜色，然后根据 .anon（针对非登录用户）类和用户的群组名称（请参阅 https://meta.discourse.org/t/css-classes-for-current-users-groups/226068），您可以隐藏图标或将其更改为灰色。

如果您仅使用图标并且需要登录选项，那么继续使用 TC 也可以。

[mcwumbly (Dave McClure)]

@tomtjes

我使用类别图标来指示类别是公开的、对已登录会员可见，还是仅限于特定群组。

我喜欢这个。我想知道我们是否应该认为这是一个更根本性缺失的信号，而不是将这个负担推给管理员通过自定义来解决。

另外，也与此相关：Allow users with access to a restricted category to see who else has access

[gooseegg]

大家好，

我们最近升级了 Discourse 论坛 (tw.forumosa.com)，并且在最新的更新中，新的“欢迎回来”标题和集成的搜索栏已添加到主页。虽然概念上看起来不错，但我们注意到了一些可用性问题——尤其是在移动设备上：

1. 由于透明度，搜索下拉菜单可能难以阅读

在顶部的导航栏上点击搜索图标时（例如，在 Android 上），会出现下拉菜单，但其背景是透明的，使得搜索结果几乎无法在后面的内容上阅读。实心背景应该可以解决这个问题。我在下面发布了截图来说明我的意思。

2. 标题很高 - 如何调整垂直间距？

新的欢迎消息和搜索栏在移动设备上占用了大量屏幕空间。由于我们已经在导航栏中有了搜索图标，因此添加的搜索栏感觉是多余的。我们希望缩小此标题的高度，或者在小屏幕上完全隐藏额外的搜索栏/欢迎消息。

这可能会影响桌面端，但目前在移动设备上尤其成问题。

有人遇到过这种情况并找到通过 CSS 或主题组件覆盖它的干净方法吗？

祝好！

[Arkshine]

值得注意的是，更新横幅也会堆叠在上方：

似乎 .welcome-banner 的 z-index（当前为 1）应至少为 >= 3（主链接和元数据使用 z-index: 2）。

[davidkingham]

@Arkshine

我认为一旦此拉取请求合并，它将得到支持：

恐怕它仍然坏了

[David_Ghost]

您需要将图标添加到 SVG 图标子集 中，如果尚未完成的话。

[davidkingham]

谢谢，但我确实有：

[lindsey (Lindsey Fogle)]

这是哪个页面？

看起来图标在 /categories 上显示正常，但不确定这是因为你还在使用主题组件，还是你遇到的问题是在我们需要修复的另一个页面上。

[maiki]

我刚刚有了一次很棒的体验：我为我的个人网站切换到了 Horizon 主题，并为我的分类设置了图标……而且是从我的移动设备上操作的！

这太神奇了，我非常感谢你们在让管理体验如此顺畅方面所付出的努力。