入门
第一份 Folio,30 秒看到结果——不用装任何东西。
1. 打开 playground
点这里 → playground
左边 source、右边 preview。默认载入的「学跑步三个月」示例展示了 Folio 几个核心命令:
:::对比 mode=before-after— 数字对比卡:::时间线 orientation=horizontal— 时间线==术语==+:::注释 ref=术语— hover 注释[文字](#id)+:::引用 id=id— 学术风引用
改一个数字,看 preview 同步刷新。
2. 改写成你的内容
playground 顶上的 dropdown 切到「入门模板 → 起步模板 · 30 行可改」,载入下面这份最小模板,把内容改成自己的:
---
title: 我的第一份 Folio
theme: swiss
notes:
PMF: "Product-Market Fit — 产品和市场匹配的信号"
---
# Q3 复盘
这个季度我们做到了 ==PMF==。三件事让数字变好看了:
1. 砍掉非核心功能
2. 把新用户引导改了一遍
3. 价格分层
:::对比 mode=before-after
left:
title: Q1
metrics:
- 留存率: 38%
- 周活跃: 120
right:
title: Q3
metrics:
- 留存率: 67%
- 周活跃: 580
:::
3. (可选)装到本地
如果你想离线编译、批量构建、或集成进 CI:
npx @foliolang/cli init
这会生成 article.md、folio.config.json、.env.example。
需要配 LLM key 才能用 :::插入流程图 / :::插入图表 / :::插入交互 这三类 AI 命令;其他命令(:::对比 / :::时间线 / :::注释 / :::引用 / :::插入表格)纯静态,不需要 key。
export DEEPSEEK_API_KEY=sk-... # 或别的 provider
npx @foliolang/cli build article.md
输出 article.html,浏览器直接打开。
4. (可选)实时预览
npx @foliolang/cli dev article.md
打开 http://localhost:5173,保存 article.md 自动刷新。