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

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

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

那麼具體要怎麼做呢？

首先看一個例子：

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

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

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

如何創建自己的合輯

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

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

這樣你就可以通過 http://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效果：

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

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