Rhidian
(Rhidian Bramley)
1
此主题组件的功能已从 Discourse 2.8.0 版本起集成到核心中。如果您在升级超过该版本后继续使用它,效果将大打折扣!
我创建了一个主题组件,将个人消息帖子的样式改为气泡样式,以帮助将其与主题区分开来。
设置:
- 将气泡的背景色设置为您主题的主色、次色或三色调,或选择其他常见颜色。
- 选择不同的颜色,以帮助您区分您发送的消息和接收到的消息。
- 设置气泡的背景不透明度——百分比越大,颜色越深。
- 选择是否在消息气泡周围显示阴影。
- 可选地在“消息回复”按钮后附加文本,以将其与“主题回复”按钮区分开来。
您可以从一系列颜色中选择,或从您的调色板中选择颜色以匹配您的主题。您还可以根据颜色和背景设置气泡的背景不透明度。
70 个赞
jord8on
(Jordan)
2
这太酷了,@Rhidian!!!
我有点好奇,因为我之前从未接触过插件…
是否允许使用带透明度的十六进制颜色代码,而不仅仅是系统颜色?如果这需要做大量额外工作也没关系,我只是好奇一下。
如果我想修改阴影或其他 CSS 的样式呢?我对 GitHub 及其运作方式不太熟悉,但在将你的内容复制到我的主题组件之前,我查看了你的 .git 仓库。我确实知道如何编写 CSS。我可以复制你的插件,然后修改你提供的 CSS 文件,再上传一个带有我所需样式的新主题组件吗?
如果你能指点我一些关于如何修改插件的教程,那就太棒了。或者,我想我也可以在前端直接进行 CSS 覆盖。从性能角度来看,哪种方式更好呢?
再次… 非常感谢你提供的这个插件… 这正是我用来区分私信和普通话题的解决方案!
4 个赞
Rhidian
(Rhidian Bramley)
3
感谢 @jord8on。能得到这样的反馈真是太棒了。
我将把“投影”作为可自定义的选项加入设置中。
关于创建或编辑您自己的 CSS,这很简单。加载组件后,点击组件设置中的“自定义 CSS/HTML”部分。
只需编辑 CSS 文件并点击保存。这些是您的自定义内容。如果您希望分享它们并将其整合到组件中,让所有人受益,您可以直接将 CSS 发布到 Discourse Meta 的此主题中;或者作为长期目标,学习如何在 GitHub 上发起拉取请求(pull requests),或者如果您要进行更重大的修改,可以 fork 该仓库。
3 个赞
jord8on
(Jordan)
4
感谢 @Rhidian!!!

这是一个非常简单的解决方案,能让私信与我们论坛上的普通话题明显区分开来。
我刚刚问了一位成员对此的看法,他们对此感到非常开心。他们称赞了这个想法和实现方式,所以我特意转达给您!!
6 个赞
Rhidian
(Rhidian Bramley)
26
我已更新了此主题组件,现在您可以使用以下方式输入自定义颜色:
- HTML 颜色名称(black、white、maroon、red、purple、green、lime、olive、yellow、navy、blue、teal、aqua)
- HTML 颜色代码(#000000 表示黑色,#FFFFFF 表示白色等,或短代码如 #CCC)
- 主题颜色名称(primary、secondary、tertiary)
您还可以通过相同方式输入自定义的消息文本颜色,以与气泡颜色形成对比。
不透明度设置允许您将气泡颜色与背景融合,从而使颜色随您的主题颜色设置而变化——例如适用于浅色和深色主题。
此更新向后兼容。要使用此功能,请在主题设置中点击“检查更新”按钮。
9 个赞
ggurbet
(Gökhan Gurbetoğlu)
54
我通过自定义 CSS 禁用了边框,仅做了细微的颜色调整,效果很不错。如果能有选项来修改边框,或者提供一个简单的开关,那就更好了。
1 个赞
Rhidian
(Rhidian Bramley)
55
嗨 @ggurbet,请问能发一张截图并分享你修改过的 CSS 吗?
ggurbet
(Gökhan Gurbetoğlu)
56
@Rhidian,边框太分散注意力了,所以我移除了它们。请忽略我的配色方案 
浅色主题的截图:
深色主题的截图:
我已将此添加到 Common > CSS 中:
// 个人消息气泡组件 - 无边框
.archetype-private_message .topic-body .contents {
border: none !important;
}
3 个赞
Rhidian
(Rhidian Bramley)
58
太棒了,我很喜欢!
我已添加了移除边框的选项,以及四元选项,并修正了三元的拼写错误。
感谢 @ggurbet @debryc

7 个赞
ggurbet
(Gökhan Gurbetoğlu)
59
这么快就回复了,谢谢!
顺便一提,如您所见,我已将该组件安装了两次,分别为我们的深色主题设置了深色,为浅色主题设置了浅色。如果我们想使用自定义 CSS 颜色,我认为没有其他办法。
另外还有一个小建议:您允许在“回复”按钮的末尾追加内容,但在某些语言(如土耳其语)中,将内容添加在前面更为合适,因为这些语言的动词通常位于句末。
Rhidian
(Rhidian Bramley)
60
是的,这是一个不错的变通方案。Discourse 计划移除本地修改主题和组件的功能,这一变更会对你们的实现产生影响吗?显然,这里的做法非常有用。
1 个赞
ggurbet
(Gökhan Gurbetoğlu)
61
不,不是的。只需对 CSS 进行一些微调即可解决问题。
Rhidian
(Rhidian Bramley)
62
我指的是 Beta 版本中的这项公告。您仍然可以修改 CSS,但需要创建一个不再与 Git 仓库关联的新主题组件,并复制所有代码。您是这样做的吗?还是简单地直接编辑了组件中的 CSS?
这在我看来有些问题。我更希望保留原位编辑主题的能力,这显然有助于主题/组件的开发。
1 个赞
ggurbet
(Gökhan Gurbetoğlu)
63
我有一个名为“通用子主题”的本地组件,用于对其他组件进行编辑。在该子主题中,我会针对其他组件的类、元素等进行修改。只要组件作者不更改其类名、ID 等,一切就都没问题,功能也能正常运行。另外,由于您目前也移除了边框,因此“个人消息气泡”组件在我的子主题中无需任何修改。
1 个赞
downey
(Michael Downey)
64
你好,感谢这个令人愉悦的主题组件。
一个潜在的 bug:看起来“附加”文本选项在消息主题底部的字符串前包含一个空格,但在编辑器窗口中却不包含。请参见下图:
2 个赞
ggurbet
(Gökhan Gurbetoğlu)
65
@Rhidian,您能否也添加一个选项,在“回复”按钮前添加文本?在某些语言(如土耳其语)中,在动词开头添加一些文本是有意义的。
1 个赞
好棒的组件!
主题中的实际帖子有类似的东西吗?我的意思是,有没有能让帖子看起来像消息气泡的组件?
Rhidian
(Rhidian Bramley)
67
我已添加了在“回复”按钮前添加文本的选项。这也会隐藏“回复”文本前的 SVG 回复箭头。
1 个赞