功能介绍

本地搜索是指搜索范围为当前用户所有博客，并非第三方搜索引擎比如百度、谷歌。

1.安装依赖

npm install  hexo-generator-search --save

2.修改配置文件

修改hexo的 _congif.yml 的文件，在文件中添加：

search:
  path: search.xml
  field: post
  content: true
  template: themes/heyan/search.xml

3.导入 ** search.xml** 文件

导入模版文件 search.xml 文件或下载文件到主题文件中。模版地址(node_modules/hexo-generator-search/demo_output/search.xml)；下载地址；

image-20240407104043548

4.添加 search.js

(1) 在主题的 source 目录中添加 search.js 文件，内容参考。

image-20240407104330776

(2) 在 header.js 文件中添加引入 js。

Tips: 引用 search.js 前需要检查主题组件是否引用 jquery.js 文件。

​ 本文引用的是jquery线上地址：

<%- js('js/search.js') %> 

<script type="text/javascript">
	var search_path = "<%= config.search.path %>";
	if (search_path.length == 0) {
		search_path = "search.xml";
	}
	var path = "<%= config.root %>" + search_path;
	searchFunc(path, 'local-search-input', 'local-search-result');
</script>

(3) 配置搜索输入框

theme.search.placeholder 为主题 ._config.yml 文件中配置的 search对应的参数。

search:

enable: true # 是否使用搜索功能

placeholder: 搜索什么？

<form class="d-flex">
    <input id="local-search-input" class="form-control me-2 pe-4" type="search" placeholder="<%- theme.search.placeholder%> " aria-label="Search">
</form>

(4) 指定搜索结果的输出位置，并把搜索结果结果输出到 body 前面。

添加至主题的 layout.ejs 文件中，在<%-body %>前面添加搜索结果。指定id。

Tips: id值不可修改，search.js 中的默认值

<div id="local-search-result"></div>

(5) 添加搜索功能完成，后续需要根据个人实际情况自行测试，调整样式。

image-20240407105814529

参考博客地址：https://blog.csdn.net/smileyan9/article/details/124368376