在GitHub網(wǎng)站的導(dǎo)航條上就有Gist子網(wǎng)站的鏈接:?[https://gist.github.com/](https://gist.github.com/)?,在本節(jié)我們就揭開其面紗。
[](https://box.kancloud.cn/2015-07-09_559de645bc10a.png)
圖6-1:GitHub上的Gist鏈接
Gist作為一個(gè)粘貼數(shù)據(jù)的工具,就像 Pastie 網(wǎng)站[[1]](http://pastie.org/)一樣,可以很容易地將數(shù)據(jù)粘貼在Gist網(wǎng)站中,并在其他網(wǎng)頁中引用Gist中粘貼的數(shù)據(jù)。作為GitHub的一個(gè)子網(wǎng)站,很自然地,Gist使用Git版本庫對(duì)粘貼數(shù)據(jù)進(jìn)行維護(hù),這非常酷。
## 6.1.1\. 數(shù)據(jù)的粘貼和引用
進(jìn)入Gist網(wǎng)站的首頁,就會(huì)看到一個(gè)大大的數(shù)據(jù)粘貼對(duì)話框,如圖6-2所示。
[](https://box.kancloud.cn/2015-07-09_559de6474a0d2.png)
圖6-2:Gist網(wǎng)站首頁
只要提供一行簡單的描述、文件名,并粘貼文件內(nèi)容,即可創(chuàng)建一個(gè)新的粘貼。創(chuàng)建新的粘貼時(shí),如果不指定文件名,將由系統(tǒng)自動(dòng)指派。如圖6-3所示。
[](https://box.kancloud.cn/2015-07-09_559de6487345c.png)
圖6-3:創(chuàng)建新的Gist
每一個(gè)新的粘貼稱為一個(gè)Gist,并擁有唯一的URL。如果選擇創(chuàng)建公開的Gist,URL中將使用順序遞增的ID號(hào),如本例創(chuàng)建的Gist的URL地址為:[https://gist.github.com/1202870](https://gist.github.com/1202870)。
若選擇創(chuàng)建私有Gist,URL中則采用20位十六進(jìn)制數(shù)字的ID,例如私密Gist:[https://gist.github.com/78d67164131ec9e08dfe](https://gist.github.com/78d67164131ec9e08dfe)。需要指出的是,私有Gist的私密性并不像GitHub私有版本庫的私密性那么強(qiáng),只是其URL沒有在用戶Gist列表中列出,也不能通過Gist網(wǎng)站搜索到而已。如果用戶知道某私密Gist的URL地址,同樣可以訪問、克隆該私密Gist,甚至創(chuàng)建基于該Gist創(chuàng)建分支(fork)。
當(dāng)一個(gè)粘貼創(chuàng)建完畢后,會(huì)顯示新建立的Gist頁面,如圖6-4所示。
[](https://box.kancloud.cn/2015-07-09_559de64c9de03.png)
圖6-4:新創(chuàng)建的Gist
點(diǎn)擊其中的“embed”(嵌入)按鈕,就會(huì)顯示一段用于嵌入其他網(wǎng)頁的JavaScript代碼,如圖6-5所示。
[](https://box.kancloud.cn/2015-07-09_559de64ee275a.png)
圖6-5:顯示嵌入Java
對(duì)應(yīng)的嵌入JavaScript代碼如下:
~~~
<script src="https://gist.github.com/1202870.js?file=countdown.rb"></script>
~~~
將上面的JavaScript代碼嵌入到網(wǎng)頁(如博客[[2]](http://www.worldhello.net/2011/09/14/2521.html))中,即可在相應(yīng)的網(wǎng)頁中嵌入來自Gist的數(shù)據(jù),并保持語法加亮等功能,如圖6-6所示。
[](https://box.kancloud.cn/2015-07-09_559de6548b006.png)
圖6-6:博客中引用Gist數(shù)據(jù)
## 6.1.2\. Gist背后的Git庫
創(chuàng)建的每一個(gè)Gist的背后都對(duì)應(yīng)著一個(gè)Git版本庫。例如之前創(chuàng)建的ID為1202870的Gist對(duì)應(yīng)的Git版本庫,可以使用兩種協(xié)議進(jìn)行訪問:
* Git協(xié)議:git://gist.github.com/1202870.git
* SSH協(xié)議:git@gist.github.com:1202870.git
可以通過Git命令克隆和操作該版本庫。
* 克隆該Gist對(duì)應(yīng)的版本庫。
~~~
$ git clone git@gist.github.com:1202870.git
$ cd 1202870
~~~
* 查看修改日志。每一次對(duì)Gist中文件的修改對(duì)應(yīng)于一次提交。
~~~
$ git log
commit 993d28a1319eca314ab2e3f4c46882cf328e5ff9
Author: GotGitHub <gotgithub@gmail.com>
Date: Thu Sep 15 15:41:10 2011 +0800
commit 4dd9cfd54e1522d0b62d92dd5f705a61e3fe8778
Author: GotGitHub <gotgithub@gmail.com>
Date: Thu Sep 8 00:46:50 2011 -0700
~~~
* 查看最近一次更改。
~~~
$ git show HEAD
commit 993d28a1319eca314ab2e3f4c46882cf328e5ff9
Author: GotGitHub <gotgithub@gmail.com>
Date: Thu Sep 15 15:41:10 2011 +0800
diff --git a/countdown.rb b/countdown.rb
index a9d747b..9045738 100644
--- a/countdown.rb
+++ b/countdown.rb
@@ -4,4 +4,8 @@
require 'Date'
days=(DateTime.new(2012,10,15)-DateTime.now).ceil
-puts "Maybe #{days} days left."
\ No newline at end of file
+if days >= 0
+ puts "Maybe #{days} days left."
+else
+ puts "Passed for #{days.abs} days."
+end
\ No newline at end of file
~~~
Gist網(wǎng)站并沒有像GitHub網(wǎng)站那樣對(duì)于Git版本庫提供完整的、近乎復(fù)雜的操作界面和工作流支持,而只提供了最基本的操作界面。如圖6-7所示。
[](https://box.kancloud.cn/2015-07-09_559de6558578a.png)
圖6-7:Gist版本庫簡易操作界面
在這個(gè)簡易的Git版本庫操作界面中,左側(cè)是版本庫的簡介、文件預(yù)覽以及在線編輯、下載、加注星標(biāo)(對(duì)感興趣的Gist進(jìn)行收藏,參見博客?[https://github.com/blog/673-starring-gists](https://github.com/blog/673-starring-gists))、版本庫分支(訪問他人創(chuàng)建的Gist時(shí),提供分支功能按鈕。)等相關(guān)操作按鈕。若以Gist創(chuàng)建者登錄,會(huì)在右側(cè)看到他人基于該Gist創(chuàng)建分支的情況,但是并不提供GitHub才有的Pull Request等功能。在界面的右側(cè)還顯示了Gist修訂歷史,和之前通過git?log命令從Git版本庫看到的一樣。
## 6.1.3\. Greasemonkey
Gist除了被用于粘貼數(shù)據(jù)(如代碼塊)并在網(wǎng)頁中引用之外,還被用戶挖掘出了新的應(yīng)用模式,例如用作Greasemonkey腳本的維護(hù)[[5]](https://github.com/blog/302-gist-for-greasemonkey)。
Greasemonkey[[6]](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/)或類似插件為瀏覽器提供用戶端JavaScript擴(kuò)展功能,最早出現(xiàn)于FireFox瀏覽器中。其他瀏覽器也陸續(xù)增加了對(duì)用戶端JavaScript的支持,如Safari的 NinjaKit[[7]](http://ss-o.net/safari/extension/NinjaKit.safariextz)插件,IE的Trixie[[8]](http://www.bhelpuri.net/Trixie/)插件,以及Chrome的Greasemetal插件(版本4之后的Chrome內(nèi)置了Greasemonkey類似功能,無需額外插件。)。關(guān)于如何在瀏覽器中安裝并啟用相應(yīng)的插件,參照相關(guān)插件網(wǎng)站的介紹,在此不做過多敘述。
當(dāng)瀏覽器安裝了 Greasemonkey 或類似插件之后,當(dāng)訪問擴(kuò)展名為.user.js的URL時(shí),會(huì)將該URL指向的JavaScript腳本安裝在瀏覽器中,當(dāng)訪問指定的網(wǎng)址時(shí)會(huì)自動(dòng)調(diào)用相應(yīng)的JavaScript腳本,修改相關(guān)網(wǎng)頁內(nèi)容或添加特效等等。
我針對(duì)《Git權(quán)威指南》官網(wǎng)的測試網(wǎng)頁寫了一個(gè)Greasemonkey示例腳本,可以展示用戶端JavaScript的魔法,這個(gè)用戶端JavaScript腳本保存在Gist中:[https://gist.github.com/1084591](https://gist.github.com/1084591),如圖6-8所示。
[](https://box.kancloud.cn/2015-07-09_559de6566030c.png)
圖6-8:保存Greasemonkey用戶端腳本的Gist
該Greasemonkey腳本的文件名為click_more.user.js,該文件的文件頭使用特殊的注釋語句為Greasemonkey提供相關(guān)的安裝和注冊信息,內(nèi)容如下(為方便描述添加了行號(hào)):
~~~
1 // ==UserScript==
2 // @name Click more for toggle
3 // @namespace gotgit
4 // @description Add a toogle effect at the location where anchor with a click-more css.
5 // @include http://www.worldhello.net/gotgit/demo*
6 // @include http://gotgit.github.com/gotgit/demo*
7 // @include http://www.ossxp.com/doc/gotgit/demo*
8 // @require http://code.jquery.com/jquery-1.6.2.min.js
9 // ==/UserScript==
~~~
其中第5、6、7行三條include語句限定了此用戶端JavaScript腳本的應(yīng)用范圍,即只針對(duì)指定的URL(使用通配符)執(zhí)行該腳本。第8行設(shè)定腳本依賴,即該腳本依賴jQuery,會(huì)在運(yùn)行前到指定的URL地址加載jQuery腳本。
在安裝該腳本前,先用瀏覽器訪問網(wǎng)址[http://www.worldhello.net/gotgit/demo.html](http://www.worldhello.net/gotgit/demo.html),看看不加載用戶端JavaScript腳本時(shí)網(wǎng)頁的模樣。該網(wǎng)頁中包含一個(gè)長長的網(wǎng)上書店列表,如圖6-9所示。
[](https://box.kancloud.cn/2015-07-09_559de658518b9.png)
圖6-9:應(yīng)用用戶端JavaScript腳本前的網(wǎng)頁內(nèi)容
接下來開始安裝該用戶端JavaScript腳本。安裝非常簡單,只要點(diǎn)擊圖6-8的Gist當(dāng)中的腳本文件對(duì)應(yīng)的“raw”鏈接,即點(diǎn)擊腳本文件原始內(nèi)容鏈接[[10]](https://gist.github.com/raw/1084591/73c3e4dfc827732241ca753fe7bb985c14c9d7ab/click_more.user.js)即可開啟安裝。這是因?yàn)樵揢RL以.user.js結(jié)尾,會(huì)被Greasemonkey(或類似插件)識(shí)別并安裝,如圖6-10是Greasemonkey彈出的用戶端腳本安裝界面。
[](https://box.kancloud.cn/2015-07-09_559de65ae95d1.png)
圖6-10:安裝用戶端JavaScript腳本
用戶端腳本安裝完畢后,再訪問同樣的測試網(wǎng)頁[http://www.worldhello.net/gotgit/demo.html](http://www.worldhello.net/gotgit/demo.html),會(huì)發(fā)現(xiàn)網(wǎng)頁中出現(xiàn)了一個(gè)名為“更多”的可點(diǎn)擊鏈接,長長的網(wǎng)上書店列表不見了。如圖6-11所示。
[](https://box.kancloud.cn/2015-07-09_559de65cd5e01.png)
圖6-11:應(yīng)用用戶端JavaScript腳本后的網(wǎng)頁內(nèi)容
如果查看網(wǎng)頁源碼,會(huì)發(fā)現(xiàn)該網(wǎng)頁中根本沒有包含和調(diào)用任何JavaScript腳本,只是在頁面源碼中包含著一個(gè)沒有任何實(shí)質(zhì)輸出的標(biāo)簽:
~~~
<p><a class="click-more"></a></p>
~~~
實(shí)際上正是這個(gè)特殊的標(biāo)簽被Greasemonkey所加載的用戶端腳本識(shí)別,為HTML網(wǎng)頁添加了特效。
## 6.1.4\. 命令行操作Gist
GitHub開發(fā)者還寫了一個(gè)名為gist的命令行工具對(duì)Gist進(jìn)行操作,地址見[https://github.com/defunkt/gist](https://github.com/defunkt/gist)。
該工具使用Ruby開發(fā),對(duì)兩個(gè)特定的Git風(fēng)格的配置變量進(jìn)行如下設(shè)置后,即可實(shí)現(xiàn)在命令行中自動(dòng)以特定用戶身份登錄操作Gist。
~~~
$ git config --global github.user "your-github-username"
$ git config --global github.token "your-github-token"
~~~
其中g(shù)ithub.token中保存的是用戶的API TOKEN,這在“2.1 創(chuàng)建GitHub賬號(hào)”一節(jié)有過介紹。
使用gist命令行工具創(chuàng)建新的Gist非常簡單。
* 創(chuàng)建包含一個(gè)文件(如script.py)的Gist,使用如下命令。
~~~
$ gist script.py
~~~
* 創(chuàng)建包含多個(gè)文件的Gist,使用類似如下的命令。
~~~
$ gist script.js notes.txt
~~~
如果對(duì)命令行操作方式感興趣,參考gist工具網(wǎng)站的README文件。
- 前言
- 1. 探索GitHub
- 1.1. 什么是GitHub
- 1.2. GitHub亮點(diǎn)
- 1.3. 探索GitHub
- 2. 加入GitHub
- 2.1. 創(chuàng)建GitHub賬號(hào)
- 2.2. 瀏覽托管項(xiàng)目
- 2.3. 社交網(wǎng)絡(luò)
- 3. 項(xiàng)目托管
- 3.1. 創(chuàng)建新項(xiàng)目
- 3.2. 操作版本庫
- 3.3. 公鑰認(rèn)證管理
- 3.4. 版本庫鉤子擴(kuò)展
- 3.5. 建立主頁
- 4. 工作協(xié)同
- 4.1. Fork + Pull模式
- 4.2. 共享版本庫
- 4.3. 組織和團(tuán)隊(duì)
- 4.4. 代碼評(píng)注
- 4.5. 缺陷跟蹤
- 4.6. 維基
- 5. 付費(fèi)服務(wù)
- 5.1. GitHub收費(fèi)方案
- 5.2. GitHub企業(yè)版
- 6. GitHub副產(chǎn)品
- 6.1. GitHub:Gist
- 6.2. 其他版本控制工具支持
- 6.3. 客戶端工具
- 6.4. 其他
- 7. 附錄:輕量級(jí)標(biāo)記語言
- 貢獻(xiàn)者列表
