gitbook 入門教程之還在搞公衆號互推漲粉?gitbook 集成導流工具,輕輕鬆鬆躺增粉絲!

時間 2019-12-21

標籤 gitbook 入門教程還在公衆號互推集成導流工具輕輕鬆鬆粉絲欄目 Git 简体版

原文原文鏈接

相信大多數博客做者都或多或少有過這樣想法: 如今各類平臺這麼多,想要實現全平臺發佈就要處處複製粘貼,等我有空必定作統一平臺一次性所有解決!javascript

不知道正在閱讀文章的你,有沒有這樣的想法?html

反正我確實這麼想過,甚至 github 上相關項目早已建立,可一直遲遲沒有下一步,要麼是工做忙,要麼是技術儲備不夠,總有一大堆藉口自我安慰!java

若是隻是專一於某一兩家平臺,這種需求可能不會那麼強烈,但是若是你和我同樣曾經手動複製粘貼過下面這麼多平臺,那麼我相信你必定能夠體會一文多發的迫切性!git

幸運的是,在一文多發探索的路上並不孤單,不堪其擾的大佬們早已說幹就幹動手解決了這個問題,有的是開源平臺,有的是 SAAS 服務,你們都在努力...github

其中,SAAS 服務多是最簡單上手的方式了,這就是今天的主角: OpenWrite 一文多發平臺!web

若是你熱衷於寫文記錄點滴、分享心得
若是你鍾情於 markdown 的簡潔、流暢與純粹
若是你專一於內容創做,而對不少網絡抄襲迫不得已

那麼,但願 https://openwrite.cn/ 能夠幫助你！npm

一文多發

OpenWrite 提供的衆多功能中最吸引個人地方莫過於一文多發功能了: 我在用的平臺它都有,我沒用的平臺它也有!json

仍是熟悉的 markdown 編輯器,便捷的自動認證功能,發佈文章不再用一處編輯,處處複製了,順便解決了一直使人困擾的圖片上傳問題.segmentfault

目前已提供的平臺中涵蓋了絕大部分技術博客平臺,相信之後會支持更多平臺的吧,不再用複製粘貼那麼屢次了呢!

平臺總體上使用體驗很是不錯,大體步驟是先提早登錄各大目標平臺,而後經過 OpenWrite 提供的插件自動進行渠道認證,配置各大渠道後就能夠愉快發文啦!api

稍微摸索下就能很快上手,在這裏再也不贅述了,不瞭解的小夥伴們能夠看看技術文章博客，互聯網運營平臺 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"
        }
    }
}