Snippet 是一款代碼片段收集工具，經(jīng)過一天三夜的開發(fā)終于上線了。

• 應(yīng)用地址：snippets.barretlee.com
• 源碼地址：barretlee/snippets

由于使用原生 JS 開發(fā)，效果利用 CSS3 實(shí)現(xiàn)，所以如果想有一個好的視覺體驗(yàn)，請使用 Chrome/FireFox 預(yù)覽（后續(xù)會持續(xù)優(yōu)化）。

?

基本功能

代碼片段收集工具？你說的是 gist 么？這東西有用？昨天我在社交平臺發(fā)上線預(yù)告的時候，有幾個朋友提出來疑問。二話不多說，先去看線上效果。

本應(yīng)用使用 Jekyll 構(gòu)建，托管在 github 上，提供了如下基本功能：

• Snippet 按照文件夾儲存分類呈現(xiàn)
• 整合在一起之后，單頁面預(yù)覽所有 Snippet
• 提供了快捷的搜索功能
• 每個 Snippet 對應(yīng) github 直接編輯的地址
• 提供了一個添加 Snippet 的快捷入口
• Snippet 的語法就是 markdown ，當(dāng)然也可以跟寫博客似的寫 snipet，嵌入 demo，嵌入說明等。

所以只要有 github 權(quán)限，可以直接編輯代碼，立即生效。

使用說明

一個小東西，硬生生開發(fā)了十幾個小時。我對很多小細(xì)節(jié)扣的比較多，雖然自己不是設(shè)計(jì)出身，但是要求自己設(shè)計(jì)出來的東西能看、好看，所以常常走簡約路線，復(fù)雜的設(shè)計(jì)搞不定。為了體驗(yàn)更好一些，我在頁面上添加了幾個小功能：

1. 添加 snippet

進(jìn)入頁面之后，你可能看清楚了，左上角位置有個不是很明顯的加號，點(diǎn)進(jìn)去就會跑到 github 頁面，由于是我的倉庫，只有我能夠直接編輯，其他人如果想添加代碼段，需要 fork 過去之后，提交 PR，后續(xù)我會開發(fā)一個工具，方便其他人直接提交代碼。

新建文件夾十分方便，輸入 /foldName 然后回車，github 就會自動建立一個文件夾，當(dāng)然，如果文件夾存在，就會是進(jìn)入文件夾。

2. 搜索 snippet

當(dāng)我做完之后，發(fā)現(xiàn)找到一個自己收藏的 snippet 可真難，于是很自然的開發(fā)了一個搜索工具，搜索的范圍是所有 snippet 的 title 名稱，如果匹配到了就展示出來（當(dāng)然，需要你點(diǎn)擊 Enter 按鈕）。

3. 編輯 snippet

這個快捷入口直達(dá)該 snippet 的編輯地址，可以線上編輯，commit 之后立即生效。

這也是我為什么不使用 hexo 本地構(gòu)建而使用 Jekyll 讓 github 自動構(gòu)建的目的（hexo 寫插件用的語言是 nodejs，而 jekyll 是 ruby，所以各有利弊，本博客使用的就是 hexo 構(gòu)建）。如果你喜歡這個 snippet ，可以點(diǎn)擊編輯按鈕左側(cè)的小紅心，哈哈~

后續(xù)開發(fā)

整個應(yīng)用的開發(fā)，相對還是比較倉促的，存在比較多大的問題，所以后續(xù)有空也會不斷優(yōu)化它，直到我和大家用的都爽~ 那么，后續(xù)需要做的事情有：

• 響應(yīng)式預(yù)覽頁面
• 收集 snippet 的工具
• 補(bǔ)充更多類型 snippet，提升完整度
• github 訪問較慢，托管到 gitcafe 或者 coding

好了，如果大家喜歡這個應(yīng)用，就去 github 上 start/fork 并且提交你的 snippet 吧！！

貢獻(xiàn)代碼

如果你想貢獻(xiàn)代碼，可以執(zhí)行如下操作：

• fork barretlee/snippets 倉庫
• 然后執(zhí)行如下命令

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 的倉庫
  
  

本文轉(zhuǎn)自我的個人博客：http://www.barretlee.com/blog/2015/09/29/new-application-snippet/

?

總結(jié)

以上是生活随笔為你收集整理的新应用上线 Snippet的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。