我厌倦了 Directus 中凌乱的文本，于是我制作了一个 Typograf 按钮

Source: Dev.to

为什么排版在 Directus 中很重要

我对文字的外观非常挑剔。
如果我看到直引号而不是正确的引号、随意的连字符本该是破折号、缺少不换行空格，或者稍有瑕疵的英文出现在稍有瑕疵的其他内容旁边——我的大脑会立刻从 阅读内容 切换到 找错别字游戏。一旦在 CMS 中注意到这些问题，你会在任何地方都看到它们。

directus‑extension‑typograf

我们大量使用 Directus，后来明显需要一个解决方案。我不再抱怨，写了一个小扩展叫 directus‑extension‑typograf。

它是 Directus 的自定义界面，几乎像普通的文本字段，但多了一个小的 “排版” 按钮。点击按钮后，Typograf 会根据语言规则处理文本，并把清理后的文本放回同一字段。没有幕后魔法，没有隐藏的流水线——在点击 Save 之前，你可以看到到底改了什么。

工作原理

• 该界面支持不同的使用场景：

  • 单行输入用于标题，
  • 多行 textarea 用于较长的文案，
  • Markdown，
  • 带 HTML 的 WYSIWYG。

• 关键点：HTML/Markdown 结构保持不变；仅处理文本节点。

• 你可以在字段设置中硬编码语言，或让界面自动从翻译中的语言代码字段读取。

• 在文本层面，它会做编辑器平时手动完成的操作：

  • 将直引号转换为正确的引号（依据语言），
  • 在合适的地方把连字符改为破折号，
  • 在常导致布局断裂的地方添加不换行空格，
  • 删除多余空格及其他小垃圾。

为什么不在渲染时“修复”

我们最初尝试了常见的 “渲染时修复” 方法：添加前端助手、过滤器或高阶组件，把所有可见文本都通过 Typograf 处理。理论上听起来不错，但实际情况是：

• 一个项目使用了助手，另一个项目没有；
• 邮件和 PDF 仍然得到原始文本；
• 有人直接把 Directus 的内容复制到演示文稿中；
• 同一字段在不同渲染位置表现不一致。

排版是确定性的。如果你在真相源头——CMS——一次性完成处理，就可以以后不再担心它。

对编辑者的好处

从编辑者的角度来看，没有什么剧烈的变化。他们仍然看到熟悉的字段并以同样的方式输入。唯一的区别是，偶尔点击一个小图标，观察文字自动整理好，或许再微调一两个词，然后保存。没有“神秘的后端进程”在背后悄悄重写内容。一切都在他们聚焦文本的那一刻，直接呈现在眼前。

安装 / 源码

代码及更多细节请访问：
https://github.com/antonko/directus-extension-typograf

反馈

如果你在使用 Directus、处理多语言内容，并且对歪斜的引号和奇怪的空格稍感烦恼——你可能会喜欢在 CMS 内部直接拥有一个 “美化” 按钮。如果遇到奇怪的边缘案例，尤其是 Markdown 或特定语言的问题，欢迎告诉我，我会改进这个扩展。