Loading...
墨滴

前端develop

2021/05/18  阅读:44  主题:默认主题

如何用 OpenWrite 给 VuePress 配置博客导流公众号插件 - 公众号获取验证码阅读全文

经常在网络上浏览文章的小伙伴可能会遇到一些这样的文章,当我们看的正起劲的时候,剩余的内容都被隐藏了,需要到指定公众号回复关键词解锁。

这两天我也给我的博客加上了,因为踩了一些坑,所以记录一下,希望能帮助到更多人。接下来一起来看看是如何配置的吧。

OpenWrite

OpenWrite 是一个群发软件、博客导流公众号-阅读全文工具、媒体发布平台、博客群发平台、软文推广平台、软文推广发布、博客发布官网引流科技小工具、微信公众号Markdown编辑器、多平台免费图床配置、Markdown 编辑器的免费简洁流畅、文章一键群发等的免费自媒体运营工具助手。

这里我们借助 OpenWrite 提供的 博客导流公众号

填好如下表单,即可生成生成你的 blogId

返回 博客列表 查看刚刚生成的 blogId。接下里既可以开始进行配置。

公众号配置

登录公众号后台 配置关键词自动回复即可

自动回复内容如下

<a href="https://readmore.openwrite.cn/code/generate?blogId=yourBlogId">点击该链接,获取博客解锁验证码</a>

VuePress 配置

OpenWrite 的教程描述如下

  1. 添加 https://readmore.openwrite.cn/js/readmore.js

这个还比较好处理,在 docs/.vuepress/config.jshead 添加多一条数据即可

// docs/.vuepress/config.js
head: [
  ...,
  ['script', { charset'utf-8'src'https://readmore.openwrite.cn/js/readmore.js' }]
]
  1. 添加脚本

主要是在这一步踩了一些坑。希望看完我的解决方法后能够帮助到你。

  • init 方法中的 id

此 id 必须为容器的 id,而 VuePress 的内容容器并没有 id 的属性。那么只能通过 js 添加 id,代码如下

const container = document.querySelector('.theme-reco-content.content__default');
container.setAttribute('id''container');
  • 加载 js

一开始我也在 docs/.vuepress/config.jshead 中导入这么一个 js,结果报错了,提示找不到容器。

因为在 head 中的 js 会在页面内容生成之前就执行了,为了解决这个问题,我加上了 window.onload 事件,然后又报了另外一个错: btw is not defined,经过检查发现 readmore.js 直接使用全局的 btw 对象。

于是我将 btw 添加到 window 上,这次再看效果,貌似可以了。

window.onload = () => {
  const container = document.querySelector('.theme-reco-content.content__default');
  container.setAttribute('id''container');
  window.btw = new BTWPlugin();
  window.btw.init({
    id'container',
    blogId'xxx',
    name'前端develop',
    qrcode'xxx',
    keyword'验证码',
  });
}

经过测试,发现只有第一次进入页面时有效,因为 VuePress 也是一个单页应用,onload 事件只会触发一次,所以这个方法还是行不通。

最终方案

最后还是用 Vue 全局的 Mixin ,代码如下:

// docs/.vuepress/enhanceApp.js
// 使用异步函数也是可以的
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer, // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  Vue.mixin({
    // 混合注入,加载全局文件
    mounted() {
      const container = document.querySelector('.theme-reco-content.content__default');
      if (!container) return;
      container.setAttribute('id''container');
      window.btw = new BTWPlugin();
      window.btw.init({
        id'container',
        blogId'xxx',
        name'前端develop',
        qrcode'xxx',
        keyword'验证码',
      });
    }
  });
};

OpenWrite 工具的优缺点

先说下缺点

  1. OpenWrite 隐藏文章内容是通过 CSS 样式实现的,那么稍微懂点前端的同学,就可以直接改 CSS 查看全文。主要样式如下:
positionrelative;
height: 350px;
overflowhidden;
  1. 公众号关键词回复的内容为 https://readmore.openwrite.cn/code/generate?blogId=yourBlogId 如果用户知道 blogId 那么可以直接打开该链接获取验证码。

  2. 目前已有一些浏览器插件可以将关闭 OpenWrite 的隐藏功能。

优点就是免服务器免开发,这对于我来说已经足矣。

以上就是本文的全部内容,希望能帮助到你,如有疑问,欢迎评论区留言讨论或者可以到我的公众号获取微信联系我。

前端develop

2021/05/18  阅读:44  主题:默认主题

作者介绍

前端develop

公众号【前端develop】