关于前端:Hexo-Butterfly-键入搜索功能

9次阅读

共计 3394 个字符，预计需要花费 9 分钟才能阅读完成。

原文链接：基于 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 自定义右键菜单

步骤如下：

装置依赖。
返回博客根目录，关上 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 中批改以下内容：
enable: false
enable: true
从新编译运行，即可看到成果。
返回博客根目录，关上 cmd 命令窗口顺次执行如下命令：
```
hexo cl && hexo generate
hexo s -p 8000
```
详情可参考 hexo-generator-search

对于 Algolia 搜寻性能，这里有两种插件，一个是 hexo-algolia，一个是 hexo-algoliasearch。第一种亲测只能对匹配文章 title，不能匹配文章内容查问到后果，所以举荐第二种。上面别离对这两种插件做不同的阐明。

注册 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 将会在上面的步骤中用到。

装置 Algolia 依赖。
返回博客根目录，关上 cmd 命令窗口执行npm install hexo-algoliasearch --save。
```
npm install hexo-algoliasearch --save
```

注入配置。
批改站点配置文件_config.yml，增加如下代码：

algolia:
  applicationID: ''apiKey:''
  indexName: ''
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】填入后面创立的索引名称。

执行 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
```

装置 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】填入后面创立的索引名称。

上传数据到 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）"