xiaohongshu-card-creator

# xiaohongshu-card-creator 将 Markdown 文章转换为小红书风格的图文卡片，支持**智能内容识别**和**通用模板**两种模式。 ## 功能特性 - ✅ **智能内容识别**：自动分析 Markdown 结构，根据内容类型选择最佳卡片布局 - ✅ **通用模板模式**：使用预设模板循环生成，适合任何内容类型 - ✅ **自定义卡片数量**：支持 1-20 张卡片 - ✅ **一键下载**：自动生成 1242×1660px PNG 图片 - ✅ **响应式设计**：浏览器直接预览 - ✅ **快捷键支持**：Ctrl+S 快速触发下载 ## 使用方法 ### 两种工作模式 #### 1. 智能内容识别模式（推荐） 自动分析 Markdown 结构，智能选择卡片布局。 ```bash # 启用智能模式 ./scripts/generate.sh article.md -s # 智能模式 + 指定卡片数量 ./scripts/generate.sh article.md -s -n 7 ``` **智能识别规则**： | Markdown 标题关键词 | 识别类型 | 卡片样式 | |:---|:---|:---| | 一句话/定义/是什么 | definition | 定义卡片（高亮框） | | 类比/比喻/像什么 | analogy | 类比卡片（渐变背景） | | 特点/特性/优势 | features | 特点卡片（列表展示） | | 举例/示例/案例 | examples | 示例卡片 | | 对比/区别/vs | comparison | 对比卡片 | | 步骤/流程/阶段 | process | 流程卡片 | | 其他内容 | content | 通用内容卡片 | #### 2. 通用模板模式 使用预设模板循环生成卡片。 ```bash # 默认生成7张卡片 ./scripts/generate.sh article.md # 生成指定数量的卡片 ./scripts/generate.sh article.md -n 5 ``` ### 参数说明 | 参数 | 说明 | 默认值 | |:---|:---|:---| | `input-file` | Markdown文件路径 | 必填 | | `-n, --num-cards` | 指定卡片数量 | 7 | | `-o, --output` | 输出目录 | `./output` | | `-s, --smart` | 启用智能内容识别 | false | | `-h, --help` | 显示帮助 | - | ### 使用示例 ```bash # 智能模式：自动分析文章结构 cd /path/to/xiaohongshu-card-creator ./scripts/generate.sh /path/to/article.md -s # 通用模式：快速生成固定模板卡片 ./scripts/generate.sh /path/to/article.md -n 3 # 指定输出目录 ./scripts/generate.sh article.md -s -n 5 -o ./my-cards ``` ### 导出 PNG 图片 1. 浏览器打开生成的 `xiaohongshu-cards.html` 2. 点击 **"📸 下载卡片图"** 按钮 3. 自动下载所有 PNG 图片 **快捷键**：`Ctrl+S` (或 `Cmd+S`) 快速触发下载 ## 内容编写建议 ### 适合智能模式的文章结构 ```markdown # 文章主标题 ## 一句话解释 简明扼要的定义... ## 生活类比 用生活化的比喻解释... ## 关键特点 - 特点一 - 特点二 - 特点三 ## 举例说明 具体的例子... ## 对比分析 与其他事物的区别... ``` ### Markdown 支持 - `#` 一级标题 → 卡片主标题 - `##` 二级标题 → 卡片章节标题 - `**粗体**` → 高亮文字 - `-` 或 `*` 列表 → 列表展示 - 代码块 → 保留格式 ## 输出文件 - **HTML文件**: `xiaohongshu-cards.html` - **PNG图片**: `xhs-card-01.png` ~ `xhs-card-{N}.png` - **尺寸**: 1242×1660px（小红书标准3:4） - **位置**: `./output`（可自定义） ## 技术实现 - **html2canvas**: 浏览器端截图 - **3倍缩放**: 确保高清输出 - **纯前端**: 无需服务器 ## 自定义样式 编辑 `templates/card-template.html` 可自定义： - 配色方案 - 卡片布局 - 字体样式 ## 更新日志 ### v1.3.0 - ✅ **新增智能内容识别模式** (`-s` 参数) - ✅ 自动分析 Markdown 结构 - ✅ 根据内容类型选择最佳卡片布局 - ✅ 保留通用模板模式作为默认选项 ### v1.2.1 - ✅ 移除 hardcode 路径 - ✅ SKILL_DIR 动态检测 ### v1.2.0 - ✅ 支持自定义卡片数量 - ✅ 新增命令行参数 ### v1.1.0 - ✅ 初始版本