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

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

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

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

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

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

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

• 如果你热衷于写文 记录点滴 、 分享心得
• 如果你钟情于 markdown 的 简洁 、流畅与纯粹
• 如果你专注于内容创作,而对很多 网络抄袭 无可奈何

那么,希望 https://openwrite.cn/ 可以帮助你！

一文多发

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

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

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

平台整体上使用体验非常不错,大致步骤是先提前登陆各大目标平台,然后通过 OpenWrite 提供的插件自动进行渠道认证,配置各大渠道后就可以愉快发文啦!

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

公众号引流

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

• 效果怎么样看了就知道

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

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

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

当然,我们自然是 希望所有的读者都可以转换成公众号粉丝 ,所以接下来读者应该是关注公众号 回复关键字 获取验证码进而解锁文章.

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

再次回到博客平台的 受限文章 , 输入刚刚获取到的验证码 ,不仅解锁了 当前文章 ,博客内的其他文章也 全部自动解锁 ,并不会造成不好体验,完美!

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

所以,如果你有 自主运营 的个人博客,想要转换成公众号粉丝,那么 ReadMore 工具简直就是 躺增粉丝 利器啊!

自主集成

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

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

但是如果博客文章比较多,肯定不能手动复制粘贴了,此时应该将该规则 自动应用到全部文章 中,如此一来,个人博客文章全部拥有该功能.

插件集成

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

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

说干就干,于是乎,花了一整晚的时间弄了 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 工具!

如果可以的话,欢迎给 https://github.com/snowdreams1006/gitbook-plugin-openwrite 一个 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 配置文件中的其他项可能省略了,这里只保留关于插件部分相关代码,完整示例参考: https://github.com/snowdreams1006/gitbook-plugin-openwrite/tree/master/example

虽然本教程基于 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 希望对大家有所帮助!

• 项目地址: https://github.com/snowdreams1006/gitbook-plugin-openwrite
• 演示地址: https://github.com/snowdreams1006/gitbook-plugin-openwrite/tree/master/example

参考链接

• https://openwrite.cn/
• 还在搞公众号互推涨粉？OpenWrite推出增长神器，助你实现粉丝躺增！
• WordPress 博客整合导流工具，博客导流到微信公众号
• 谈一谈博客的关注解锁文章功能
• 牛掰！我是这么把博客粉丝转到公众号的

如果本文对你有所帮助,不用赞赏,也不必转发,直接点赞留言告诉鼓励一下就可以啦!