相信大多數部落格作者都或多或少有過這樣想法: 現在各種平臺這麼多,想要實現全平臺釋出就要到處複製貼上,等我有空一定做統一平臺一次性全部解決!

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

反正我確實這麼想過,甚至 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 部落格整合導流工具，部落格導流到微信公眾號
• 談一談部落格的關注解鎖文章功能

• 牛掰！我是這麼把部落格粉絲轉到公眾號的

  如果本文對你有所幫助,請動動小手點一下推薦,否則還請留言指正,如有需要,請關注個人公眾號「 雪之夢技術驛站 」

相關推薦