0
点赞
收藏
分享

微信扫一扫

基于 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

基于 Hexo 键入搜索功能_个人博客

步骤如下:

  1. 安装依赖。 前往博客根目录,打开cmd命令窗口执行​​npm install hexo-generator-search --save​​。

npm install hexo-generator-search --save

  1. 注入配置。 修改站点配置文件​​_config.yml​​,添加如下代码:

search:
path: search.xml
field: post
content: true
template: ./search.xml

  1. 主题中开启搜索。 在主题配置文件​​_config.butterfly.yml​​中修改以下内容:

local_search:
- enable: false
+ enable: true

  1. 重新编译运行,即可看到效果。 前往博客根目录,打开cmd命令窗口依次执行如下命令:

hexo cl && hexo generate
hexo s -p 8000

详情可参考 ​​hexo-generator-search​​

Algolia(推荐)

基于 Hexo 键入搜索功能_个人博客_02

关于 Algolia 搜索功能,这里有两种插件,一个是 ​​hexo-algolia​​ ,一个是 ​​hexo-algoliasearch​​。第一种亲测只能对匹配文章title,不能匹配文章内容查询到结果,所以推荐第二种。下面分别对这两种插件做不同的说明。

获取 Algolia 账号

  1. 注册 Algolia。
  2. 进入官网地址 注册,也可以直接用Github授权登录。
  3. 基于 Hexo 键入搜索功能_个人博客_03

  4. 新建 Index。
  5. 基于 Hexo 键入搜索功能_个人博客_04

  6. 创建拥有一定权限的api key(如果选择第二种插件,可忽略这一步)。
  7. 进入【Settings > API Keys】。
  8. 基于 Hexo 键入搜索功能_Algolia_05

  9. 进入【All API Keys > API Keys】,点击【New API Key】。在ACL里面增加删除和新增Object的权限(按理说只用这两个权限就行,下图中我多加了几个),然后填上 indices 栏目中的 index name ,选刚才你创建的那个index,其余默认就行。
  10. 基于 Hexo 键入搜索功能_Hexo_06

    基于 Hexo 键入搜索功能_Local Search_07

  11. 点击【Create】,这样就得到了一个 api key。注意一下,这个key将会在下面的步骤中用到。
  12. 基于 Hexo 键入搜索功能_Hexo_08

安装依赖 && 写入配置

hexo-algoliasearch(推荐)
  1. 安装 Algolia 依赖。 前往博客根目录,打开cmd命令窗口执行​​npm install hexo-algoliasearch --save​​。

npm install hexo-algoliasearch --save

  1. 注入配置。 修改站点配置文件​​_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

基于 Hexo 键入搜索功能_Local Search_09

【applicationID】填入图中位置的 Applicaiton ID,【apiKey】填入图中位置的 Search-Only API Key ,【Admin API Key】填入图中位置的 Admin API Key ,【indexName】填入前面创建的索引名称。 3. 执行​​hexo algolia​​。

前往博客根目录,打开cmd命令窗口执行​​hexo algolia​​。

hexo algolia

基于 Hexo 键入搜索功能_Local Search_10

到如下信息,证明成功了,可以去 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.

  1. 主题中写入 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)"

  1. 重新编译运行,即可看到效果。 前往博客根目录,打开cmd命令窗口依次执行如下命令:

hexo cl && hexo generate
hexo s -p 8000

hexo-algolia
  1. 安装 Algolia 依赖。 前往博客根目录,打开cmd命令窗口执行​​npm install hexo-algolia --save​​。

npm install hexo-algolia --save

  1. 注入配置。 修改站点配置文件​​_config.yml​​,添加如下代码:

algolia:
applicationID: 'your applicationID'
apiKey: 'your Search-Only API Key'
indexName: 'your indexName'

基于 Hexo 键入搜索功能_个人博客_11

【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

基于 Hexo 键入搜索功能_个人博客_12

到如下信息,证明成功了,可以去 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.

  1. 主题中写入 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)"

  1. 重新编译运行,即可看到效果。 前往博客根目录,打开cmd命令窗口依次执行如下命令:

hexo cl && hexo generate
hexo s -p 8000

举报

相关推荐

0 条评论