創建合輯,將【碼上掘金】作為開源項目的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
大家用碼上掘金實現了哪些好玩的東西呢?歡迎在評論區交流。
- Day1:用原生JS把你的設備變成一台架子鼓!
- 【零基礎】充分理解WebGL(七)
- 【零基礎】充分理解WebGL(六)
- 【零基礎】充分理解WebGL(五)
- 冷知識:不起眼但有用的String.raw方法
- 【零基礎】充分理解WebGL(四)
- 【零基礎】充分理解WebGL(三)
- 【零基礎】充分理解WebGL(二)
- 【零基礎】充分理解WebGL(一)
- css-doodle:如何讓CSS成為藝術?
- 創建合輯,將【碼上掘金】作為開源項目的demo庫使用
- 使用 babel 插件來打造真正的“私有”屬性
- 使用 Node.js 對文本內容分詞和關鍵詞抽取
- 用信號來控制異步流程
- 設計 Timeline 時間軸來更精確地控制動畫
- 簡單構建 ThinkJS Vue2.0 前後端分離的多頁應用
- 冷門函數之Math.hypot
- 你還在用charCodeAt那你就out了
- 巧用 currentColor 屬性來實現自定義 checkbox 樣式
- 在什麼情況下 a === a - 1 ?