Chowdown 开发者指南recipes.json 数据接口与搜索原理速查【免费下载链接】chowdownSimple recipes in Markdown format项目地址: https://gitcode.com/gh_mirrors/ch/chowdownChowdown 是一个以 Markdown 格式存储食谱的极简开源项目被誉为黑客的纯文本食谱数据库。对于想二次开发或自建食谱站的开发者来说掌握recipes.json 数据接口与站内搜索原理是入门的第一课。本文将用最直观的方式带你快速读懂 Chowdown 的 JSON 数据结构、Lunr.js 索引生成过程以及前端搜索的完整链路助你轻松接入自己的应用或改造现有功能。图片说明Chowdown 中每个食谱都配有实拍图图片路径统一由数据接口输出。一、recipes.json最轻量的食谱数据接口recipes.json位于项目根目录是 Chowdown 对外暴露的最简单数据源。它并非手写文件而是由 Jekyll 在构建时根据_recipes/目录下的所有 Markdown 食谱自动生成的源码见 recipes.json。它的结构极其精简每个食谱只保留两个字段title食谱标题例如 Banana Breadimage图片的完整相对路径例如/images/banana-bread.jpg你只需要写一个 Markdown 文件放在_recipes/目录下构建时它就会自动进入 recipes.json。以 banana-bread.md 为例文件顶部是 YAML frontmatter包含标题、图片名、标签、食材与步骤列表正文则用于写故事和背景介绍。一个典型的食谱 Markdown 长什么样--- layout: recipe title: Banana Bread image: banana-bread.jpg tags: - breakfast - baking ingredients: - 4 bananas - 2 cups flour directions: - Beat the eggs, then cream with the butter and sugar ---是不是很简单把这一段贴进_recipes/新建的文件你的食谱就自动出现在站点和 JSON 接口里了。这也是 Chowdown 的核心魅力——纯文本即数据库。二、search.json面向搜索的富数据结构如果 recipes.json 是精简版接口那么 search.json 就是增强版。它同样由 Jekyll 模板生成但每个食谱包含更多字段专门为站内搜索设计title标题已做 HTML 转义处理ingredients全部食材逗号拼接tags标签空格分隔image配图路径url食谱详情页地址description正文去除 HTML 与换行后的纯文本摘要这 6 个字段构成了 Chowdown 搜索的数据基础标题、食材、标签、图片、链接、描述。前端搜索时输入 chicken就能同时命中标题、食材或标签中包含 chicken 的食谱。三、搜索原理Lunr.js 索引 SimpleJekyllSearchChowdown 的搜索并不复杂由两部分协作完成索引文件js/index.json这是用 Lunr.js 生成的离线搜索索引体积约 190KB。它包含文档存储documentStore和倒排索引tokenStore并对文本做了小写化、停用词过滤stopWordFilter和词干提取stemmer所以搜索 roast 也能匹配 roasted。前端脚本js/search.min.js 与 plugins/simple-jekyll-search.min.js前者内置 Lunr.js 全文检索能力后者提供简易的 JSON 加载与结果渲染。前端搜索页面如何工作搜索页 search.html 是理解整条链路的最佳入口核心流程如下页面加载时通过SimpleJekyllSearch读取search.json输入框监听input事件实时调用搜索结果按模板渲染成卡片展示图片、标题并链接到详情页页面顶部还动态收集了所有食谱的 tags 作为快捷筛选按钮点击即可搜索对应标签const simpleSearch SimpleJekyllSearch({ searchInput, resultsContainer: document.getElementById(results_list), json: /search.json, searchResultTemplate: a href{url}img src{image}h1{title}/h1/a });四、三份数据文件如何选文件字段丰富度适用场景recipes.json标题 图片首页卡片、外部应用接入、轻量 APIsearch.json6 个字段站内全文搜索、标签筛选js/index.json倒排索引纯前端离线全文检索如果是外部应用想读取 Chowdown 的食谱数据优先选recipes.json结构最简单如果要复刻站内搜索体验则需要search.json 前端搜索库组合使用。五、二次开发速查3 个实用入口想新增食谱在 _recipes/ 新建 Markdown参考 banana-bread.md想复用食材组件组件放在 _components/例如 graham-cracker-crust.md想自定义搜索改 search.html 和 search.json 的模板字段六、快速本地运行本地体验只需两步先安装 Jekyll 环境然后克隆仓库并启动服务gem install bundler jekyll jekyll serve默认访问http://127.0.0.1:4000/之后每新增一个_recipes/下的 Markdown刷新页面即可看到它出现在首页和 JSON 接口中。结语Chowdown 用极简的 Markdown JSON 设计把食谱数据库做成了人人都能上手的开源项目。无论是想自建食谱站、做食谱 API还是单纯学习 Jekyll 集合与 Lunr.js 索引的协作方式这份 recipes.json 数据接口与搜索原理速查都能帮你快速上手。动手写第一份食谱 Markdown 吧几分钟后你就能看到它出现在自己的数据接口里【免费下载链接】chowdownSimple recipes in Markdown format项目地址: https://gitcode.com/gh_mirrors/ch/chowdown创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考