相信大多數博客作者都或多或少有過這樣想法: 現在各種平臺這麼多,想要實現全平臺發佈就要到處複製粘貼,等我有空一定做統一平臺一次性全部解決!
不知道正在閱讀文章的你,有沒有這樣的想法?
反正我確實這麼想過,甚至 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 博客整合導流工具，博客導流到微信公衆號
- 談一談博客的關注解鎖文章功能
- 牛掰！我是這麼把博客粉絲轉到公衆號的
如果本文對你有所幫助,不用讚賞,也不必轉發,直接點贊留言告訴鼓勵一下就可以啦!
