我构建了一个配方提取器，因为我厌倦了在获取配料前阅读生活故事

Source: Dev.to

你懂的。

你在谷歌搜索 “easy chicken tikka masala recipe”。点开第一个结果。随后你被 3,000 字的文字轰炸，讲述作者的祖母曾在斋浦尔的香料市场度过一个改变她一生的夏天。

你滚动。再滚动。滚动到 “Jump to Recipe” 按钮，却不知不觉被带到另一段关于厨房装修的文字。

我终于忍不住了。

所以我做了 JustTheRecipe

justtherecipe-app.fly.dev – 粘贴任意食谱链接，获取仅包含配料和做法的内容。仅此而已。没有人生故事。没有广告。没有臃肿。

工作原理

• 粘贴食谱链接。
• 服务器抓取页面并提取食谱数据。
• 你得到一张干净、易读的食谱卡。

提取方法（按顺序）

1. JSON‑LD（黄金路径）
   大多数食谱站点使用 Schema.org Recipe markup 嵌入结构化数据。这是最可靠的来源——它就是机器可读的食谱数据，直接放在 <script> 标签里。

   function extractJsonLd($) {
     const scripts = $("script[type=\"application/ld+json\"]");
     for (let i = 0; i < scripts.length; i++) {
       let data = JSON.parse($(scripts[i]).html());
       if (data["@graph"]) data = data["@graph"];
       const items = Array.isArray(data) ? data : [data];
       for (const item of items) {
         if (item["@type"] === "Recipe") return normalizeRecipe(item);
       }
     }
     return null;
   }

2. Microdata 备选
   一些旧站点使用 itemprop 属性而不是 JSON‑LD。我们也会检查这些。

3. 启发式提取
   当根本没有结构化数据时，我们会寻找常见模式——类名中含有 “ingredient” 的列表、类名中含有 “instruction” 或 “step” 的有序列表。虽然不完美，但能捕获相当多的网站。

技术栈

• Express – 提供 API 与静态文件
• Cheerio – 解析 HTML 并提取食谱数据
• Vanilla HTML/CSS/JS – 无框架，无构建步骤
• Fly.io – 部署在巴黎（CDG 区域）

整个服务器只有一个文件。整个前端只有一个 HTML 文件。总依赖：6 个。

我真正自豪的功能

• 配料复选框 – 点一下即可划掉，烹饪时的神器。
• 打印模式 – 生成干净的食谱卡。我的冰箱现在全是这些卡片。
• 移动优先 – 因为没人会在厨房里支起台式电脑。
• 无需账号、无追踪 – 粘贴链接，获取食谱，完成。

试一试

👉 justtherecipe-app.fly.dev

从你喜欢的美食博客复制任意食谱链接并粘贴进去。那篇有 4,000 字关于佛蒙特秋天的前言的？它同样运行良好。

我的收获

• Schema.org 是一份礼物。 结构化数据让网络真正可以被此类工具利用。如果你运营食谱站点，请使用 JSON‑LD。
• 并不是所有事情都需要 React。 Vanilla JS 加上单个 HTML 文件即可瞬间加载，满足我的全部需求。
• 自己动手解决痛点。 最好的副项目是解决你真实需求的项目。我几乎每天都在做饭，这个工具帮我省掉了不少烦恼。

周末完成。已经每天在用。有时最好的项目就是最简单的项目。