基于 Hexo 键入搜索功能
原文链接： 基于 Hexo 键入搜索功能
前言
本站基于
Hexo搭建，用的 hexo-theme-butterfly 主题 v3.7.1，请注意最新的 hexo-theme-butterfly 版本已经更新到 v4.2.2 。
如果你是 v3.7.1 之外的版本，可能有些地方会有出入，请留意。
注意：我的博客根目录路径为 【G:/hexo-blog/blog-demo】，下文所说的根目录都是此路径，将用
[BlogRoot]代替。如果不清楚根目录路径，请回到教程 基于 Hexo 从零开始搭建个人博客（二），查看你执行hexo init xxx这条命令时所选择的路径，例如我选择的路径是【G:/hexo-blog】，我的博客根目录即为【G:/hexo-blog/xxx】。
修改站点配置文件_config.yml，路径为【BlogRoot/_config.yml】。
修改主题配置文件_config.butterfly.yml，路径为【BlogRoot/_config.butterfly.yml】。
推荐阅读
- 基于 Hexo 从零开始搭建个人博客（一）
- 基于 Hexo 从零开始搭建个人博客（二）
- 基于 Hexo 从零开始搭建个人博客（三）
- 基于 Hexo 从零开始搭建个人博客（四）
- 基于 Hexo 从零开始搭建个人博客（五）
- 基于 Hexo 从零开始搭建个人博客（六）
- 基于 Hexo 键入分享功能
- 基于 Hexo 键入在线聊天功能
- Hexo + Butterfly 自定义右键菜单
Local search
步骤如下：
- 安装依赖。
前往博客根目录，打开cmd命令窗口执行npm install hexo-generator-search --save。
npm install hexo-generator-search --save
- 注入配置。
修改站点配置文件_config.yml，添加如下代码：
search:
path: search.xml
field: post
content: true
template: ./search.xml
- 主题中开启搜索。
在主题配置文件_config.butterfly.yml中修改以下内容：
local_search:
- enable: false
+ enable: true
- 重新编译运行，即可看到效果。
前往博客根目录，打开cmd命令窗口依次执行如下命令：
hexo cl && hexo generate
hexo s -p 8000
详情可参考 hexo-generator-search
Algolia（推荐）
关于 Algolia 搜索功能，这里有两种插件，一个是 hexo-algolia ，一个是 hexo-algoliasearch。第一种亲测只能对匹配文章title，不能匹配文章内容查询到结果，所以推荐第二种。下面分别对这两种插件做不同的说明。
获取 Algolia 账号
-
注册 Algolia。
进入官网地址 注册，也可以直接用Github授权登录。
-
新建 Index。
-
创建拥有一定权限的
api key（如果选择第二种插件，可忽略这一步）。
进入【Settings > API Keys】。
进入【All API Keys > API Keys】，点击【New API Key】。在ACL里面增加删除和新增Object的权限（按理说只用这两个权限就行，下图中我多加了几个），然后填上 indices 栏目中的 index name ，选刚才你创建的那个index，其余默认就行。
点击【Create】，这样就得到了一个 api key。注意一下，这个key将会在下面的步骤中用到。
安装依赖 && 写入配置
hexo-algoliasearch（推荐）
- 安装 Algolia 依赖。
前往博客根目录，打开cmd命令窗口执行npm install hexo-algoliasearch --save。
npm install hexo-algoliasearch --save
- 注入配置。
修改站点配置文件_config.yml，添加如下代码：
algolia:
appId: "your applicationID"
apiKey: "your Search-Only API Key"
adminApiKey: "your Admin API Key"
chunkSize: 5000
indexName: "your indexName"
fields:
- content:strip:truncate,0,500
- excerpt:strip
- gallery
- permalink
- photos
- slug
- tags
- title
【applicationID】填入图中位置的 Applicaiton ID，【apiKey】填入图中位置的 Search-Only API Key ，【Admin API Key】填入图中位置的 Admin API Key ，【indexName】填入前面创建的索引名称。
3. 执行hexo algolia。
前往博客根目录，打开cmd命令窗口执行hexo algolia。
hexo algolia
到如下信息，证明成功了，可以去 Algolia 网站上查看，索引已经上传成功了。
INFO 128 files generated in 2.33 s
INFO Clearing index on Algolia...
INFO Index cleared.
INFO Indexing posts on Algolia...
INFO 65 posts indexed.
- 主题中写入 Alogolia 配置项。
在主题配置文件_config.butterfly.yml中修改以下内容：
algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "我们没有找到任何搜索结果: ${query}"
hits_stats: "找到${hits}条结果（用时${time} ms）"
- 重新编译运行，即可看到效果。
前往博客根目录，打开cmd命令窗口依次执行如下命令：
hexo cl && hexo generate
hexo s -p 8000
hexo-algolia
- 安装 Algolia 依赖。
前往博客根目录，打开cmd命令窗口执行npm install hexo-algolia --save。
npm install hexo-algolia --save
- 注入配置。
修改站点配置文件_config.yml，添加如下代码：
algolia:
applicationID: 'your applicationID'
apiKey: 'your Search-Only API Key'
indexName: 'your indexName'
【applicationID】填入图中位置的 Applicaiton ID，【apiKey】填入图中位置的 Search-Only API Key，
【indexName】填入前面创建的索引名称。
3. 上传数据到 Algolia。
前往博客根目录，打开Git，依次执行如下命令：
【your apiKey】替换为刚才自己创建拥有权限的api key。
export HEXO_ALGOLIA_INDEXING_KEY=your apiKey
hexo algolia
到如下信息，证明成功了，可以去 Algolia 网站上查看，索引已经上传成功了。
INFO [hexo-algolia] Testing HEXO_ALGOLIA_INDEXING_KEY permissions.
INFO Start processing
INFO [hexo-algolia] 7 records to index (post, page).
INFO [hexo-algolia] Indexing chunk 1 of 1 (7 records)
INFO [hexo-algolia] Indexing done.
- 主题中写入 Alogolia 配置项。
在主题配置文件_config.butterfly.yml中修改以下内容：
algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "我们没有找到任何搜索结果: ${query}"
hits_stats: "找到${hits}条结果（用时${time} ms）"
- 重新编译运行，即可看到效果。
前往博客根目录，打开cmd命令窗口依次执行如下命令：
hexo cl && hexo generate
hexo s -p 8000