编写一个漂亮的界面...值得提交给上游吗?

你好!

上个月,我最喜欢的论坛切换到了 Discourse。这在很大程度上是一次升级,但人们对它的外观和感觉抱怨不已*。所以我决定解决这个问题,并最终进行了大规模的样式改造。现在我正在考虑是否要努力将其变成一个真正的“主题”并合并到上游,或者这是否不切实际。

我认为其他论坛的用户也可能喜欢它作为一个替代主题,但我不知道将其合并有多困难。我的做法与 Discourse 通常的主题设计大相径庭……这既是吸引力的一部分,也是困难的一部分。

它仍在开发中,但这里有一些截图:

它旨在相对容易地创建和切换多个调色板,并且到目前为止已有三个。

日间模式:

夜间模式:

舒适灰色:

帖子有 4 种样式:普通(灰色带蓝色标题)、管理员/版主(绿色)、帖子作者(青色)和当前登录用户(紫色或粉色)。所有这些都易于更改。

编辑器的预览和拖动条与“当前用户”样式匹配。此外,滚动条与页面主题匹配。时间轴的样式也更像滚动条。

主题列表尽可能使用单行,并带有虎纹。热图元素看起来更像火焰。

用户/通知菜单:

嵌入帖子的嵌套更清晰:

用户信息卡和链接预览:

目前,它只是一个大的样式表覆盖和一个小的样式表来定义颜色。但如果有可能将主题被上游接受,我可以将其转换为一个真正的 Discourse 主题。

13 个赞

非常独特,很棒的作品!

(每次主题展示都应该加入聊天机器人 :wink:

5 个赞

哦,嗯,这还在进行中,但如果有人想尝试我目前为止所做的……最简单的方法是在浏览器中本地使用样式表覆盖:

  1. 安装 Stylus,如果你还没有的话。
  2. 打开一个 Discourse 站点,点击 Stylus 图标。
  3. 在“为…编写样式”下,点击“this-site.tld”。
  4. 添加一个主题标题。
  5. 粘贴下面链接的匹配 CSS 文件中的内容。最好先处理 style.css 文件,因为其他文件都依赖它。
  6. 保存。
  7. 对其他文件重复此操作,每个文件一个主题。
  8. 打开基础主题和一个其他主题。关闭其他主题。

我还在考虑是否将其转换为可安装的服务器端主题。在我为其创建论坛上,管理员只是安装了 Sam’s Simple Theme 的另一个实例,并将此作为样式表覆盖放在上面……这可行,但并非理想。

1 个赞

为了提供背景信息,以下是人们对默认主题的抱怨,以及我试图解决的问题:

  • 太普通。
  • 空白太多。
  • 一次屏幕上显示的信息不够。他们希望信息密度更高。
  • 有时不清楚页面元素是否可以点击……例如时间轴小部件中的开始/结束日期。
  • 有时不清楚页面元素之间的关系……例如帖子、嵌入式帖子和引语。有些人认为缺乏足够的视觉提示来表示结构。
  • 页面元素之间的视觉分隔不够。一切似乎都印在一份连续的文档上。
  • 人们特别要求单行主题列表行和虎纹样式。

因此,我选择了一种更紧凑、更丰富多彩、更具三维感、具有更明确视觉结构的主题……就像一叠卡片而不是一份连续的文档。基本上,与最近流行的扁平极简风格正好相反。

极简主题是很好的默认设置,因为它们实用、易于访问且中性。但对于那些想要替代方案的人,我做了一些……不同的东西。:sweat_smile:

3 个赞

这仍在进行中,但我已开始为聊天小部件添加支持……

1 个赞

很棒的工作。我喜欢它。

1 个赞

很棒的主题!

我已经把你添加到了主题作者组,你可以在 Theme 下创建一个关于你主题的帖子,这样人们就可以通过按一个按钮将它安装到他们的实例中。

8 个赞

谢谢!

我感冒了一段时间,但现在差不多好了,所以希望很快我就可以开始制作一个正式的主题,而不是仅仅覆盖样式表。

3 个赞

に行って、GitHubに取り込もう!

2 个赞

这进展到哪里了?不要让这项伟大的工作无人分享。

1 个赞

顺便说一句,默认主题就是这个作用——它就是用来在此基础上进行构建的。

点击/触摸目标在一定程度上是这个原因——当你试图用拇指点击某个特定控件时,不要低估间距带来的好处!

1 个赞