algolia-search
使用 React InstantSearch 实现 Algolia 搜索
为 Web 应用添加搜索功能需要理解复杂的索引策略和 UI 模式。本技能提供 Algolia 集成、React InstantSearch hooks 和相关性调优方面的专业指导，帮助您打造卓越的搜索体验。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "algolia-search". 创建带有即时结果的搜索框
النتيجة المتوقعة:
一个使用 useSearchBox hook 处理输入、使用 useHits 显示实时搜索结果的 React 组件，包裹在具有正确 Algolia 配置的 InstantSearch provider 中。
استخدام "algolia-search". 如何实现分类筛选？
النتيجة المتوقعة:
将 useRefinementList hook 的 attribute 设置为您的分类字段。连接到 RefinementList 组件，该组件显示每个分类选项的复选框及其命中计数。
التدقيق الأمني
آمنStatic analysis flagged 3 patterns as potential security issues, but all are false positives. The flagged lines contain documentation text about Algolia search implementation, not executable code. Line 3 and 70 contain descriptive text misidentified as weak crypto. Line 53 discusses Algolia indexing best practices, not system reconnaissance. This is a documentation-only skill file with no security risks.
درجة الجودة
ماذا يمكنك بناءه
电商产品搜索
为在线商店实现快速、分面的产品搜索，支持分类筛选、价格区间和即时搜索结果。
文档站点搜索
为文档站点添加搜索前提示功能，针对技术内容和 API 参考进行相关性调优。
内容发现门户
构建可搜索的内容中心，支持分页、排序和多索引搜索，适用于博客或媒体库。
جرّب هذه الموجهات
使用 Algolia InstantSearch hooks 创建一个 React 搜索组件。包含搜索框、命中结果显示和简单产品目录的基础样式。
实现带分面列表的分面搜索，支持分类、价格区间和品牌筛选器。使用 useRefinementList 并配置 Algolia 索引设置以支持分面。
使用 InstantSearchNext 组件设置 Algolia InstantSearch 的 Next.js 服务器端渲染。包含 URL 同步和 App Router 应用的初始服务器状态处理。
设计使 Algolia 与 PostgreSQL 数据库保持同步的索引策略。实现 partialUpdateObjects 以仅更新属性变化，并高效批量处理记录而不使用 deleteBy。
أفضل الممارسات
- 批量索引操作每批使用 10MB 或 1K-10K 条记录以获得最佳性能
- 仅更新特定属性时使用 partialUpdateObjects 而不是完全替换记录
- 避免使用 deleteBy 操作，因为它们计算成本高 - 改用批量对象删除
تجنب
- 每次数据更改时执行完全重建索引而不是增量更新
- 向 Algolia 发送单条记录而不是批量操作
- 使用 deleteBy 进行批量删除而不是批量对象删除