Hexo + Chic 主题实现搜索功能

本文详细记录如何在 Hexo 中使用插件 hexo-generator-searchdb 实现基于 Chic 主题的实时搜索功能，包括搜索回复框、搜索结果卡、暗黑模式适配等细节。

项目地址：https://github.com/EvannZhongg/Blog-Learning.git

1. 安装插件

在 Hexo 根目录下打开终端，执行

1
npm install hexo-generator-searchdb --save

2. 打开根目录的 _config.yml 文件，添加（或修改）如下配置：

1
2
3
4
search:
  path: search.xml
  field: post
  format: html

3. 新建 search.css

建议路径: themes/hexo-theme-Chic/source/css/search.css

包含搜索框/结果卡/暗黑模式样式，具体代码可带文章开头项目地址中获取：

1
2
3
4
5
6
7
.search-container { ... }
.nav-search-input { ... }
.nav-search-result { ... }
.search-card { ... }
.dark-theme .nav-search-input { ... }
.dark-theme .search-card-snippet { ... }
@media (max-width: 768px) { ... }

4. 修改主题配置

打开theme/hexo-theme-Chic/_config.yml ，在 stylesheets 下增加一行 search.css 确保加载样式文件：

1
2
3
stylesheets:
  - /css/style.css
  - /css/search.css

5. 修改 header.ejs

对 theme/hexo-theme-Chic/layout/_partial/header.ejs 做了如下关键修改，具体代码可带文章开头项目地址中获取：

HTML 结构改动

  1. 在 <div class="menu navbar-right"> 中插入：
1
2
3
4
5
<div class="search-container">
  <a href="javascript:;" onclick="toggleSearchInput()">🔍</a>
  <input type="text" id="nav-search-input" class="nav-search-input" placeholder="Search..." oninput="navSearch(this)">
  <div id="nav-search-result" class="nav-search-result"></div>
</div>
  1. 在移动端导航 <div id="mobile-menu"> 中插入：
1
2
3
<a class="menu-item" href="javascript:;" onclick="toggleSearchInput()">🔍 Search</a>
<input type="text" id="nav-search-input-mobile" class="nav-search-input" placeholder="Search..." oninput="navSearch(this)">
<div id="nav-search-result" class="nav-search-result"></div>
  1. 保留并未更动主题切换按钮：
1
2
<input id="switch_default" type="checkbox" class="switch_default">
<label for="switch_default" class="toggleBtn"></label>

JS 功能改动

  1. 新增 toggleSearchInput() 方法，实现点击图标展开或隐藏搜索框。
1
2
3
4
5
6
7
8
9
function toggleSearchInput() {
  const inputs = document.querySelectorAll('.nav-search-input');
  const results = document.querySelectorAll('.nav-search-result');
  inputs.forEach(input => {
    input.classList.toggle('active');
    if (input.classList.contains('active')) input.focus();
  });
  results.forEach(r => r.style.display = 'none');
}
  1. 新增 navSearch() 方法，实现从 search.xml 加载数据并匹配关键词。
  2. 新增空白点击关闭逻辑：点击 .search-container 外部区域后自动隐藏搜索框并清空内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.addEventListener('DOMContentLoaded', function () {
  if (searchData.length === 0) {
    fetch('<%- config.root %>search.xml')
      .then(res => res.text())
      .then(xmlText => {
        const parser = new DOMParser();
        const xml = parser.parseFromString(xmlText, 'text/xml');
        const entries = xml.getElementsByTagName('entry');
        for (let entry of entries) {
          searchData.push({
            title: entry.getElementsByTagName('title')[0]?.textContent || '',
            content: entry.getElementsByTagName('content')[0]?.textContent || '',
            url: entry.getElementsByTagName('url')[0]?.textContent || ''
          });
        }
      });
  }
});

6. 实现效果

  • 点击图标展示搜索框
  • 实时匹配文章标题/内容
  • 结果以卡片形式展示
  • 黑色模式样式自动选择
  • 点击空白地方隐藏结果 + 清空文本
  • 移动端页面适配
    image

7. 新生成并运行 Hexo

1
2
3
hexo clean
hexo g
hexo s

然后访问 http://localhost:4000，查看任意一段代码块，右上角应出现复制图标按钮。

修改后的相关完整代码可以在文章开头的项目地址中获取

该项目代码基于 Hexo , hexo-theme-Chic 和 hexo-generator-searchdb。