现代化我们的主题列表HTML——准备主题、组件和插件

公告
1

我们的主题列表标记自 Discourse 项目开始以来基本没有变化。为了利用最新的 Web 技术，我们计划进行一些更改，以改进主题列表的主题化潜力。

为使过渡尽可能顺利，我们将分步进行这些更改，并希望在 2022 年第一季度完成迁移。

:white_check_mark: 步骤 1：更新 CSS 选择器

我们最近添加了 .topic-list-header、.topic-list-body 和 .topic-list-data 类来开始过渡。

  • thead 现在具有 topic-list-header 类
  • tbody 现在具有……你猜对了！topic-list-body 类
  • td 元素现在也附加了 topic-list-data 类

对于绝大多数站点来说，此更改将完全无缝。但是，覆盖我们核心模板的复杂主题/插件需要进行一些更新。

更新现有的模板覆盖

如果可能，我们建议您删除模板覆盖，并使用 CSS 和插件插槽的组合进行自定义。如果删除覆盖不是一个选项，那么您将需要手动更新您的覆盖以包含新类。

已添加类的模板是：

:black_square_button: 步骤 2：更改元素类型

此过程的下一步是将现有的 table 元素转换为更合适的元素。

准备定位 table 元素的自定义样式表

现在，您应该从自定义样式表中删除对 table、thead、tbody、tr、td 的任何引用，并用新类替换它们。然后，当我们最终更改元素类型时，您的自定义主题将继续正常工作。

我们很期待看到在这些更改之后，我们的主题和插件开发人员社区将能够构建出什么！:partying_face:

38 个赞
6

您能多分享一些关于这里发生的事情吗？

4 个赞
7

tl;dr 是我们不再使用 HTML table 元素来显示主题列表了，它们的一些奇怪行为在你想用 CSS 进行重大更改时会带来不便。

16 个赞
8

这太棒了——我很高兴能摆脱表格。这将使主题列表的样式更加灵活和简单。:heart_eyes:

9 个赞
9

这是一个绝佳的改动，因为 Ember 不允许（据我所知）动态替换标签，例如使用绑定将 <table> 或 <tr> 替换为 <div>，不像类那样，它很庆幸地允许这样做！

这意味着如果一个 <table> 位于组件模板的根目录，你就被它困住了，除非你覆盖整个组件，否则会有点不必要的过度。

总之，我赞成！:heart_eyes:

11 个赞
10

感谢您引入这些更改！在调整声明之前，我只是再确认一下……

标记是：

<table>
  <thead>
    <tr>
      <th>
  <tbody>
    <tr>
      <td>

相应的类是/将是：

.topic-list
  .topic-list-header
    (tr 将在此处删除？)
     .topic-list-data
  .topic-list-body
    .topic-list-item
      .topic-list-data
5 个赞
11

是的，这一切看起来都没问题 :+1:

7 个赞
13

关于这个有什么更新吗？我很想能够更好地设置主题列表的样式。

4 个赞
14

不幸的是，这件事已经被搁置了相当长一段时间，以便为 Discourse 的其他紧迫事项腾出时间。不过，我计划在未来几周内重新开始处理这件事！

6 个赞