Datasette.io 新闻预览工具提升 YAML 编辑体验

Simon Willison·4月16日 08:18 UTC·作者 Simon Willison

关键信息

该工具使用 Claude AI 和 Claude Artifacts 构建，能克隆 GitHub 仓库并分析其内容，直接在编辑器界面中高亮日期格式错误等语法问题。

资讯摘要

Simon Willison 创建了一个用于编辑 datasette.io 新闻部分所用 news.yaml 文件的自定义预览界面。该 YAML 文件以结构化格式存储发布说明，包含日期和 Markdown 格式的正文。此前手动编辑这个文件容易出错，因为缺乏视觉反馈。

新工具让用户可以在编辑时实时看到每条新闻在网站上的渲染效果，并即时发现 YAML 和 Markdown 语法错误。它利用 Claude AI 解析仓库并生成响应式界面：左侧显示原始 YAML 输入，右侧展示渲染后的 HTML 输出。红色徽章会提示验证错误，例如日期格式不正确，帮助开发者在提交前修复问题。

资讯正文

工具：datasette.io 新闻预览

工具：<a href="https://tools.simonwillison.net/datasette-io-preview">datasette.io 新闻预览</a>

<a href="https://datasette.io/">datasette.io</a> 网站的新闻板块来自其 GitHub 仓库中的 <a href="https://github.com/simonw/datasette.io/blob/main/news.yaml">news.yaml</a> 文件。YAML 格式如下：

<pre><code>- date: 2026-04-15

body: |-

[Datasette 1.0a27](https://docs.datasette.io/en/latest/changelog.html#a27-2026-04-15) 修改了 CSRF 保护机制，简化了表单和 API 的集成方式，并引入了一个新的 `RenameTableEvent`，用于在通过 SQL 查询重命名表格时触发事件。

- date: 2026-03-18

body: |-

</code></pre>

这种格式编辑起来有些困难，所以我最终借助 Claude 构建了一个定制化的预览界面，以减少检查错误时的麻烦。

我使用标准的 <a href="https://claude.ai/">Claude.ai</a> 和 Claude Artifacts 来搭建这个工具，利用了 Claude 能够克隆 GitHub 仓库并查看其中内容的能力，就像普通聊天一样：

<code>克隆 https://github.com/simonw/datasette.io 并查看 news.yaml 文件及其在主页上的渲染方式。构建一个我可以粘贴 YAML 内容的工件，可以预览它将如何显示，并高亮任何 Markdown 或 YAML 错误。</code>

</blockquote>

<img alt="截图展示 datasette.io 新闻预览工具的两个并排视图。左侧面板是一个深色主题的 YAML 编辑器，包含日期和正文字段（Markdown 格式），底部有红色验证错误提示，指出日期字段格式无效。右侧面板是渲染后的预览输出，按日期分组（2026年4月、2026年3月18日），显示115条新闻条目，带有链接的发布名称、内联代码片段和变更日志描述。左侧面板标题处有一个红色徽章“1”，表示存在一个验证错误。

标签：<a href="https://simonwillison.net/tags/vibe-coding">vibe-coding</a>，<a href="https://simonwillison.net/tags/claude">claude</a>，<a href="https://simonwillison.net/tags/tools">tools</a>，<a href="https://simonwillison.net/tags/datasette">datasette</a>

来源与参考

收录于 2026-04-17