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

写在最后

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

书单配置工具 v2.0 & 公众号文章书单发布工具