前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于 Hexo 键入搜索功能

基于 Hexo 键入搜索功能

作者头像
唐志远
发布2022-10-27 18:37:23
1.1K0
发布2022-10-27 18:37:23
举报
文章被收录于专栏:FE32 CodeFE32 Code

前言

本站基于Hexo搭建,用的 🦋 hexo-theme-butterfly 主题 v3.7.1,请注意最新的🦋 hexo-theme-butterfly 版本已经更新到 v4.3.0 。 如果你是 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

效果图
效果图

效果图

步骤如下:

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

代码语言:javascript
复制
npm install hexo-generator-search --save

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

代码语言:javascript
复制
search:
  path: search.xml
  field: post
  content: true

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

代码语言:javascript
复制
local_search:
-  enable: false
+  enable: true

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

代码语言:javascript
复制
hexo cl && hexo generate
hexo s -p 8000

详情可参考 hexo-generator-search

Algolia(推荐)

效果图
效果图

效果图

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

获取 Algolia 账号

  1. 注册 Algolia。 进入官网地址 注册,也可以直接用Github授权登录。
  1. 新建 Index。
  1. 创建拥有一定权限的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(推荐)
  • hexo-algolia

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

代码语言:javascript
复制
npm install hexo-algoliasearch --save

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

代码语言:javascript
复制
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

代码语言:javascript
复制
hexo algolia

到如下信息,证明成功了,可以去 Algolia 网站上查看,索引已经上传成功了。

代码语言:javascript
复制
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中修改以下内容:

代码语言:javascript
复制
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "我们没有找到任何搜索结果: ${query}"
    hits_stats: "找到${hits}条结果(用时${time} ms)"

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

代码语言:javascript
复制
hexo cl && hexo generate
hexo s -p 8000

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

代码语言:javascript
复制
npm install hexo-algolia --save

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

代码语言:javascript
复制
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

代码语言:javascript
复制
export HEXO_ALGOLIA_INDEXING_KEY=your apiKey
hexo algolia

到如下信息,证明成功了,可以去 Algolia 网站上查看,索引已经上传成功了。

代码语言:javascript
复制
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中修改以下内容:

代码语言:javascript
复制
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "我们没有找到任何搜索结果: ${query}"
    hits_stats: "找到${hits}条结果(用时${time} ms)"

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

代码语言:javascript
复制
hexo cl && hexo generate
hexo s -p 8000
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-07-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • Local search
  • Algolia(推荐)
    • 获取 Algolia 账号
      • 安装依赖 && 写入配置
      相关产品与服务
      命令行工具
      腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档