乐趣区

关于前端:Hexo-Butterfly-键入搜索功能

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

步骤如下:

  1. 装置依赖。
    返回博客根目录,关上 cmd 命令窗口执行npm install hexo-generator-search --save

    npm install hexo-generator-search --save
  2. 注入配置。
    批改站点配置文件_config.yml,增加如下代码:

    search:
      path: search.xml
      field: post
      content: true
      template: ./search.xml
  3. 主题中开启搜寻。
    在主题配置文件 _config.butterfly.yml 中批改以下内容:

  4. enable: false
  5. enable: true

  6. 从新编译运行,即可看到成果。
    返回博客根目录,关上 cmd 命令窗口顺次执行如下命令:

    hexo cl && hexo generate
    hexo s -p 8000

    详情可参考 hexo-generator-search

Algolia(举荐)

对于 Algolia 搜寻性能,这里有两种插件,一个是 hexo-algolia,一个是 hexo-algoliasearch。第一种亲测只能对匹配文章 title,不能匹配文章内容查问到后果,所以举荐第二种。上面别离对这两种插件做不同的阐明。

获取 Algolia 账号

  1. 注册 Algolia。
    进入官网地址 注册,也能够间接用 Github 受权登录。
  2. 新建 Index。
  3. 创立领有肯定权限的 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(举荐)

  1. 装置 Algolia 依赖。
    返回博客根目录,关上 cmd 命令窗口执行npm install hexo-algoliasearch --save

    npm install hexo-algoliasearch --save
  2. 注入配置。
    批改站点配置文件_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

    【applicationID】填入图中地位的 Applicaiton ID,【apiKey】填入图中地位的 Search-Only API Key,【Admin API Key】填入图中地位的 Admin API Key,【indexName】填入后面创立的索引名称。

  3. 执行 hexo algolia
    返回博客根目录,关上 cmd 命令窗口执行hexo algolia

    hexo algolia

到如下信息,证实胜利了,能够去 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)"
  2. 从新编译运行,即可看到成果。
    返回博客根目录,关上 cmd 命令窗口顺次执行如下命令:

    hexo cl && hexo generate
    hexo s -p 8000

hexo-algolia

  1. 装置 Algolia 依赖。
    返回博客根目录,关上 cmd 命令窗口执行npm install hexo-algolia --save

    npm install hexo-algolia --save
  2. 注入配置。
    批改站点配置文件_config.yml,增加如下代码:

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

    【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

    到如下信息,证实胜利了,能够去 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.
  4. 主题中写入 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)"
  5. 从新编译运行,即可看到成果。
    返回博客根目录,关上 cmd 命令窗口顺次执行如下命令:

    hexo cl && hexo generate
    hexo s -p 8000
退出移动版