- 嵌入Gist介紹
整體介紹請看<github-gist-可以做什麼> (譯自原文連結),其中這裡要談的是,可以把 gist 所代管的程式碼直接嵌進網頁裡,該程式源碼會自動被 Javascript 包覆成 js 檔,網頁裡除了能看到程式碼之外,還包含行號和 SyntaxHighlight 亮麗上彩等效果,就像GitHub網頁裡所看到的一樣,很是如意。
<script src="https://gist.github.com/username/gist-id.js"></script>
- <在 gist 被js包覆的程式碼> 但是上到作者的網頁裡卻找不到這程式碼,如直接輸入該檔完整的URL卻能看到該js文檔,被GitHub Gist處理後的js包覆(含行號等)如下:
<script src="https://gist.github.com/pinglunliao/9cad0ca23f5df0ef5aee8869444de8a5.js"></script>
已經處理.
使用Gadget: https://cdn.rawgit.com/azam/2e35a393ee2425f40c6d04de4ce5926b/raw/5389dc5ce442eca1c517cfe12132a0b90553e965/gist4sites.xml
其XML文檔內容列表如下:
Embed Gist Gadget gist4sites.xml
圖一:內嵌Gist源碼之小工具(Gadget)XML文檔(如何做到的?請見後文見分曉)
以下是新的Gadget有新的兩段式URL輸入法,就以前述<Arduino 藍芽自走車>為例,其Gist之URL,除了最後的 .js 不考略外,前一段是https://gist.github.com,後一段則是pinglunliao/9cad0ca23f5df0ef5aee8869444de8a5,我們在新的Gadget設定內容之Gist#空白欄位處填入後一段字串就行了,但引用Gadget的XML檔其URL過長,當思改進法子。
圖二:在小工具裡Gist#欄位填入Gist之<username/gist-id>
改善:直接進入【管理協作平台】>【附件】,接著點擊上面的【上傳】鈕就可以能上傳gist4sites.xml檔案到Google Sites
回到剛才已經上傳Gadget其XML的載點位置,網址的部分我們要透過複製連結網址來取得,移動一下你的滑鼠到檔案下載的箭頭上然後按右鍵【複製連結網址】,這個時候應該會得到下列一串URL。
https://sites.google.com/a/alepapa.org/digit100/gist4sites.xml?attredirects=0&d=1
後面多出了?attredirects=0&d=1的部分千萬要拿掉,所以正確要引用的Gadget>網址應該是要長這樣
https://sites.google.com/a/alepapa.org/digit100/gist4sites.xml
經實際測試,十分成功
把Gist的程式碼鑲嵌在Google Sites網頁中的操作流程(以如何建立如圖一為目標):
- 首先要在編輯頁面上點選【插入】→ 選擇【更多小工具】
aa
- 於新出現如下列畫面裡點擊【依據網址新增小工具】
aa
- 於新出現如下列畫面上點擊【依據網址新增小工具】,接著將小工具網址貼在如新畫面裡網址欄位並點選【新增】
aa
- 至此請於Gist:https://gist.github.com/azam/2e35a393ee2425f40c6d04de4ce5926 畫面,並複製要Share(分享)的引用碼片段的 <username/gist-id> 編號
aa
- 回到Google Site將先前取得的引用碼片段編號填入
將圖二:在小工具裡Gist#欄位填入Gist之<username/gist-id>, 本範例為: azam/2e35a393ee2425f40c6d04de4ce5926b
- 適度調整大小,並斟酌勾選必要時為小工具加上捲軸
aa
- 完成後按【確定】鈕,即可在畫面上看到Google 小工具
此時 Gadget小工具處於編輯狀態其畫面會呈空白
- 將此編輯頁面儲存,即可完成作業,即可看到網頁裡此Gadget畫面有如前面圖一所示。
- 然而經常是該Gadget畫面展現的效果並不如人意,這又要再次進入編輯模式,並點擊此Gadget空白畫面,則會在該Gadget底下出現一排工作列(如下圖所示),如只是畫面大小再調整,那就點擊如下圖工作列最左邊的內容按鈕,也就會看到如前面圖二畫面,這時又回到步驟 6,並適度調整大小,作業流程再往下走,如此循環直到合意為止。
aa
|
|