8.6 KiB
8.6 KiB
小红书分页预览和切图功能使用指南
功能概述
小红书模式提供了专门优化的预览和切图体验：
- ✅ 按切图比例自动分页显示
- ✅ 确保表格和图片不跨页
- ✅ 实时预览每一页的效果
- ✅ 支持单页/全部页切图
- ✅ 字体、字号、主题可调整
使用步骤
1. 切换到小红书平台
- 打开笔记预览面板
- 在顶部"发布平台"下拉框中选择"小红书"
- 界面会自动切换到小红书预览模式
2. 用户界面
小红书预览视图由四部分组成：
2.1 顶部工具栏
第一行：操作按钮
+------------------------------------------------------------+
| [刷新] [发布到小红书] |
+------------------------------------------------------------+
功能说明：
- 刷新：重新加载自定义CSS和样式，刷新预览内容
- 发布到小红书：将当前文档发布到小红书平台
第二行：样式控制
+------------------------------------------------------------+
| 模板 [▼] | 主题 [▼] | 字体 [▼] | 字体大小 [-][16][+] |
+------------------------------------------------------------+
功能说明：
- 模板选择：选择不同的页面模板（默认/简约/杂志，目前为占位功能）
- 主题选择：选择文章样式主题（同微信公众号的主题）
- 字体选择：选择文章字体（系统默认/宋体/黑体/楷体/仿宋）
- 字体大小：调整文章字号（12-24px，默认16px）
主题选择
- 与插件设置中的主题列表同步
- 可选择不同的文章样式主题
- 实时切换预览效果
字体选择
- 系统默认
- 宋体
- 黑体
- 楷体
- 仿宋
字号调整
- 点击
-减小字号（最小 12px） - 点击
+增大字号（最大 24px） - 默认 16px
- 所有文本同步调整
2.4 预览区域
显示当前页面的渲染内容，包含：
- 应用选定的主题样式
- 应用选定的字体
- 应用调整后的字号
- 按照切图比例渲染的页面
2.5 分页导航
+------------------------------------------------------------+
| [←] 1/5 [→] |
+------------------------------------------------------------+
功能说明：
- 左箭头 (←)：切换到上一页
- 页码显示：显示当前页码和总页数
- 右箭头 (→)：切换到下一页
2.6 底部操作栏
+------------------------------------------------------------+
| [⬇ 当前页切图] [⬇⬇ 全部页切图] |
+------------------------------------------------------------+
功能说明：
- 当前页切图：将当前显示的页面保存为图片
- 全部页切图：批量保存所有页面为图片
3. 使用流程
3.1 基本使用
- 打开一个 Markdown 笔记
- 在预览面板点击"发布平台"下拉框
- 选择"小红书"
- 界面自动切换到小红书预览模式
- 系统自动分页并显示第一页
3.2 调整样式
- 在第二行工具栏选择主题、字体
- 使用
+-按钮调整字号 - 预览区实时更新
3.3 浏览页面
- 使用分页导航的左右箭头切换页面
- 查看页码了解总页数
- 检查每一页的内容完整性
3.4 刷新预览
- 修改文档内容后
- 点击"刷新"按钮
- 系统重新渲染并分页
3.5 切图导出
- 浏览到需要导出的页面
- 点击"当前页切图"保存该页
- 或点击"全部页切图"批量保存所有页面
- 图片保存在配置的路径（默认：
/Users/gavin/note2mp/images/xhs）
3.6 发布到小红书
- 确认内容无误
- 点击"发布到小红书"按钮
- 系统自动上传内容和图片
4. 分页规则
系统会根据以下规则自动分页：
-
页面高度计算
- 页面高度 = 切图宽度 × (比例高 / 比例宽)
- 例如：1080px × (4/3) = 1440px
-
智能分页
- 普通段落：允许跨页（10% 溢出容差）
- 表格：不跨页，整体显示在一页
- 图片：不跨页，整体显示在一页
- 代码块：不跨页
- 公式：不跨页
-
分页导航
- 点击
←上一页 - 点击
→下一页 - 显示当前页码 / 总页数
- 点击
5. 切图操作
当前页切图
- 浏览到想要切图的页面
- 点击"⬇ 当前页切图"按钮
- 等待处理完成
- 查看保存路径
文件命名： {slug}_1.png（页码从 1 开始）
全部页切图
- 点击"⇓ 全部页切图"按钮
- 系统会依次处理每一页
- 显示进度提示
- 全部完成后提示
文件命名： {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 - 切图宽度:
1080px - 切图横竖比例:
3:4（小红书推荐）
技术细节
分页算法
-
测量高度
- 创建临时隐藏容器
- 按目标宽度渲染每个元素
- 测量实际高度
-
累计判断
- 逐个元素累加高度
- 判断是否超出页面高度
- 不可分割元素单独处理
-
页面包装
- 每页内容独立包装
- 应用统一样式
- 确保渲染一致
切图流程
-
临时调整宽度
pageElement.style.width = '1080px'; -
渲染为图片
await toPng(pageElement, { width: 1080, pixelRatio: 1, cacheBust: true }); -
保存文件
fs.writeFileSync(filepath, buffer); -
恢复样式
pageElement.style.width = originalWidth;
常见问题
Q: 为什么分页后内容看起来不连续？
A: 这是正常的。系统按页面高度自动分割内容，每页是独立的截图单元。如果需要更连续的效果，可以调整切图比例使页面更高。
Q: 表格被截断了？
A: 表格应该不会跨页。如果出现截断，可能是表格本身高度超过单页限制。建议：
- 拆分大表格
- 调整比例使页面更高
- 使用横向比例（如 4:3）
Q: 字体设置不生效？
A: 确保：
- 已选择具体字体（不是"系统默认"）
- 切换页面后重新预览
- 系统中已安装该字体
Q: 切图后图片模糊？
A: 检查：
- 切图宽度设置（建议 1080 或更高）
- 浏览器缩放比例（建议 100%）
- 原始内容清晰度
Q: 如何调整页面内边距？
A: 当前版本内边距固定为 40px。如需自定义，可修改 paginator.ts 中的 renderPage 函数：
padding: 40px; // 改为需要的值
最佳实践
📝 内容编写建议
-
段落长度
- 避免过长的段落
- 适当使用小标题分割
- 利于阅读和分页
-
图片使用
- 图片宽度不要超过 1000px
- 高度控制在 1200px 以内
- 避免超高图片影响分页
-
表格设计
- 表格高度控制在单页范围内
- 复杂表格考虑拆分
- 使用简洁的表格样式
🎨 样式调整建议
-
字号选择
- 正文：16px（默认）
- 引用/注释：14-15px
- 标题：18-20px
-
字体搭配
- 正文：宋体/黑体（清晰）
- 标题：黑体（醒目）
- 代码：系统默认（等宽）
-
主题选择
- 小红书风格：简约、清新主题
- 避免过于花哨的样式
- 保持视觉一致性
💡 切图技巧
-
批量处理
- 多篇笔记：使用"全部页切图"
- 检查预览：先看每一页效果
- 按需调整：修改后重新切图
-
文件管理
- 使用有意义的 slug
- 按主题组织目录
- 定期清理旧文件
-
质量保证
- 切图前检查预览
- 确认分页合理
- 验证文件命名
示例配置
小红书竖图（推荐）
宽度：1080px
比例：3:4
页面高度：1440px
小红书方图
宽度：1080px
比例：1:1
页面高度：1080px
高清竖图
宽度：1440px
比例：9:16
页面高度：2560px
提示:
- 首次使用建议先用短笔记测试分页效果
- 调整好配置后再处理长篇内容
- 保存好配置以便下次使用
已知限制:
- 移动端不支持（需要 Node.js fs API）
- 模板功能暂为占位（后续版本实现）
- 主题切换需要重新刷新预览