如何为Markdown MD文档构建Lunr搜索

Question

我需要在整个网站的MD(Markdown(文档中添加一个良好的lunr搜索。我正在使用React/NextJS网站，我们在博客和常规的"；docs"；区域。我们需要搜索这些文档，这样网站用户就可以搜索主题。MD是通过NextJS实时呈现的，一切都很好，但我们需要添加服务器端搜索。出于安全原因，我们必须将用户界面限制为仅接收结果，而不是仅在客户端/浏览器端搜索页面。我们还需要在服务器端进行搜索，永远不要超越我们的内联网，因为这是一个企业防火墙的情况，网站不能使用外部互联网上的链接。无论如何，这是一个场景：

• 在站点构建时构建lunr搜索索引(它都是静态的，所以这并不难(
• 使用API端点路由对搜索索引进行服务器端搜索
• 使用nextJS客户端作为点击API端点进行搜索和结果的用户交互点

我知道如何使用lunr、构建索引、构建API路由器端点并呈现到屏幕/页面。但我需要做的是了解如何构建索引并搜索MD文档的呈现版本(我想这将显示为HTML(。如何使用a(没有MD不可搜索的元信息或b(HTML不可搜索HTML标签的内容来构建lunr索引。你看到问题了吗？我需要根据用户想要搜索的真实文本建立索引，而不是Markdown或HTML中的语言标签。是否已经有一个NPM包可以做这种事情？

我还想知道如何分解可搜索的索引，使搜索结果看起来很好，并进行一点预览，包括每个匹配的句子，而不仅仅是页面名称。。

Answer 1

您可以通过搜索两次来完成此操作。

1. 从后端获取页面并通过api公开它
2. 在UI中，您可以再次进行搜索并突出显示必要的单词

这是给你的小提琴。

我用过"；react highlight words"；要简化的库。

代码：

进口

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-highlight-words@0.17.0/dist/main.min.js"></script>

实际逻辑

import React, { useState, useEffect, Component } from 'react';
import { render } from 'react-dom';
import Highlighter from 'react-highlight-words';
const App = () => {
const [text, setText] = useState('');
const [data, setData] = useState('');
const HINT = 'Search any name';
const searchName = async text => {
const URI = `https://api.nationalize.io/?name=${text}`;
return fetch(URI);
};
useEffect(() => {
(async () => {
if (!text) {
setData(HINT);
return;
}
const res = await searchName(text);
const data = await res.text();
setData(data);
})();
}, [text]);
return (
<div>
<input value={text} onChange={e => setText(e.target.value)} />
<br />
<br />
<Highlighter searchWords={[text]} textToHighlight={data} />
</div>
);
};
render(<App />, document.getElementById('root'));