常常在网络上浏览文章的小伙伴可能会遇到一些这样的文章，当咱们看的正起劲的时候，残余的内容都被暗藏了，须要到指定公众号回复关键词解锁。
这两天我也给我的博客加上了，因为踩了一些坑，所以记录一下，心愿能帮忙到更多人。接下来一起来看看是如何配置的吧。
OpenWrite
OpenWrite 是一个群发软件、博客导流公众号-浏览全文工具、媒体公布平台、博客群发平台、软文推广平台、软文推广公布、博客公布官网引流科技小工具、微信公众号Markdown编辑器、多平台收费图床配置、Markdown 编辑器的收费简洁晦涩、文章一键群发等的收费自媒体经营工具助手。
这里咱们借助 OpenWrite 提供的 博客导流公众号
填好如下表单，即可生成生成你的 blogId
返回 博客列表 查看刚刚生成的 blogId。接下里既能够开始进行配置。
公众号配置
登录公众号后盾 配置关键词主动回复即可
主动回复内容如下
<a href="https://readmore.openwrite.cn/code/generate?blogId=yourBlogId">点击该链接，获取博客解锁验证码</a>VuePress 配置
OpenWrite 的教程形容如下
- 增加 https://readmore.openwrite.cn...
这个还比拟好解决，在 docs/.vuepress/config.js 的 head 增加多一条数据即可
// docs/.vuepress/config.jshead: [ ..., ['script', { charset: 'utf-8', src: 'https://readmore.openwrite.cn/js/readmore.js' }]]- 增加脚本
次要是在这一步踩了一些坑。心愿看完我的解决办法后可能帮忙到你。
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.js 的 head 中导入这么一个 js，后果报错了，提醒找不到容器。
因为在 head 中的 js 会在页面内容生成之前就执行了，为了解决这个问题，我加上了 window.onload 事件，而后又报了另外一个错: <span style="color:red">btw is not defined</span>，通过查看发现 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 工具的优缺点
先说下毛病
- OpenWrite 暗藏文章内容是通过 CSS 款式实现的，那么略微懂点前端的同学，就能够间接改 CSS 查看全文。次要款式如下：
position: relative;height: 350px;overflow: hidden;- 公众号关键词回复的内容为 https://readmore.openwrite.cn... 如果用户晓得 blogId 那么能够间接关上该链接获取验证码。
- 目前已有一些浏览器插件能够将敞开 OpenWrite 的暗藏性能。
长处就是免服务器、免开发，这对于我来说曾经足矣。
以上就是本文的全部内容，心愿能帮忙到你，如有疑难，欢送评论区留言探讨或者能够到我的公众号获取微信分割我。
本文由博客一文多发平台 OpenWrite 公布！