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 中添加：

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

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

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

### 7. 切图配置

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

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

## 技术细节

### 分页算法

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

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

3. **页面包装**
   - 每页内容独立包装
   - 应用统一样式
   - 确保渲染一致

### 切图流程

1. **临时调整宽度**
   ```typescript
   pageElement.style.width = '1080px';
   ```

2. **渲染为图片**
   ```typescript
   await toPng(pageElement, {
       width: 1080,
       pixelRatio: 1,
       cacheBust: true
   });
   ```

3. **保存文件**
   ```typescript
   fs.writeFileSync(filepath, buffer);
   ```

4. **恢复样式**
   ```typescript
   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` 函数：

```typescript
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）
- 模板功能暂为占位（后续版本实现）
- 主题切换需要重新刷新预览