为Hexo博客添加站内搜索-Swiftype-并显示结果页

Swiftype可以为网站及移动app提供内置搜索引掣服务。其部署十分简单，只须输入URL地址平台即可执行对用户网站的抓取，插入JS代码嵌入网站就即完成搜索引擎的创建。Swiftype还提供了分析服务，供网站检索分析用户的搜索行为和使用偏好。Swiftype还支持对搜索结果排序进行定制。

我的博客采用Hexo搭建，主题是基于maupassant。它能提供四种搜索，分别是：

• google_search
• baidu_search
• swiftype
• tinysou

由于是刚建站，所以只试了百度，发现结果页都是在百度，于是尝试采用Swiftype的站内搜索功能，下面是实现步骤：

---

注册

到swiftype上注册账号，我用自己的邮箱失败了，提示要用工作邮箱，于是我用了自己在学校注册的邮箱，发现可以了，接着输入自己网站的bluebells.tk，根据指引建立自己站点对应的Engine；

复制key

点击左侧的『install search』选项卡，在给出的一段js代码中复制“install”后面的key，将其添加到主题目录下的_config.yml文件；

swiftype: ## Your swiftype_key, e.g. m7b11ZrsT8Me7gzApciT

添加搜索框

接着点击Add a Search Field（即添加一个搜索框）。由于主题layout下已包含了搜索框组件_widget\search.jade，且已有Swiftype代码：

if theme.swiftype
  .widget
    input.st-default-search-input(placeholder='Search' type='text')

也就是图上的：

所以这一步我就跳过了。
若主题文件下没有搜索框，则可以在自己相应的组件文件夹中新建一个搜索框组件。

配置搜索结果页

然后点击Results Container（即配置搜索结果页）。默认是采用图中第一个弹出式容器，我希望是在根目录下的/search/页面上显示，所以勾选了“show on a dedicated search results page”，并将/search/填入path中。

新建search页

在hexo的source目录下建立一个search文件夹，并在其中新建一个index.md文件，其内容为：

layout: search
title: search
---

其它

至此，配置基本完成，hexo d -g重新部署一下即可出现站内搜索功能。搜索框的样式可根据个人爱好在CSS文件中修改。
管理搜索内容可在『Content』选项卡中查看，对搜索结果自定义排序及显示在『Results Rankings』选项卡中设置。

---

参考链接：Hexo静态博客添加站内搜索--Swiftype