介绍一种新的主题和主题组件的视觉布局

公告
1

我们很高兴地宣布 Discourse 中主题和主题组件的呈现方式进行了重大更新！此次更新为社区浏览、选择和管理主题及主题组件带来了更直观、更用户友好的体验。

:information_source: 变更内容

主题的视觉画廊体验

主题页面经过了彻底的重新设计，采用了更具视觉吸引力的布局，让您在应用主题之前比以往任何时候都更容易看到每个主题的外观：

  • 视觉预览：缩略图准确地展示了每个主题，可以是主题颜色的组合，也可以是主题开发者添加的预览。
  • 更好的组织：主题现在以画廊视图显示，相关信息触手可及，使浏览和选择更加直观。
  • 快速访问详细信息：一目了然地显示关键信息，只需点击一下即可获得更多详细信息。

桌面上的新主题库。
桌面上的新主题库。1920×2012 175 KB
移动设备上的新主题库。
移动设备上的新主题库。833×2238 142 KB

\u003e :light_bulb: 想为自己的主题添加视觉预览吗？请遵循本指南。

主题组件的实用表格布局

主题组件现在采用精简的表格布局，旨在提高效率：

  • 一目了然的关键信息：以清晰、结构化的格式查看组件详细信息和使用信息。
  • 改进的排序和筛选：根据您的特定需求轻松缩小组件范围。
  • 简便的控件：从单一视图快速控制所有组件的激活。

桌面上的新主题组件表。
桌面上的新主题组件表。2099×1804 316 KB
移动设备上的新主题组件表。
移动设备上的新主题组件表。829×2249 120 KB

这些更新是我们持续努力的一部分，旨在使 Discourse 管理更加直观和易于访问，特别是对于非技术用户。主题的视觉布局有助于您就网站的外观做出更明智的决定，而组件的实用表格布局则使扩展网站功能更加容易。

:eyes: 如何查看这些更改

这些新页面已在我们托管的所有 Discourse 网站上实时可用。您可以通过进入 Discourse 管理中的“主题和组件”页面来找到它们。对于自托管网站，您需要更新到最新版本才能看到新页面的实际运行。

:collision: 更多改进即将推出！

这些新页面仅仅是我们持续改进主题管理体验的开始。我们将继续致力于开发更多功能，使主题定制更加易于访问和强大。

我们很乐意听取您对这些更改的反馈！回复此主题，让我们知道您的想法。

25 个赞
5

我喜欢迄今为止产品中进行的现代化改造！回想我 2021 年开始使用 Discourse 的情况，真是疯狂，请继续保持 :tada:

6 个赞
6

也许当有截图时，情况会有所改变。但我更希望看到名字，而不是画廊。

此图片显示了用于个性化 Discourse 网站的设置面板，重点关注主题和组件，并提供主题、电子邮件设置和电子邮件日志选项。（由 AI 标注）
此图片显示了用于个性化 Discourse 网站的设置面板，重点关注主题和组件，并提供主题、电子邮件设置和电子邮件日志选项。（由 AI 标注）2360×1142 142 KB

我不知道管理员为什么需要画廊以及用于什么目的。

不过，组件方面看起来不错。

3 个赞
7

That is displaying incorrectly. If no screenshot is added to the theme, it should show an SVG generated from the theme’s colour palette. It should also show the theme’s name below that image. That’s what is shown in the announcement here.

Looking at this previous topic, it looks like you might have added some custom CSS for that page. Perhaps that is interfering here? It also looks like your layout is incorrect as those theme cards are displaying too widely and wrapping incorrectly.

Could you check if you have some CSS affecting this page?

如果主题中没有添加屏幕截图，则应显示从主题的配色方案生成的 SVG。它还应在此图像下方显示主题的名称。这正是此处公告中所示的内容。

查看此先前的主题，看起来您可能已为该页面添加了一些自定义 CSS。也许这会干扰此处？另外，您的布局似乎不正确，因为这些主题卡片显示得太宽并且换行不正确。

您能否检查一下是否有影响此页面的 CSS？

3 个赞
8

我以为主题预览图片会以一种智能的方式展示选定的调色板，但我的“奶油主题”上的预览图片一直在变？

预览图片的目的是什么？

我认为用它来传达选定的配色方案是一个相当不错的选择？

3 个赞
9

虽然每次加载页面时都会显示不同的生成图像，但每张图像都是由主题自己的调色板生成的，因此它确实能做到这一点。它使用几种不同的图像格式，但始终使用主题的调色板。

如果您希望它在每次重新加载页面时显示相同的主题生成图像，您会觉得更有用吗？我们曾考虑过这样做，而且这是可能的，所以您对此的反馈将很有帮助。

3 个赞
10

太好了，我们在这方面达成了共识。让我再多用一些。

我不介意一些变化，只要每个例子都能大致有效地传达颜色即可。谢谢你，@hugh！

2 个赞
11

请继续提供反馈！我们在这些页面上还进行了一些微调和更新，目前正在积极处理所有这些事项。

1 个赞
12

正如 @Jagster 所说，我在这里主要担心的是为主题组件添加图片，虽然这对某些人来说可能很好，但在我看来，图片的数量之多排除了画廊视图的可能性。

新列表是一个极好的改变！:heart_eyes:

也许可以用某种悬停效果来支持图片？不知道……

4 个赞
13

是的，确实如此，安全模式显示了它应该显示的内容。奇怪。据我所知，我没有任何可能影响管理员端的东西，但显然我有。

而且我仍然在想，我们需要画廊做什么。管理员不是在闲逛，而是在尝试寻找一个要设置的主题。如果你们能做一个集中的主题库，类似于WordPress使用的（我一直想知道你们为什么不这样做），那将是完全不同的事情。

但我将开始挖掘是什么干扰了我的设置。

谢谢。

4 个赞
14

是的——主题组件中的图像最初是我们朝着这个新的基于表格的布局努力的第一个迭代。我们相信这个新布局更加实用和有用，我很高兴你喜欢它！

希望你能解决这个问题！

嗯，主题本质上是视觉化的，所以对预期的视觉预览相对有用，并且有助于管理员在此时决定设置哪个主题。

有了这个新布局，预览将是主题开发者添加的图像，或者是根据主题调色板中使用的颜色生成的图像。无论哪种方式，它都允许管理员在深入研究之前看到一些预期的预览。

正如你将其与 WordPress 进行比较一样，WordPress 管理仪表板中的主题库也有类似的预览图像（尽管如果主题开发者未提供，它们的后备图像只是一个空白图像）。

至于中央主题库——这绝对是我们讨论过的事情！目前还没有进一步的进展，但我们已经注意到它了。

3 个赞
15

我喜欢这个 :star_struck:

一些（小）建议：

更改图片

是的，那会更好——目前的实现对人们来说非常令人困惑。并且一项功能只有在不降低清晰度的情况下才“有趣”。

组件列表排序

过滤器很方便，但如果排序列的顺序是“已启用” - “已使用” - “名称”，那就更好了。

使用者

image
image1088×501 52.2 KB

我认为主题名称分成两行看起来有点乱。也许主题名称也可以像标签一样，并具有略微不同的背景颜色，以便在视觉上将其与“未使用”区分开来？

而且，如果我能点击一个标签，它会自动过滤，这样我就可以只看到特定主题使用的组件，那就太棒了。

但现在，它已经非常接近完美了！

9 个赞
16

这是很棒的反馈——谢谢！我很高兴你喜欢整体布局。

已收到反馈，我们将着手处理。

这很合理，我同意改进默认排序肯定会更好。我们会对此进行研究，看看哪种方式效果最好，但你的建议非常有道理。

感谢你指出这一点——你的建议听起来很有趣！我们将研究改进此显示的最佳方法。

我们讨论过在页面顶部添加类似主题的过滤器，这很快就会添加，并且在单击此列中的主题名称时执行相同过滤器的功能将是一个很棒的补充。这绝对是我们将会研究的内容。

感谢所有这些——期待更多改进！

5 个赞
17

我有时真是太笨了 :man_facepalming:
CSS 代码片段解决了最初尝试使用图库视图显示组件的那个不幸的问题……但现在它破坏了主题侧边栏。

不再需要使用 
.admin-config.customize {
  .admin-detail {
    padding: 0;
  }
  .themes-cards-container {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    gap: 0;
  }
  .admin-config-area-card__content {
    flex-grow: 0;
    margin: 0;
    padding: 0;
  }
  .theme-card {
    flex-direction: row;
    margin: 0;
    padding: 0.75rem 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--primary-low);
    &__image-wrapper,
    &__content {
      display: none;
    }
    &__footer {
      gap: 1rem;
    }
  }
  .theme-install-card {
    margin-top: 1rem;
  }
}

我认为我应该删除这些评论。它们没有帮助，只是污染了这个主题。

4 个赞
18

很高兴你找到了问题！

不用担心删除评论，我们都在一起学习 :slight_smile:

6 个赞
19

我刚注意到，当我点击仪表板上的通知时，我会进入旧界面。刷新后，我看到新界面。

3 个赞