书单配置工具 v2.0

我喜欢收藏&分享书单，所以我写了一个书单配置工具。把他们制作成榜单的形式，支持配置和导出，目前的配置内容都存储在 localstorage 中的，后续有时间再考虑升级成云端存储。

点击访问

上一个帖子

功能特性

• 支持创建删除复制榜单
• 支持填写书籍名称、作者、评分、图片
• 支持配置榜单底部二维码
• 支持导出榜单功能
• 支持导出为公众号文章格式 (@since v2.0)

从微信书单到公众号文章

微信读书书单（需要通过手机 app 获取链接）

• https://weread.qq.com/misc/booklist/341281594_831M3grZg

导入书单配置工具（补充缺失图片），导出为公众号文章格式

• https://mp.weixin.qq.com/s/oPhNz2-JBw-Vjsi91QKjqA

效果截图（长图）

功能迭代实现方案（不必读）

背景知识

首先，以免其他开发者遇到类似问题而抓狂，请仔细阅读下面的文章。 微信公众号文章之殇（之痛）：微信公众号图文的 HTML/CSS 支持概览

其次，公众号文章是支持富文本的但需要把所有的样式 Style 内联到标签中。

再次，比较重要的是需要把 div 标签替换成 section 标签。

fix tailwind 问题

如果项目中使用到了space-y-4 或 space-x-4 请用flex flex-col gap-4 或 flex flex-col gap-4代替。

原因解释： 由于使用 tailwind css ，这里的margin-top 原本如下，

.space-y-4>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(1rem * var(--tw-space-y-reverse)); margin-top: calc(1rem * (1 - var(--tw-space-y-reverse))); } 

经过内联处理后，

<section style="...margin-top: calc(1rem * calc(1 - 0));..."...></section> 

当在公众号发布或保存为草稿时，上面的margin-top 会被过滤掉。（我实验的结果，如果是一次 calc 是可以保留的，两次 calc 就会处理失败导致被过滤掉）

当然，改写成flex flex-col gap-4 后，就不存在margin-top的问题，模块之间用的是由父级通过gap-4控制的，而gap 属性刚好公众号文章是支持的。

fix position 相关的问题

公众号文章不支持定位 CSS 的写法，一时没有办法，对于这种情况我选择去掉相关元素。 比如角标是通过绝对定位的

 <!-- Ranking Badge --> <div class="ranking-num absolute -top-2 -left-2 w-8 h-8 flex items-center justify-center rounded-full text-white font-bold text-sm" :class="{ 'bg-yellow-500': index === 0, 'bg-gray-400': index === 1, 'bg-amber-700': index === 2, }" > {{ 角标 svg 或 序号 }} </div> 

给它加上ranking-num，然后在做 css 内联的时候设置

<style> .ranking-num { display: none; } </style> 

技术选型

juice

用法也很简单

 // 获取处理后的 HTML const outerHTML = tempContainer.innerHTML const inlinedHTML = juice(outerHTML, { // inlinePseudoElements: true, preserveImportant: true, }) // 获取纯文本内容 const plainText = tempContainer.textContent || '' // 移除临时容器 document.body.removeChild(tempContainer) // 复制到剪贴板 const clipboardItem = new ClipboardItem({ 'text/html': new Blob([inlinedHTML], { type: 'text/html' }), 'text/plain': new Blob([plainText], { type: 'text/plain' }), }) setTimeout(() => { navigator.clipboard.write([clipboardItem]).then(() => { toast({ title: '导出成功', description: '内容已复制到剪贴板，可粘贴到公众号编辑器中', }) }).catch((error) => { throw error }) }, 0) 

导出公众号文章格式，代码参考自一款非常流行的公众号 Markdown 编辑器 开源项目 md

写在最后

书单配置工具口号是： [精选好书 提升思维 开拓视野]