0 背景
本人是一个发小红书狂魔,但是小红书发图最适合的图片宽高比例是 3:4,不能发太长的图,否则无法看清文字。
思源笔记目前(2024.01.14,版本 v2.12.2)导出图片只支持导出长图,暂时不支持导出自定义宽高比的多图,更不支持基于标题、分割线导出多图。
目前插件集市有大佬做了导出多图插件,我也一直在用,但是有切割文字、图片的问题。
还尝试了用 PS 来切割思源导出的多图,见思源笔记丨用 PS 切割导出的长图
经过探索,个人觉得导出多图的最佳体验是——导出为 pdf,然后用转换工具转成图片
这样有几个好处
- 每张图片导出的大小一致
- 导出 pdf 不会切割文字,也会尽可能不切割图片
- 可以通过简单的几行 css,就能实现根据标题、分割线等根据块类型分页
- 可以通过 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; }
除了 CSS 可以指定特定元素分页外,还可以通过添加 html 块来分页
<div>
<div style="page-break-after: always;"></div>
可以将上面的 html 块保存为模板,直接插入到特定位置
2 导出 pdf
导出页面大小设置为 A4,A4 尺寸的宽高比是 $1:\sqrt{2}$,它的大小是 210mm×297 mm。虽然不是 3:4,但是差别不大,在小红书上依然有很不错的浏览体验
页面边距设置为最小,如果是默认,发布到小红书,两边会太宽。
3 将导出的 pdf 转换为图片
我现在主要使用 Adobe Acrbobat 将 pdf 转换为图片,但是需要注意把 DPI 调的比较高(236.22 像素/厘米,大概 600dpi),否则导出的图片文字锯齿感非常严重。
我了解的还有一种方式是使用 utool 的 pdf 转换器插件,转换效果不错,图片 dpi 为 200。
⚠ 但是这个插件目前有一些问题(截止 2024.01.14)
- pdf 转换为图片,图片的名称都是 id 并不是 pdf 名称
- 图片的编号是 1,2,3,...,10,11,12。windows 对这种编号排序兼容的很好,但是其他设备可能就会排序成 1,10,11,12,...
如果大家有更好的 pdf 转图片方法,欢迎在评论区留言
4 导出多图预览
本篇笔记的小红书链接:思源笔记丨导出多图发布小红书 (xiaohongshu.com)
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于