博客站内搜索引擎

前言

最近经常逛V2EX网站,对其站内的搜索引擎特别好奇.站内对其也有相关的讨论,才知道原来借助的是谷歌的搜索-Custom Search Engine(简称CSE).

介绍

通过谷歌自定义搜索引擎(以下称之为CSE)的使用,我们可以很方便的在我们的博客首页上添加谷歌搜索框,充分利用谷歌抓取的数据从而帮助他们从我们的站点上搜索到满足他们需要的信息.通过自定义搜索引擎的功能,为自己的网站提供更加丰富的搜索需要并提高站点的搜索质量从而增加站点自身的搜索排名.

使用

要使用谷歌自定义搜索引擎的前提,也是最重要的一点自然是能访问谷歌开发者后台.利用注册号的账号登录谷歌控制台才能继续以下其他步骤.

自定义搜索引擎创建与安装

使用已有的谷歌账号登入谷歌的控制台创建一个搜索引擎.
输入需要待搜索的站点节点,这里所说的站点节点既可以是泛域名搜索,也可以是指定站点,或者是站点的某个部分内容,比如一个网页.
根据自身站点的语言特点选择所需的语言,不通的语言意味着生成的搜索插件有着不通的样式和表现形式,但不会影响到搜索的结果.
创建之后会生成一段JavaScript脚本和一个谷歌特有的标签.这个标签就是谷歌搜索框,把这个标签代替站点搜索框的位置,在站点的嵌入相应的JavaScript脚本即可.

谷歌搜索框的其他使用方法

如果仔细观察V2EX的搜索框的部分代码和搜索链接,我们会发现V2EX的搜索虽然用到的也是自定义搜索引擎但和上面的方法不太一样.主要的区别在于不用使用谷歌标签和脚本.只要把将搜索的结果重定向到谷歌搜索,让他们替我们针对网站做定向搜索.以下针对hexo框架的博客站点简要说明下.

谷歌自定义搜索引擎只是站点搜索的一种形式,为了方便站点其他搜索引擎控制与切换,我们在配置文件添加切换开关.
在_config.yml配置文件中修改搜索框的控制类型,根据需要暂时定义两个参数控制.

# 是否显示边栏中的搜索框（仅样式，未添加搜索功能）
# Search Box in left column
# type google | baidu | swifttype
search_box:
  on: true
  type: google

根据不同的主题找到搜索框指定位置的页面上修改页面跳转的重定向即可.
页面重定向后的链接类似于 https://www.google.com/search?q=搜索内容&q=site:站点域名, 根据这个思路只要稍微懂页面前端的程序猿自然很清楚如何修改.

<% if (theme.search_box.on && theme.search_box.type == 'google'){ %>
<form action="https://www.google.com/search" target="_blank" method="get" accept-charset="UTF-8">
  <input type="text" name="q" class="search" autocomplete="off" maxlength="20" placeholder=" <%= __('index.search') %>...">
  <input type="hidden" name="q" autocomplete="off" value="site:<%- config.url.replace(/^https?:\/\//, '') %>">
</form>
<%}%>

未完待续

参考资料

利用swiftype为hexo添加站内搜索v2.0
Google Custom Search Api