当前位置: 首页 > news >正文

博客搭建之路:hexo增加搜索功能


文章目录

    • hexo增加搜索功能
      • 本地搜索弊端
      • algolia搜索


hexo增加搜索功能

hexo版本5.0.2 npm版本6.14.7 next版本7.8.0

作为一个博客,没有搜索功能,如何在大批文章中找到自己想要的,那在hexo中如何增加搜索功能呢?

search:path: search.jsonfield: post

在博客目录下安装npm install hexo-generator-search --save,此时使用hexo cl && hexo g就会在博客public目录下生成一个search.json,在使用hexo d部署上去搜索就可以用了

本地搜索弊端

前期还好,后来随着我的文章越来越多,search.json文件已经达到了十几M,每次加载页面都需要花费几分钟来加载search.json文件,使用体验很不好

algolia搜索

本地搜索走不通,那就只能使用远程搜索了,还好hexo提供了algolia搜索

先去官网登录一下,这里我使用的是Github登录,然后新建一个Index

创建索引

创建Index后,右上角头像处点击选择Settings

ApiKey

查看ApiKeys

ApiKeys

_config.yml中配置algolia

algolia:applicationID: #对应Application IDapiKey: # 对应Search-Only API KeyadminApiKey: # Admin API KeyindexName: # 创建的那个索引名称

还需要在环境变量中配置HEXO_ALGOLIA_INDEXING_KEY 值为 页面中Admin API Key的值

在博客目录下安装npm install hexo-algolia --save

之后修改使用的主题下(我使用的是next主题)的_config.yml,配置使用algolia搜索

algolia_search:enable: true # 开始algolia搜索hits:per_page: 10labels:input_placeholder: 查询hits_empty: "没有找到任何相关结果: ${query}"hits_stats: " ${time} ms内找到 ${hits} 条结果"# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:enable: false #关闭本地搜索

此时执行hexo algolia就会将博客生成的search发送到algolia中,而部署的博客就可以搜索到所上传的内容

搜索内容

这里有一个小问题,在执行hexo algolia时,algolia会多条合并进行提交,而免费的algolia会有大小的限制,可以看到超过10000字节就不行了,algolia默认会50条合并提交,可以设置几条进行合并

使用chunkSize来设置条数,如hexo algolia --chunkSize 10 就是10条合并

字数限制

每次都指定参数还是挺麻烦的,看一下algolia中是怎么写的吧。

发现在node_modules/hexo-algolia/lib/command.js中有一个默认配置

var CONSOLE_DEFAULTS = {dryRun: false,flush: false,chunkSize: 50,layouts: INDEXED_LAYOUTS
};

设置的chunkSize是50,我由于正文内容比较多,改成了3,这样就不需要每次都带参数了

参考文献

  • hexo增加搜索功能
http://www.lryc.cn/news/470129.html

相关文章:

  • 2024年最新互联网大厂精选 Java 面试真题集锦(JVM、多线程、MQ、MyBatis、MySQL、Redis、微服务、分布式、ES、设计模式)
  • MybatisPlus入门(一)MybatisPlus简介
  • QoS学习笔记
  • 图(邻接矩阵)知识大杂烩!!(邻接矩阵结构,深搜,广搜,prim算法,kruskal算法,Dijkstra算法,拓扑排序)(学会一文让你彻底搞懂!!)
  • Prometheus自定义PostgreSQL监控指标
  • 400行程序写一个实时操作系统(十六):操作系统中的调度策略
  • 从安灯系统看汽车零部件工厂的智能制造转型
  • SwiftUI(三)- 渐变、实心形状和视图背景
  • RK3568-ota升级
  • GR-ConvNet代码详解
  • Excel自带傅里叶分析数据处理——归一化处理
  • Centos7.6版本安装mysql详细步骤
  • 寄宿学校:为自闭症儿童提供全面的教育和关爱
  • LLaMA Factory环境配置
  • STM32实现毫秒级时间同步
  • 瑞吉外卖之com.fasterxml.jackson.dataformat.cbor.CBORFactor相关报错
  • CSS - grid制作表格
  • 【pip】 的换源(临时换源和永久换源)
  • Kaggle 数据集dogs-vs-cats的错误
  • 【网络原理】网络地址转换----NAT技术详解
  • React怎么创建虚拟dom和挂载到页面
  • kafka-console-ui的简介及安装使用
  • git 的分支管理详解
  • w003基于Springboot的图书个性化推荐系统的设计与实现
  • 医院信息化与智能化系统(6)
  • 前端学习---(6)js基础--4
  • 241026-RHEL如何以root身份卸载Docker
  • iPhone当U盘使用的方法 - iTunes共享文件夹无法复制到电脑怎么办 - 如何100%写入读出
  • jenkins ssh 免密报错Host key verification failed.
  • 智能科学与技术(一级学科)介绍