加载中...

hexo-Butterfly添加本地搜索功能

发表于2025-03-26|更新于2025-04-18|Hexo美化

|总字数:190|阅读时长:1分钟|浏览量:

¶博客根目录安装插件

npm install hexo-generator-search --save

¶配置插件

¶在hexo配置文件_config.yml文件添加如下配置

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

¶在主题配置文件_config.Butterfly.yml文件找到search配置

search:
   # 选择：algolia_search / local_search / docsearch
  # 如果不需要搜索功能，保持为空
  use: local_search
  placeholder:

   # Algolia 搜索
  algolia_search:
   # 每页搜索结果数量
    hitsPerPage: 6

  # 本地搜索
  local_search:
    # 页面加载时预加载搜索数据
    preload: false
   # 每篇文章显示的顶部 n 个搜索结果，设置为 -1 显示所有结果
    top_n_per_article: 1
    # 将 HTML 字符串反转义为可读内容
    unescape: false
    CDN:

  # Docsearch
  # https://docsearch.algolia.com/
  docsearch:
    appId:
    apiKey:
    indexName:
    option:

¶应用配置文件

hexo clean
hexo g
hexo s

就可以看到效果了

¶效果如下

本地搜索效果.png

文章作者: 人间客

文章链接: https://www.mycloudhub.top/posts/8b79121.html

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源人间客的Blog！

Hexo Hexo-Butterfly

相关推荐

Hexo-Butterfly主题添加自定义css和js文件

¶创建文件为了实现魔改和美化网站，添加自定义文件是一个不可或缺的步骤。接下来，我将详细说明如何创建和引入 CSS 和 JS 文件，其他类型的文件处理方式类似。首先，我们需要定位到博客的根目录下，找到 source 文件夹。虽然主题的 source 文件夹也可以进行操作，但不推荐这样做。接下来，请按照以下步骤进行：创建文件夹：在 source 文件夹内，我们可以创建 js 和 css 文件夹，以便于管理和存放我们的自定义样式和脚本。此外，你还可以根据需要创建其他文件夹，比如： img 文件夹：用于存放图片资源。 font 文件夹：用于存放字体文件。添加自定义 CSS 和 JS 文件：在 css 文件夹中创建自定义的 CSS 文件，例如 custom.css；在 js 文件夹中创建自定义的 JS 文件，例如 custom.js。这些文件将用于覆盖或增强现有的样式和功能。引入 CSS 和 JS 文件：要使浏览器加载我们新创建的 CSS 和 JS 文件，需要在主题的模板文件中进行引入。一般来说，这些引入代码应该放在 <head> 标签内（对于...

hexo-Butterfly主题添加Twikoo评论系统

¶Twikoo Twikoo 是一个简洁、安全、免费的静态网站评论系统。 ¶特色 ¶简单免费搭建（使用云开发 / Vercel / 私有部署评论后台）简单部署（支持云开发 / Vercel 一键部署） ¶易用支持回复、点赞无需额外适配，支持搭配浅色主题与深色主题使用支持 API 调用，批量获取文章评论数、最新评论访客在昵称栏输入 QQ 号，会自动补全 QQ 昵称和 QQ 邮箱访客填写数字 QQ 邮箱，会使用 QQ 头像作为评论头像支持评论框粘贴图片（可禁用）支持插入图片（可禁用）支持去不图床、云开发图床支持插入表情（可禁用）支持 Ctrl + Enter 快捷回复评论框内容实时保存草稿，刷新不会丢失支持 Katex 公式支持按语言的代码高亮 ¶安全隐私信息安全（通过云函数控制敏感字段（邮箱、IP、环境配置等）不会泄露）支持 Akismet 垃圾评论检测（需自行注册 akismet.com）支持腾讯云内容安全垃圾评论检测（需自行注册腾讯云内容安全）支持人工审核模式防 XSS 注入支持限制每个 IP 每 10...

hexo-Butterfly主题添加图库页

¶创建页面图库页面只是普通的页面，你只需要 hexo n page xxxxx 创建你的页面就行第一步：执行如下命令 hexo new page gallery 这样就会在博客的根目录下的/source下生成/gallery/index.md文件，gallery可以自定义你自己喜欢的单词！第二步：在index.md文件的 Front-matter 中添加aside、comments，就可以不展示侧边栏和评论区第三步：在主题配置文件_config.butterfly.yml的menu中设置图库路径这样就可以在首页菜单栏进入相册收首页 ¶设置图库集合页图库集合页面就是普通的页面，比如上面创建的/gallery/index.md页面，下面将其设置成一个图库集合页面！设置图库集合页面是使用外挂标签来实现的，书写格式如下： <div class="gallery-group-main">{% galleryGroup name description link img-url %}{% galleryGroup...

hexo-Butterfly添加数学公式插件功能

¶前言 Butterfly主题支持Mathjax和KaTex两种数学公式渲染引擎，本文选择KaTex插件，因为 KaTeX 更快更轻量，因此没有 MathJax 的功能多（比如右键菜单）。 ¶在主题配置文件_config.Butterfly.yml找到math配置选择KaTex #关于 per_page# 如果设置为 true，将在每个页面加载 mathjax/katex 脚本# 如果设置为 false，将根据你的设置加载 mathjax/katex 脚本（在页面的 front-matter 中添加 'mathjax: true' 或者 'katex: true'）math: # 选择：mathjax, katex # 如果不需要数学公式，保持为空 use: katex per_page: false hide_scrollbar: false mathjax: # 启用上下文菜单 enableMenu: true # 选择：all / ams / none，这控制是否对公式编号以及如何编号 ...

Hexo用户手册

¶关于指南 TIP 致主题的新用户：本指南经过数个版本打磨，绝大部分的功能都有详细说明，请仔细阅读，节约自己和他人的时间；本指南中提到的：“站点配置” 指的 Hexo 博客目录下的 _config.yml，“主题配置” 指的是 theme/fluid/_config.yml 或者 _config.fluid.yml ，注意区分；本指南中提到的 source 目录都指的是博客目录下的 source 文件夹，不推荐修改主题内 source 目录；每次无论 hexo g 或 hexo s，都最好先使用 hexo clean 清除本地缓存；页面结果以本地 hexo s 为准，部署后的异常大部分是线上缓存原因，在确认没有报错的情况下，等待若干时间后即可正常；由于主题的不同版本会存在配置差异，本指南以最新版本为准。 ¶hexo 常用指令 #清空生成文件hexo clean#生成文文件hexo g#本地部署hexo s#远程部署hexo d 先清空在生成在部署

¶1.在新电脑上安装git和Node.js ¶2.安装Hexo ¶3. 复制原电脑上的数据 ¶3.1需要复制的 _config.yml：站点配置/对应的主题配置 package.json：说明使用那些包 scaffolds：文章的模板 source：自己写的博客文件 themes：主题 .gitignore：限定在提交的时候哪些文件可以忽略 ¶4.新建一个博客文件，将复制的文件粘贴进去在git bash中切换目录到新拷贝的文件夹里，使用npm install 命令，进行模块安装。很明显我们这里没用hexo init初始化，因为有的文件我们已经拷贝生成过来了，所以不必用hexo init去整体初始化，如果不慎在此时用了hexo init，则站点的配置文件_config.yml里面内容会被清空使用默认值，所以这一步一定要慎重，不要用hexo init。 ¶5.安装其他插件 npm install hexo-deployer-git --save # 为了使用hexo d来部署到git上 #下面可以省略npm install...

评论

数据加载中