hexo博客添加搜索功能
时间: 2023-09-14 09:06:36 浏览: 217
要为 Hexo 博客添加搜索功能,你可以使用第三方搜索引擎,如 Algolia 或 Google Custom Search。这里我们介绍如何使用 Algolia。
Algolia 是一个强大的搜索引擎,提供了易于使用的 API,可以轻松地将搜索功能添加到你的 Hexo 博客中。以下是如何为 Hexo 博客添加 Algolia 搜索的步骤:
1. 注册 Algolia 账户并创建一个应用程序。
2. 安装 Hexo Algolia 插件。
```
npm install hexo-algolia --save
```
3. 在博客根目录下创建一个名为 `algolia.json` 的配置文件,并填写以下内容:
```
{
"applicationID": "YOUR_APP_ID",
"apiKey": "YOUR_API_KEY",
"indexName": "YOUR_INDEX_NAME"
}
```
将 `YOUR_APP_ID`、`YOUR_API_KEY` 和 `YOUR_INDEX_NAME` 替换为你在 Algolia 上创建的应用程序的信息。
4. 在你的 Hexo 主题中添加搜索框和搜索结果页面。
在主题的相应文件中添加以下代码:
搜索框:
```html
<form class="search-form" method="get" action="/search/">
<input class="search-input" type="text" placeholder="Search" name="query">
<button class="search-submit" type="submit">Search</button>
</form>
```
搜索结果页面:
```html
---
title: "Search Results"
layout: "search"
---
<section class="search-results">
{% for page in page.posts %}
<article class="search-result">
<h2 class="search-result-title"><a href="{{ page.url }}">{{ page.title }}</a></h2>
<p class="search-result-excerpt">{{ page.excerpt }}</p>
</article>
{% endfor %}
</section>
```
5. 重新生成站点并上传到你的服务器。
```
hexo generate
```
6. 同步你的博客数据到 Algolia 上。
```
hexo algolia
```
完成以上步骤后,你的 Hexo 博客就可以使用 Algolia 进行搜索了。当用户在搜索框中输入关键字并提交时,将会跳转到搜索结果页面,显示与关键字匹配的文章列表。
阅读全文