您好，Thezal在这里！曾经想在Astro网站上拍摄完全可自定义的全文搜索吗？
好吧，如果您曾经梦到过一次，那么本指南就在您的小巷上！让我们发现Orama！
- What is Orama Search?
- How the heck does Orama actually work?
- Oramaze everything!
- A little bit of code
- Contribute to Orama!
- Conclusions
什么是Orama搜索？
所以，让我们谈谈Orama及其工作原理：这款搜索引擎是真正的交易，完全写在打字稿中。它是闪电般的速度，能够以毫秒不到毫秒的时间来搜索数百万个文档，是的，我们正在谈论微秒！
奥拉马（Orama）包含许多令人印象深刻的功能，例如错字，方面，过滤器，甚至支持删除单词的删除和26种语言。最好的部分？它的依赖性为零，因此您知道它具有独立的精神。您可以在JavaScript运行的任何地方运行Orama，这很甜。
猜猜是什么？它是免费的开放源代码，因此您可以加入有关GitHub的讨论或跳上Slack channel！
参与这个快速发展的开发人员社区，这些开发人员正在塑造下一代全文搜索引擎。令人兴奋的东西，对
奥拉马实际上是如何工作的？
让我们闯入利用Orama并分析其工作原理的步骤。我不会研究技术方面，因为，嘿，这是一个开源项目，这意味着您可以轻松窥视source code，没有问题！
安装
可以使用npm，yarn，pnpm：
安装它
npm i @orama/orama
yarn add @orama/orama
pnpm add @orama/orama
或直接在浏览器模块中导入：
<html>
<body>
<script type="module">
import {(create, search, insert)} from 'https://unpkg.com/@orama/orama@latest/dist/index.js' // ...
</script>
</body>
</html>
创建数据库
Orama使用自己的数据库，可以用几行代码创建。
让我展示一个简单的pokâ©mon数据库的示例
import { create, insert, remove, search } from '@orama/orama';
const pokemon_db = await create({
schema: {
name: 'string',
description: 'string',
id_pokedex: 'number',
},
});
所以，这是与Orama的交易。这都是关于索引字符串的内容，例如属性和Whatot。但是，嘿，如果您需要设置和存储一些额外的数据，不用担心，也可以完全这样做。
一旦您设置了DB实例，就该开始投入一些文档了。让乐趣开始！
await insert(pokemon_db, {
name: 'Bulbasaur',
description: 'A strange seed was planted on its back at birth. The plant sprouts and grows with this Pokémon.',
id_pokedex: 1,
});
await insert(pokemon_db, {
name: 'Charmander',
description: 'Obviously prefers hot places. When it rains, steam is said to spout from the tip of its tail.',
id_pokedex: 4,
});
await insert(pokemon_db, {
name: 'Squirtle',
description: 'After birth, its back swells and hardens into a shell. Powerfully sprays foam from its mouth.',
id_pokedex: 7,
});
查询数据库
好吧，既然所有数据都在房屋中，那么该开始做生意并开始像老板一样开始查询该数据库了！让搜索盛会开始！
const searchResult = await search(pokemon_db, {
term: 'squirtle',
});
在这种情况下，我们的任务是在其中找到所有包含“ squirtle”一词的文档。我们将深入研究每个Nook和Cranny，搜索每个模式属性（是的，它们被称为索引）。准备释放搜索能力！
{
elapsed: {
raw: 95357,
formatted: '95μs',
},
hits: [
{
id: '53290575-24',
score: 0.814974732853017259,
document: {
name: 'Squirtle',
description: 'After birth, its back swells and hardens into a shell. Powerfully sprays foam from its mouth.',
id_pokedex: 7
}
}
],
count: 1
}
也可以指定属性查找
const searchResult = await search(pokemon_db, {
term: 'tail',
properties: ['description'],
});
，当然，我们会得到：
{
elapsed: {
raw: 51687,
formatted: '51μs',
},
hits: [
{
id: '64437599-23',
score: 0.669342702734917259,
document: {
name: 'Charmander',
description: 'Obviously prefers hot places. When it rains, steam is said to spout from the tip of its tail.',
id_pokedex: 4
}
}
],
count: 1
}
一切！
自从这个RAD项目开始以来，Orama一直在保持简单，并使添加新功能变得非常容易。他们已经使用一个光滑的插件系统钉住了它，该系统使您可以按照所需的方式自定义Orama，同时保持核心超级精益和卑鄙。
现在，很棒的奥拉马核心团队正忙着烹饪一些很酷的钩子，这将使社区能够潜入和修补奥拉马的内部工作。谈论动手！
但是，还有更多！ Orama Core团队还在制作一些官方插件，以支持可能并非每个人的茶杯的特定功能。因此，不用担心，您可以挑选出您挖掘的确切功能，然后将其余的功能留在后面。
猜猜是什么？您可以在Orama Monorepo中找到这些官方插件的所有多汁源代码。只需转到包装目录，然后潜入魔术中。所有人都可以看到！
因此，请查看：由于我将Orama添加到了我的基于Astro的博客中，因此我认为写关于我如何使用其插件在Astro上实际实施Orama的兴奋剂。
一点点代码
“插件astro”插件是一个令人难以置信的工具，它为您的Astro网站带来了全新的功能。
使用此插件，您可以毫不费力地为Astro网站的内容索引，并为访问者提供功能强大的文本搜索功能，就像在您的网站上有自定义的搜索引擎，为您的用户提供了无缝的搜索体验！
让我们设置它！
安装
可以使用任何主要node.js软件包管理器安装插件：
npm install @orama/plugin-astro
yarn add @orama/plugin-astro
pnpm add @orama/plugin-astro
就是这样！
数据库创建
该数据库将在项目的dist文件夹中创建，并将以astro.config.mjs文件中的配置命名。
我的是：
import orama from '@orama/plugin-astro';
export default defineConfig({
integrations: [
orama({
// It is possible to have more than one DB, with different configurations
articles: {
// Required. Only pages matching this path regex will be indexed. The regex starts from the dist folder.
pathMatcher: /^article_/,
// Optional. 'english' by default
language: 'english',
// Optional. ['body'] by default. Use it to constraint what is used to
// index a page.
contentSelectors: ['body'],
},
}),
],
});
让我们快速了解我在配置中的内容：
-
articles:：这是我正在使用的数据库名称 -
pathMatcher: /^article_/：是将来用来创建数据库的正则：将添加任何尊重此处写入规则的文件：，我使用/^article_/，因为此博客中的每一篇文章都有其名称中的“ Artife_”前缀 -
language: 'english'：我默认使用英语 -
contentSelectors: ['body']：我使用默认的竞赛Selector
从现在开始启动构建时，将创建新的数据库！
搜索组件
要使用Orama我创建了一个称为OramaSearch.tsx的React组件，该组件允许我在Header.astro组件中使用它。
这是我的第一个反应组件，因此可以肯定有错误，但让我们查看一些代码：
import { getOramaDB, search as searchOrama } from '@orama/plugin-astro/client';
import React, { useState, CSSProperties } from 'react';
export const OramaSearch = () => {
const [result, setResult] = (useState < any) | (undefined > undefined);
const [showDiv, setShowDiv] = useState(false);
const search = async (searchTerm: string) => {
if (searchTerm.length > 2) {
//searchTerm is the input of the input box
const db = await getOramaDB('articles');
const res = await searchOrama(db, { term: searchTerm });
var hits: { title: string, path: string }[] = res['hits'].map((hit: any) => [
hit.document.title,
hit.document.path,
]);
setShowDiv(hits.length > 0);
setResult(hits);
} else {
setShowDiv(false);
}
};
const searchResultsDivStyle: CSSProperties = {
position: 'fixed',
borderTop: '1px solid white',
borderRight: '1px solid white',
borderBottom: '1px solid white',
borderLeft: '1px solid white',
borderRadius: '10px',
opacity: 1,
padding: '20px',
zIndex: 2,
backgroundColor: localStorage.theme === 'dark' ? '#1F2937' : 'white',
};
return (
<div>
<div>
<input
type="text"
className="searchInputBox"
style={{ height: '60px' }}
onChange={(e) => search(e.target.value)}
/>
{showDiv && (
<div id="searchResults" style={searchResultsDivStyle}>
{result.map((element, index) => (
<React.Fragment key={index}>
<a href={element[1]}>{element[0]}</a>
{index !== result.length - 1 && <br />}
</React.Fragment>
))}
</div>
)}
</div>
</div>
);
};
export default OramaSearch;
我通过动态设置其背景颜色，使搜索结果div变得更加冷却，以这种方式，它无缝地适应了主题的更改。
说到主题，我还为处理主题的函数添加了指令，因此DIV的背景反映了当前主题。这一切都是关于使用户体验一流的小细节！
使用组件
在标题组件中的Navbar内部，我添加了使用几行代码创建的组件：
<li>
<a class="flex items-center">
<OramaSearch client:load />
</a>
</li>
仅此而已！最终结果在于每个人的眼中！只是look up!
为Orama做出贡献！
要将其全部包裹起来，将Orama集成到您的Astro网站上是一个小菜一碟。尽管该项目仍处于早期阶段，并且可能还没有所有的花哨的铃铛和口哨声，但请放心，它的工作方式就像魅力一样。 Orama背后的团队计划很快就会添加激动人心的新功能，因此肯定会有更多的令人敬畏的功能。
如果您有一个想查看的功能，或者您感到特别冒险并想为这个令人难以置信的项目做出贡献，那么您很幸运！在GitHub存储库上查看contribute guidelines并开始协作。您甚至可以探索问题，看看是否有任何赏金可以抢购。贡献不仅有助于改善项目，而且还可以将一些额外的现金放在您的口袋里。这是双赢！
所以，请不要犹豫，让Orama旋转，并加入不断增长的开发人员社区，这些开发人员正在塑造全文搜索引擎的未来。激动人心的时光落在前方！
结论
毕竟，我们可以说添加了搜索引擎，这是使用Orama的蛋糕！ ð
对Microsoft MVP Luca Del Puppo的大喊大叫，查看他有关如何在React应用程序中使用Orama的文章：
和Balastrong Aka DevLeonardo的另一个小小的大喊