帖子列表之间（左对齐）的广告未居中

错误
,
1

摘要

在 topic-list-between 区域渲染的广告不再跨主题列表宽度居中显示。相反，它们左对齐（仅限于第一个列区域）。这看起来像是由于将 house-ad 组件变为无标签（tagless）引起的回归，这破坏了表格语义。

复现步骤

  1. 前往 管理 → 插件 → 广告
  2. 创建一个 House Ad（自有广告）
  3. 为其启用以下位置：topic-list-between
  4. 访问主页（或任何使用标准表格布局的主题列表）
  5. 观察自有广告的对齐方式

预期行为

自有广告应像以前一样，居中跨越主题列表的全部宽度（跨越所有列）渲染。

实际行为

自有广告是左对齐的，只占据表格的左侧部分（大约是“主题标题”列的空间），而不是跨越整行。

技术分析

这似乎是由 house-ad 组件生成的无效表格标记引起的。

文件：
plugins/discourse-adplugin/assets/javascripts/discourse/components/house-ad.gjs

该组件是无标签的：

@tagName("")
export default class HouseAd extends AdComponent {

但它渲染了一个带有 colspan 属性的 div：

<div
  colspan={{this.colspanAttribute}}
  class={{concatClass "house-creative" this.adUnitClass}}
  ...attributes
>

为什么会中断

  • colspan 仅适用于 <td> / <th>，不适用于 <div>。
  • 在主题列表表格中，这最终变成了一个直接位于 <tr> 内的 <div>，这是无效的 HTML，导致浏览器错误地布局它（通常是将其折叠到第一个列区域）。
  • colspanAttribute() 逻辑会检查 this.tagName === "td"（或等效项），但由于组件是无标签的，它永远不会变成 "td"，因此 colspan 实际上从未生效。

可能的回归源头

这似乎是由“无标签组件”的 Lint 强制执行/重构引入的（将组件转换为无标签的更改），该更改无意中破坏了在某些连接器/位置中必须渲染为真实表格单元格的组件。

环境

  • Discourse 版本： 最新 (tests-passed)
  • 广告插件： 内置 discourse-adplugin
  • 测试的浏览器： Chrome + Firefox（似乎与浏览器无关）
1 个赞