npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hexo-webpushr-notification

v0.2.5

Published

Hexo Push Posts Update Notification Automatically With Webpushr

Downloads

18

Readme

hexo-webpushr-notification

本仓库/插件 内容根据 原仓库 进行修改,感谢原作者 @glazec

中文文档 | English

注意

若您从旧版本升级至最新版本,请注意查看配置项变更及简化

  1. 主要是 action_buttons 配置的自定义程度更高,当然您可以继续使用原配置方式
  2. 当文章头设置 webpushr: false 时,可关闭本篇文章推送,此参数主要防止久远文章更新推送
  3. 目前的代码未对字符串长度做限制及,具体可前往官方文档查看,但我们一般不会超过这些限制,主要是注意 文章描述/链接 不要超过 255 字符串,其余参数 文章标题,按钮标题/链接等 不要超过 100 字符串

安装

node-current-hexo node-current

为方便后续更新,推荐使用 NPM 以插件形式安装

npm version npm (beta) npm download

正式版

npm i hexo-webpushr-notification

测试版

npm i hexo-webpushr-notification@beta

当还未经测试时,会在 GitHub 优先提交及发布 Beta 版本,您 Fork 修改后也可尝试此种方式测试

GitHub package.json version GitHub release (latest by date including pre-releases) GitHub last commit

npm i github:Rock-Candy-Tea/hexo-webpushr-notification

使用

如果你想了解推送效果,或者如何获取 key 可前往博客查看文档,否则建议您直接优先选择前往 GitHubNPM 查看配置,因为博客内容不会及时更新

配置

在 hexo 配置文件 _config.yml 粘贴如下内容,并按需配置

webpushr:
  enable: true

  webpushrKey: "webpushrKey"
  webpushrAuthToken: "webpushrAuthToken"
  # 出于安全考虑,建议将上述两个重要参数添加至系统全局环境变量,并删除或注释掉此处配置
  # 否则可在网页端向访问者或订阅用户发送推送 https://www.webpushr.com/api-playground
  # 例如GitHub Actions环境变量配置,参数名不变,密钥名自定义,可参考如下
  # env:
  #     webpushrKey: ${{ secrets.WEBPUSHR_KEY }}
  #     webpushrAuthToken: ${{ secrets.WEBPUSHR_AUTH_TOKEN }}
  # 如果您的仓库私有,则无需担心此问题

  trackingCode: "trackingCode"
  icon: "https://.../192.png" # 必须为 HTTPS 以及 192*192 png 格式图片
  # auto_hide: false # 默认为 1,代表true,即自动隐藏
  # sort: "date" # 默认为updated,即只要最新文章更改了更新时间即推送新文章,改为date即文章第一次发布时间
  # delay: "0" # 延时推送,考虑到CDN缓存更新,默认定时为在 hexo d 10分钟后推送,单位为分钟(最短延时为5分钟,设置 0 则会立即推送)
  # expire: "15d" # 推送过期时长,默认值为7天,格式如下:'5m'代表5分钟,'5h'代表5小时, '5d'代表5天.
  # image: # 默认为文章封面,Front-matter 属性为'cover'(butterfly主题友好选项),如果您没有定义默认封面或此属性,请在这里设置默认image
  action_buttons: # 如果你需要额外自定义按钮 可按照如下格式:
    - title: 阅读全文 # 当 title 未配置时 默认值为 “前往查看”
      # url:  # 当 url 未配置时 默认值为 最新文章链接
    - title: 订阅页面
      url: https://blog.ccknbc.cc/sub/
    # 当 action_buttons 未定义时也默认保留了一个“前往查看”按钮,除非设置为 false
    # action_buttons: false # 当设为 false 则不显示额外的按钮,因为隐藏按钮即为当前文章链接
    # 不推荐配置三个以上按钮,会自动截断前三个

  # 以下配置为按订阅主题推送给不同订阅用户,请按照数组形式,一一对应,具体位置请看使用文档
  categories: [工作, 博客, 工具, 生活, 音乐, 学习]
  segment: ["484223", "484224", "484225", "484226", "484227", "484229"]
  endpoint: segment # 可选配置 all / segment / sid
  # 默认为 segment,即根据不同主题推送细分,同时配置上述选项
  # 例如 all,即推送至所有用户;针对本地测试,建议只推送给单个用户即自己,同时设置下方的 sid 值
  # 您也可以将segment 设置为 all-users 对应的ID,同样也可以实现推送至所有用户
  sid: "119810055" # 单个用户ID 可在控制台查看 https://app.webpushr.com/subscribers

  # 此外,在文章 Front-Matter 处
  # 可覆盖 auto_hide 和 expire 配置,针对需要特别提醒文章可以设置不自动隐藏及过期时间延长等操作
  # 以及可指定schedule参数(例如:schedule: 2022-10-01 00:00:00),定时推送
  # 当文章头设置 webpushr: false 时,可关闭本篇文章推送,此参数主要防止久远文章更改更新时间后自动推送

额外配置

因官方 sw 脚本注册后,我们无法注册自己的 sw 脚本,但官方提供了配置,方便我们使用 sw 的缓存,拦截请求等功能

需要在配置项中额外添加 sw_self: true 配置,开启自行注册 sw(默认用户不用管或者设为 false

webpushr:
  sw_self: true

另外,你还需要在你的脚本文件(例如 sw.js)中引入

importScripts("https://cdn.webpushr.com/sw-server.min.js");

完成这些你就可以自行注册你的 sw 脚本了

如果你需要了解如何编写或者注册 service worker 脚本,可以参考以下文章或项目

hexo-swpp | Service Worker | Client Worker | Workbox

自行修改

你也可以自定义修改 webpushr.js 文件后,再安装相关需要依赖,然后将文件放到 Hexo 的 scripts 目录下即可正常运行

对于 0.2.0 及以上版本,您只需要在 Hexo 所在目录安装 axios 即可,这样测试相较于安装 GitHub 更方便(以及欢迎 PR

npm i axios