基于 Hexo 键入搜索功能

  • 基于 Hexo 键入搜索功能已关闭评论
  • 15 次浏览
  • A+
所属分类:Web前端
摘要

原文链接: 基于 Hexo 键入搜索功能本站基于Hexo搭建,用的 🦋 hexo-theme-butterfly 主题 v3.7.1,请注意最新的🦋 hexo-theme-butterfly 版本已经更新到 v4.2.2 。

如果你是 v3.7.1 之外的版本,可能有些地方会有出入,请留意。


原文链接: 基于 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】。

推荐阅读

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 键入搜索功能

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

获取 Algolia 账号

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

  2. 新建 Index。
    基于 Hexo 键入搜索功能

  3. 创建拥有一定权限的api key(如果选择第二种插件,可忽略这一步)。
    进入【Settings > API Keys】。
    基于 Hexo 键入搜索功能
    进入【All API Keys > API Keys】,点击【New API Key】。在ACL里面增加删除和新增Object的权限(按理说只用这两个权限就行,下图中我多加了几个),然后填上 indices 栏目中的 index name ,选刚才你创建的那个index,其余默认就行。
    基于 Hexo 键入搜索功能
    基于 Hexo 键入搜索功能
    点击【Create】,这样就得到了一个 api key。注意一下,这个key将会在下面的步骤中用到。
    基于 Hexo 键入搜索功能

安装依赖 && 写入配置

hexo-algoliasearch(推荐)

  1. 安装 Algolia 依赖。
    前往博客根目录,打开cmd命令窗口执行npm install hexo-algoliasearch --save
npm install hexo-algoliasearch --save 
  1. 注入配置。
    修改站点配置文件_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 

基于 Hexo 键入搜索功能
【applicationID】填入图中位置的 Applicaiton ID,【apiKey】填入图中位置的 Search-Only API Key ,【Admin API Key】填入图中位置的 Admin API Key ,【indexName】填入前面创建的索引名称。
3. 执行hexo algolia
前往博客根目录,打开cmd命令窗口执行hexo algolia

hexo algolia 

基于 Hexo 键入搜索功能

到如下信息,证明成功了,可以去 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 键入搜索功能
【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 键入搜索功能
到如下信息,证明成功了,可以去 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