舊文件

此處文件僅供參考，請自行考量時效性與適用程度，其他庫藏文件請參考文件頁面；
我們亟需您的協助，進行共筆系統搬移、及文件整理工作，詳情請查閱參與我們。

「製作即時摘要」修訂間的差異

出自 MozTW Wiki

小 （→‎Adding Text）
（→‎範例）
 
(未顯示由 1 位使用者於中間所作的 4 次修訂)
行 1： 行 1：
−
本文編譯自 http://developer.mozilla.org/en/docs/Creating_a_Microsummary
+
{{MDC|製作即時摘要}}
  
 
----
 
----
行 5： 行 5：
 
即時摘要來源 (microsummary generator) 內含一組從網頁中製出即時摘要的指令，而網頁能在 <code><head></code> 元素中放入 <code><link rel="microsummary"></code> 以指定適用的摘要來源。即時摘要來源檔案中如含有適用頁面列表，則也可以獨立安裝。
 
即時摘要來源 (microsummary generator) 內含一組從網頁中製出即時摘要的指令，而網頁能在 <code><head></code> 元素中放入 <code><link rel="microsummary"></code> 以指定適用的摘要來源。即時摘要來源檔案中如含有適用頁面列表，則也可以獨立安裝。
  
−
在這份教學文件中，我們將建立 [http://www.spreadfirefox.com/ Spread Firefox 首頁]的即時摘要來源，藉以顯示目前 Firefox 的總下載數。 (例： <cite>174475447 Fx downloads</cite>)。
+
在這份教學文件中，我們將建立 [http://www.spreadfirefox.com/ Spread Firefox 首頁]的即時摘要來源，藉以顯示目前 Firefox 的總下載數。 (例： <cite>Fx 下載數: 174475447</cite>)。
  
 
接下來我們會用一份 XSLT 樣式表將該網頁轉換為即時摘要、指定此摘要來源的適用頁面並了解摘要來源傳佈方式，讓使用者能下載及安裝。在這份文件中每階段新增的程式碼會以粗體顯示，方便您辨識。
 
接下來我們會用一份 XSLT 樣式表將該網頁轉換為即時摘要、指定此摘要來源的適用頁面並了解摘要來源傳佈方式，讓使用者能下載及安裝。在這份文件中每階段新增的程式碼會以粗體顯示，方便您辨識。
行 19： 行 19：
 
= 命名 =
 
= 命名 =
  
−
每個即時摘要來源都必須有個名字，該名稱以 <code>name</code> 屬性記載、明確說明此摘要來源所建立的摘要主題。由於我們要建立的摘要來源將顯示 Firefox 總下載數，所以便命名為「Firefox Download Count」：
+
每個即時摘要來源都必須有個名字，該名稱以 <code>name</code> 屬性記載、明確說明此摘要來源所建立的摘要主題。由於我們要建立的摘要來源將顯示 Firefox 總下載數，所以便命名為「Firefox 下載計數」：
  
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
−
             '''name="Firefox Download Count"'''>
+
             '''name="Firefox 下載計數"'''>
 
  </generator>
 
  </generator>
  
行 34： 行 34：
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
−
             name="Firefox Download Count">
+
             name="Firefox 下載計數">
 
   '''<template>'''
 
   '''<template>'''
 
     '''<transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">'''
 
     '''<transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">'''
行 49： 行 49：
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
−
             name="Firefox Download Count">
+
             name="Firefox 下載計數">
 
   <template>
 
   <template>
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
行 65： 行 65：
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
−
             name="Firefox Download Count">
+
             name="Firefox 下載計數">
 
   <template>
 
   <template>
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
行 81： 行 81：
 
XPath 是用來指定 HTML/XML 文件節點的語言，也有基本的節點內容處理函式。要得知能指向此節點的 XPath 陳述式，最輕鬆的方法就是使用 [https://addons.mozilla.org/firefox/1095/ XPath Checker 擴充套件]。
 
XPath 是用來指定 HTML/XML 文件節點的語言，也有基本的節點內容處理函式。要得知能指向此節點的 XPath 陳述式，最輕鬆的方法就是使用 [https://addons.mozilla.org/firefox/1095/ XPath Checker 擴充套件]。
  
−
安裝並重新啟動 Firefox 之後，先到 [http://www.spreadfirefox.com/ Spread Firefox 首頁]去，找到 Firefox 下載次數（網頁右邊欄最下方的數字)，在上頭按下右鍵，於快捷選單中選擇 <cite>View XPath</cite>。此時 XPath Checker 會開啟一個新視窗，其中 <cite>XPath</cite> 欄位包含方才所選節點的 XPath 陳述式： <cite>id('download-count')</cite> 。
+
安裝 XPath Checker 並重新啟動 Firefox 之後，先到 [http://www.spreadfirefox.com/ Spread Firefox 首頁]去，找到 Firefox 下載次數（網頁右邊欄最下方的數字)，在上頭按下右鍵，於快捷選單中選擇 <cite>View XPath</cite>。此時 XPath Checker 會開啟一個新視窗，其中 <cite>XPath</cite> 欄位包含方才所選節點的 XPath 陳述式： <cite>id('download-count')</cite> 。
  
 
在 XSLT 的 <code><template></code> 元素中加上一個 <code><value-of></code> 元素，其中 <code>select</code> 屬性便設為此 XPath 陳述式，如下：
 
在 XSLT 的 <code><template></code> 元素中加上一個 <code><value-of></code> 元素，其中 <code>select</code> 屬性便設為此 XPath 陳述式，如下：
行 87： 行 87：
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
−
             name="Firefox Download Count">
+
             name="Firefox 下載計數">
 
   <template>
 
   <template>
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
行 100： 行 100：
 
= 加上文字 =
 
= 加上文字 =
  
−
為了在即時摘要中加上 <cite>Fx downloads</cite> 這段文字，我們必須將 <code><text></code> 元素放到 <code><template></code> 元素中文字該出現的地方。以下範例便放進一個內容為 <cite>Fx downloads</cite> 的 <code><text></code> 元素：
+
為了在即時摘要中加上 <cite>Fx 下載數:</cite> 這段文字，我們必須將 <code><text></code> 元素放到 <code><template></code> 元素中文字該出現的地方。以下範例便放進一個內容為 <cite>Fx 下載數:</cite> 的 <code><text></code> 元素：
  
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
−
             name="Firefox Download Count">
+
             name="Firefox 下載計數">
 
   <template>
 
   <template>
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
 
       <output method="text"/>
 
       <output method="text"/>
 
       <template match="/">
 
       <template match="/">
 +
        '''<text>Fx 下載數: </text>'''
 
         <value-of select="id('download-count')"/>
 
         <value-of select="id('download-count')"/>
−
        '''<text> Fx downloads</text>'''
 
 
       </template>
 
       </template>
 
     </transform>
 
     </transform>
行 116： 行 116：
 
  </generator>
 
  </generator>
  
−
此處須留心 XSLT 標籤之間的空白字元並不會出現在輸出結果中，不像 HTML 會合併顯示為一個空格，所以要在字串前多加上一個空白以便區隔下載次數及字串。
+
此處須留心 XSLT 標籤之間的空白字元並不會出現在輸出結果中，不像 HTML 會合併顯示為一個空格，所以要在字串後多加上一個空白以便區隔下載次數及字串。
  
 
這麼一來，這個轉換 Spread Firefox 首頁為即時摘要的 XSLT 樣式便完成了。
 
這麼一來，這個轉換 Spread Firefox 首頁為即時摘要的 XSLT 樣式便完成了。
行 133： 行 133：
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
 
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
−
             name="Firefox Download Count">
+
             name="Firefox 下載計數">
 
   <template>
 
   <template>
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
 
       <output method="text"/>
 
       <output method="text"/>
 
       <template match="/">
 
       <template match="/">
 +
        <text>Fx 下載數: </text>
 
         <value-of select="id('download-count')"/>
 
         <value-of select="id('download-count')"/>
−
        <text> Fx downloads</text>
 
 
       </template>
 
       </template>
 
     </transform>
 
     </transform>
行 154： 行 154：
  
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <?xml version="1.0" encoding="UTF-8"?>
−
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>" name="Firefox Download Count">
+
  <generator xmlns="<nowiki>http://www.mozilla.org/microsummaries/0.1</nowiki>"
 +
            name="Firefox 下載計數">
 
   <template>
 
   <template>
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
 
     <transform xmlns="<nowiki>http://www.w3.org/1999/XSL/Transform</nowiki>" version="1.0">
 
       <output method="text"/>
 
       <output method="text"/>
 
       <template match="/">
 
       <template match="/">
 +
        <text>Fx 下載數: </text>
 
         <value-of select="id('download-count')"/>
 
         <value-of select="id('download-count')"/>
−
        <text> Fx downloads</text>
 
 
       </template>
 
       </template>
 
     </transform>
 
     </transform>
行 190： 行 191：
 
  '''</script>'''
 
  '''</script>'''
 
  '''<a href="javascript:addGenerator('<nowiki>http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml</nowiki>')">安裝 Spread Firefox 首頁即時摘要來源！</a>'''
 
  '''<a href="javascript:addGenerator('<nowiki>http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml</nowiki>')">安裝 Spread Firefox 首頁即時摘要來源！</a>'''
 +
<!--
 +
這個即時摘要來源的安裝已經放在[http://bobchao.googlepages.com/microsummary 柏強雜碎頁: Firefox 2 即時摘要來源]中，可以安裝試試結果。
 +
-->
 +
= 範例 =
 +
*[http://shyangs.110mb.com/microsummary/tw-weather-V7.html 中央氣象局目前天氣即時標題]
  
 
= 結語 =
 
= 結語 =

於 2011年8月6日 (六) 18:58 的最新修訂

本文已經移往 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/microsummaries/tutorial/sfx-generator.xml，而我們希望使用者能從 http://people.mozilla.com/~myk/microsummaries/tutorial/index.html 上下載安裝，就應該在 index.html 網頁上加上此段程式碼： 

<a href="javascript:window.sidebar.addMicrosummaryGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">安裝 Spread Firefox 首頁即時摘要來源！</a>

不過，如果是不支援即時摘要的瀏覽器，按下此連結之後會產生 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>
<a href="javascript:addGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">安裝 Spread Firefox 首頁即時摘要來源！</a>

範例

結語

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

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

註：

  • 這個功能目前在非 UTF-8 的網頁部分有點問題，已提報 bug 345016
  • 如果存放摘要來源檔的伺服器無法送出正確的 MIME Type (例： Google Pages 的空間)，則摘要來源將無效，您可以在網址列輸入 javascript: 來查閱錯誤。
  • 如果摘要來源檔案中的 XML 或 XSLT 格式有誤，則摘要來源將無效，一樣可以在網址列輸入 javascript: 來查閱錯誤。
取自 "https://wiki.moztw.org/index.php?title=製作即時摘要&oldid=24443"
個人工具