什麼是插件

Gitbook 插件是擴展 Gitbook 功能的最佳方式,如果 Gitbook 沒有想要的功能或者說網絡上也沒有現成的解決方案時,那麼只剩下自食其力這條道路,讓我們一起來自力更生開發插件解決問題吧!

幸運的是,Gitbook 提供了插件機制留給開發者去擴展自定義功能,雖然官方開發文檔不是特別完善,甚至有時候需要翻閱相關源碼才能定位到暴露出的 api,但是這一切都不影響開發的熱情,誰讓我們一開始就選定了 Gitbook 呢!

遺憾的是,目前 Gitbook 已經停止了舊版服務,gitbook-cli 腳手架甚至也早已停止了維護,但是我心依舊鐘愛於輕量級的腳手架,不拋棄不放棄,所以花費了一定心血整理出相關的資料文檔.

• `gitbook` 官方文檔^[1]

「雪之夢技術驛站」: Gitbook 官方文檔移植項目,包括原版英文和校準中文,歡迎各位愛好者加入一起維護!

• `gitbook` 入門教程^[2]

「雪之夢技術驛站」: 從入門到熟練運用系列文章,高級進階章節

詳細介紹了插件開發的基礎知識,淺顯易懂全是乾貨!

• `mygitalk` 評論插件^[3]

「雪之夢技術驛站」: 基於 gitalk 實現的 Gitbook 插件,詳細介紹了從思路到實現的全過程,二次封裝第三方工具時值得借鑑.

• `readmore` 閱讀更多插件^[4]

「雪之夢技術驛站」: 基於 readmore 實現的閱讀更多插件,基於模板渲染手段封裝第三方工具,和 mygitalk 插件的實現思路互為補充!

為什麼做插件

「雪之夢技術驛站」: 因為沒有現成插件,所以自力更生,因為力有所及,所以開源!

如果你和我一樣全平臺發佈文章的話,估計你也會遇到和我一樣的問題: 原創首發個人博客後轉載自其他各大平臺,為了吸引流量總是要添加原創聲明小尾巴,麻煩且費事!

當一次又一次重複這種無意義的勞動時,自然要尋求解決之道,偷懶是促進生產力發展的原始動力!

現在問題很清楚了,那就是需要開發一款 Gitbook 插件幫助文章自動添加版權保護信息,來減少人力勞動.

幸運的是,在平時逛的各大平臺中慕課網和 CSDN 自帶版權保護,因此不妨來個強強聯合,開發出增強版版權保護插件.

• 慕課網版權聲明

作者：雪之夢技術驛站
鏈接：https://www.imooc.com/article/293112
來源：慕課網

「雪之夢技術驛站」: 慕課網手記文章複製內容時會自動追加版權保護信息,包括作者,鏈接和來源三部分.

• CSDN 版權聲明

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://snowdreams1006.blog.csdn.net/article/details/102077796
————————————————
版權聲明：本文為CSDN博主「雪之夢技術驛站」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://snowdreams1006.blog.csdn.net/article/details/102077796

「雪之夢技術驛站」: CSDN 原創博客開頭自動追加版權聲明信息,包括版權聲明和本文鏈兩部分,複製版權信息時會追加版權保護信息.

• 強強聯合的版權保護插件聲明

慕課網手記文章全文複製均會追加版權保護信息,而 CSDN 原創博客開頭顯示版權信息複製該信息時才會追加版權保護信息,綜合兩者,不妨做個增強版版權保護插件.

作者: 雪之夢技術驛站
鏈接: https://snowdreams1006.github.io/myGitbook/advance/plugin-develop.html
來源: 雪之夢技術驛站
本文原創發佈於雪之夢技術驛站,轉載請註明出處,謝謝合作!

「雪之夢技術驛站」: 文章末尾自動追加版權聲明信息,複製任意文章內容時自動追加版權保護信息.

怎麼快速做插件

根據插件的實現效果,我們暫且將該插件命名為 copyright 版權插件,接下來就是趕緊公開註冊插件以免名字被搶先一步!

「雪之夢技術驛站」: 暫時並不著急於實現插件的作用,搶佔先機很重要,小步快跑去註冊插件吧!

• npmjs 官網^[5]在線註冊

「雪之夢技術驛站」:註冊過程比較簡單,用戶名和郵箱之類的信息即可,不用付費也可以發佈包.

• 命令行運行 npm adduser 註冊

$ npm adduser

「雪之夢技術驛站」: 終端註冊和網頁版註冊基本一致,需要用戶名,密碼和郵箱.

查詢插件名稱

按照 Gitbook 插件命名規範,實用性插件必須以 gitbook-plugin-* 開頭,而我們的插件名為 copyright ,因為完整名稱應該是 gitbook-plugin-copyright .

• 命令行中按照關鍵字搜索插件名稱

$ npm search --keyword gitbook-plugin-copyright

「雪之夢技術驛站」: 如果沒有搜索到項目,恭喜你,名稱可用,抓緊時間趕緊註冊!否則,重新起名,直到可用為止!

• npmjs 官網在線搜索插件名稱

按照關鍵字搜索: https://www.npmjs.com/search?q=gitbook-plugin-copyright^[6]

「雪之夢技術驛站」: 如果沒有出現精確匹配 exact match,恭喜你,名稱可用,請抓緊時間註冊插件.否則另想新名,直到名稱可用為止!

創建開源項目

經過上一步查詢後確定插件名稱暫時可用後,應該立即前往 github 創建與插件同名的開源項目,以便進行插件的後續更新維護.

• 創建開源項目

「雪之夢技術驛站」: 創建插件項目時,建議

項目信息儘量補全,添加 README 文件和版權類型.

• 克隆到本地項目

「雪之夢技術驛站」: 點擊克隆或下載按鈕獲取克隆鏈接,準備下載到本地繼續開發插件項目.

$ git clone [email protected]:snowdreams1006/gitbook-plugin-copyright.git

• 初始化 npmjs 項目

克隆到本地工作空間後,切換到插件項目目錄,運行初始化 npm 項目命令,生成默認 package.json 配置文件.

$ npm init -y

「雪之夢技術驛站」: 默認信息基本夠用,暫時不必修改,重點是快速搶佔插件名稱!

• 發佈 npmjs 項目

$ npm publish

「雪之夢技術驛站」: 發佈 npmjs 包時應該先登錄賬號 npm login,並設置為 npmjs 官方鏡像源,npm set registry https://registry.npmjs.org/ .

成功搶注插件

如果命令行內運行 npm publish 命令發佈插件沒有報錯信息,恭喜你!插件應該成功發佈到 npmjs 包註冊中心!

• 驗證插件是否發佈成功

如果發佈插件時命令行沒有報錯,不論是在命令行內搜索插件還是網站內搜索插件,此時就應該能搜索到剛剛發佈成功的插件.

$ npm search --keyword gitbook-plugin-copyright

「雪之夢技術驛站」: 命令行內再次運行 npm search --keyword gitbook-plugin-copyright 發現插件已成功搶注!

「雪之夢技術驛站」: 搜索到的插件名稱正是剛剛發佈成功的插件,此時插件名稱 gitbook-plugin-copyright 已成功搶注!

點擊插件名稱跳轉到插件介紹頁面,基本框架已初具模樣,接下來的工作才是真正的插件開發.

「雪之夢技術驛站」: 此時插件已成功發佈到 npmjs 包管理中心,任何人都使用 npm install gitbook-plugin-copyright 安裝插件,只不過暫時並沒有任何代碼邏輯而已!

現在雖然插件已發佈到 npmjs 包管理工具,但是源代碼還沒有上傳到遠程服務器,無法進行後續的開源維護,因此此時創建一個里程碑,紀念下難忘的時刻並準備同步到 github.

• 首先,本地創建 v0.0.1 版本

$ git tag v0.0.1 -m "init"

• 然後,推送到遠程服務器

$ git push origin v0.0.1

下載地址: https://github.com/snowdreams1006/gitbook-plugin-copyright/releases^[7]

• 最後,順便更新主幹 master 分支

$ git push origin master

至此,從創建插件到發佈插件以及最後同步插件源碼全部流程基本完成,從零到壹開發插件併發布就是這麼簡單!

相關總結和預告

本文主要介紹了如何從 0 到 1 發佈自己的插件,雖然只是骨架,具體什麼代碼也沒有,但是對於完整的開發流程而言已經足夠了!

相信你也不會重複開發一個一模一樣的 gitbook-plugin-copyright 插件,所以具體代碼對於讀者而言可能沒有特別大的用處.

但是通過本文我們可以瞭解到,開發插件其實並不難!

實際開發中大多數問題網絡上基本上都有現成的解決方案,只需要學會搜索外加擁有一定的學習能力,相信你最終也一定可以開發出自己的插件.

npmjs 相關命令

• 註冊賬號

$ npm adduser

「雪之夢技術驛站」: 命令行內註冊信息比較簡單,不如網頁版註冊還可以設置頭像之類的,推薦網頁版註冊.

• 登錄賬號

$ npm login

「雪之夢技術驛站」: 不論哪種註冊方式,發佈插件前都要先登錄賬號以確認插件作者信息.

• 查看當前用戶

$ npm whoami

「雪之夢技術驛站」: 顯式登陸後肯定知道剛才已經登錄,一段時間後還記得是誰在登陸嗎?此時,運行該命令就可以查看當前登錄用戶信息.

• 創建 npmjs 包

$ npm init -y

「雪之夢技術驛站」: 默認創建的配置文件 package.json 基本夠用,也可以自行修改相關配置信息.

• 切換 npmjs 官方鏡像源

$ npm set registry https://registry.npmjs.org/

「雪之夢技術驛站」: 強制切換成官方鏡像源,主要是針對可能使用淘寶鏡像源^[8]的用戶.

• 發佈 npmjs 包

$ npm publish

「雪之夢技術驛站」: 發佈插件前請確保已經登錄並切換到官方鏡像源,否則發佈會失敗!

• 按關鍵字搜索 npmjs 包

$ npm search --keyword gitbook-plugin-

「雪之夢技術驛站」: 發佈前未被註冊時是搜不到結果,發佈後的插件作者信息應該是當前用戶.

git 相關命令

• 克隆到本地項目

$ git clone [email protected]:/gitbook-plugin-.git

• 提交更改到本地版本庫

$ git commit -am "change log"

• 創建本地標籤版本

$ git tag  -m "publish log" 

• 推送標籤到遠程服務器

$ git push origin 

• 推送最新代碼到遠程主幹 master

$ git push origin master

如果你有什麼好的靈感或者想法,趕緊去搶注吧,畢竟名稱可是全局唯一獨一無二的呀!

下一節我們將開始介紹如何給基本骨架注入生命力,使其變成真正的 Gitbook 插件,甚至實現 gitbook-plugin-copyright 插件功能!

開源項目: https://github.com/snowdreams1006/gitbook-plugin-copyright^[9]

[1] gitbook 官方文檔: https://snowdreams1006.github.io/gitbook-official/

[2] gitbook 入門教程: https://snowdreams1006.github.io/myGitbook/

[3] mygitalk 評論插件: https://snowdreams1006.github.io/gitbook-plugin-mygitalk/

[4] readmore 閱讀更多插件: https://snowdreams1006.github.io/gitbook-plugin-readmore/

[5] 官網: https://www.npmjs.com/

[6] https://www.npmjs.com/search?q=gitbook-plugin-copyright: https://www.npmjs.com/search?q=gitbook-plugin-copyright

[7] https://github.com/snowdreams1006/gitbook-plugin-copyright/releases: https://github.com/snowdreams1006/gitbook-plugin-copyright/releases

[8] 淘寶鏡像源: http://npm.taobao.org/

[9] https://github.com/snowdreams1006/gitbook-plugin-copyright: https://github.com/snowdreams1006/gitbook-plugin-copyright