Mono 编辑风格着陆页
一个像杂志一样设计的着陆页:纸上的油墨、细线标注的“期号”、大得能在房间对面阅读的 Instrument Serif 标题、带首字母下沉的引言、由细线分隔的编号列、交替排列的带框图和说明文字(“图1”)的特色展示、居中的斜体引言、问题列表、结尾行以及打字机风格的版权页。默认配色为黑底暖白;通过更改三种颜色,可切换为浅色近黑底色,或为斜体字添加一种强调色。
您可以在 page.json 中描述页面,或者让脚本根据项目的 README 草拟内容。构建脚本会检查页面并写入 out/index.html,这是一个包含其 CSS 的单独文件(以及用于图片的 out/assets/ 目录)。对于尚未发布的产品,英雄区会包含一个真实的候补名单表单,该表单可将数据提交到 Formspree、Netlify Forms、Buttondown 或任何端点;对于已发布的产品,则会显示两个按钮。
你需要什么
- Node.js 18 或更新版本。无需安装其他依赖。
- Chrome、Chromium 或 Edge 用于检查(脚本会自动查找;如果找不到,请设置
CHROME_PATH)。 - 对于候补名单:一个表单服务的账户,或一个可接收表单提交的端点。
- 打开页面时需要互联网访问,以便加载 Google Fonts(Instrument Serif、Newsreader、Inter 和 IBM Plex Mono)。如果没有网络连接,页面会使用系统字体。
此技能的文件夹是 <skill> 下方的目录:也就是本 SKILL.md 文件所在的文件夹。
步骤
1. 从 README 草拟内容
node <skill>/scripts/from-readme.mjs README.md page.json
它会读取 README(以及旁边的 package.json,如果有的话),并写入一个已经可以构建的 page.json:项目名称、副标题作为第一个大标题、简介内容作为导语、一个“特性”列表(其项目以粗体名称开头,并作为列)、安装和快速开始命令作为终端图例、其他章节作为特色展示(包含它们的截图或代码)、一个 FAQ 章节作为问题列表,以及仓库链接作为按钮。它会跳过徽章、Logo、链接行、目录、许可和贡献者章节。
它绝不会自行生成任何文案,除了“开始”之类的标签,并且会以三个列表结尾。与用户一起处理它们:
- 与用户共同编写:始终需要编写大标题,以及每个仍然是 README 章节标题(如“安装”、“工作原理”)的特性标题。
- 裁剪到合适长度:它在句子或单词边界处缩短了文本。请重新阅读每个被缩短的部分。
- README 中有但页面上没有的内容:它没有空间放置的章节和特性。如果它们更重要,可以替换到页面中。
如果没有 README,或者 README 内容很单薄,则根据用户的笔记、当前网站或文档,从某个示例开始编写 page.json。
2. 决定英雄区需要什么
-
尚未启动:一个候补名单。询问哪个服务收集电子邮件,并设置
hero.form:provider设置准备 在 form中放入什么formspree在 formspree.io 创建一个表单;其 URL 以表单 ID 结尾。在任何主机上都是最简单的。 `