自制微信公众号文章排版工具

在前面的文章一键同步远程工作信息到TG，豆瓣小组，知识星球中，狗哥我预告过要更新我的工具，自动生成远程工作者微信文章的排版，如今已经达成目标了。

先看视频

只需要选择要分享的工作机会，就会自动生成文章内容，以及网站页面对应的二维码，兼容微信公众号的默认样式，直接复制粘贴就可以直接发布

相比我以前的流程，效率直接满格。

复制排版后的工作信息
切换到公众号编辑器
插入一个单元格（类似卡片的效果）并粘贴信息
加粗标题
为链接加上样式
切换到网站复制二维码图片
切换回公众号编辑器粘贴图片

（这仅仅是排版一条工作信息的操作）

现在效率提升了，文章中能够分享的工作信息数量自然也就增加了，一言以蔽之，生产力提高了。

排版的原理

通过浏览器的开发人员工具审查元素，就可以看到微信公众号编辑器时如何组织 html 节点的，那么只需要再排版工具中模拟这样的结构，即可实现相同的排版效果。

公众号最基本的排版元素是 section，它的结构是这样的。

<section><span leaf>分享最近的远程工作机会。</span></section>

这是不带任何样式的一个行。如果需要为文字添加颜色，它会在 span[leaf] 下再插入 span，并使用 style 属性来设置字体样式。

<section>
  <span leaf>
    <span textstyle style="color: rgb(0, 122, 170);">
    招聘信息均收集自网络，是否靠谱请自行判断，如有投递意愿，请访问原文联系。
    </span>
  </span>
</section>

当然，你也可以设置其他样式，比如 font-weight: bold 之类的。

对于单元格内的多行元素，则是使用 p 替代 section 标签。

<table>
  <tbody>
    <tr>
      <td data-colwidth="576">
        <p><span leaf><span textstyle style="font-weight: bold;">${job.title}</span></span></p>
        <p><span leaf><${JobUrl} url=${pageUrl} /></span></p>
        <p><span leaf></span></p>
        <p><span leaf>来源: ${job.source}</span></p>
        <p><span leaf>原文: <${JobUrl} url=${job.source_url} /></span></p>
        <p><span leaf>摘要: ${job.note}</span></p>
      </td>
    </tr>
  </tbody>
</table>

对于链接，则需要指定一个特殊的 class

<a href=${url} target="_blank" class="normal_text_link" style="color: rgb(0, 122, 170);">
  <span textstyle style="color: rgb(0, 122, 170); text-decoration: underline;">${url}</span>
</a>

这样链接会有一个外链的图标。

不过，微信是不允许自己域名以外的网址外链的，对于外部链接，即使你在粘贴时能看到链接生效，保存后依然不会起到作用。

本来我以为这样直接粘贴到微信后，自然会有微信编辑器的样式，但是发现实际上是不行的，即使结构一致，样式也不会继承。

还需要将这些元素的样式写入文章排版工具的样式表，这些样式，可以从通过审查元素拿到，很容易。

.article-preview section {
  margin-top: 0px;
  margin-bottom: 24px;
}
.article-preview table {
  border-collapse: collapse;
  table-layout: fixed;
  ...
}
...
.article-preview img {
  height: auto !important;
  max-width: 100%;
}

当然，如果你想创作自己的排版风格，不适用微信默认排版，那么完全可以自己设计样式，不需要去复制微信公众号默认的样式。

排版工具的实现

至于我的排版工具，其实很简单，借助 AI 很容易就搞定了。

作为一个后端开发，不是很喜欢前端的构建工具，所以在前端框架上，我选择的是一个类似 react 的 no build 工具 – preact.

https://preactjs.com/guide/v10/getting-started/

<script type="module">
  import { h, render } from 'https://esm.sh/preact';
  import htm from 'https://esm.sh/htm';
  // Initialize htm with Preact
  const html = htm.bind(h);
  function App (props) {
    return html`<h1>Hello ${props.name}!</h1>`;
  }
  render(html`<${App} name="World" />`, document.body);
</script>

对于简单的场景，它完全可以替代 react, 并且也支持 component, 写法也和 react 差异不大。

const JobUrl = ({ url }) => {
  return html`
    <a href=${url} target="_blank" class="normal_text_link" style="color: rgb(0, 122, 170);">
      <span textstyle style="color: rgb(0, 122, 170); text-decoration: underline;">${url}</span>
    </a>
  `
}

const JobCard = ({ job }) => {
  const pageUrl = `https://remote-info.cn/jobs/${job.id}`;
  return html`
    <table>
      <tbody>
        <tr>
          <td data-colwidth="576">
            <p><span leaf><span textstyle style="font-weight: bold;">${job.title}</span></span></p>
            <p><span leaf><${JobUrl} url=${pageUrl} /></span></p>
            <p><span leaf></span></p>
            <p><span leaf>来源: ${job.source}</span></p>
            <p><span leaf>原文: <${JobUrl} url=${job.source_url} /></span></p>
            <p><span leaf>摘要: ${job.note}</span></p>
          </td>
        </tr>
      </tbody>
    </table>
    <section><span leaf><${QRCode} title=${job.title} url=${pageUrl} note=${job.note} /></span></section>
    <section><span leaf></span></section>
  `;
}

工作机会列表，则是采集自我的网站远程工作者。

至于生成二维码卡片，我在文章自动化：借助 AI 为 Pixilart 网站创建二维码分享卡片中有详细介绍过，这里不再赘述。

总结

AI 让开发变得容易了很多，如果你有掌握一些开发的基础知识，那么遇到一些电脑上的重复工作，其实可以尝试着自己去创造工具，而不是去寻找工具。

文章同步发表于微信公众号老狗拾光，欢迎关注。

微信公众号老狗拾光