万物皆树：Web Origami 探秘

# Web Origami 说到底就是树 来源：https://vale.rocks/posts/web-origami 本站点，以及自 2024 年底我接触该项目以来搭建的众多其他站点，均使用 Web Origami 构建。它迅速成为我构建静态网站、处理和转换数据的最爱方式。 这个项目本身很难用一句话概括。我可以按“它能做什么”去描述：静态站点生成器、数据转换器……但都没有说到点子上。Origami 极其通用且强大，采用“内容/转换”模型，潜力无限，却又简单易学。 项目被拆成几个独立部分，作者 Jan Miksovsky（https://jan.miksovsky.com/）称之为“aspect（https://weborigami.org/#aspects）”。我主要用来做静态网站，最常用的是 Origami 版 JavaScript 方言及其内置函数。 Origami 被称作“JavaScript 方言”而非独立语言，因为它本质上是带路径的超方便 JS 表达式系统。写法极简洁，却不难读，甚至有点魔法感。懂 JS 的人会觉得顺理成章；即便只具备技术背景、没写过 JS，也能快速看懂并上手。 Origami 的“魔法”并非把细节黑箱化让你只能信它，而是“看起来就是能行”——你想做的事往往就是直觉写法，而 Origami 总有清晰、显而易见的实现方式。它如何解析和管理代码完全透明，文档不仅告诉你“怎么做”，还解释“为何这样”。 ## 简单结构 理解 Web Origami 的关键在于：几乎所有东西都是树。项目曾因此得名 TreeOrigami。 假设一个文件夹里有若干 Markdown 文件，每篇都带 YAML 前言，典型开发者博客格式： ``` --- title: Blog Post 1 date: 02/08 --- This is the contents of a most informative and wonderful blog post. ``` 可用 `Tree.map(blog-posts, (post) => post.title)` 取出每篇标题：它会深入文件夹和 Markdown 文件，抓取 YAML 前言里的 title 值，返回： ``` post-1.md: Blog Post 1 post-2.md: Blog Post 2 post-3.md: Blog Post 3 ``` 当一切都是树，内容操作就简单了：一目录 Markdown？一棵树一撸到底。YAML 文件？也是树。想取某篇 Markdown 前言里的 YAML 值？顺着树往下走即可。没有“两种数据类型互操作”的复杂度——它们全是互通的树。 Origami 为数据处理而生，给你最简单直接的工具。没有武断限制，也不用跟固执的架构打架。项目是你的，做法由你定。Origami 极其开放、灵活，不会把你塞进某个模板；相反，你为自己的项目打造模板，Origami 配合你。 若 Origami 的套路太复杂，或要做极定制的事，直接写普通 JS 函数并调用即可。我曾用函数统计文章字数、转换日期格式、把定义事件的 YAML 变成年度展示，等等。 ## 内置函数 Origami 自带大量内置函数，分四大命名空间：Dev、Origami、Protocol、Tree，实用动作*极多*。 - Dev 命名空间用于开发与调试，如 `Dev.changes` 对比差异、`Dev.serve` 起本地服务器。 - Protocol 命名空间提供各种 URL 协议处理器，如 `Protocol.https`、`Protocol.files`，可拉取远程数据。 - Origami 命名空间有通用工具，如 `Origami.mdHtml` 把 Markdown 转 HTML、`Origami.slug` 把输入转成 URL 安全字符串。 - Tree 命名空间则全是树操作：简单的 `Tree.first` 取首个值，复杂的 `Tree.calendar` 直接返回年/月/日结构。 上面只提到冰山一角，内置函数数百个，个个好用。比如文件夹 posts 里一堆文章想随机排序，只需： ``` posts -> Tree.shuffle ``` 用 Origami 建站就是把这种小变换串成流水线。宏观复杂度无上限，微观永远小模块、可组合。天花板高，门槛却低。 ## 不只是建站 Origami 作为静态站点生成器极其出色，但这并非它的唯一战场，终端里一样好使。 - PNG 转 AVIF？`ori "Origami.image.format(image.png, 'avif')"` - 想给目录画个结构图？`ori "Dev.svg(src)" > folder-visual.svg` - YAML 文件顺序反了？`ori Tree.reverse films.yaml` 我向来讨厌为简单数据变换折腾 `jq`、`yq`，常常干脆写 Python 脚本。Origami 让一切保持极简。 支撑 Origami 的 async-tree 库（https://weborigami.org/async-tree/）完全独立开源，可脱离语言与其他部分单独使用。若你在 Origami 之上做复杂系统，直接引入该库即可，也方便写扩展增强 Origami 能力。 ## 扩展 除了官方内置功能，Origami 还有一批扩展（https://weborigami.org/builtins/extensions）对接外部工具、系统与服务。 我是搜索工具 Pagefind（https://pagefind.app/）的自来水，多个站点都在用，包括 Vale.Rocks（https://vale.rocks/posts/the-implementation-of-this-site#search）。Origami 有官方 Pagefind 扩展（https://github.com/WebOrigami/extensions/tree/main/pagefind），集成只需几行。 也有人用扩展对接 Dropbox、Google Drive 等云存储，实现顺滑的写作流程。 --- Origami 很棒，我用它做了不少站。不过目前它并非大型项目，主要由作者一人维护，当然也有外部贡献，建议都会被听取。社区尚小，网上未必能搜到每种模式的现成答案，但现有用户活跃，文档亦详尽出色。 如果你感兴趣，不妨一试，毫无风险，很多场景都能受益，其潜力尚待挖掘。