草庐IT

基于 Hexo 键入搜索功能

唐志远の博客 2023-03-28 原文

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

推荐阅读

步骤如下:

  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(推荐)

关于 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
  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


【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)"
  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'


【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.
  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 键入搜索功能的更多相关文章

  1. ruby - 按值降序排列散列,然后按升序键入 ruby - 2

    我有这样的哈希trial_hash={"key1"=>1000,"key2"=>34,"key3"=>500,"key4"=>500,"key5"=>500,"key6"=>500}我按值降序排列:my_hash=trial_hash.sort_by{|k,v|v}.reverse我现在是这样理解的:[["key1",1000],["key4",500],["key5",500],["key6",500],["key3",500],["key2",34]]但我希望当值相同时按键的升序排序。我该怎么做?例如:上面的散列将以这种方式排序:[["key1",1000],["key3",500

  2. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索,因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索?require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  3. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能? - 2

    只是想确保我理解了事情。据我目前收集到的信息,Cucumber只是一个“包装器”,或者是一种通过将事物分类为功能和步骤来组织测试的好方法,其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗? 最佳答案 有点。它是一种组织测试的方式,但不仅如此。它的行为就像最初的Rails集成测试一样,但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意,您可以使用步骤来构建对象和设置状态,但通常您

  4. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读:随着叮咚买菜业务的发展,不同的业务场景对数据分析提出了不同的需求,他们希望引入一款实时OLAP数据库,构建一个灵活的多维实时查询和分析的平台,统一数据的接入和查询方案,解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型,最终引入ApacheDoris作为最终的OLAP分析引擎,Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图,在叮咚买菜数十个业务场景中广泛应用。作者|叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月,是一家专注美好食物的创业公司。叮咚买菜专注吃的事业,为满足更多人“想吃什么”而努力,通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  5. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  6. kvm虚拟机安装centos7基于ubuntu20.04系统 - 2

    需求:要创建虚拟机,就需要给他提供一个虚拟的磁盘,我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式:qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令,基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机,另外在创建虚拟机之前,提前打开vnc客户端,在创建虚拟机的时候,通过vnc

  7. ruby - 如何搜索有用的 ruby - 2

    寻找有用的ruby的好网站是什么? 最佳答案 AgileWebDevelopment列出插件(虽然不是ruby​​gems,我不确定为什么),并允许人们对它们进行评级。RubyToolbox按类别列出gem并比较它们的受欢迎程度。Rubygems有一个搜索框。StackOverflow对最有用的rails插件和ruby​​gems有疑问。 关于ruby-如何搜索有用的ruby,我们在StackOverflow上找到一个类似的问题: https://stacko

  8. ruby - 如何搜索、递增和替换 Ruby 字符串中的整数子字符串? - 2

    我有很多这样的文档:foo_1foo_2foo_3bar_1foo_4...我想通过获取foo_[X]的所有实例并将它们中的每一个替换为foo_[X+1]来转换它们。在这个例子中:foo_2foo_3foo_4bar_1foo_5...我可以用gsub和一个block来做到这一点吗?如果不是,最干净的方法是什么?我真的在寻找一个优雅的解决方案,因为我总是可以暴力破解它,但我觉得有一些正则表达式技巧值得学习。 最佳答案 我(完全)不懂Ruby,但类似这样的东西应该可以工作:"foo_1foo_2".gsub(/(foo_)(\d+)/

  9. ruby - Ruby 中的必应搜索 API - 2

    我读了"BingSearchAPI-QuickStart"但我不知道如何在Ruby中发出这个http请求(Weary)如何在Ruby中翻译“Stream_context_create()”?这是什么意思?"BingSearchAPI-QuickStart"我想使用RubySDK,但我发现那些已被弃用前(Rbing)https://github.com/mikedemers/rbing您知道Bing搜索API的最新包装器(仅限Web的结果)吗? 最佳答案 好吧,经过一个小时的挫折,我想出了一个办法来做到这一点。这段代码很糟糕,因为它是

  10. ruby-on-rails - rails 功能测试 - 2

    在Rails自动生成的功能测试(test/functional/products_controller_test.rb)中,我看到以下代码:classProductsControllerTest我的问题是:方法调用products()在哪里/如何定义?products(:one)到底是什么意思?看代码,大概意思是“创建一个产品”,但是它是如何工作的呢?注意我是Ruby/Rails的新手,如果这些是微不足道的问题,我深表歉意。 最佳答案 如果您查看test/fixtures文件夹,您会看到一个products.yml文件。这是在您创建

随机推荐