使用 Swiftype 给 Hexo 搭建的博客添加站内搜索功能

当我们的 博客 文章变的越来越多的时候，就非常需要使用 站内搜索 功能，否则寻找某一篇文章就会变的麻烦，Swiftype 是一个非常好的站内搜索平台，并且是 免费 的，可以到 我的博客 去预览一下搜索效果，下面就分享一下集成的方法。

---

1. 注册 Swiftype 账号

• 首先进入 Swiftype 官网 注册一个账号，注册的账号邮箱貌似必须使用 企业邮箱 ，注册信息要全部填完，这里要注意一下，这里建议最好翻墙，否则浏览速度会比较慢。

• 注册完成后会提示进入邮箱点击链接激活一下账号，激活完以后登录账号会显示 免费试用 xx 天 ，这个无视就行了，试用期结束后还是可以用的。

2. 创建 search engine

• 点击 Create a search engine ，输入自己 博客 的完整地址，等待验证完成后，随便输入一个名字就行。

• 创建完成后会开始抓取你 博客 的数据来用作 搜索索引 ，你可以在 Content 中看到抓取的 搜索索引 数据。

• 当你的 博客 内容有更新的时候，可以在 Domains 中点击 Recrawl 来重新抓取一下 搜索索引 数据。

3. 更改搜索设置

如果你不想设置那么麻烦，只想全部用默认设置，可以直接跳过这一步，直接进入 开始集成 Swiftype 搜索 这一步。

• 进入 Weights 修改搜索条件，我这边设置的是只根据文章的 title 来搜索内容，你可以根据自己的需求更改，修改完可以在右边搜索预览一下。

• 进入 Install Search 点击 Change Configuration 设置 搜索框显示 以及 搜索结果显示 。

• 搜索框显示 有两种，第一种是自己在 博客 中合适的位置加一个 input 标签的搜索框，class 属性设置为 st-default-search-input 。

• 第二种不需要自己加 input 标签，Swiftype 会自动在你 博客 网页的右下角添加一个 search this site 的搜索按钮，点击即可搜索，效果可以看下面的预览图，想用哪一种可以看自己的需求。

• 设置修改完保存以后需要点击网页最下面的 Activate Swiftype 按钮，设置才能生效，这个要注意一下。

4. 开始集成 Swiftype 搜索

• 进入 Install Search ，将 Swiftype 安装代码复制下来。

• 打开本地 博客 主题目录下的 layout / _partial 文件夹，使用 HTML 编辑器打开 footer.ejs 文件，将刚才的代码粘贴在 <footer> 标签内。

• 打开本地 博客 主题目录下的 _config.yml 文件，添加以下配置。

swift_search:
      enable: true
复制代码

• 如果刚才设置 搜索框显示 时选择的是第二种可以跳过这一步，如果选择的是第一种，就将以下代码放在 博客 中适合放搜索框的位置即可。

<!-- 搜索框就加上 class="st-default-search-input" -->
<% if (theme.swift_search.enable){ %>
    <input type="text" class="st-default-search-input" placeholder="请输入搜索内容...">
<% } %>
复制代码

<!-- 搜索按钮就加上 class="st-search-show-outputs" -->
<% if (theme.swift_search.enable){ %>
    <a href="#" title="搜索博客" class="st-search-show-outputs">搜索</a>
<% } %>
复制代码

• 打开终端 cd 到本地 博客 目录下，输入以下命令重新部署 博客 。

hexo clean && hexo g && hexo d
复制代码

---

集成步骤大概就是这样，搜索框样式可以根据需求自己写，另外如果你的 Swiftype 抓取不到 搜索索引 ，可以在 Domains 中点击 Recrawl 来重新抓取一下 搜索索引 数据，祝你成功。

将来的你，一定会感激现在拼命的自己，愿自己与读者的开发之路无限美好。

我的传送门： 博客 、简书 、微博 、GitHub 。