Snippet 是一款代碼片段收集工具，經過一天三夜的開發終於上線了。
- 應用地址：snippets.barretlee.com
- 源碼地址：barretlee/snippets
由於使用原生 JS 開發，效果利用 CSS3 實現，所以如果想有一個好的視覺體驗，請使用 Chrome/FireFox 預覽（后續會持續優化）。
基本功能
代碼片段收集工具？你說的是 gist 么？這東西有用？昨天我在社交平台發上線預告的時候，有幾個朋友提出來疑問。二話不多說，先去看線上效果。
本應用使用 Jekyll 構建，托管在 github 上，提供了如下基本功能：
- Snippet 按照文件夾儲存分類呈現
- 整合在一起之后，單頁面預覽所有 Snippet
- 提供了快捷的搜索功能
- 每個 Snippet 對應 github 直接編輯的地址
- 提供了一個添加 Snippet 的快捷入口
- Snippet 的語法就是 markdown ，當然也可以跟寫博客似的寫 snipet，嵌入 demo，嵌入說明等。
所以只要有 github 權限，可以直接編輯代碼，立即生效。
使用說明
一個小東西，硬生生開發了十幾個小時。我對很多小細節扣的比較多，雖然自己不是設計出身，但是要求自己設計出來的東西能看、好看，所以常常走簡約路線，復雜的設計搞不定。為了體驗更好一些，我在頁面上添加了幾個小功能：
1. 添加 snippet
進入頁面之后，你可能看清楚了，左上角位置有個不是很明顯的加號，點進去就會跑到 github 頁面，由於是我的倉庫，只有我能夠直接編輯，其他人如果想添加代碼段，需要 fork 過去之后，提交 PR，后續我會開發一個工具，方便其他人直接提交代碼。
新建文件夾十分方便，輸入 /foldName 然后回車，github 就會自動建立一個文件夾，當然，如果文件夾存在，就會是進入文件夾。
2. 搜索 snippet
當我做完之后，發現找到一個自己收藏的 snippet 可真難，於是很自然的開發了一個搜索工具，搜索的范圍是所有 snippet 的 title 名稱，如果匹配到了就展示出來（當然，需要你點擊 Enter 按鈕）。
3. 編輯 snippet
這個快捷入口直達該 snippet 的編輯地址，可以線上編輯，commit 之后立即生效。
這也是我為什么不使用 hexo 本地構建而使用 Jekyll 讓 github 自動構建的目的（hexo 寫插件用的語言是 nodejs，而 jekyll 是 ruby，所以各有利弊，本博客使用的就是 hexo 構建）。如果你喜歡這個 snippet ，可以點擊編輯按鈕左側的小紅心，哈哈~
后續開發
整個應用的開發，相對還是比較倉促的，存在比較多大的問題，所以后續有空也會不斷優化它，直到我和大家用的都爽~ 那么，后續需要做的事情有：
好了，如果大家喜歡這個應用，就去 github 上 start/fork 並且提交你的 snippet 吧！！
貢獻代碼
如果你想貢獻代碼，可以執行如下操作：
- fork barretlee/snippets 倉庫
- 然后執行如下命令
git clone https://github.com/{YOUR_GITHUB_NAME}/snippets.git cd snippets git chechout -b gh-pages cd snippets # 選擇你想提交的文件類型，比如 html cd html touch {YOUR_CONTRIBUTE_FILE_NAME}.snippet
可以使用 markdown 語法。其中，{YOUR_CONTRIBUTE_FILE_NAME}.snippet 的格式為：
--- title: {NAME} --- {CONTENT}
- 提交代碼
git add --all git commit -m "add file html/{YOUR_CONTRIBUTE_FILE_NAME}.snippet" git push origin gh-pages
- 然后在你的 PR 頁面提交一個 PR 到
barretlee/snippets的倉庫
本文轉自我的個人博客：http://www.barretlee.com/blog/2015/09/29/new-application-snippet/