🦙 TinaCMS ❤️ 开发者社区 - 修复语义化 Markdown

我们一直被帮助我们改进 TinaCMS 的优秀开发者社区所震撼。在过去的12个月中，核心团队之外的18个人在 TinaCMS 中提交了 pull request（有些人多次提交）。我们最近合并的一个值得特别提及。

特别感谢 @lastenvoy30，他的首次 PR 到仓库 修复了我们 HTML 表格的渲染方式，使其对屏幕阅读器更加友好。

TinaMarkdown 过去将 Markdown 表格的每一行渲染为 <tbody><td>，包括表头行。输出中没有 <thead> 和 <th>。屏幕阅读器使用 <th> 将单元格链接回其列标题，因此这些表格呈现为无标签的网格。

现在第一行渲染为 <thead><th>。这是标准的 GFM 输出，也是 TinaCMS 已经为您在富文本编辑器中构建的表格所做的。

之前和之后

在 Markdown 文件中查看此表格：

| Framework | Status |
| --------- | ------ |
| Next.js   | Stable |

以下是 TinaMarkdown 过去给您的内容：

<table>
  <tbody>
    <tr>
      <td>Framework</td>
      <td>Status</td>
    </tr>
    <tr>
      <td>Next.js</td>
      <td>Stable</td>
    </tr>
  </tbody>
</table>

图：❌ 之前 - TinaCMS Next.js 启动器上的表格

以下是现在给您的内容：

<table>
  <thead>
    <tr>
      <th>Framework</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Next.js</td>
      <td>Stable</td>
    </tr>
  </tbody>
</table>

图：✅ 之后 - TinaCMS Next.js 启动器上的表格

在此版本之后，您的表格将输出不同的 HTML，因此它们可能看起来也不同。我们建议您在部署 TinaCMS 3.13 之前，通过加载包含表格的页面来仔细检查您的网站。

您一直可以为富文本渲染的每个 HTML 元素设置样式。现在表头行以 th 形式出现，您可以将其与正文单元格分开设置样式。如果您已经覆盖了 td，请在旁边添加一个 th，否则表头行将无样式渲染。

<TinaMarkdown
  content={page.body}
  components={{
    th: (props) => <th className="px-3 pb-2 font-semibold text-left" {...props} />,
    td: (props) => <td className="px-3 py-2" {...props} />,
  }}
/>

如果升级后有任何问题，请告诉我们。打开一个问题，或者在 Discord 上找到我们。

TinaCMS 团队 🦙