Sites插入Gist程式碼上彩列表


  • 嵌入Gist介紹
  • 整體介紹請看<github-gist-可以做什麼> (譯自原文連結),其中這裡要談的是,可以把 gist 所代管的程式碼直接嵌進網頁裡,該程式源碼會自動被 Javascript 包覆成 js 檔,網頁裡除了能看到程式碼之外,還包含行號和 SyntaxHighlight 亮麗上彩等效果,就像GitHub網頁裡所看到的一樣,很是如意。
<script src="https://gist.github.com/username/gist-id.js"></script>
  這裡舉一個實例:<Arduino 藍芽自走車>直接把程式碼 gist 嵌進網頁裡
  • 已經處理.
  • ※已經處理.實證可用(外來Gadget)- <Gadget to embed gist on Google Site.>
    使用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網頁中的操作流程(以如何建立如圖一為目標)
    1. 首先要在編輯頁面上點選【插入】→ 選擇【更多小工具】
    2. aa

    3. 於新出現如下列畫面裡點擊【依據網址新增小工具】
    4. aa

    5. 於新出現如下列畫面上點擊依據網址新增小工具】,接著小工具網址貼在如新畫面裡網址欄位並點選新增
    6. aa

    7. 至此請於Gist:https://gist.github.com/azam/2e35a393ee2425f40c6d04de4ce5926 畫面,並複製要Share(分享)的引用碼片段的 <username/gist-id> 編號
    8. aa

    9. 回到Google Site將先前取得的引用碼片段編號填入
    10. 將圖二:在小工具裡Gist#欄位填入Gist之<username/gist-id>, 本範例為: azam/2e35a393ee2425f40c6d04de4ce5926b
    11. 適度調整大小,並斟酌勾選必要時為小工具加上捲軸
    12. aa
    13. 完成後按【確定】即可在畫面上看到Google 小工具
    14. 此時 Gadget小工具處於編輯狀態其畫面會呈空白

    15. 將此編輯頁面儲存,即可完成作業,即可看到網頁裡此Gadget畫面有如前面圖一所示。

    16. 然而經常是該Gadget面展現的效果並不如人意,這又要再次進入編輯模式,並點擊此Gadget空白,則會在該Gadget底下出現一排工作列(如下圖所示),如只是大小再調整,那就點擊如下工作列最左邊的內容按鈕,也就會看到如前面圖二畫面,這時又回到步驟 6,並適度調整大小,作業流程再往下走,如此循環直到合意為止。
    17. aa



    1.已經處理.過時勿用(外來Gadget)- <如何用外來Gadget把GitHub 的Gists的範例code鑲嵌在Google Site中>其檔案(gist-github-gadget.xml)下載網址列於網頁,但已不復存在,若以該檔名google之,則有許多發現,有待進一步驗證與調整。此Gadget XML檔於下個例子中現身
    2.已經處理.過時勿用(外來Gadget)- <How to embed gist samples in Google Sites.>使用Gadget: http://gadgets.derquinse.net/gist-github/gist-github-gadget.xml


    Comments