企业官网建设流程全解析

如何用 Chowdown 写菜谱：Markdown 格式与 Front Matter 新手完整指南

【免费下载链接】chowdownSimple recipes in Markdown format项目地址: https://gitcode.com/gh_mirrors/ch/chowdown

Chowdown 是一个用 Markdown 格式写菜谱的开源项目，它把每道菜保存为一个纯文本文件，通过 Front Matter 记录原料、步骤、标签等信息，再由 Jekyll 自动渲染成漂亮的网页。对新手来说，这种"写文本就是写菜谱"的方式零门槛、易备份、好分享。本文是一份面向初学者的完整指南，带你从认识目录结构开始，一步步掌握 Markdown 菜谱的写作规范与 Front Matter 的全部核心字段。

Chowdown 是什么？为什么用 Markdown 写菜谱

传统菜谱网站往往依赖复杂的后台编辑系统，而 Chowdown 反其道而行：菜谱就是文本文件。你不需要登录任何平台，用记事本、VS Code 甚至手机备忘录就能写菜谱。纯文本的 Markdown 格式让菜谱天然支持版本管理（Git）、全文搜索和多语言展示，多年后依然可读可维护。

上图就是典型的 Chowdown 菜谱成品展示——每个菜谱文件对应一张主图，图片文件名只需写进 Front Matter 的image字段即可自动匹配。

菜谱文件放在哪里：快速认识目录结构

克隆仓库后，你会看到几个关键目录：

• _recipes/：存放所有菜谱正文文件，如 banana-bread.md
• _components/：存放可复用的"组件"菜谱，如 graham-cracker-crust.md
• _includes/：存放页面片段，其中 nutritional-information.html 负责渲染营养信息
• _layouts/：页面模板，recipe.html 是菜谱页的渲染模板
• _data/nutrients.yml：营养素的名称与单位映射表

写菜谱时，绝大多数时间你只需要在_recipes/里新建一个.md文件。

手写第一份菜谱：认识 Front Matter 核心字段

Front Matter 是 Markdown 文件最顶部用三条横线包裹的 YAML 区域，它定义了菜谱的"元数据"。以项目自带的 banana-bread.md 为例：

--- layout: recipe title: "Banana Bread" image: banana-bread.jpg tags: - breakfast - baking ingredients: - 4 bananas - 1/2 cup butter - 1/2 cup sugar ingredients: - 2 eggs - 2 cups flour directions: - Beat the eggs, then cream with the butter and sugar - Mix in bananas, then flour, baking soda/powder, salt, and nuts - Bake until brown/cracked, toothpick comes out clean ---

横线之下是菜谱的描述文字，如"From Angie's mom"，会显示在标题下方。整份文件清晰、易读、无需任何格式技巧。

一步步拆解：Front Matter 每个字段怎么填

每个字段都是一行"键 + 值"的简单格式，列表项用-开头，理解成本极低。

进阶玩法：用 components 组合出组件式菜谱

Chowdown 最有特色的设计是组件式菜谱：一个复杂菜谱可以拆成多个小菜谱分别维护，再通过components字段组合。以 red-berry-tart.md 为例，它并不直接写原料，而是引用三个组件：

--- layout: recipe title: "Red Berry Tart" image: red-berry-tart.jpg components: - Graham Cracker Crust - Vanilla Custard Filling - Red Berry Dessert Topping ---

三个组件分别存放在_components/目录下，如 graham-cracker-crust.md、vanilla-custard-filling.md、red-berry-dessert-topping.md。组件本身也是完整的菜谱文件，可以单独发布，也可以被多个菜谱复用——写一次，处处引用，非常符合工程化思维。

如果你的菜谱（比如"红莓挞"）天然由"挞皮 + 馅料 + 装饰"组成，用组件式写法能让每部分都保持简洁，也方便日后单独调整某一部分。

让菜谱更专业：营养信息与多语言展示

Chowdown 还内置了营养信息与多语言能力。在 Front Matter 中加入nutrition字段，页面就会自动渲染营养素卡片：

nutrition: servingSize: "1 slice" calories: 350 fatContent: 12 proteinContent: 8

营养素的中文名与单位由 _data/nutrients.yml 定义（如calories对应 kcal、fatContent对应 g），渲染逻辑在 nutritional-information.html 中，你只需填写数值。

多语言方面，_config.yml中通过translation配置了英语、德语等多套界面文案，改一行language即可切换整站语言，菜谱正文则保持纯文本，互不干扰。

立即上手：克隆仓库开始创作

想立刻体验用 Markdown 写菜谱的乐趣？只需克隆仓库：

git clone https://gitcode.com/gh_mirrors/ch/chowdown

然后复制任意一个_recipes/下的文件，改掉标题、原料和步骤，放一张成品图到images/目录，一份属于你的 Markdown 菜谱就诞生了 🍳

写在最后：写菜谱也可以很简单

Chowdown 用行动证明：菜谱的本质是文本，分享的本质是文件。掌握了 Front Matter 的这几个字段，你就能高效地整理私人食谱库、与朋友协作维护，甚至搭建一个属于自己的菜谱网站。现在就打开_recipes/目录，写下你的第一道菜吧！

【免费下载链接】chowdownSimple recipes in Markdown format项目地址: https://gitcode.com/gh_mirrors/ch/chowdown