Nuxt4集成Algolia搜索服务
整它这个搜索组件比做索引麻烦多了
托管站内全文搜索
现在市面上有一堆搜索引擎，比如 Algolia Meilisearch ZincSearch Elasticsearch.....
ELK学习难度曲线太过分了，直接排除Elasticsearch。而ZincSearch，虽然比Elasticsearch轻量，但是还是要自己写很多东西，我整个博客新功能总不能整半个月吧，故跳过。
所以这块的选择只有两个Aloglia Meilisearch。
Algolia VS Meilisearch
之前在很多Vitepress写的文档上都可以见到Aloglia的搜索功能。Aloglia那个输入即出结果、支持错别字容错、还能高亮关键词的智能搜索框嫩牛逼呢，这么多人用一定有它牛逼的道理。那时候我还发现了 Meilisearch，它不仅支持自部署，也提供了官方托管服务 Meilisearch Cloud，看起来像是 Algolia 的开源平替。
但深入体验了一下午，发现了几个不能接受的点：
Meilisearch Cloud 的免费试用期只有 14 天。
自部署的是功能缩水的青春版。
索引生成不如Aloglia好使
相比之下，Algolia开发成本嫩低，你只需要做这几件事：
到Algolia官网，验证网站所有权。
给爬虫写好指定的结构 或者是后端API集成生成索引
配置索引字段（高亮，模糊搜索，需要返回的字段）
填个API Key，塞个instantsearch组件进去。（react/vue都有 但是写它样式有点折磨）
如果你用的是Hexo / VitePress，那么最适合Algolia，它有 DocSearch 爬虫自动抓取 + 官方主题插件，可以零配置实现接入搜索功能，填两个参数，搜索框直接生成，连样式都帮你整好了。
接入Algolia索引
这里只讲一些细节，具体怎么添加和设置去搜下其他的看吧(
爬虫设置
// 一个基础爬虫 支持DOM选择
recordExtractor: ({ url, $, helpers }) => {
const $content = $("#content");
if ($article.length === 0) return [];
const title = $article.find("h1").text().trim() || $("title").text();
const content = $content.text();
return [
{
title,
content,
url: url.pathname,
lang: "zh-CN",
},
];
索引设置
需要配置:
Searchable attributes 可被搜索的字段
Facets→Attributes for faceting
Highlighting 可高亮的字段
Snippeting 截取搜索结果
### 接入前端其他方法
用vue-instantsearch，封装好了的，填好参数就能用。但是具体样式和呈现的搜索组件需要自己改
```shell
npm install instantsearch.css vue-instantsearch
<template>
<AisInstantSearch
:future="{ preserveSharedStateOnUnmount: true }"
:search-client="searchClient"
index-name="你在Algolia上创建的index名"
>
<!-- 搜索输入框 -->
<AisSearchBox class="w-full"/>
<!-- 获取搜索状态 -->
<AisStateResults v-slot="{ results }">
<AisHits>
<template #item="{ item }">
{ item }
</template>
</AisHits>
</AisStateResults>
</AisInstantSearch>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { liteClient } from 'algoliasearch/lite';
import {
AisInstantSearch,
AisSearchBox,
AisHits,
AisStateResults
} from 'vue-instantsearch/vue3/es';
// instantsearch.css里面有一堆官方样式 复制出来自己改改也可以
const searchClient = liteClient(
'应用ID 填这',
'API Key填这'
)
</script>