简单打造站内搜寻、标题搜寻

自己个 blog 从五月正式上线至今,一直都缺了一个「站内搜寻」的功能,总算在这阵子找了空档,把这个功能补上,同时在 list 页面新增了 filter 以及标题搜寻的功能,每一篇文章的最下方也新增的上一页下一页的功能,最后顺便把一些长期累积的小 bug 给修掉,在底层动的工程颇精彩呀。

这篇文章来分享一下自己部落格使用的两种站内搜寻方式,第一种是利用 google 的「自订搜寻」,就可以做出利用 google 进行全站搜寻的超强大功能,第二种则是单纯使用一行 CSS 和一点点的 jQuery,就可以实现纯前端的单页内容搜寻,我也将这种方法应用在 list 页面 进行标题的快速查找,两种搜寻功能互相搭配,部落格的功能总算是完备了。

第一种 google 的自订搜寻

要使用自订搜寻,就要先登入「自订搜寻引擎」。

简单打造站内搜寻、标题搜寻

登入之后,就把自己的网站或部落格网只填入「要搜寻的网站」,然后给个名称即可。

简单打造站内搜寻、标题搜寻

以我的 blog 来说,完成后就会长这样:

简单打造站内搜寻、标题搜寻

进入之后会先看到这个画面,第一页其实没有甚么特别 ( 进阶功能没有摸索不了解 ),主要就是一些这个搜寻引擎的基本设定。

简单打造站内搜寻、标题搜寻

真正的重点是第二页「外观和风格」,这一页决定了搜寻引擎的长相,以及搜寻结果要出现的位置,google 总共提供了七种方式让我们选择,好几年前我的 blog 是採用「google 代管」的方式,这个方式其实很简单,就是搜寻结果会像 google 搜寻一样独立一页出来,就不需要考虑样式和结果页面的呈现,而我现在的 blog,是使用「2 页」的作法。

简单打造站内搜寻、标题搜寻

选择好了之后,点选右下角「储存并取得程式码」,就可以开始进行我们搜寻引擎的製作,因为我选择的是「2页」,所以第一步要先点选上方「搜寻结果详细资料」来进行设定。

简单打造站内搜寻、标题搜寻

点选后,第一个栏位是搜寻页面的位置,第二个栏位是搜寻时在网址列的参数代码,预设是 q,而我这边设为 s。

简单打造站内搜寻、标题搜寻

一开始 google 所提供的是第三版,刚刚上面提到搜寻页面的位置,影响比较大的也就是这一版,不过这版上去之后,虽然搜寻的功能是正常,但在开发者工具里头都会报错 (Failed to load resource - http://www.google.com/uds/?file=ads&v=3&packages=search&async=2),查了很久都找不到解决方式,为了避免报错不知道会产生甚么问题,所以就捨弃这一个版本,点选下方「取得 V1 程式码」就可以取得 V1 的程式码,从程式码中可以发现刚刚设定的参数都在里头,而你也可以点选下一步,就可以看到搜寻结果页面的程式码。

简单打造站内搜寻、标题搜寻

了解之后,回头看一下上面的程式, <div id='cse-search-form' style='width: 100%;'>Loading</div>这一段其实就是搜寻框的位置,我放在右上角的搜寻框,loading 是预设的显示文字,loading 完成后就会自动消失,我自己是不喜欢,所以我就把 loading 移除了,至于 js 我放在整个页面的最下方,避免有甚么问题的时候,也只有搜寻死掉而已。

简单打造站内搜寻、标题搜寻

不过刚放上搜寻框的时候一定会被他的样式吓到,因为就是一个很丑的 text-input加上一颗button,打开开发者工具可以清楚地发现,网页被内嵌了一大堆 style,而搜寻框也是内含一脱拉库的 HTML。

简单打造站内搜寻、标题搜寻

这时候就必须要利用 CSS 的权重 来和这些 style 硬碰硬,就可以把这些 style 强压换成自己的 style,下图是我的 SCSS 长相,因为 google 加入的 style 在我的 style 后面,导致我的 style 怎么写都会被盖掉 ( 当然可以用 id 打头覆盖,但我的 HTML 没有 id,就无法这么做 ),所以这裡我用了不少!important来进行覆盖的作业。(!important很邪恶,要小心使用。 )

简单打造站内搜寻、标题搜寻

同样的,取得搜寻结果程式码后,程式码的 <div id='cse' style='width: 100%;'>Loading</div> 放在搜寻结果页面要显示结果的位置,看看搜寻结果画面的长相,也是由一大堆被 google 塞进去的 DOM 所组成。

简单打造站内搜寻、标题搜寻

因此这裡同样要强迫把 style 给覆盖掉,这裡同样使用了!important来强制覆盖。( 其实免费版的有广告,还有一些有的没有的栏位,都可以用这种方式来覆盖使其消失 )

简单打造站内搜寻、标题搜寻

完成后,恭喜恭喜,整个网站的站内搜寻总算是大功告成啦!其实要使用 google 的站内搜寻是很简单的,程式码贴上去基本上就都可以搜寻尝鲜,但真正麻烦的还是在调整 UI 的细节,要如何才能让搜寻框、按钮和搜寻结果,与自己的网站无缝接轨搭配,才是真正耗费时间的地方。

第二种标题搜寻

至于我的 blog 内的第二种搜寻方式「标题搜寻」,就不是用像 google 的这种高级方式,而是单纯的利用了 CSS 里头的:not:not顾名思义就是「没有的就会怎样怎样...」,原理很简单,当输入文字的时候,同时写入 CSS,藉由 CSS 与 DOM 之间的连动,就可以轻鬆做出及时筛选的功能。( 参考 所有文章列表 )

要如何实现呢?首先我在我的 blog 原始码裡头放了一段空白的 style,并给予一个 class 命名,如此一来,我就可以用 jquery 在裡面写东西。

简单打造站内搜寻、标题搜寻

第二步,我在清单裡头都加入了一个 data-title的 HTML5 才有的 data attribute,其实不一定要叫 title,主要是以data-打头的都是 HTML5 特有的 data attribute,有了这个属性,我们就可以用 CSS 来获取。

<li class="tag-web" data-title="svg d3.js - 区域 ( area )">

简单打造站内搜寻、标题搜寻

再来就是了解一下刚刚的那个 style 裡面该放些甚么,裡面是要动态写入写入下方的 CSS,如此一来,data-title 裡面只要有吻合的字串,就会显示,没有就会被加入display:none的属性。

#container .content li:not([data-title*="字串"]) {display: none;}

最后就是写 js 了,一开始定义按下、贴上或改变时就会触发的事件,为了避免有英文大小写的问题,一开始就先使用toLowerCase()让输入的值都转为小写,并且当没有数值的时候,清空 style,避免清空的时候无法还原所有的清单。

$search.on('change paste keyup',function(){
    var value = $(this).val().toLowerCase();
    if(!value){
      $('.list-search-style').html('');
    }
    else{
      _searchStart(value);
    }
  function _searchStart(v){
    $('.list-search-style').html(
      '#container .content li:not([data-title*="' + v + '"]) {display: none;}'
    );
  }
}

就这样,很简单的就做出一个及时搜寻的功能,不过除了上面写的,我还多写了很多行,毕竟在我的 blog 里头,还牵扯到和 filter 标籤的互动,不过理解原理后,就可以做出很多有趣的应用囉!( 参考 所有文章列表 )

简单打造站内搜寻、标题搜寻