使用 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

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