「转载」自动推送新博客的泛用实现方案

👉️ 原文 URL: https://www.inevitable.tech/posts/a1b574bb/

✍️ 作者： 琉璃

📝Description:

这是一个适合大多数人的解决方案。它可以帮助你自动推送新博客给你的读者。有效提高网站的访问量。

这是一个适合大多数人的解决方案。它可以帮助你自动推送新博客给你的读者。有效提高网站的访问量。

Intro

前情回顾

在 Hexo 使用 Web Push Notification 浏览器通知推送 中，我们讲到了 Web push notification 的好处，以及如何配置 Webpushr。 在 Auto web push notification 中，我们讨论了自动推送通知的特殊解决方案。这个方案对于工具链有很多的局限性。网站源码必须在 Github 上，网站需要托管在 Netilfy 上，必须使用 hexo-abbrlink 这个插件。

在本篇文章中，我将给出一个更加泛用的解决方案。这次不再有那么的前提条件。唯一的前提条件是你需要注册 Webpushr, 将你的网站加入到 Webpushr 中。你并不需要将 Webpushr 的 SDK 加入你的网站。这个插件会为你搞定一切。

如果你想使用其他的通知推送服务，请提交 Issue 或者 PR。我们可以为其增加兼容性改进。

原理

想法

这一次我们只需要安装 hexo-web-push-notification 就可以解决所有问题。甚至 SDK 的集成也自动化了。

自动集成 SDK 很简单。将 SDK 代码直接插入渲染好的 HTML 中即可。

通知部分的想法与 Auto web push notification 一样。我们生成 newPost.json。newPost.json 包含了最新文章的信息。接着我们对比本地 newPost.json 与在线网站上的 newPost.json。如果文章的 ID 有变化，那么我们就对读者进行通知推送。

实现

除开简单的 SDK 自动集成，插件主要分为两部分。第一部分生成 newPost.json。第二部分处理通知推送。

使用 Hexo Event，我们让第一部分在 hexo generate 之后执行。第二部分在 hexo deploy 之前执行。这个时候网站还没有进行更新。

第一部分

第一部分所做的事情很简单。找到最新发布的文章，根据其信息生成 newPost.json 到本地 public/newPost.json。以下是 newPost.json 的范例：

{
  "title": "Auto web push notification",
  "id": "posts/afd56cf2/",
  "date_published": "02/24/2020",
  "summary": " 如何自动通知读者有更新了？即只要正常更新博客，读者便可以在第一时间收到关于新文章的通知。",
  "url": "https://www.inevitable.tech/posts/afd56cf2/",
  "tags": ["hexo", "push notifications", " 自动化 ", "CI"],
  "categories": [" 开发 "]
}

这一次，id 直接使用文章的路径。不管你怎么魔改 hexo，文章的路径永远具有唯一性。因此这次的解决方案适用范围更加广泛。

相比上一次的直接从源文件中读取数据进行处理。这一次的数据来自 Hexo API，加强了适用性。不管你的源文件长成什么样，只要 Hexo 能读懂，这个插件就能正常工作。

第二部分

第二部分将本地 newPost.json 于网站上的 newPost.json 进行比对。如果文章 ID 不一样，那么便是作者进行了更新（没考虑过作者删除最新文章的可能性）。这个时候便触发通知推送。推送内容包含文章标题，链接以及节选。节选便是 Summary 部分。

安装和使用

想要自动推送通知，你得先得处理好 Webpushr。你需要注册一个账号，加入你的网站，配置好 Safari 推送的证书，自定义请求通知弹窗的样式。具体可以参考 Hexo 使用 Web Push Notification 浏览器通知推送中，。

接下来的事情全交给 hexo-web-push-notification。

安装这个插件，只需要执行 npm i hexo-web-push-notification --save。

使用这个插件前记得添加以下配置到位于 hexo 根目录的 _config.yml。

webPushNotification:
  webpushrKey: "your webpushr rest api key"
  webpushrAuthToken: "your webpushr authorize token"
  trackingCode: "AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88"

trackingCode 可能有点难找。打开 webpushr，进入到配置网站的主页。打开 Setup>TrackingCode。tracking code 长这个样子：

<!-- start webpushr tracking code -->
<script>(function(w,d, s, id) {w.webpushr=w.webpushr||function(){(w.webpushr.q=w.webpushr.q||[]).push(arguments)};var js, fjs = d.getElementsByTagName(s)[0];js = d.createElement(s); js.id = id;js.src = "https://cdn.webpushr.com/app.min.js";
fjs.parentNode.appendChild(js);}(window,document, 'script', 'webpushr-jssdk'));
webpushr('init','AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88');</script>
<!-- end webpushr tracking code -->

最后第二行的 AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88 便是你的 trackingCode。

更多安装指南请参考 README.md。

后记

这是我第一次发行 NPM 包。我本来使用 Github 的包管理服务。但过程实在是有些麻烦。众所周知，发行包的第一步是 npm adduser。如果是发行到 NPM 上，直接输入用户名和密码就行。但是如果是发行到 Github 上，密码得使用 Personal Access Token。生成 Personal Access Token 有点小麻烦。

包的名称似乎必须得是 Scoped。也就是包的名称必须得是作者名字开头。

成功发行到 Github 后，我遇到了不能下载的问题。使用 npm i 显示找不到我的包。可能运行 npm i 的时候，npm 在 NPM 上面找包，而不是 Github 上面找包。

鉴于以上并不是特别良好的体验，我想要删除这个包，将其在 NPM 上发行。看了一圈文档和别人的答案，删除包的唯一方法就是删除这个仓库。

最后，还是 NPM 香。

相关文章

• Hexo 使用 Web Push Notification 浏览器通知推送