0%

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

发表于 更新于 分类于

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

1. 注册 Swiftype 账号

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

注册

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

免费试用

2. 创建 search engine

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

Create a search engine

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

Content

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

Domains

3. 更改搜索设置

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

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

Weights

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

Install Search

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

自己加 input 搜索框

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

自带的搜索按钮

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

Activate Swiftype

4. 开始集成 Swiftype 搜索

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

Install Search

  • 打开本地 博客 主题目录下的 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 来重新抓取一下 搜索索引 数据，祝你成功。