关于javascript:如何在-vuePress中添加博客导流公众号即输入验证码解锁全站文章

前言

现在, 关上一些网站, 发现阅读文章前, 先要关注公众号, 获取验证码, 能力解锁文章, 这波操作尽管有点“流氓”, 然而白嫖的适当付出一点也没有什么, 毕竟写文章输入是真的费时间, 尊重作者的劳动成果.

况且赏杯咖啡, 我感觉也是一种激励.

不信, 本人去践行下就晓得了的

在互联网时代, 有流量, 所有皆有可能, 在现在竞争强烈的状况下, 只管微信公众号浏览量日渐下滑, 但不得不抵赖, 它依然是一个十分强劲有生命力的产品

其价值器重水平显而易见, 但凡离用户有多近的货色都值得深耕细作

现如今一些自媒体大佬, 很多在公众号里赚了不少, 论当今自媒体平台, 公众号的商业价值是最大的

很少有听到抖音, 快手等独立的个体融资的, 但公众号就有, 依附它活得洒脱, 而凭借它实现融资的还真不少. 本人不行, 不代表他人也不行, 贫困会限度设想.

明天跟大家分享一下在 vuepress 中怎么进行配置实现导流到公众号, 实现主动增粉, 让每一个浏览转化为粉丝, 与用户做敌人, 从此在也不必互推了的, 只需分心做好内容创作.

至于 Hexo,wordpress 网上一搜也能搜到,npm仓库也有绝对应的包, 可自行查阅

视频链接

如果您感觉读文章了解起来有些难度, 心愿以下视频能给你带来一些帮忙

⒈ 视频解说 -vuepress 解锁文章 - 引流到公众号 - 增加博客导流工具引言(前)

⒉ 视频解说 -vuepress 增加博客导流工具 - 增加博客设置(上)

⒊ 视频解说 -vuepress 增加博客导流工具 - 实现单篇文章暗藏与整站文章暗藏(中)

⒋ 视频解说 -vuepress 增加博客导流工具 - 可能会遇到的一些问题 - 完结(下)

⒌ 视频解说 -B 站 itclanCoder-Up 主 - 不定期更新获取新技能

应用 openWrite 导流工具

这里借用 openWrite 导流工具

⒈ 进入 openWrite 网站, 找到导航菜单栏下的 收费涨粉神器, 增加博客列表

输出博客信息以及微信公众号信息, 保留即可

如下所示:

⒉ 返回博客列表中, 点击应用

⒊ 浏览应用文档

这里就不搬运了的, 间接读文档就好, 上面的介绍才是重点

留神

文档中须要留神最初一句:

其中 id 中设置的 container 须要用户依据文章页面中的文章容器来调整，或者间接将文章最里面的容器设置为该 id

文档中的 readmore.js 用 openWrite 的链接也行, 间接下载到本地, 在头部全局形式引入也能够

博客设置

任选本人的一篇 md 文档, 在文档开端减少如下一段 js 代码

不要问为什么能在 md 中还能写 js, 甚至写Vue,React 都能够, 因为 vuepress 牛逼~

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
    const btw = new BTWPlugin();  // 实例化 btw 插件对象
    btw.init({                    // 初始化设置, 接管一些参数
        id: 'container',          // 文章最外层的 id
        blogId: 'xxxx 你本人的博客 ID', // 博客网站的 id,openWrite 会主动生成
        name: 'itclanCoder',         // 博客的名称
        qrcode: '你本人的公众号二维码 xxx.jpg', // 二维码
        keyword: '验证码',                    // 设置的解锁关键字
    });
</script>

当你插入这段代码后, 发现控制台报错了

ReferenceError: BTWPlugin is not defined

解决办法
你须要在里面用 window.onload 包裹起来, 必须期待 DOM 网页中所有内容加载结束后执行这段代码, 用 $(funciton() {}) 或$(document).ready(function(){})是不行的

前者是等网页中的所有 DOM 包扩图片加载结束后执行, 而后者是所有 DOM 构造绘制结束后, 边加载边执行, 可能 DOM 元素关联的货色并没有加载完

window.onload = function() {const btw = new BTWPlugin();
  btw.init({
    id: 'container',
    blogId: 'xxxx 你本人的博客 ID',
    name: 'itclanCoder',
    qrcode: '你本人的公众号二维码 xxx.jpg',
    keyword: '验证码',
  });
};

解决完报错后, 文章仍旧没有暗藏起来, 依据 openWrite 文章中最初一句设置文章容器的 id 属性container

当初就是要给文章容器增加 id 属性了, 能够用原生 js, 也能够应用 JQ动静的增加属性

提醒

间接在 md 中用 div 将想要暗藏的局部包裹起来, 并在 div 上增加 id="container" 难道不行么

这种形式我有试过, 但不靠谱, 实现不了, 即便能实现, 每篇文章都要手动的增加 id, 那不是一个懒的程序员应该做的事件

能够在控制台中审查元素, 找到文章最外层的那个容器, 切实不晓得, 你找个曾经实现理解锁文章的博客作为参照: 例如 itclanCoder 网站

没有增加解锁文章的博客, 是没有那个 id="container" 属性的

上面我应用 jQ 查找元素, 给页面最外层的容器增加 id 属性, 为啥不必原生 js, 因为 jQ 写得更少, 做得更多哈

此刻, 不要动不动满口的vue,React,Angular…JQ 真香, 小弟还停留在 JQ 时代, 其实 JQ 也很牛逼的, 也没有它实现不了的, 只是当初, 有负来日盛景, 风水轮流转嘛

window.onload = function() {
  themeDefaultContent = $('#app > .theme-container>.page > .theme-default-content' // 获取最外层的元素);

  themeDefaultContent.attr('id', 'container'); // 设置 id 属性, 就是这么牛逼, 搞定
  const btw = new BTWPlugin();
  btw.init({
    id: 'container',
    blogId: 'xxxx 你本人的博客 ID',
    name: 'itclanCoder',
    qrcode: '你本人的公众号二维码 xxx.jpg',
    keyword: '验证码',
  });
};

但经本人测试, 发现无论是应用 vue 的写法, 将下面的代码放到 monted 中, 或应用 this.$nextTick, 发现不是报btw is not defined 就是BTWPlugin is not defined

然而页面中的 id="container" 的确曾经加上去了的, 但就是暗藏不了文章, 通过排查, 查看了一下 readmore.js 源码, 外面应用了 document.querySelectorAll 以及 window 等一些办法, 当然外面也用了jQ, 预计是这个脚本加载程序有问题

如果有晓得怎么解决的同学, 能够告知一下, 显然依照文档中的间接在文章底下写那段代码是实现不了文章暗藏的性能的

解决办法:

把下面的代码独自成一个 js, 放到.vuepress 中公共 js 目录下,/.vuepress/public/js/btwplugin.js

window.onload = function() {
  themeDefaultContent = $('#app > .theme-container>.page > .theme-default-content');

  themeDefaultContent.attr('id', 'container');
  btw = new BTWPlugin(); // 留神 btw 须要是个全局变量, 把 const 去掉
  btw.init({
    id: 'container',
    blogId: 'xxxx 你本人的博客 ID',
    name: 'itclanCoder',
    qrcode: '你本人的公众号二维码 xxx.jpg',
    keyword: '验证码',
  });
};

而把 readmore.js
增加到头部 head 中, 以 script 形式全局注入

module.exports = {
  head: [
    [
      'script',
      {charset: 'utf-8', src: 'https://my.openwrite.cn/js/readmore.js'},
    ],
  ],
};

而后在 .vuepress 自定义组件出./vuepress/components/HideArticle.vue

<template>
  <div>

  </div>
</template>

<script>

  export default {
    name: 'HideArticle',
    data() {return {}
    },

    mounted() {import('../../public/js/btwplugin')  // 引入那段代码脚本, 间接把那段代码写到这里不行? 还真不行, 依旧会报 btw is not defined
     // 或者应用 require('../../public/js/btwplugin'); 当然最好是在下面定义,monted 外面调用

    }
  }
</script>

<style lang="scss" scoped>

</style>

而后在 md 文档中以组件的形式在文章开端引入 <HideArticle /> 组件

整个过程没有几行代码

果然胜利了 …

注意事项

1. btwplugin.js中的 btw 须要是个全局变量, 去掉 const, 那间接new BTWPlugin().init({}) 不是更好么, 还真不行, 依旧会报 btw is not defined 只管这个 bug 挺奇葩的
2. 在 btwplugin.js 这段代码中, 须要应用 window.onload 包裹, 期待所有页面加载完执行这段脚本, 不能不包裹, 而且也无奈应用 $(function() {}) 或者 $(document).ready(function() {}), 行不行, 试一试就晓得了的
3. 如果自定义的组件 HideArticle.vue, 里面多了一层文件夹例如:./vuepress/components/global/HideArticle.vue, 在md 引入组件时须要 <global-HideArticle /> 这种形式引入组件, 否则仍旧不会失效
4. 在 HideArticle.vue 组件内中的 monted 须要应用 import('相对路径') 相对路径的形式导入脚本, 或者应用 require('相对路径') 的形式引入, 这里用绝对路径不行, 如下所示

const btwPlugin = require('../../public/js/btwplugin');
export default {
  name: 'HideArticle',
  data() {return {};
  },

  mounted() {btwPlugin(); // 间接调用
  },
};

以上就实现了单篇文章的暗藏, 如下所示

那博客里有很多文章, 每篇 md 文件开端都引入该组件, 挺麻烦的

在 vuepress 中提供了全局注入组件, 这里介绍两种形式全局注入组件的, 一种是以插件的模式注入, 另一种是在 enhanceApp.js 中全局注入

形式 1- 以插件模式全局注入组件

在 /.vuepress/ 中的 config.js 配置插件中, 以插件的形式全局引入的, 具体插件的引入能够见文档 vuepress 应用插件

module.exports = {
  plugins: [
    [
      {
        name: 'page-plugin',
        globalUIComponents: ['global-HideArticle 组件的名称'],
      },
    ],
  ],
};

通过下面的形式, 就能够实现在博客中所有文章都实现暗藏了

形式 2- 在 enhanceApp.js 中注入组件

在 vuepress 中的enhanceApp.js, 这个文件是须要本人手动创立的, 它能够对 VuePress 利用进行拓展配置, 这个文件该当 export default 一个钩子函数，并承受一个蕴含了一些利用级别属性的对象作为参数

你能够应用这个钩子来装置一些附加的 Vue 插件 、 注册全局组件，或者减少额定的路由钩子

import ElementUI from 'element-ui';

// 应用异步函数也是能够的
export default ({
  Vue, // VuePress 正在应用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 以后利用的路由实例
  siteData, // 站点元数据
  isServer, // 以后利用配置是处于 服务端渲染 或 客户端
}) => {
  // ... 做一些其余的利用级别的优化
  // 全局注入组件
  Vue.use(ElementUI);
  Vue.mixin({
    // 混合注入, 加载全局文件
    mounted() {import('./public/js/btwplugin');
    },
  });
};

你也能够通过跟下面一样,require的形式引入, 在 monted 中调用, 这里不再反复多余, 这里借用了 Vue.mixin() 全局注册应用混入,Vue.mixin 的介绍

以上同样可能全局注入, 实现全站文章的暗藏

怎么实现某单篇文章不暗藏

其实下面第一种形式, 实现单篇文章的暗藏, 那实现指定某一篇文章的不暗藏, 同样也很简略, 只须要去除 id="container" 这个属性就能够了的

你能够在 md 上面间接写 js, 找那个最外层的元素, 间接去掉id 属性即可

你也能够封装成一个组件, 在全站中哪一篇不想要暗藏, 间接调用该组件即可, 这里就不反复了的, 间接提供外围代码

window.onload = function() {
  const themeDefaultContent = $('#app > .theme-container>.page > .theme-default-content');
  themeDefaultContent.removeAttr('id'); // 移除掉 id 属性, 就是这么简略,JQ 牛逼~
};

下面的代码就是应用 jq 移除元素上的某个属性, 就实现了文章的不暗藏

可能会遇到的问题

本地运行没问题但打包不通过

本地 npm run dev 没有问题, 然而构建打包呈现 window is not defined 或者document is not defined

这是因为应用 vuepress 所生成的动态 HTML 时, 都须要通过 Node.js 服务端渲染, 而在服务端 Node.js 的坏境中是没有 document 以及 window 对象, 这时候拜访浏览器 /DOM 中的 API, 它就会报错

如果你依照以上的步骤无论是通过 import 的形式还是通过 Vue.mixin 的形式, 在打包过程中就不会此类问题

之所以介绍两种形式, 那是我踩坑之后, 才发现的, 本地运行好好的, 一打包就出错. 算是一个小坑, 我的 itclanCoder 博客里应用的是 Vue.mixin() 这种形式全局注入组件实现全站文章暗藏的

你也能够查看如何解决 vuepress 编译打包失败即 window/document is not defined 问题

二维码不显示问题

当实现了文章的暗藏后, 发现弹出框内的二维码不失常显示, 这个时候, 你须要查看 openWrite 博客设置的二维码是否正确的

留神

图片的链接: 须要是 http://xxxxgg.jpg 网络地止,jpg/png/..图片后缀模式的, 间接将图片转换成链接插入是不行的

你能够抉择某一个图片存储服务器, 只有能拿到图片地止就行, 我应用的是又拍云的, 当然它的收费的空间资源无限

额定拓展 - 不应用插件怎么实现文章局部暗藏

通过这个 openWrite 插件, 能够看得出, 它只是给最外层增加了一个固定的高度, 把超出局部给暗藏了的

视觉上呈现暗藏(css 实现的), 通过浏览器审查元素就能够看得出, 这并非真正的暗藏, 对于前端同学, 实现元素的暗藏并不生疏

不必插件, 没有后端服务, 也同样能够做到导流到公众号, 能够在公众号后盾主动回复里增加设置一个固定的值

在 vuepress 中同样编写全局组件的形式, 获取最外层的元素, 而后如同 openWrite 的, 提交时, 须要输出从公众号后盾菜单栏拿到的固定的值, 输出正确的值能力解锁文章

甚至解锁体验还能够优化得更好, 给一些用户提醒之类的

在前端代码中, 给一个固定的值与用户输出的值做比拟, 就能够了的, 能够把这个输出的值存入 sessionStorage 中的

一样能够实现文章的全站局部暗藏, 输出验证码解锁文章, 只是这个操作有肯定的局限, 验证码就不能是动静了的

尽管这种形式是不平安的, 但仍旧能够达到公众号引流的目标

想必通过关注个公众号回复一个验证码, 就能解锁文章, 比本人查看源码的形式拿到验证码, 要快得多吧

对于不相熟后盾, 仅仅就是为了实现导流这个目标, 这种形式齐全是能够实现的, 而 openWrite 这种形式动静实现文章的解锁

须要本人部署服务器, 解决前端申请等一些问题. 还得写后端代码, 对于后端是一片沙漠的同学, 是有一些简单的.

如果你不想用 openWrite 这种插件形式, 能够自行一试的, 但话说回来, 既然有这么好的工具, 那就用吧, 尽管配置过程中难免会遇到一些坑, 但总有人会给你填啊

腾出这个精力, 解决下集体问题, 多陪陪女朋友, 不是更好? 哈哈哈哈 ….

结语

至此, 在 vuepress 中联合 openWrite 的博客导流工具到公众号, 实现全栈文章局部暗藏, 以及解锁文章就完满实现了的, 实现起来非常简单粗犷

当然我不晓得其余相似用 vuepress 搭建的博客, 实现文章的暗藏是怎么实现的, 尽管这个很简略, 然而在实现的过程或多或少, 会踩到一些坑, 如果相熟 vue 相干技术栈的, 解决也不难

但基本上应该大同小异, 都要先获取最外层元素, 而后动静的增加 id 属性

如果您在实现博客文章局部暗藏性能遇到问题, 欢送提出问题, 下方留言, 一起探讨

相干文档

• openWrite 博客导流工具
• 又拍云图片存储
• 原文出处 -http://coder.itclan.cn- 如何在 vuepress 上增加博客导流公众号 - 即输出验证码解锁全站文章