0009 支持图文做法，首批来自 HowToCook

• 状态：已采纳
• 日期：2026-10-19

背景

• 每道菜只能跳 B 站视频。有人更习惯看图文（#67），也有些菜找不到合适的视频。
• 网页和 iOS 的菜谱结构里本来就有 link 字段（自己添加的菜谱在用），但 recipe.csv 没有对应的列。
• HowToCook 有 300 多道 Markdown 菜谱，Unlicense 协议，可以自由使用。

方案对比

问题	方案	取舍
存放方式	recipe.csv 加可选的 link 列	不改 JSON 结构，两端已经能读；没有图文的行不用改
正文	只存链接，两端都跳转	国内打开 GitHub 慢，App 里体验差
	App 内置正文离线显示，网页跳转	App 多约 0.8 MB 数据；网页不增加体积，仍能打开原文
	网页也内置正文	网页包变大，网页打开原文本来就方便，先不做
配图	图片也打包进 App	200 多张压缩后也有 13 MB，App 太大
	走 GitHub 原图	国内经常加载不出来，原图也大
	压成 webp 放 COS，按内容哈希命名	要配对象存储；地址不变可以永久缓存，加载失败只隐藏图
和视频共存	link 优先（原来的逻辑）	已有视频的菜会被图文顶掉
	视频优先，图文作为第二个入口	视频仍是主入口，两者都有时详情页多一个「看图文做法」
链接地址	howtocook.aiursoft.com 详情页	按数字编号，和仓库文件对不上，不好维护
	GitHub 上的 Markdown 页面	和仓库路径一一对应，稳定；国内打开 GitHub 可能慢
食材	原样搬 HowToCook 的原料	名称五花八门，筛选用不了
	只取能对应到 food.json 的主料，人工校对	调料、配菜不进 stuff；对应不上主料或太小众的菜不收

决定

• recipe.csv 增加最后一列 link（可选，https:// 开头），pnpm validate 校验格式。
• 详情页优先打开 B 站视频；只有图文时按钮叫「看图文做法」；两者都有时多一个图文入口。Web 和 iOS 一致。
• 正文：pnpm howtocook <HowToCook 目录> 把链接到 HowToCook 的菜的 Markdown 转成段落（标题、正文、列表），生成 packages/data/recipe-text.json。云食册内置这份数据，「看图文做法」在 App 里离线显示，右上角和页底可以「打开原文」；网页仍然跳转到 link。
• 配图：导入时压成 webp（最宽 1080），文件名取原图内容哈希，写到 .cache/recipe-images，正文里记相对路径和宽高。pnpm images:upload 上传到腾讯云 COS（已有的跳过、不删旧图），Recipe Images 工作流在 recipe-text.json 变化后自动上传。App 用 imageBase + src 加载，加载前按比例占位，失败就隐藏。桶用云乐坊各项目共用的素材桶 yunlefun-assets-prod-1325586649，对象放在 cook/ 前缀下，见 图文做法配图。
• 首批从 HowToCook 导入：和已有菜同名的只补 link，其余新增一行（id 照常递增）。
• 导入时只取能对应到食材词典的主料，难度按 HowToCook 的星级换算（1～2 星简单、3 星普通、4～5 星困难）。

影响

• 以后再从 HowToCook 同步时，按文件路径判断是否已收录，不要重复导入。
• 增删 HowToCook 的菜或 HowToCook 更新后重新运行 pnpm howtocook；测试会检查每道链接到 HowToCook 的菜都有正文。
• 网页上 GitHub 打开太慢时，可以把 link 换成镜像地址，或者网页也按需加载 recipe-text.json。