每个网站都需要网站搜索功能。至少就当代来说是如此。
- 每一页都放搜索框,最好还要是“在褶层之上”(不需要滚动就看得到)。
- 预设会搜索所有的东西。如果你可以让使用者选择只搜索文章、只搜索回响或两者皆搜索的话,请预设“两者都搜索”。
- 别让进阶选项(像是布尔值、大小写敏感或正则表达式)弄乱了你的搜索框。请预设使用类似 Google 的作用(比对所有的字,不比对部分的字,大小写不敏感,不使用正则表达式),同时在另一个“进阶搜索”的页面里,提供所有的选项。
- 让你的搜索框有合适的标签以及一组快捷键。在此我建议使用
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 栏位里的金钥。
- 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
accesskeyin 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 函式的参考页面。