如何在个人博客引擎 Hexo 中添加 Swiftype 搜索组件

简介: 在您现在看到的我的博客站点,后台使用的是 Hexo 作为博客引擎,但是默认集成的搜索组件是进行 form 提交到 Google 进行搜索的,为了更好地体验,本文介绍如何在 Hexo 博客中集成 Swiftype 搜索组件。

在您现在看到的我的博客站点,后台使用的是 Hexo 作为博客引擎,但是默认集成的搜索组件是进行 form 提交到 Google 进行搜索的,为了更好地体验,本文介绍如何在 Hexo 博客中集成 Swiftype 搜索组件。
更好的阅读体验在我的博客原文地址:http://blog.parryqiu.com/2016/02/03/how_to_add_swiftype_search_to_hexo/

1. 关于搜索组件

站点中集成搜索组件,可以很大地方便用户进行快速查找博客内容,但是 Hexo 处理搜索默认的逻辑是:输入关键字后模拟 form 提交到 Google 进行搜索的。但是在「某些」开放的国家,Google 是不可以访问的。你可能想到可以模拟提交到贵国「高端搜索引擎」百度进行搜索啊,恩,我想了想,我还是告诉你如何接入更加方便的 Swiftype 比较好。
其实接入 Google 等搜索引擎,也是在 Google 收录了你站点的内容后才能搜索到的,用的其实就是 site: 语法搜索。

2. 效果预览

本站 接入 Swiftype 搜索组件后的效果如图所示。

截图

3. Swiftype 搜索组件介绍

Swiftype 搜索组件的原理就是你提交站点给它,它立即对内容进行索引抓取,之后提供给你类似 JS SDK 一样的东西给你使用即可,设计的非常灵活、方便。

截图

4. Hexo 接入步骤

4.1 注册账号

注册页面 注册一个账号。

4.2 添加站点

添加站点的 URL 或者站点的 SiteMap 给 Swiftype 以便它进行抓取,SiteMap 可以提交多个,如我站点的 SiteMap ,我都拆分进行了提交。
关于 Hexo 博客引擎如何生成站点的 SiteMap,请参见 hexo-generator-sitemap 插件或 hexo-generator-seo-friendly-sitemap 插件。

4.3 站点接入

Hexo 的接入非常方便,按照如下代码修改搜索模块即可。

<div class="search">
<input type="search" class="st-default-search-input" placeholder="<%= __('search') %>">
</div>

然后在页脚引入对应的 JS 代码即可,国内网络加载没有问题。

4.4 其他可配置项

可以通过 Swiftype 的控制面板修改如搜索结果、智能提示样式等,可定制化的地方很多;
Swiftype 还可以手动干预搜索结果以及对搜索结果进行强制分组等。
Swiftype 的控制面板中也提供了供您分析用户搜索的分析报表。

5. 结语

Swiftype 有一个试用期,到期后只会限制一些高级功能的使用,不影响搜索组件的试用。
总之,这应该是 Hexo 博客引擎一个比较优雅的搜索组件解决方案。


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
2月前
|
自然语言处理 JavaScript 网络协议
简单使用vitepress快速搭建一个文档网站
VitePress 是一个静态站点生成器 (SSG),类似的项目有docsify、VuePress、hexo。用 Markdown 编写的内容生成可以轻松部署到任何地方的静态 HTML 页。
55 9
|
3月前
|
人工智能 API 开发者
插件开发最佳实践:以必应(Bing)搜索插件开发为例
插件是Botnow中增强Bot功能的关键工具,可通过添加各类插件如新闻阅读、效率工具等,扩展Bot的知识与技能。本文以开发“必应搜索”插件为例,详细介绍从登录控制台开始,经过创建插件、定义接口、设置认证信息直至在Bot中实际运用插件的全过程。遵循最佳实践,开发者能构建高质量插件,显著提升Bot的服务能力。
64 0
|
3月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
193 0
|
6月前
|
NoSQL MongoDB Docker
百度搜索:蓝易云【Scrapy框架之Docker安装MongoDB教程。】
现在,你已经成功在Scrapy框架中使用Docker安装并配置了MongoDB。你可以在Scrapy爬虫中使用MongoDB进行数据存储和处理。
245 0
|
程序员
🚀VuePress-theme-hope2 搭建个人网站,万字长文保姆级教程,包含自动部署、评论、搜索等功能2
🚀VuePress-theme-hope2 搭建个人网站,万字长文保姆级教程,包含自动部署、评论、搜索等功能
|
JavaScript
🚀VuePress-theme-hope2 搭建个人网站,万字长文保姆级教程,包含自动部署、评论、搜索等功能1
🚀VuePress-theme-hope2 搭建个人网站,万字长文保姆级教程,包含自动部署、评论、搜索等功能
|
存储 计算机视觉 容器
uniapp搜索功能
uniapp搜索功能
144 0
|
弹性计算 安全 JavaScript
基于函数计算快速搭建Wordpress博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Wordpress博客。
|
前端开发 JavaScript SEO
WordPress 主题与插件有什么区别?
WordPress是一个广泛使用的开源内容管理系统(CMS),因为它非常灵活且易于使用。WordPress的灵活性主要来自于它的主题和插件。WordPress主题和插件都可以扩展和定制WordPress的功能,但它们之间有很大的区别。在本文中,北京六翼带大家讨论WordPress主题和插件之间的区别。
|
JavaScript 数据库
仿百度实现本地搜索组件(npm)
仿百度实现本地搜索组件(npm)
117 0
仿百度实现本地搜索组件(npm)
下一篇
无影云桌面