mozilla

比較修改

製作即時摘要

Change Revisions

版本 288950:

Revision 288950 by shyangs on

版本 217959:

Revision 217959 by shyangs on

標題:
製作即時摘要
製作即時摘要
URL代稱:
製作即時摘要
製作即時摘要
標籤:
即時摘要
內容:

修訂版本 288950
修訂版本 217959
t7    <p>t
8      即時摘要來源(microsummary generator)內含一組從網頁中製出即時摘要的指令,而網頁能在 <code
>>&lt;head&gt;</code> 元素中放入 <code>&lt;link rel="microsummary"&gt;< 
>/code> 以指定適用的摘要來源。即時摘要來源檔案中如含有適用頁面列表,則也可以獨立安裝。 
9    </p>
10    <p>
11      在這份教學文件中,我們將建立 <a class="external" href="http://www.spreadf
>irefox.com/">Spread Firefox 首頁</a>的即時摘要來源,藉以顯示目前 Firefox 的總下載數。 ( 
>例: <cite>Fx 下載數: 174475447</cite>)。 
12    </p>
13    <p>
14      接下來我們會用一份 XSLT 樣式表將該網頁轉換為即時摘要、指定此摘要來源的適用頁面並了解摘要來源傳佈方式,讓使用者能
>下載及安裝。在這份文件中每階段新增的程式碼會以粗體顯示,方便您辨識。 
15    </p>
16    <h2 id=".E9.96.8B.E5.A7.8B" name=".E9.96.8B.E5.A7.8B">
17      開始
18    </h2>
19    <p>
20      摘要來源是 XML 文件的一種,而其根元素為 <code>&lt;generator&gt;</code>、名稱空間 
>(namespace) 需指定為 <cite><a class=" external" href="http://www.mozi 
>lla.org/microsummaries/0.1" rel="freelink">http://www.mozilla.org 
>/microsummaries/0.1</a></cite>,所以要建立一份摘要來源就先得在空的純文字檔中放入 XML 宣告及空的 
> <code>&lt;generator&gt;</code> 標籤: 
21    </p>
22    <pre class="eval">
23<b>&lt;?xml version="1.0" encoding="UTF-8"?&gt;</b>
24<b>&lt;generator xmlns="<span class="nowiki">http://www.mozilla.o
>rg/microsummaries/0.1</span>"&gt;</b> 
25<b>&lt;/generator&gt;</b>
26</pre>
27    <h2 id=".E5.91.BD.E5.90.8D" name=".E5.91.BD.E5.90.8D">
28      命名
29    </h2>
30    <p>
31      每個即時摘要來源都必須有個名字,該名稱以 <code>name</code> 屬性記載、明確說明此摘要來源所建立的摘要
>主題。由於我們要建立的摘要來源將顯示 Firefox 總下載數,所以便命名為「Firefox 下載計數」: 
32    </p>
33    <pre class="eval">
34&lt;?xml version="1.0" encoding="UTF-8"?&gt;
35&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/
>microsummaries/0.1</span>" 
36           <b>name="Firefox 下載計數"</b>&gt;
37&lt;/generator&gt;
38</pre>
39    <h2 id=".E5.8A.A0.E4.B8.8A_XSLT_.E6.A8.A3.E5.BC.8F.E8.A1.A8" 
>name=".E5.8A.A0.E4.B8.8A_XSLT_.E6.A8.A3.E5.BC.8F.E8.A1.A8"> 
40      加上 XSLT 樣式表
41    </h2>
42    <p>
43      即時摘要來源檔案中必須含有一份 XSLT 樣式表,以便將網頁依樣式表設定轉換為即時摘要。同一份資料碰上不同的 XSLT
> 樣式便能轉換為「相貌」不同的文件,這便是 XSLT 威力所在。 
44    </p>
45    <p>
46      以下示範以 <code>&lt;template&gt;</code> 元素在摘要來源中添加 XSLT 樣式表:
47    </p>
48    <pre class="eval">
49&lt;?xml version="1.0" encoding="UTF-8"?&gt;
50&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/
>microsummaries/0.1</span>" 
51           name="Firefox 下載計數"&gt;
52  <b>&lt;template&gt;</b>
53    <b>&lt;transform xmlns="<span class="nowiki">http://www.w3.or
>g/1999/XSL/Transform</span>" version="1.0"&gt;</b> 
54    <b>&lt;/transform&gt;</b>
55  <b>&lt;/template&gt;</b>
56&lt;/generator&gt;
57</pre>
58    <p>
59      即時摘要來源中可以放任何形式的 XSLT,設定為產生超文件也行,但 Firefox 目前只會顯示純文字內容。
60    </p>
61    <h2 id=".E8.A8.AD.E5.AE.9A.E8.BC.B8.E5.87.BA.E6.A0.BC.E5.BC.8
>F" name=".E8.A8.AD.E5.AE.9A.E8.BC.B8.E5.87.BA.E6.A0.BC.E5.BC.8F"> 
62      設定輸出格式
63    </h2>
64    <p>
65      由於 XSLT 樣式表會產岀文字摘要,所以 XSLT 的 <code>&lt;output&gt;</code> 元素
>需設定如下: 
66    </p>
67    <pre class="eval">
68&lt;?xml version="1.0" encoding="UTF-8"?&gt;
69&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/
>microsummaries/0.1</span>" 
70           name="Firefox 下載計數"&gt;
71  &lt;template&gt;
72    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1
>999/XSL/Transform</span>" version="1.0"&gt; 
73      <b>&lt;output method="text"/&gt;</b>
74    &lt;/transform&gt;
75  &lt;/template&gt;
76&lt;/generator&gt;
77</pre>
78    <h2 id=".E4.BD.BF.E7.94.A8_XSLT_.3Ctemplate.3E" name=".E4.BD.
>BF.E7.94.A8_XSLT_.3Ctemplate.3E"> 
79      使用 XSLT <code>&lt;template&gt;</code>
80    </h2>
81    <p>
82      XSLT 處理器會分別比對 XSLT 樣式表中每組 <code>&lt;template&gt;</code> 元素及
>文件中的節點。當 <code>&lt;template&gt;</code> 的 <code>match</code> 屬性設定與 
>節點相符,處理器便依設定轉換文件。 
83    </p>
84    <p>
85      這種處理方式可以循序檢查網頁中每個節點,依據設定條件顯示內容,非常有用。不過本例只是要顯示 Spread Firefo
>x 網站上的即時摘要,僅用一個 <code>&lt;template&gt;</code> 元素來找一回根元素下的內容即可: 
86    </p>
87    <pre class="eval">
88&lt;?xml version="1.0" encoding="UTF-8"?&gt;
89&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/
>microsummaries/0.1</span>" 
90           name="Firefox 下載計數"&gt;
91  &lt;template&gt;
92    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1
>999/XSL/Transform</span>" version="1.0"&gt; 
93      &lt;output method="text"/&gt;
94      <b>&lt;template match="/"&gt;</b>
95      <b>&lt;/template&gt;</b>
96    &lt;/transform&gt;
97  &lt;/template&gt;
98&lt;/generator&gt;
99</pre>
100    <h2 id=".E5.8A.A0.E4.B8.8A.E4.B8.8B.E8.BC.89.E6.AC.A1.E6.95.B
>8" name=".E5.8A.A0.E4.B8.8A.E4.B8.8B.E8.BC.89.E6.AC.A1.E6.95.B8"> 
101      加上下載次數
102    </h2>
103    <p>
104      若想將下載次數放到 XSLT 輸出的文件中,我們得在 XSLT 中的 <code>template</code> 元素
>加上 <code>&lt;value-of&gt;</code> 元素,而此 <code>template</code> 元素的  
><code>select</code> 屬性中指定的 XPath 必須指向涵括計數器的節點。 
105    </p>
106    <p>
107      XPath 是用來指定 HTML/XML 文件節點的語言,也有基本的節點內容處理函式。要得知能指向此節點的 XPath
> 陳述式,最輕鬆的方法就是使用 <a class="link-https" href="https://addons.mozill 
>a.org/firefox/1095/">XPath Checker 擴充套件</a>。 
108    </p>
109    <p>
110      安裝 XPath Checker 並重新啟動 Firefox 之後,先到 <a class="external" hr
>ef="http://www.spreadfirefox.com/">Spread Firefox 首頁</a>去,找到 Fire 
>fox 下載次數(網頁右邊欄最下方的數字),在上頭按下右鍵,於快捷選單中選擇 <cite>View XPath</cite>。此時 
> XPath Checker 會開啟一個新視窗,其中 <cite>XPath</cite> 欄位包含方才所選節點的 XPath 陳 
>述式: <cite>id('download-count')</cite> 。 
111    </p>
112    <p>
113      在 XSLT 的 <code>&lt;template&gt;</code> 元素中加上一個 <code>&lt;va
>lue-of&gt;</code> 元素,其中 <code>select</code> 屬性便設為此 XPath 陳述式,如下: 
114    </p>
115    <pre class="eval">
116&lt;?xml version="1.0" encoding="UTF-8"?&gt;
117&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/
>microsummaries/0.1</span>" 
118           name="Firefox 下載計數"&gt;
119  &lt;template&gt;
120    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1
>999/XSL/Transform</span>" version="1.0"&gt; 
121      &lt;output method="text"/&gt;
122      &lt;template match="/"&gt;
123        <b>&lt;value-of select="id('download-count')"/&gt;</b>
124      &lt;/template&gt;
125    &lt;/transform&gt;
126  &lt;/template&gt;
127&lt;/generator&gt;
128</pre>
129    <h2 id=".E5.8A.A0.E4.B8.8A.E6.96.87.E5.AD.97" name=".E5.8A.A0
>.E4.B8.8A.E6.96.87.E5.AD.97"> 
130      加上文字
131    </h2>
132    <p>
133      為了在即時摘要中加上 <cite>Fx 下載數:</cite> 這段文字,我們必須將 <code>&lt;text&g
>t;</code> 元素放到 <code>&lt;template&gt;</code> 元素中文字該出現的地方。以下範例便放進一 
>個內容為 <cite>Fx 下載數:</cite> 的 <code>&lt;text&gt;</code> 元素: 
134    </p>
135    <pre class="eval">
136&lt;?xml version="1.0" encoding="UTF-8"?&gt;
137&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/
>microsummaries/0.1</span>" 
138           name="Firefox 下載計數"&gt;
139  &lt;template&gt;
140    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1
>999/XSL/Transform</span>" version="1.0"&gt; 
141      &lt;output method="text"/&gt;
142      &lt;template match="/"&gt;
143        <b>&lt;text&gt;Fx 下載數: &lt;/text&gt;</b>
144        &lt;value-of select="id('download-count')"/&gt;
145      &lt;/template&gt;
146    &lt;/transform&gt;
147  &lt;/template&gt;
148&lt;/generator&gt;
149</pre>
150    <p>
151      此處須留心 XSLT 標籤之間的空白字元並不會出現在輸出結果中,不像 HTML 會合併顯示為一個空格,所以要在字串後多
>加上一個空白以便區隔下載次數及字串。 
152    </p>
153    <p>
154      這麼一來,這個轉換 Spread Firefox 首頁為即時摘要的 XSLT 樣式便完成了。
155    </p>
156    <h2 id=".E6.8C.87.E5.AE.9A.E6.91.98.E8.A6.81.E4.BE.86.E6.BA.9
>0.E7.9A.84.E9.81.A9.E7.94.A8.E7.AF.84.E5.9C.8D" name=".E6.8C.87.E 
>5.AE.9A.E6.91.98.E8.A6.81.E4.BE.86.E6.BA.90.E7.9A.84.E9.81.A9.E7. 
>94.A8.E7.AF.84.E5.9C.8D"> 
157      指定摘要來源的適用範圍
158    </h2>
159    <p>
160      摘要來源的轉換樣式已大工告成,接下來要指定此樣式適用的網頁。如果我們是 Spread Firefox 的網站管理員,可
>以在網頁上的 <code>&lt;head&gt;</code> 元素中直接加入 <code>&lt;link rel="micr 
>osummary"&gt;</code> 標籤,以便指定此網頁對應的摘要來源: 
161    </p>
162    <pre class="eval">
163&lt;head&gt;
164  ...
165  <b>&lt;link rel="microsummary" href="path/to/our/generator.xml"
>&gt;</b> 
166&lt;/head&gt;
167</pre>
168    <p>
169      不過,由於我們並非該站網管,所以就得在檔案中規定此摘要來源的適用網頁,然後把摘要來源檔放到網路上供人下載。為了要指定適
>用網頁範圍,我們在 <code>&lt;generator&gt;</code> 元素中放上 <code>&lt;pages&gt 
>;</code> 元素: 
170    </p>
171    <pre class="eval">
172&lt;?xml version="1.0" encoding="UTF-8"?&gt;
173&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/
>microsummaries/0.1</span>" 
174           name="Firefox 下載計數"&gt;
175  &lt;template&gt;
176    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1
>999/XSL/Transform</span>" version="1.0"&gt; 
177      &lt;output method="text"/&gt;
178      &lt;template match="/"&gt;
179        &lt;text&gt;Fx 下載數: &lt;/text&gt;
180        &lt;value-of select="id('download-count')"/&gt;
181      &lt;/template&gt;
182    &lt;/transform&gt;
183  &lt;/template&gt;
184  <b>&lt;pages&gt;</b>
185  <b>&lt;/pages&gt;</b>
186&lt;/generator&gt;
187</pre>
188    <p>
189      <code>&lt;pages&gt;</code> 元素中可以放進多個 <code>&lt;include&gt;<
>/code> 及 <code>&lt;exclude&gt;</code> 元素。元素正如其名,<code>&lt;include 
>&gt;</code> 元素能以規則運算式(regular expression)指定適用網頁,而 <code>&lt;exclu 
>de&gt;</code> 元素則以規則運算式指定不適用網頁。 
190    </p>
191    <p>
192      若無另加規定,則摘要來源預設不適用所有網頁。也就是說,你必須明確指定摘要來源之適用範圍,但如無必要可不必以 <code
>>&lt;exclude&gt;</code> 排除其他網頁。 
193    </p>
194    <p>
195      此處加上個 <code>&lt;include&gt;</code> 元素指定 Spread Firefox 首頁為適
>用範圍: 
196    </p>
197    <pre class="eval">
198&lt;?xml version="1.0" encoding="UTF-8"?&gt;
199&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/
>microsummaries/0.1</span>" 
200           name="Firefox 下載計數"&gt;
201  &lt;template&gt;
202    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1
>999/XSL/Transform</span>" version="1.0"&gt; 
203      &lt;output method="text"/&gt;
204      &lt;template match="/"&gt;
205        &lt;text&gt;Fx 下載數: &lt;/text&gt;
206        &lt;value-of select="id('download-count')"/&gt;
207      &lt;/template&gt;
208    &lt;/transform&gt;
209  &lt;/template&gt;
210  &lt;pages&gt;
211    <b>&lt;include&gt;<span class="nowiki">http://(www\.)?spreadf
>irefox\.com/(index\.php)?</span>&lt;/include&gt;</b> 
212  &lt;/pages&gt;
213&lt;/generator&gt;
214</pre>
215    <p>
216      不熟悉規則運算式的話,可以參考<a href="zh_tw/%e5%bb%ba%e7%ab%8b%e5%8d%b3%e
>6%99%82%e6%91%98%e8%a6%81%e7%9a%84%e8%a6%8f%e5%89%87%e9%81%8b%e7% 
>ae%97%e5%bc%8f">建立即時摘要的規則運算式</a>一文。 
217    </p>
218    <h2 id=".E5.AE.89.E8.A3.9D.E5.8D.B3.E6.99.82.E6.91.98.E8.A6.8
>1.E4.BE.86.E6.BA.90" name=".E5.AE.89.E8.A3.9D.E5.8D.B3.E6.99.82.E 
>6.91.98.E8.A6.81.E4.BE.86.E6.BA.90"> 
219      安裝即時摘要來源
220    </h2>
221    <p>
222      現在萬事俱備,只差讓人能下載此摘要來源的機制。我們得先將摘要來源檔上傳到網路,接著再以一段 JavaScript 連結
>呼叫 Firefox 的 <cite>window.sidebar.addMicrosummaryGenerator()</cit 
>e> 方法以便下載安裝。 
223    </p>
224    <p>
225      舉例而言,如果摘要來源檔的位置在 <a class=" external" href="http://people.m
>ozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml" rel="f 
>reelink">http://people.mozilla.com/~myk/micro...-generator.xml</a 
>>,而我們希望使用者能從 <a class=" external" href="http://people.mozilla.com 
>/~myk/microsummaries/tutorial/index.html" rel="freelink">http://p 
>eople.mozilla.com/~myk/micro...ial/index.html</a> 上下載安裝,就應該在 <cit 
>e>index.html</cite> 網頁上加上此段程式碼: 
226    </p>
227    <pre class="eval">
228 <strong>&lt;button onclick="window.sidebar.addMicrosummaryGenera
>tor('<span class="nowiki">http://people.mozilla.com/~myk/microsum 
>maries/tutorial/sfx-generator.xml</span>')"&gt;安裝 SpreadFirefox 首 
>頁即時摘要來源!&lt;/button&gt;</strong> 
229</pre>
230    <p>
231      不過,如果是不支援即時摘要的瀏覽器,按下此按鈕之後會產生 JavaScript 錯誤,所以我們應該幫使用者點忙、檢查他
>們的瀏覽器是否支援即時摘要,若不支援則顯示說明訊息: 
232    </p>
233    <pre class="eval">
234<strong>&lt;script&gt;</strong>
235<strong>  const warning = "不好意思ㄋㄟ,你得用支援即時摘要的瀏覽器 (如 Firefox 2.0) 才
>能安裝這玩意喔!";</strong> 
236<strong>  function addGenerator(url) {</strong>
237<strong>    if (typeof window.sidebar == "object" &amp;&amp;</str
>ong> 
238<strong>        typeof window.sidebar.addMicrosummaryGenerator ==
> "function")</strong> 
239<strong>      window.sidebar.addMicrosummaryGenerator(url);</stro
>ng> 
240<strong>    else</strong>
241<strong>     alert(warning);</strong>
242<strong>  }</strong>
243<strong>&lt;/script&gt;</strong>
244<strong>&lt;button onclick="</strong><strong><strong>addGenerator
></strong></strong><strong>('<span class="nowiki">http://people.mo 
>zilla.com/~myk/microsummaries/tutorial/sfx-generator.xml</span>') 
>"&gt;安裝 SpreadFirefox 首頁即時摘要來源!&lt;/button&gt;</strong> 
245</pre>
246    <p>
247      附帶一提:
248    </p>
249    <ul>
250      <li>由於 {{ Bug(341283) }} 的關係,目前 <cite>addMicrosummaryGenera
>tor()</cite> 無法支援相對位置的 URL。 
251      </li>
252      <li>如果存放摘要來源檔的伺服器無法送出正確的 MIME Type (例: Google Pages 的空間),則摘
>要來源將無效,您可以在網址列輸入 javascript: 來查閱錯誤。 
253      </li>
254      <li>如果摘要來源檔案中的 XML 或 XSLT 格式有誤,則摘要來源將無效,一樣可以在網址列輸入 javascri
>pt: 來查閱錯誤。 
255      </li>
256    </ul>
257    <h2 id=".E7.B5.90.E8.AA.9E" name=".E7.B5.90.E8.AA.9E">
258      結語
259    </h2>
260    <p>
261      現在你應該瞭解怎麼製作能顯示 Firefox 下載次數的即時摘要了。試著將 Spread Firefox 首頁存為書籤
>,然後在<cite>新增書籤</cite>對話方塊中按下<cite>名稱</cite>下拉式選單、選擇<cite>即時標題</ci 
>te>之後的項目即可。 
262    </p>
263    <p>
264      其他關於即時摘要的相關資訊,可以參考 <a class="external" href="http://wiki.mo
>zilla.org/Microsummaries">Microsummaries 主題頁</a>。 
265    </p>{{ languages( { "ca": "ca/Creaci\u00f3_d\'un_microsumari"
>, "es": "es/Como_crear_un_Microresumen", "en": "en/Creating_a_Mic 
>rosummary", "fr": "fr/Cr\u00e9ation_d\'un_g\u00e9n\u00e9rateur_de 
>_micror\u00e9sum\u00e9", "it": "it/Creare_un_Microsommario", "pl" 
>: "pl/Tworzenie_mikropodsumowania", "ja": "ja/Creating_a_Microsum 
>mary" } ) }} 

回到編輯歷史