从新手到熟练：Hexo+Next集成Algolia搜索的完整指南

前端

2023-12-23 22:43:11

引言

欢迎阅读本指南，我们将深入探讨如何将强大的搜索功能集成到您的Hexo+Next博客中，让读者能够快速、轻松地找到所需的信息。在开始之前，确保您已经安装并设置了Hexo和Next主题。

第一步：准备工作

1. Algolia账号

首先，我们需要创建一个Algolia账号。前往Algolia官方网站https://www.algolia.com，点击“Sign Up”按钮，按照提示填写相关信息即可。

2. 申请免费套餐

Algolia提供免费套餐，您可以使用该套餐来体验其强大的搜索功能。在您的Algolia仪表盘中，点击“Account Settings”，然后点击“Billing”，再点击“Switch to Free Plan”。

3. 创建索引

在Algolia仪表盘中，点击“Indices”选项卡，然后点击“Create New Index”按钮。为您的索引选择一个名称，例如“hexo-next-search”。

第二步：安装依赖项

1. 安装Hexo Algolia插件

在您的Hexo博客根目录下，使用以下命令安装Hexo Algolia插件：

npm install hexo-algolia

2. 安装Algolia JavaScript库

在您的Next主题文件夹中，使用以下命令安装Algolia JavaScript库：

npm install algoliasearch --save

第三步：配置Hexo Algolia插件

1. 在 Hexo 配置文件中添加配置

在您的 Hexo 配置文件中（通常位于根目录下的 _config.yml），添加以下配置：

algolia:
  application_id: YOUR_ALGOLIA_APPLICATION_ID
  api_key: YOUR_ALGOLIA_API_KEY
  index_name: YOUR_ALGOLIA_INDEX_NAME

您可以在Algolia仪表盘中找到您的application_id和api_key，index_name是您在创建索引时选择的名称。

2. 在Next主题中添加JavaScript代码

在您的Next主题文件夹中的layout/_partial/search.ejs文件中，添加以下JavaScript代码：

<script>
  const algolia = require('algoliasearch');

  const client = algolia(
    'YOUR_ALGOLIA_APPLICATION_ID',
    'YOUR_ALGOLIA_API_KEY'
  );

  const index = client.initIndex('YOUR_ALGOLIA_INDEX_NAME');

  const searchInput = document.querySelector('.search-input');

  searchInput.addEventListener('input', (event) => {
    const query = event.target.value;

    if (query.length >= 3) {
      index.search(query, {
        hitsPerPage: 5
      }).then(({ hits }) => {
        const results = document.querySelector('.search-results');

        results.innerHTML = '';

        hits.forEach((hit) => {
          const resultItem = document.createElement('li');
          resultItem.classList.add('search-result');

          const resultLink = document.createElement('a');
          resultLink.href = hit.url;

          const resultTitle = document.createElement('h3');
          resultTitle.classList.add('search-result-title');
          resultTitle.textContent = hit.title;

          const resultExcerpt = document.createElement('p');
          resultExcerpt.classList.add('search-result-excerpt');
          resultExcerpt.textContent = hit.excerpt;

          resultLink.appendChild(resultTitle);
          resultLink.appendChild(resultExcerpt);
          resultItem.appendChild(resultLink);

          results.appendChild(resultItem);
        });
      });
    }
  });
</script>