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

Swiftype

当我们的 博客 文章变的越来越多的时候,就非常需要使用 站内搜索 功能,否则寻找某一篇文章就会变的麻烦,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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,860评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,079评论 19 139
  • 对你最重的信赖,是不怕你说走就走。 对你最满的陪伴,是相信你有始有终。 11月的开始,经历了好多变故,从爱情到友情...
    Ajun俊阅读 419评论 0 1
  • 1、插入和删除区域 2、插入列 插入单元格 删除行列 删除单元格 删除内容 重命名工作表 移动工作表 删除工作表 ...
    轿子先生阅读 293评论 0 0
  • 兼容性 DOM2级事件 为同一个元素添加事件时,按照加载顺序依次进行。 IE: 与DOM0区别: 作用于不用,DO...
    他在发呆阅读 469评论 0 1