創建合輯,將【碼上掘金】作為開源項目的demo庫使用

語言: CN / TW / HK

最近社區新推出了一個碼上掘金的產品,可以方便大家分享在瀏覽器中可以實時運行的代碼了。而這個工具的價值還遠不止如此,我們可以利用它構建代碼合輯,把它用到自己的開源項目中,為開源項目的用户創建可參考的demo庫。

這麼做的好處有至少兩點,一是不必去費心找可以在項目中構建demo的工具,二是將來碼上掘金產品升級,會支持評論、點贊等社交功能,可以極大地方便開源項目作者與用户進行交流。

那麼具體要怎麼做呢?

首先看一個例子:

https://collection.juejin.fun/?spritejs

上面這個地址是我為我的開源WebGL渲染庫SpriteJS寫的Demo,這些例子全部都放在了碼上掘金上,用户只要訪問這裏就可以通過例子來了解SpriteJS的用法。

這個合輯功能目前不是碼上掘金本身的內置功能,而是決定把它作為開源出來提供給大家共建,這個項目本身集成在JCode-tools這個開源項目中。

如何創建自己的合輯

創建自己的合輯有兩個辦法,一個簡單的辦法是將代碼發佈到碼上掘金之後,提交PR給JCode-tools,更新一個配置文件到這裏:https://github.com/xitu/jcode-tools/tree/main/docs/collections

文件名為:你的項目名.jcoderc.js

這樣你就可以通過 https://collection.juejin.fun/?你的項目名 來訪問你的代碼合輯了。

jcoderc文件的寫法非常簡單,你可以參考 spritejs.jcoderc.js 來配置你自己的代碼合輯。

如果你想要把合輯部署到你自己的項目裏,那麼可以用第二個辦法,首先在你的項目裏安裝 jcode-tools:

npm install jcode-tools

然後在項目目錄執行命令 jcode-tools/bin/doc.js 輸出目錄(缺省為docs)

jcode-tools會在項目的目錄下創建一個文檔目錄,默認為docs,裏面有四個文件,分別是:

index.html index.js jcoderc.js style.css

你只需要修改jcoderc.js的配置項即可,然後通過本地運行http-server或者部署到 github pages,就可以創建出你自己的代碼合輯了。

以上是碼上掘金的一個擴展用法,這個產品的潛力遠不止如何,我們也會不斷迭代,增加新的語言,增加社交功能,擴展新的用法,更多玩法也有待大家去發掘。

最後放一個有趣的WebGL效果:

https://code.juejin.cn/pen/7086704401011703816

大家用碼上掘金實現了哪些好玩的東西呢?歡迎在評論區交流。