note2any/XIAOHONGSHU_PREVIEW_GUIDE.md

小红书分页预览和切图功能使用指南

功能概述

小红书模式提供了专门优化的预览和切图体验：

• ✅ 按切图比例自动分页显示
• ✅ 确保表格和图片不跨页
• ✅ 实时预览每一页的效果
• ✅ 支持单页/全部页切图
• ✅ 字体、字号、主题可调整

使用步骤

1. 切换到小红书平台

1. 打开笔记预览面板
2. 在顶部"发布平台"下拉框中选择"小红书"
3. 界面会自动切换到小红书预览模式

2. 用户界面

小红书预览视图由四部分组成：

2.1 顶部工具栏

第一行：操作按钮

+------------------------------------------------------------+
| [刷新] [发布到小红书]                                      |
+------------------------------------------------------------+

功能说明：

• 刷新：重新加载自定义CSS和样式，刷新预览内容
• 发布到小红书：将当前文档发布到小红书平台

第二行：样式控制

+------------------------------------------------------------+
| 模板 [▼] | 主题 [▼] | 字体 [▼] | 字体大小 [-][16][+]      |
+------------------------------------------------------------+

功能说明：

• 模板选择：选择不同的页面模板（默认/简约/杂志，目前为占位功能）
• 主题选择：选择文章样式主题（同微信公众号的主题）
• 字体选择：选择文章字体（系统默认/宋体/黑体/楷体/仿宋）
• 字体大小：调整文章字号（12-24px，默认16px）

主题选择

• 与插件设置中的主题列表同步
• 可选择不同的文章样式主题
• 实时切换预览效果

字体选择

• 系统默认
• 宋体
• 黑体
• 楷体
• 仿宋

字号调整

• 点击 - 减小字号（最小 12px）
• 点击 + 增大字号（最大 24px）
• 默认 16px
• 所有文本同步调整

2.4 预览区域

显示当前页面的渲染内容，包含：

• 应用选定的主题样式
• 应用选定的字体
• 应用调整后的字号
• 按照切图比例渲染的页面

2.5 分页导航

+------------------------------------------------------------+
|              [←]      1/5      [→]                         |
+------------------------------------------------------------+

功能说明：

• 左箭头 (←)：切换到上一页
• 页码显示：显示当前页码和总页数
• 右箭头 (→)：切换到下一页

2.6 底部操作栏

+------------------------------------------------------------+
|         [⬇ 当前页切图]    [⬇⬇ 全部页切图]                |
+------------------------------------------------------------+

功能说明：

• 当前页切图：将当前显示的页面保存为图片
• 全部页切图：批量保存所有页面为图片

3. 使用流程

3.1 基本使用

1. 打开一个 Markdown 笔记
2. 在预览面板点击"发布平台"下拉框
3. 选择"小红书"
4. 界面自动切换到小红书预览模式
5. 系统自动分页并显示第一页

3.2 调整样式

1. 在第二行工具栏选择主题、字体
2. 使用 + - 按钮调整字号
3. 预览区实时更新

3.3 浏览页面

1. 使用分页导航的左右箭头切换页面
2. 查看页码了解总页数
3. 检查每一页的内容完整性

3.4 刷新预览

1. 修改文档内容后
2. 点击"刷新"按钮
3. 系统重新渲染并分页

3.5 切图导出

1. 浏览到需要导出的页面
2. 点击"当前页切图"保存该页
3. 或点击"全部页切图"批量保存所有页面
4. 图片保存在配置的路径（默认：/Users/gavin/note2mp/images/xhs）

3.6 发布到小红书

1. 确认内容无误
2. 点击"发布到小红书"按钮
3. 系统自动上传内容和图片

4. 分页规则

系统会根据以下规则自动分页：

1. 页面高度计算

   • 页面高度 = 切图宽度 × (比例高 / 比例宽)
   • 例如：1080px × (4/3) = 1440px

2. 智能分页

   • 普通段落：允许跨页（10% 溢出容差）
   • 表格：不跨页，整体显示在一页
   • 图片：不跨页，整体显示在一页
   • 代码块：不跨页
   • 公式：不跨页

3. 分页导航

   • 点击 ← 上一页
   • 点击 → 下一页
   • 显示当前页码 / 总页数

5. 切图操作

当前页切图

1. 浏览到想要切图的页面
2. 点击"⬇ 当前页切图"按钮
3. 等待处理完成
4. 查看保存路径

文件命名： {slug}_1.png（页码从 1 开始）

全部页切图

1. 点击"⇓ 全部页切图"按钮
2. 系统会依次处理每一页
3. 显示进度提示
4. 全部完成后提示

文件命名： {slug}_1.png, {slug}_2.png, {slug}_3.png ...

6. Frontmatter 配置

在笔记的 frontmatter 中添加：

---
title: 我的小红书笔记
slug: xiaohongshu-demo
---

• title: 笔记标题（可选）
• slug: 文件名标识符（必需，用于切图文件命名）

如果未设置 slug，将使用文件名（不含扩展名）

7. 切图配置

在插件设置 → 切图配置中：

• 切图保存路径: /Users/gavin/note2mp/images/xhs
• 切图宽度: 1080 px
• 切图横竖比例: 3:4（小红书推荐）

技术细节

分页算法

1. 测量高度

   • 创建临时隐藏容器
   • 按目标宽度渲染每个元素
   • 测量实际高度

2. 累计判断

   • 逐个元素累加高度
   • 判断是否超出页面高度
   • 不可分割元素单独处理

3. 页面包装

   • 每页内容独立包装
   • 应用统一样式
   • 确保渲染一致

切图流程

1. 临时调整宽度

   pageElement.style.width = '1080px';
   

2. 渲染为图片

   await toPng(pageElement, {
       width: 1080,
       pixelRatio: 1,
       cacheBust: true
   });
   

3. 保存文件

   fs.writeFileSync(filepath, buffer);
   

4. 恢复样式

   pageElement.style.width = originalWidth;
   

常见问题

Q: 为什么分页后内容看起来不连续？

A: 这是正常的。系统按页面高度自动分割内容，每页是独立的截图单元。如果需要更连续的效果，可以调整切图比例使页面更高。

Q: 表格被截断了？

A: 表格应该不会跨页。如果出现截断，可能是表格本身高度超过单页限制。建议：

• 拆分大表格
• 调整比例使页面更高
• 使用横向比例（如 4:3）

Q: 字体设置不生效？

A: 确保：

1. 已选择具体字体（不是"系统默认"）
2. 切换页面后重新预览
3. 系统中已安装该字体

Q: 切图后图片模糊？

A: 检查：

1. 切图宽度设置（建议 1080 或更高）
2. 浏览器缩放比例（建议 100%）
3. 原始内容清晰度

Q: 如何调整页面内边距？

A: 当前版本内边距固定为 40px。如需自定义，可修改 paginator.ts 中的 renderPage 函数：

padding: 40px;  // 改为需要的值

最佳实践

📝 内容编写建议

1. 段落长度

   • 避免过长的段落
   • 适当使用小标题分割
   • 利于阅读和分页

2. 图片使用

   • 图片宽度不要超过 1000px
   • 高度控制在 1200px 以内
   • 避免超高图片影响分页

3. 表格设计

   • 表格高度控制在单页范围内
   • 复杂表格考虑拆分
   • 使用简洁的表格样式

🎨 样式调整建议

1. 字号选择

   • 正文：16px（默认）
   • 引用/注释：14-15px
   • 标题：18-20px

2. 字体搭配

   • 正文：宋体/黑体（清晰）
   • 标题：黑体（醒目）
   • 代码：系统默认（等宽）

3. 主题选择

   • 小红书风格：简约、清新主题
   • 避免过于花哨的样式
   • 保持视觉一致性

💡 切图技巧

1. 批量处理

   • 多篇笔记：使用"全部页切图"
   • 检查预览：先看每一页效果
   • 按需调整：修改后重新切图

2. 文件管理

   • 使用有意义的 slug
   • 按主题组织目录
   • 定期清理旧文件

3. 质量保证

   • 切图前检查预览
   • 确认分页合理
   • 验证文件命名

示例配置

小红书竖图（推荐）

宽度：1080px
比例：3:4
页面高度：1440px

小红书方图

宽度：1080px
比例：1:1
页面高度：1080px

高清竖图

宽度：1440px
比例：9:16
页面高度：2560px

---

提示:

• 首次使用建议先用短笔记测试分页效果
• 调整好配置后再处理长篇内容
• 保存好配置以便下次使用

已知限制:

• 移动端不支持（需要 Node.js fs API）
• 模板功能暂为占位（后续版本实现）
• 主题切换需要重新刷新预览