思源笔记丨导出多图发布小红书

0 背景

本人是一个发小红书狂魔，但是小红书发图最适合的图片宽高比例是 3：4，不能发太长的图，否则无法看清文字。

思源笔记目前（2024.01.14，版本 v2.12.2）导出图片只支持导出长图，暂时不支持导出自定义宽高比的多图，更不支持基于标题、分割线导出多图。

目前插件集市有大佬做了导出多图插件，我也一直在用，但是有切割文字、图片的问题。

还尝试了用 PS 来切割思源导出的多图，见思源笔记丨用 PS 切割导出的长图

经过探索，个人觉得导出多图的最佳体验是——导出为 pdf，然后用转换工具转成图片

这样有几个好处

1. 每张图片导出的大小一致
2. 导出 pdf 不会切割文字，也会尽可能不切割图片
3. 可以通过简单的几行 css，就能实现根据标题、分割线等根据块类型分页
4. 可以通过 html 块实现指定位置分页

1 用 CSS 进行分页设置

可以在思源笔记的 「设置-外观-代码片段」 ，根据需要添加下面的 css 片段

• 根据分割线分页

  #preview .protyle-wysiwyg .hr {
      page-break-before: always;
  }
  #preview .protyle-wysiwyg .hr > div {
      display: none;
  }
  ​

• 根据 h1 分页

  #preview .protyle-wysiwyg .h1:not(:first-child, :nth-child(2)) {
      /* h1标题前分页，但不选择文档中的第一个标题 */
      page-break-before: always;
  }
  #preview .protyle-wysiwyg .h1 + .h1 {
      /* 两个h1连着后面的h1不分页，有些人可能文档标题下第一个标题就是h1 */
      page-break-before: auto;
  }
  ​

• 根据 h2 分页

  #preview .protyle-wysiwyg .h2:not(:first-child) {
  	 /* h2标题前分页，但不选择文档中的第一个标题 */
      page-break-before: always;
  }
  #preview .protyle-wysiwyg .h1 + .h2 {
  	 /* 标题下紧跟着的h2不分页 */
      page-break-before: auto;
  }
  ​

<div>
<div style="page-break-after: always;"></div>
​