书单配置工具 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

写在最后

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