虽然说现在很多博客系统都自带有站点搜索功能或者插件,但是许多搜索插件都不够全面,往往只能索引到文章标题,内容和评论都无法搜索到,这时候就要借助第三方的搜索引擎了。

现在我们一般有两种选择,百度的或者是谷歌的。

百度的相对于大陆用户比较友好,众所周知,因为GFW的原因,大陆用户是无法使用谷歌自定义搜素引擎的,但是百度对很多草根站长都不太友好,大家可以在搜索引擎上输入site:自己的站点url来测试一下,通常百度对于新建站点和未备案站点都不会收录,或者收录很慢,这点谷歌做很很好,一个新站或者是一篇新的文章发布甚至不到一星期就会收录,所以我这个网站是使用Google自定义搜索的,这个把当时搭建这个搜索功能的过程讲一下。

一、新建搜索引擎

首先登陆谷歌自定义搜索主页

点击add,输入网站的相关信息。创建完成

二、修改外观

然后点击搜索引擎就可以查看到相关信息,我们先打开外观

可以看到谷歌提供了以上设置

对于叠加全宽两栏都是在统一页面输出搜索结果,如果想采用这种方式我建议使用全宽,即在一个页面输入搜索内容然后下面输出结果。

但是这里我想在所有页面中都包含一个搜索框,然后统一在另一个页面输出搜索结果,经过各种踩坑,最终建议选择仅限结果,然后点击保存并获取代码

然后复制代码粘贴在你想要显示结果的页面上即可。

三、添加搜索框

别忘了,我们刚才粘贴的是只显示结果的代码,我们还需要添加一个搜索框,当然也可以使用外观面板中的搜索框,但是谷歌提供的搜索框自定义程度不高,而且加载时需要浪费较多时间,这里我建议自己写一个搜索框。

四、绑定搜索结果

然后问题来了,怎么将自己的搜索框连接上搜索结果呢,这里我们可以看到

谷歌虽然没有明说,但是已经给我们提供了修改URL参数的功能了,所以我们可以通过使用URL传递搜索内容的方式来跳转至搜索页并显示搜索结果

如下:

<form action="https://www.fanzhiyang.com/blog/search" + value>
  <input type="text" id="search-text" name="q"/>
  <input type="submit" />
</form>

粘贴显示搜索结果代码的页面会自动获取当前URL?q=后面的字段作为查找内容,然后直接显示查找内容。

这也是本博客搜索功能的制作过程。

(完)