第二十九天:加入网站搜索功能

Marking everything searchable 加入网站搜索功能

每个网站都需要网站搜索功能。至少就当代来说是如此。

正确的网站搜索准则:

  1. 每一页都放搜索框,最好还要是“在褶层之上”(不需要滚动就看得到)。
  2. 预设会搜索所有的东西。如果你可以让使用者选择只搜索文章、只搜索回响或两者皆搜索的话,请预设“两者都搜索”。
  3. 别让进阶选项(像是布尔值、大小写敏感或正则表达式)弄乱了你的搜索框。请预设使用类似 Google 的作用(比对所有的字,不比对部分的字,大小写不敏感,不使用正则表达式),同时在另一个“进阶搜索”的页面里,提供所有的选项。
  4. 让你的搜索框有合适的标签以及一组快捷键。在此我建议使用 accesskey="4" (请注意:在第十五天里,我示范了如何指定你的搜索表单的 accesskey ,但是我弄错了。为了要达到最大的跨浏览器相容性,你得把 accesskey 定义在 <label> ,而不是 <input> 。正确的语法请见下面的范例)。

谁因此获益?

小莉莫非老路马大姐陈建国 以及世界上其他许多人都从这个妥善采用的网站搜索功能中获益了。尤其是对于博客(blog)或新闻导向的网站来说,内容主要是按照时间所整理;如果使用者每次寻找特定的文章时,都得要把页面不断地往下滚动的话,实在是让人苦不堪言。很少有人知道 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 架起来的网站。我在自己的主要博客(blog)(超过九百篇文章)上试了一下,稍微慢了点,不过在比较小的网站上应该还不赖才是。虽然它不会继续被发展下去,但就算是在最新版的 Movable Type 上,也还动得不错。(请注意:如果你用的是 MySQL 版本的 Movable Type 2.2 ,你还得稍微调整一下 mt-search.cgi 里的设定)。

如果你的博客(blog)有自己的网域名称,你还可以使用第三方的搜索引擎来为你的内容建立索引,并按要求提供搜索结果。比较为人所熟知的代用品包括像是 Blogger.com 所建议的 Atomz Express Search 和我在我自己的博客(blog)上所采用的 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>

请注意:你不能够就直接把这一段剪下来,然后贴进你的博客(blog)里。如果你想要用 Google Free Web Search 的话,你得先登入 Google ,并且取得后来会被放到隐藏的 cof 栏位里的金钥。

延伸阅读

<< 第二十八天:加上元件描述 | 目录 | 第三十天:撰写阅读说明 >>

End Channel Nav
>可访问性指南

Divo in Accessibility

CSS2.0 中文手册

HTML 标准指南