Vurepress 博客导流微信公众号

Clay_1925

已于 2023-04-27 19:05:33 修改

阅读量338

点赞数

文章标签：微信前端流量运营

于 2022-05-18 01:40:28 首次发布

本文链接：https://blog.csdn.net/rqh656418510/article/details/124834055

版权

本文首发于 Clay 的技术博客

前言

VuePress 博客建议安装 vuepress-plugin-readmore-popular 插件，将 TechGrow 的免费微信公众号导流工具整合到博客中，用户扫码关注微信公众号后可以解锁全站文章，让微信公众号的粉丝数躺着增长。

TechGrow 开放平台的官方文档
vuepress-plugin-readmore-popular 插件只支持 VuePress 1，暂时不支持 VuePress 2
若希望实现 VuePress 2 的公众号导流，建议使用 vuepress-plugin-readmore-popular-next 插件

特色功能

支持随机为博客添加导流功能
支持关闭某篇文章的导流功能
支持查询用户解锁文章的历史记录
支持自定义 CSS 样式，轻松适配不同风格的博客

注册博客

浏览器访问 TechGrow 的官网，注册并登录账号后，进入博客的后台管理页面。首先点击左侧的菜单 博客注册，然后点击 新增 按钮，添加自己博客的信息。博客注册成功后，记录下 博客 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 -D vuepress-plugin-readmore-popular

配置 VuePress

编辑 VuePress 的主配置文件（例如 .vuepress/config.js），新增插件的配置信息（请自行更改博客相关的信息），如下所示：

module.exports = {
  plugins: [
    ['vuepress-plugin-readmore-popular', {
      // 已申请的博客 ID
      blogId: '18762-1609305354821-257',
      // 已申请的微信公众号名称
      name: '全栈技术驿站',
      // 已申请的微信公众号回复关键词
      keyword: 'Tech',                    
      // 已申请的微信公众号二维码链接
      qrcode: 'https://www.techgrow.cn/img/wx_mp_qr.png',
      // 文章内容的选择器，若使用的不是官方默认主题，则需要根据第三方的主题来设置
      selector: 'div.theme-default-content',
      // 自定义的 JS 资源链接，可用于 CDN 加速
      libUrl: 'https://qiniu.techgrow.cn/readmore/dist/readmore.js',
      // 自定义的 CSS 资源链接，可用于适配不同风格的博客
      cssUrl: 'https://qiniu.techgrow.cn/readmore/dist/vuepress.css',
      // 文章排除添加导流工具的URL规则，支持使用路径、通配符、正则表达式的匹配规则
      excludes: { strExp: [], regExp: [] },
      // 是否反转URL排除规则的配置，即只有符合排除规则的文章才会添加导流工具
      reverse: false,
      // 每篇文章随机添加导流工具的概率，有效范围在 0.1 ~ 1 之间，1 则表示所有文章默认都自动添加导流工具
      random: 1
    }]
  ]
}

插件参数说明

参数	类型	必填	默认值	说明
blogId	String	是	无	-
name	String	是	无	-
keyword	String	是	无	-
qrcode	String	是	无	-
selector	String	否	div.theme-default-content	-
libUrl	String	否	https://qiniu.techgrow.cn/readmore/dist/readmore.js	-
cssUrl	String	否	https://qiniu.techgrow.cn/readmore/dist/vuepress.css	-
excludes	Json Object	否	{ strExp: [ ], regExp: [ ] }	-
reverse	Boolean	否	false	-
random	Number	否	1	-

验证插件效果

打开文章页面，若文章自动隐藏了部分内容，并且出现了 阅读全文 按钮，则说明导流插件正常运行，如下图所示：

取消阅读限制

若希望关闭部分文章的微信公众号导流功能，可以使用插件的 excludes 参数来实现。值得一提的是，excludes 的参数值是一个 JSON 对象，其中的 strExp 属性是路径和通配符规则的字符串数组，而 regExp 属性是正则表达式的字符串数组。

根据 URL 路径，关闭某篇文章的导流功能

module.exports = {
  plugins: [
    ['vuepress-plugin-readmore-popular', {
      // 排除 URL 为 `/fontend/webpack` 的文章
      excludes: { strExp: ['/fontend/webpack'] },
    }]
  ]
}

根据 URL 通配符，关闭某个目录下的所有文章的导流功能

module.exports = {
  plugins: [
    ['vuepress-plugin-readmore-popular', {
      // 排除 URL 以 `/fontend` 开头的文章
      // 排除 URL 为 `/backend/python/io` 的文章
      excludes: { strExp: ['/fontend/*', '/backend/*/io'] },
    }]
  ]
}

根据 URL 正则表达式，关闭符合规则的所有文章的导流功能

module.exports = {
  plugins: [
    ['vuepress-plugin-readmore-popular', {
      // 排除 URL 不以 `/fontend` 开头的文章
      excludes: { regExp: ['^(?!\/fontend).*'] },
    }]
  ]
}

混合使用

module.exports = {
  plugins: [
    ['vuepress-plugin-readmore-popular', {
      excludes: { strExp: ['/webpack', '/fontend/*', '/backend/*/io'], regExp: ['^(?!\/php).*'] },
    }]
  ]
}

特别说明：
- 文章 URL 优先匹配 strExp 规则，然后再匹配 regExp 规则
- 文章 URL 一旦满足 strExp 规则，则不会再匹配 regExp 规则
- 如果希望符合 URL 排除规则的文章才添加导流工具，则可以使用 reverse : true 配置参数实现