gitbook 入门教程之还在搞公众号互推涨粉?gitbook 集成导流工具,轻轻松松躺增粉丝!

时间  2019-11-17
标签 gitbook 入门 教程 还在 公众号 互推 集成 导流 工具 轻轻 松松 粉丝 栏目 Git 繁體版
原文   原文链接

相信大多数博客做者都或多或少有过这样想法: 如今各类平台这么多,想要实现全平台发布就要处处复制粘贴,等我有空必定作统一平台一次性所有解决!javascript

不知道正在阅读文章的你,有没有这样的想法?html

反正我确实这么想过,甚至 github 上相关项目早已建立,可一直迟迟没有下一步,要么是工做忙,要么是技术储备不够,总有一大堆借口自我安慰!java

若是只是专一于某一两家平台,这种需求可能不会那么强烈,但是若是你和我同样曾经手动复制粘贴过下面这么多平台,那么我相信你必定能够体会一文多发的迫切性!git

雪之梦技术驿站-全平台.png

幸运的是,在一文多发探索的路上并不孤单,不堪其扰的大佬们早已说干就干动手解决了这个问题,有的是开源平台,有的是 SAAS 服务,你们都在努力...github

其中,SAAS 服务多是最简单上手的方式了,这就是今天的主角: OpenWrite 一文多发平台!web

  • 若是你热衷于写文记录点滴、分享心得
  • 若是你钟情于 markdown 的简洁、流畅与纯粹
  • 若是你专一于内容创做,而对不少网络抄袭迫不得已

那么,但愿 openwrite.cn/ 能够帮助你！npm

一文多发

OpenWrite 提供的众多功能中最吸引个人地方莫过于一文多发功能了: 我在用的平台它都有,我没用的平台它也有!json

gitbook-openwrite-office.png

仍是熟悉的 markdown 编辑器,便捷的自动认证功能,发布文章不再用一处编辑,处处复制了,顺便解决了一直使人困扰的图片上传问题.api

gitbook-openwrite-preview.png

目前已提供的平台中涵盖了绝大部分技术博客平台,相信之后会支持更多平台的吧,不再用复制粘贴那么屡次了呢!数组

平台总体上使用体验很是不错,大体步骤是先提早登录各大目标平台,而后经过 OpenWrite 提供的插件自动进行渠道认证,配置各大渠道后就能够愉快发文啦!

稍微摸索下就能很快上手,在这里再也不赘述了,不了解的小伙伴们能够看看 技术文章博客，互联网运营平台 OpenWrite

公众号引流

若是你有本身独立博客,也在运营者微信公众号,可是苦于没有很好的手段引导读者关注公众号,那么Openwrite 推出的 ReadMore 工具绝对能够解决燃眉之急,真的能够说是良心之做!

  • 效果怎么样看了就知道

静态博客网站集成 ReadMore 工具后,全站博客文章内容自动隐藏一半,同时浮现出阅读全文的按钮引导读者点击解锁.

gitbook-openwrite-website-lock-preview.png

一旦读者想要阅读全文就会主动点击按钮,此时就会自动弹出引导用户关注公众号的弹窗.

gitbook-openwrite-website-lock-guide.png

此时,用户有三种选择,要么扫码关注公众号解锁全站文章,要么掉头走人再也不阅读,或者以其人之道还治其人之身,技术绕过直接解锁!

固然,咱们天然是但愿全部的读者均可以转换成公众号粉丝,因此接下来读者应该是关注公众号回复关键字获取验证码进而解锁文章.

gitbook-openwrite-wechat-follow-reply.jpg

读者关注公众号后,发送关键字获取文字连接并点击该连接,此时就会获取验证码,离成功只差一步!

gitbook-openwrite-wechat-follow-code.jpg

再次回到博客平台的受限文章,输入刚刚获取到的验证码,不只解锁了当前文章,博客内的其余文章也所有自动解锁,并不会形成很差体验,完美!

gitbook-openwrite-website-unlock-preview.png

从陌生读者成公众号粉丝,整个操做流程一鼓作气,没有丝毫卡顿也没有任何门槛,一切都是这么天然!

因此,若是你有自主运营的我的博客,想要转换成公众号粉丝,那么 ReadMore 工具简直就是躺增粉丝利器啊!

自主集成

ReadMore 工具集成步骤比较简单,按照相关官方教程说明,大体能够分为两步:

https://openwrite.cn/openwrite/openwrite-readmore/

若是博客文章比较少的话,这么设置是任何没有问题的,大不了多复制一下就能够了.

可是若是博客文章比较多,确定不能手动复制粘贴了,此时应该将该规则自动应用到所有文章中,如此一来,我的博客文章所有拥有该功能.

插件集成

熟悉了自主集成的基本思路后,不难发现,集成 ReadMore 工具只须要保证我的博客支持运行 Js 代码便可!

这个要求确实不高,哪怕是 Gitbook + Github Pages 搭建的静态网站也是支持运行 Js 代码的,更况且整合 Github 后还提供了免费域名,恰好知足 ReadMore 的条件.

gitbook-openwrite-blog2weixin-preview.png

说干就干,因而乎,花了一整晚的时间弄了 gitbook 插件来集成 ReadMore 工具.

  • 安装 openwrite 插件

在 book.json 配置文件中,添加 openwrite 插件到 plugins 数组中,示例以下:

{
    "plugins" : ["openwrite"]
}
复制代码

声明插件后须要添加相关配置信息,来源于 OpenWrite 后台,务必修改为本身真正的配置信息!

{
    "pluginsConfig":{
        "openwrite":{
            "blogId": "15702-1569305559839-744",
            "name": "雪之梦技术驿站",
            "qrcode": "https://snowdreams1006.github.io/snowdreams1006-wechat-public.jpeg",
            "keyword": "vip"
        }
    }
}
复制代码

插件声明并配置后,经过 gitbook 或 npm 命令行方式安装 openwrite 插件到本地.

$ gitbook install
复制代码

或者

$ npm install gitbook-plugin-openwrite
复制代码
  • 运行 openwrite 插件

本地运行 gitbook serve 命令后,赶快验证下是否成功经过 gitbook-plugin-openwrite 插件集成 ReadMore 工具吧!

若是没有问题的话,运行 gitbook build 生成的目标文件上传到 github 或其余静态服务器就能轻松集成 ReadMore 工具!

若是能够的话,欢迎给 github.com/snowdreams1… 一个 Star ,告诉个人确有人在用!

集成思路

按照 OpenWrite 官方 ReadMore工具 集成指南,关于博客设置部分只须要将本身的专属配置信息插入到具体博客文章中便可实现集成.

可是,大多数博客平台编写博客文章时都是编写 markdown 而不是 html,于是 不太方便直接插入 js 代码,比较方便的作法是修改全局性质的模板文件.

而关于 gitbook 的模板文件位于根目录下的 _layouts/website/page.html ,因此要么直接修改模板,要么经过插件方式自定义模板!

原本打算直接修改 gitbook 模板文件,可是独乐乐不如众乐乐,因此仍是采用插件的方式扩展吧!

核心代码以下,修改模板文件,在文章内容外面包裹一层 div 做为目标区域并运行集成 Js 代码片断.

{% extends template.self %}

{% block page %}
<div id="vip-container">
    {{ page.content|safe }}
</div>
{% endblock %}

{% block javascript %}
{{ super() }}
<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script> const btw = new BTWPlugin(); btw.init({ "id": "vip-container", "blogId": "{{ config.pluginsConfig.openwrite.blogId }}", "name": "{{ config.pluginsConfig.openwrite.name }}", "qrcode": "{{ config.pluginsConfig.openwrite.qrcode }}", "keyword": "{{ config.pluginsConfig.openwrite.keyword }}" }); </script>
{% endblock %}
复制代码

实现思路仍是比较简单明确的,这里简单对其中的细节作些解释说明.

  • 构建目标区域
{% block page %}
<div id="vip-container">
    {{ page.content|safe }}
</div>
{% endblock %}
复制代码

page.content 是每一个页面当前的文件内容,再也不是原生的 markdown 类型而是 html 类型,这一点很是重要,由于 gitbook 并不会处理 div 内嵌的 markdown 内容!

以前一直尝试想经过 Js 方式直接嵌套一层目标区域 div,可是只找到 markdown 异步转 html 的 api 致使没法集成,最后只能采用修改模板的方式.

而 {{ page.content|safe }} 表示的是当前页面的 html 内容,最后在原始内容外面嵌套一层 div 充当目标区域,其中 id="vip-container".

  • 插入集成代码
<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
    const btw = new BTWPlugin();
    btw.init({
        "id": "vip-container",
        "blogId": "{{ config.pluginsConfig.openwrite.blogId }}",
        "name": "{{ config.pluginsConfig.openwrite.name }}",
        "qrcode": "{{ config.pluginsConfig.openwrite.qrcode }}",
        "keyword": "{{ config.pluginsConfig.openwrite.keyword }}"
    });
</script>
复制代码

{{ config.pluginsConfig.openwrite.blogId }} 表示读取的是 gitbook 关于 openwrite 插件的配置信息,这样一来集成代码就会自动插入到每个页面中,从而省去了手动插入的麻烦,达到了自动化集成的目的.

上一步构建目标区域时设置了 id="vip-container" ,在这一步直接使用了该区域惟一标示,因此该配置项没必要暴露给外部用户,所以配置项中没有 id .

  • 使用者集成参考

关于插件原理部分的相关介绍,若是不懂的话也没有关系,直接上手可以用就好,下面提供很是基础的示例:

{
    "title": "雪之梦技术驿站",
    "author": "snowdreams1006",
    "description": "雪之梦技术驿站又名snowdreams1006的技术小屋.主要分享我的的学习经验,一家之言,仅供参考.",
    "language": "zh-hans",
    "gitbook": "3.2.3",
    "plugins": [
        "openwrite"
    ],
    "pluginsConfig": {
        "openwrite":{
            "blogId": "15702-1569305559839-744",
            "name": "雪之梦技术驿站",
            "qrcode": "https://snowdreams1006.github.io/snowdreams1006-wechat-public.jpeg",
            "keyword": "vip"
        }
    }
}
复制代码

book.json 配置文件中的其余项可能省略了,这里只保留关于插件部分相关代码,完整示例参考: github.com/snowdreams1…

虽然本教程基于 gitbook 提供的插件机制进行集成 ReadMore 工具,但基本思路也适合其余平台: 最方便的作法是基于模板固定目标区域,而后配置相应的 Js 集成代码.

固然,直接集成是很是简单的,若是是基于插件等集成形式以提供给更多人使用的话,那可能就要研究一下博客平台的接口文档了.

懒人直达

  • 声明并配置 openwrite 插件
{
    ...
    "plugins": [
        "openwrite"
    ],
    "pluginsConfig": {
        "openwrite":{
            "blogId": "your blogId",
            "name": "your name",
            "qrcode": "your qrcode",
            "keyword": "your keyword"
        }
    }
}
复制代码

注意修改为本身的配置信息,来源于 OpenWrite 后台,点击使用后第二步关于博客设置!

  • 安装 openwrite 插件到本地
$ gitbook install
复制代码
  • 运行本地服务
$ gitbook serve
复制代码

若是本地运行发现没有问题的话,恭喜你成功集成了公众号引流功能,稍后运行 gitbook build 命令后就能够上传静态网站到目标服务器了呢!

总结寄语

整体来讲,OpenWrite 做为一文多发平台是很是优秀的,对于多平台发布的小伙伴来讲简直就是福音,可是假如你并无一文多发的需求,那可能对你的帮助并非很大,由于连复制粘贴都不须要了啊!

可是,做为一个有追求的技术分享者,我的博客用户转换成微信公众号粉丝这一需求应该说更加广泛,再次感谢 OpenWrite 提供的 ReadMore 工具,原觉得只有动态博客才能玩的套路没想到也能够用到静态博客身上!

最后考虑到基于 Gitbook 搭建的静态博客市面上并很多,其余小伙伴可能也有相似需求,因此作成了 gitbook 插件共享给你们,gitbook-plugin-openwrite 但愿对你们有所帮助!

gitbook-plugin-openwrite.png

参考连接

若是你以为本文对你有所帮助,欢迎点赞留言告诉我,你的鼓励是我继续创做的动力,不妨顺便关注下我的公众号「雪之梦技术驿站」,按期更新优质文章哟!

雪之梦技术驿站.png
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程