mozilla
您的搜尋結果

    製作即時摘要

    即時摘要來源(microsummary generator)內含一組從網頁中製出即時摘要的指令,而網頁能在 <head> 元素中放入 <link rel="microsummary"> 以指定適用的摘要來源。即時摘要來源檔案中如含有適用頁面列表,則也可以獨立安裝。

    在這份教學文件中,我們將建立 Spread Firefox 首頁的即時摘要來源,藉以顯示目前 Firefox 的總下載數。 (例: Fx 下載數: 174475447)。

    接下來我們會用一份 XSLT 樣式表將該網頁轉換為即時摘要、指定此摘要來源的適用頁面並了解摘要來源傳佈方式,讓使用者能下載及安裝。在這份文件中每階段新增的程式碼會以粗體顯示,方便您辨識。

    開始

    摘要來源是 XML 文件的一種,而其根元素為 <generator>、名稱空間 (namespace) 需指定為 http://www.mozilla.org/microsummaries/0.1,所以要建立一份摘要來源就先得在空的純文字檔中放入 XML 宣告及空的 <generator> 標籤:

    <?xml version="1.0" encoding="UTF-8"?>
    <generator xmlns="http://www.mozilla.org/microsummaries/0.1">
    </generator>
    

    命名

    每個即時摘要來源都必須有個名字,該名稱以 name 屬性記載、明確說明此摘要來源所建立的摘要主題。由於我們要建立的摘要來源將顯示 Firefox 總下載數,所以便命名為「Firefox 下載計數」:

    <?xml version="1.0" encoding="UTF-8"?>
    <generator xmlns="http://www.mozilla.org/microsummaries/0.1"
               name="Firefox 下載計數">
    </generator>
    

    加上 XSLT 樣式表

    即時摘要來源檔案中必須含有一份 XSLT 樣式表,以便將網頁依樣式表設定轉換為即時摘要。同一份資料碰上不同的 XSLT 樣式便能轉換為「相貌」不同的文件,這便是 XSLT 威力所在。

    以下示範以 <template> 元素在摘要來源中添加 XSLT 樣式表:

    <?xml version="1.0" encoding="UTF-8"?>
    <generator xmlns="http://www.mozilla.org/microsummaries/0.1"
               name="Firefox 下載計數">
      <template>
        <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
        </transform>
      </template>
    </generator>
    

    即時摘要來源中可以放任何形式的 XSLT,設定為產生超文件也行,但 Firefox 目前只會顯示純文字內容。

    設定輸出格式

    由於 XSLT 樣式表會產岀文字摘要,所以 XSLT 的 <output> 元素需設定如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <generator xmlns="http://www.mozilla.org/microsummaries/0.1"
               name="Firefox 下載計數">
      <template>
        <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
          <output method="text"/>
        </transform>
      </template>
    </generator>
    

    使用 XSLT <template>

    XSLT 處理器會分別比對 XSLT 樣式表中每組 <template> 元素及文件中的節點。當 <template>match 屬性設定與節點相符,處理器便依設定轉換文件。

    這種處理方式可以循序檢查網頁中每個節點,依據設定條件顯示內容,非常有用。不過本例只是要顯示 Spread Firefox 網站上的即時摘要,僅用一個 <template> 元素來找一回根元素下的內容即可:

    <?xml version="1.0" encoding="UTF-8"?>
    <generator xmlns="http://www.mozilla.org/microsummaries/0.1"
               name="Firefox 下載計數">
      <template>
        <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
          <output method="text"/>
          <template match="/">
          </template>
        </transform>
      </template>
    </generator>
    

    加上下載次數

    若想將下載次數放到 XSLT 輸出的文件中,我們得在 XSLT 中的 template 元素加上 <value-of> 元素,而此 template 元素的 select 屬性中指定的 XPath 必須指向涵括計數器的節點。

    XPath 是用來指定 HTML/XML 文件節點的語言,也有基本的節點內容處理函式。要得知能指向此節點的 XPath 陳述式,最輕鬆的方法就是使用 XPath Checker 擴充套件

    安裝 XPath Checker 並重新啟動 Firefox 之後,先到 Spread Firefox 首頁去,找到 Firefox 下載次數(網頁右邊欄最下方的數字),在上頭按下右鍵,於快捷選單中選擇 View XPath。此時 XPath Checker 會開啟一個新視窗,其中 XPath 欄位包含方才所選節點的 XPath 陳述式: id('download-count')

    在 XSLT 的 <template> 元素中加上一個 <value-of> 元素,其中 select 屬性便設為此 XPath 陳述式,如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <generator xmlns="http://www.mozilla.org/microsummaries/0.1"
               name="Firefox 下載計數">
      <template>
        <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
          <output method="text"/>
          <template match="/">
            <value-of select="id('download-count')"/>
          </template>
        </transform>
      </template>
    </generator>
    

    加上文字

    為了在即時摘要中加上 Fx 下載數: 這段文字,我們必須將 <text> 元素放到 <template> 元素中文字該出現的地方。以下範例便放進一個內容為 Fx 下載數:<text> 元素:

    <?xml version="1.0" encoding="UTF-8"?>
    <generator xmlns="http://www.mozilla.org/microsummaries/0.1"
               name="Firefox 下載計數">
      <template>
        <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
          <output method="text"/>
          <template match="/">
            <text>Fx 下載數: </text>
            <value-of select="id('download-count')"/>
          </template>
        </transform>
      </template>
    </generator>
    

    此處須留心 XSLT 標籤之間的空白字元並不會出現在輸出結果中,不像 HTML 會合併顯示為一個空格,所以要在字串後多加上一個空白以便區隔下載次數及字串。

    這麼一來,這個轉換 Spread Firefox 首頁為即時摘要的 XSLT 樣式便完成了。

    指定摘要來源的適用範圍

    摘要來源的轉換樣式已大工告成,接下來要指定此樣式適用的網頁。如果我們是 Spread Firefox 的網站管理員,可以在網頁上的 <head> 元素中直接加入 <link rel="microsummary"> 標籤,以便指定此網頁對應的摘要來源:

    <head>
      ...
      <link rel="microsummary" href="path/to/our/generator.xml">
    </head>
    

    不過,由於我們並非該站網管,所以就得在檔案中規定此摘要來源的適用網頁,然後把摘要來源檔放到網路上供人下載。為了要指定適用網頁範圍,我們在 <generator> 元素中放上 <pages> 元素:

    <?xml version="1.0" encoding="UTF-8"?>
    <generator xmlns="http://www.mozilla.org/microsummaries/0.1"
               name="Firefox 下載計數">
      <template>
        <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
          <output method="text"/>
          <template match="/">
            <text>Fx 下載數: </text>
            <value-of select="id('download-count')"/>
          </template>
        </transform>
      </template>
      <pages>
      </pages>
    </generator>
    

    <pages> 元素中可以放進多個 <include><exclude> 元素。元素正如其名,<include> 元素能以規則運算式(regular expression)指定適用網頁,而 <exclude> 元素則以規則運算式指定不適用網頁。

    若無另加規定,則摘要來源預設不適用所有網頁。也就是說,你必須明確指定摘要來源之適用範圍,但如無必要可不必以 <exclude> 排除其他網頁。

    此處加上個 <include> 元素指定 Spread Firefox 首頁為適用範圍:

    <?xml version="1.0" encoding="UTF-8"?>
    <generator xmlns="http://www.mozilla.org/microsummaries/0.1"
               name="Firefox 下載計數">
      <template>
        <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
          <output method="text"/>
          <template match="/">
            <text>Fx 下載數: </text>
            <value-of select="id('download-count')"/>
          </template>
        </transform>
      </template>
      <pages>
        <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
      </pages>
    </generator>
    

    不熟悉規則運算式的話,可以參考建立即時摘要的規則運算式一文。

    安裝即時摘要來源

    現在萬事俱備,只差讓人能下載此摘要來源的機制。我們得先將摘要來源檔上傳到網路,接著再以一段 JavaScript 連結呼叫 Firefox 的 window.sidebar.addMicrosummaryGenerator() 方法以便下載安裝。

    舉例而言,如果摘要來源檔的位置在 http://people.mozilla.com/~myk/micro...-generator.xml,而我們希望使用者能從 http://people.mozilla.com/~myk/micro...ial/index.html 上下載安裝,就應該在 index.html 網頁上加上此段程式碼:

     <button onclick="window.sidebar.addMicrosummaryGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">安裝 SpreadFirefox 首頁即時摘要來源!</button>
    

    不過,如果是不支援即時摘要的瀏覽器,按下此按鈕之後會產生 JavaScript 錯誤,所以我們應該幫使用者點忙、檢查他們的瀏覽器是否支援即時摘要,若不支援則顯示說明訊息:

    <script>
      const warning = "不好意思ㄋㄟ,你得用支援即時摘要的瀏覽器 (如 Firefox 2.0) 才能安裝這玩意喔!";
      function addGenerator(url) {
        if (typeof window.sidebar == "object" &&
            typeof window.sidebar.addMicrosummaryGenerator == "function")
          window.sidebar.addMicrosummaryGenerator(url);
        else
         alert(warning);
      }
    </script>
    <button onclick="addGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">安裝 SpreadFirefox 首頁即時摘要來源!</button>
    

    附帶一提:

    • 由於 bug 341283 的關係,目前 addMicrosummaryGenerator() 無法支援相對位置的 URL。
    • 如果存放摘要來源檔的伺服器無法送出正確的 MIME Type (例: Google Pages 的空間),則摘要來源將無效,您可以在網址列輸入 javascript: 來查閱錯誤。
    • 如果摘要來源檔案中的 XML 或 XSLT 格式有誤,則摘要來源將無效,一樣可以在網址列輸入 javascript: 來查閱錯誤。

    結語

    現在你應該瞭解怎麼製作能顯示 Firefox 下載次數的即時摘要了。試著將 Spread Firefox 首頁存為書籤,然後在新增書籤對話方塊中按下名稱下拉式選單、選擇即時標題之後的項目即可。

    其他關於即時摘要的相關資訊,可以參考 Microsummaries 主題頁

    Document Tags and Contributors

    標籤: 
    Contributors to this page: BobChao, shyangs, FredB
    最近更新: FredB,