乐趣区

关于后端:基于TechGrow实现Hexo引流微信公众号

jiezi

首发博客地址

https://blog.zysicyj.top/

# 前言

Hexo 博客倡议装置 hexo-readmore (opens new window) 插件，将 TechGrow (opens new window) 的收费微信公众号引流工具整合到博客中，用户扫码关注微信公众号后能够解锁全站文章，让微信公众号的粉丝数躺着增长。

# 特色性能

  • 兼容支流的 Hexo 主题
  • 反对随机为博客增加引流性能
  • 反对敞开某篇文章的引流性能
  • 反对查问用户解锁文章的历史记录
  • 反对自定义或者动静计算文章内容的预览高度
  • 反对自定义 CSS 款式，轻松适配不同格调的博客
  • 反对凋谢 API，灵便接入第三方私有化部署的应用服务

# 注册博客

浏览器拜访 TechGrow (opens new window) 的官网，注册并登录账号后，进入博客的后盾治理页面。首先点击左侧的菜单 博客注册 ，而后点击 新增 按钮，增加本人博客的信息。博客注册胜利后，记录下 博客 ID，前面的步骤会应用到

# 设置公众号

在微信公众号的后盾治理页面，菜单栏里抉择 主动回复 – 关键词回复 ，启用 主动回复 ，而后点击 增加回复 按钮

填写 规定名称 、 关键词（当初你在 TechGrow 中设置的）、回复内容 抉择 文字 ，而后 回复文字 的内容填写获取博客解锁验证码的链接，如下所示（请自行更改 xxxxx-xxxxxxxxx-xxx 为你申请到的博客 ID）

<a href="https://open.techgrow.cn/#/readmore/captcha/generate?blogId=xxxxx-xxxxxxxxx-xxx"> 点击链接，获取博客解锁验证码 </a>

此时，当读者关注你的微信公众号，并输出关键词后（比方我设置的关键词就是 tech），那么读者就会主动接管到获取博客解锁验证码的链接

# 装置插件

  • 运行 npm install 命令装置插件
npm install hexo-readmore --save

# 配置 Hexo

编辑 Hexo 本身的 _config.yml 配置文件，新增插件的配置信息（请自行更改博客相干的信息），如下所示：

readmore:
  # 是否启用
  enable: true
  # 已申请的博客 ID
  blogId: '18762-1609305354821-257'
  # 已申请的微信公众号名称
  name: '全栈技术驿站'
  # 已申请的微信公众号回复关键词
  keyword: 'tech'
  # 已申请的微信公众号二维码图片
  qrcode: 'https://www.techgrow.cn/img/wx_mp_qr.png'
  # 自定义的 JS 资源链接，可用于 CDN 减速
  libUrl: 'https://qiniu.techgrow.cn/readmore/dist/readmore.js'
  # 自定义的 CSS 资源链接，可用于适配不同格调的博客
  cssUrl: 'https://qiniu.techgrow.cn/readmore/dist/hexo.css'
  # 命令行终端是否输入日志信息
  debug: true
  # 文章内容的预览高度（例如 300）height: 'auto'
  # 文章解锁后凭证的无效天数
  expires: 365
  # 定时校验凭证有效性的工夫距离（秒）interval: 60
  # 是否增加微信公众号引流工具到挪动端页面
  allowMobile: false
  # 获取文章主体内容的 JS 选择器，在博客启用了 Pjax 的状况下才须要依据不同的主题进行配置
  pjaxSelector: ''# Pjax 反对重载的 Css 类名（例如'pjax'），在博客启用了 Pjax 的状况下才须要依据不同的主题进行配置
  pjaxCssClass: ''
  # 每篇文章随机增加微信公众号引流工具的概率，无效范畴在 0.1 ~ 1 之间，1 则示意所有文章默认都主动增加引流工具
  random: 1

或者关上 TechGrow 的博客后盾治理页面 (opens new window)，点击博客列表中右侧的 应用 链接，将窗口里的 YAML 配置内容复制到 Hexo 本身的 _config.yml 配置文件即可。

# 参数阐明

参数 类型 必填 默认值 阐明
enable Boolean 是 false –
blogId String 是 –
name String 是 –
keyword String 是 –
qrcode String 是 –
libUrl String 否 https://qiniu.techgrow.cn/readmore/dist/readmore.js –
cssUrl String 否 https://qiniu.techgrow.cn/readmore/dist/hexo.css –
debug Boolean 否 true –
height String / Number 否 auto –
expires Number 否 365 –
interval Number 否 60 –
allowMobile Boolean 否 false –
pjaxSelector String 否 –
pjaxCssClass String 否 –
random Number 否 1 –
excludes Array 否 –

# 构建 Hexo

  • 运行 hexo clean 命令清理本地博客
  • 运行 hexo generate 命令构建本地博客
  • 运行 hexo server 命令启动本地博客服务

# 验证插件成果

关上文章页面，若文章自动隐藏了局部内容，并且呈现了 浏览全文 按钮，则阐明引流插件失常运行，如下图所示：

点击 浏览全文 按钮，会弹出微信公众号的二维码窗口，如下图所示：

# 勾销浏览限度

若心愿敞开某篇文章的微信公众号导流性能，能够在文章的头模板中应用 readmore: false 配置属性，如下所示：

---
title:  Hexo 版本升级教程
tags: [Hexo]
readmore: false
keywords: [Hexo, 版本升级]
date: 2022-01-12 22:25:49
updated: 2022-01-12 22:25:49
---

若心愿敞开局部文章的微信公众号引流性能，能够应用插件的 excludes 参数来实现，反对应用门路、通配符的匹配规定。

  • 依据 URL 门路，敞开某篇文章的引流性能
# 排除 URL 为 `/notes/637e7b8f.html` 的文章
readmore:
  ....
  excludes:
    - '/notes/637e7b8f.html'
  • 依据 URL 通配符，敞开某个目录下所有文章的引流性能
# 排除 URL 以 `/fontend` 结尾的文章
# 排除 URL 为 `/backend/python/io` 的文章
readmore:
  ....
  excludes:
    - '/fontend/*'
    - '/backend/*/io'

# Pjax 的反对

如果博客启用了 Pjax，那么 Hexo 引流插件须要应用 pjaxCssClass 参数指定 Pjax 反对重载的 Css 类名（例如 pjax），同时须要应用 pjaxSelector 参数指定获取文章主体内容的 JS 选择器。否则在站点内（如首页、标签页、分类页、归档页等）通过链接拜访文章页面时，引流工具不会失效，除非是手动刷新一次页面。值得一提的是，两者都须要依据不同的 Hexo 主题来配置，其中不同主题的配置示例如下：

主题 pjaxCssClass 配置 pjaxSelector 配置 阐明
NexT (opens new window) pjaxCssClass: 'pjax' pjaxSelector: 'div.main-inner'
Butterfly (opens new window) pjaxCssClass: 'js-pjax' pjaxSelector: 'main.layout'

配置提醒

值得一提的是，pjaxCssClass 参数的作用是让 Pjax 重载引流工具的代码段，而 pjaxSelector 参数的作用是通过 JS 选择器获取文章主体内容。当配置了 pjaxSelector 和 pjaxCssClass 参数之后，Hexo 引流插件会往所有渲染后的 HTML 页面主动增加引流代码段，包含 page 和 post 的页面类型。如果两者都不配置，则 Hexo 引流插件默认只会往渲染后的 post 页面增加引流代码段。

特地留神

因为 Pjax 十分依赖页面布局的一致性，因而请确保通过 pjaxSelector 参数指定的 JS 选择器在所有页面（包含 page 和 post）都可能获取到惟一的 HTML 标签元素，否则会导致局部页面的 Pjax 或者引流性能不会失效。如果无奈满足这一点，则须要手动更改 Hexo 主题的模板代码，使 JS 选择器在所有页面都可能获取到惟一的 HTML 标签元素。Hexo 主题模板代码的批改能够参考 NexT (opens new window)，而后将 pjaxSelector 设置为 div.post-container。

# 自定义款式

插件默认应用了定义在 hexo.css (opens new window) 的 CSS 款式，你能够应用以下两种形式自定义本人的款式：

  • 第一种形式：更改博客主题的 CSS 源码文件，将自定义的那局部 CSS 款式增加到外面
  • 第二种形式：依据 hexo.css (opens new window) 创立本人的 CSS 文件（残缺的），并将其寄存在本人的博客里，同时通过插件的 cssUrl 配置参数来指定其拜访的 URL 门路

提醒：为了不便日后保护，强烈建议应用第二种形式来增加自定义款式

# 凋谢 API

若不心愿依赖 TechGrow 官网提供的零碎服务，能够抉择应用凋谢 API 的形式，让引流插件间接应用私有化部署的后端应用服务，具体介绍请看这里。

# 已兼容的主题

主题 GitHub 仓库
NexT https://github.com/next-theme/hexo-theme-next (opens new window)
Yilia https://github.com/litten/hexo-theme-yilia (opens new window)
Icarus https://github.com/ppoffice/hexo-theme-icarus (opens new window)
Matery https://github.com/blinkfox/hexo-theme-matery (opens new window)
Fluid https://github.com/fluid-dev/hexo-theme-fluid (opens new window)
Stun https://github.com/liuyib/hexo-theme-stun (opens new window)
Butterfly https://github.com/jerryc127/hexo-theme-butterfly (opens new window)

# 常见问题

问题一

Hexo 装置插件后，浏览器的控制台输入正告或者错误信息，且引流工具无奈失效

浏览器拜访 Hexo 博客后，按下 F12 快捷键调出调试工具，而后切换到 控制台，最初将正告或者错误信息截图，并发送到 官网微信群 (opens new window) 或者 656418510@qq.com 邮箱，倡议留言备注 Hexo 与 Hexo 主题的版本号。

问题二

Hexo 装置插件后，挪动端的引流工具无奈失效，而 PC 端却失效

思考到用户体验的问题，在挪动端默认是敞开引流性能的。若心愿在挪动端启用引流性能，能够通过 Hexo 引流插件的 allowMobile: true 配置参数来实现。

本文由 mdnice 多平台公布

退出移动版