Dive Into Accessibility

第二十九天：加入站台搜尋功能

每個網站都需要站台搜尋功能。至少就當代來說是如此。

正確的站台搜尋準則：

1. 每一頁都放搜尋對話盒，最好還要是「在褶層之上」（不需要捲動就看得到）。
2. 預設會搜尋所有的東西。如果妳可以讓使用者選擇祇搜尋文章、祇搜尋迴響或兩者皆搜尋的話，請預設「兩者都搜尋」。
3. 別讓進階選項（像是布林邏輯、大小寫敏感或正規表示式）弄亂了妳的搜尋對話盒。請預設使用類似 Google 的作用（比對所有的字，不比對部分的字，大小寫不敏感，不使用正規表示式），同時在另一個「進階搜尋」的頁面裡，提供所有的選項。
4. 讓妳的搜尋對話盒有合適的標籤以及一組便捷鍵。在此我建議使用 accesskey="4" （請注意：在第十五天裡，我示範了如何指定妳的搜尋表單的 accesskey ，但是我弄錯了。為了要達到最大的跨瀏覽器相容性，妳得把 accesskey 定義在 <label> ，而不是 <input> 。正確的語法請見下面的範例）。

誰因此獲益？

Jackie 、 Michael 、 Bill 、 Lillian 、 Marcus 以及世界上其他許多人都從這個妥善採行的站台搜尋功能中獲益了。尤其是對於網誌或新聞導向的站台來說，內容主要是按照時間所整理；如果使用者每次尋找特定的文章時，都得要把頁面不斷地往下捲動的話，實在是讓人苦不堪言。很少有人知道 Google 的「 site:domainname.com 」語法（用來把搜尋結果線訂在某個網域裡），而且 Google 每個月祇會重新建立一次索引，所以妳該提供自己的站台搜尋功能。

怎麼做

Greymatter 內建有搜尋功能，但是妳得稍微修改模版，纔能提供搜尋對話盒的 accesskey 。到「 Edit Templates 」，「 Miscellaneous Templates 」，「 Search Form Template 」，然後找到像這樣的表單：

<FORM ACTION="{{cgiwebpath}}/gm-comments.cgi" METHOD=POST>
<INPUT TYPE=TEXT NAME="gmsearch" SIZE=20>
<INPUT TYPE=SUBMIT VALUE="Search">
</FORM>

然後把他改成這樣：

<FORM ACTION="{{cgiwebpath}}/gm-comments.cgi" METHOD=POST>
<label for="gmsearch" accesskey="4">尋找：</label>
<INPUT TYPE=TEXT id="gmsearch" NAME="gmsearch" SIZE=20>
<INPUT TYPE=SUBMIT VALUE="搜尋">
</FORM>

Movable Type 的使用者可以試試看 MT-Search 外掛模組（譯註：現在這個外掛模組已經整合到 Movable Type 套件裡了）。我自己正在用由將來臨的 MT 架起來的站台。我在自己的主要網誌（超過九百篇文章）上試了一下，稍微慢了點，不過在比較小的站台上應該還不賴纔是。雖然它不會繼續被發展下去，但就算是在最新版的 Movable Type 上，也還動得不錯。（請注意：如果妳用的是 MySQL 版本的 Movable Type 2.2 ，妳還得稍微調整一下 mt-search.cgi 裡的設定）。

如果妳的網誌有自己的網域名稱，妳還可以使用第三方的搜尋引擎來為妳的內容建立索引，並按要求提供搜尋結果。比較為人所熟知的代用品包括像是 Blogger.com 所建議的 Atomz Express Search 和我在我自己的網誌上所採用的 Google Free Web Search 。這兩者都提供了某些程度的自由度，而且也相當快；祇不過他們建立妳的站台索引後，並不會刻刻更新。這兩個搜尋引擎都允許妳自訂搜尋對話盒的外貌。我用 Google 做出來的搜尋表單就像這樣（請留意 <label> 和 accesskey 的使用）：

<form id="searchform" method="get" action="http://www.google.com/custom">
<p id="searchlabel"><label for="q" accesskey="4">Search this site:</label></p>
<p id="searchinput"><input type="text" id="q" name="q" size="18" maxlength="255" value=" " /></p>
<p id="searchsubmit"><input type="submit" value="Search" />
<input type="hidden" name="cof" value="LW:116;L:http://diveintomark.org/images/eyes.jpg;LH:68;AH:left;GL:0;S:http://diveintomark.org/;AWFID:0d8ffcebe359c844;" />
<input type="hidden" name="domains" value="diveintomark.org" />
<input type="hidden" name="sitesearch" value="diveintomark.org" />
</p>
</form>

請注意：妳不能夠就直接把這一段剪下來，然後貼進妳的網誌裡。如果妳想要用 Google Free Web Search 的話，妳得先登入 Google ，並且取得後來會被放到隱藏的 cof 欄位裡的金鑰。

延伸閱讀

• Jay Allen: MT-Search, Movable Type 的搜尋外掛模組。
• Phil Ringnalda: mt-search.cgi and MySQL. 這裡有如何讓 MT-Search 在 Movable Type 2.2 和 MySQL 裡運作順利的重要訊息。
• Atomz Express Search.
• Google Free Web Search.
• Blogger.com: How do I add a search engine to my blog? 她們推薦使用 Atomz ，但是其他鏈結都沒有列出。
• Jukka Korpela: Improving accessibility with accesskey in HTML forms and links. 接近尾聲的地方，解釋了為什麼站台搜尋功能的 accesskey 要用「 4 」。
• Jakob Nielsen: Is Navigation Useful? Users often rely on search as their main hunting strategy.
• Jakob Nielsen: Search Usability. 這個地方雖然已經五歲了，但仍然不可思議地一直在更新。
• PHP.net: URL HOWTO. PHP.net 上有我所看過最神奇的站台搜尋功能。除了標準的搜尋對話盒外，她們還有自訂的 404 錯誤文件（通常別人祇會丟給妳一個「頁面找不到」的錯誤訊息而已），並且根據網址來聰明地尋找站台。所以妳可以直接在瀏覽器的位址列輸入像 php.net/phpinfo 的位址，然後 php.net 會把妳轉向到 phpinfo 函式的參考頁面。