使用 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 来重新抓取一下 搜索索引 数据,祝你成功。

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

我的传送门: 博客简书微博GitHub

如果觉得我的文章对您有用,请随意打赏吧,您的支持将鼓励我继续创作!
0%