用vitepress来构建静态站点时都知道,如果页面多时都要在导航上面增加一个搜索功能。

搜索功能最常用的就是第三方的Algolia。

查了一下vitepress文档才知道,vitepress支持一个叫本地搜索的东西,是一个基本内存搜索的javascript功能,配置也是极其的简单,只要在配置文件的themeConfig里增加provider:local即可。

vitepress支持搜索功能

  • Algolia文档搜索
  • MiniSearch本地搜索

演示网址:.

https://www.unocss.com.cn

效果:

MiniSearch是什么

MiniSearch 是一个轻量级、功能强大的内存全文搜索引擎,用 JavaScript 编写。以下是关于它的

详细介绍:

特点

  • 轻量级:无外部依赖,资源占用少,适合在浏览器和 Node.js 环境运行,尤其适用于内存受限的场景,如移动浏览器。
  • 功能丰富:支持精确匹配、前缀搜索、模糊匹配、字段提升等功能,还具备自动建议引擎,可用于搜索查询的自动完成,拥有现代化的搜索结果排名算法。

    离线工作:通过将索引存储在本地内存中,MiniSearch 可以离线工作,快速处理查询,无需网络延迟。
  • 实时更新:支持实时索引更新,可随时向索引中添加和删除文档。

应用场景

客户端搜索应用:非常适合需要快速响应的客户端搜索应用,如网页和移动应用中的实时 “边输入边搜索” 场景,将索引保存在客户端可实现快速响应的用户界面,无需向搜索服务器发送请求。

此外,还有一个名为 MiniSearch 的浏览器内搜索助手。它是一个基于现代前端技术构建,利用 Docker 容器技术的轻量级、隐私保护优先的搜索应用,内置人工智能助手。它以 SearXNG 的 Docker 镜像作为元搜索引擎,具有隐私保护严格、易用性强、跨平台、可定制等特点,适用于个人、教育环境和企业内部等多种场景

Algolia是什么

Algolia 是一个 AI 驱动的搜索和发现平台,为企业提供快速、可扩展的个性化搜索体验。以下是关于它的详细介绍:

核心功能

  • 索引:能从数据库、JSON 对象、CSV 文件等不同数据源提取数据,为可搜索内容创建结构化数据库,就像图书馆目录,方便快速查找。
  • 排名:运用复杂算法确定搜索结果的相关性,考虑文本相关性、用户行为和业务指标等因素,并且可以根据业务目标自定义排名算法。
  • 查询:用户搜索时,Algolia 能快速处理请求并显示结果,通常在毫秒级。用户还可通过过滤器、分面和地理位置等进一步定制搜索。

主要特点

  • 速度与性能:基础设施专为速度设计,搜索响应时间通常在 100 毫秒以内,有助于提高用户参与度和转化率。
  • 相关性与个性化:利用用户行为数据个性化搜索结果,提升用户满意度和参与度。
  • 过滤与分面:允许用户根据数据属性应用过滤器缩小搜索范围。
  • 多语言与容错:支持多种语言,能妥善处理拼写错误,确保搜索结果准确。
  • 分析与 A/B 测试:提供分析、洞察和性能指标,帮助优化搜索体验。

应用场景

  • 电子商务:为电商网站提供精准产品搜索,助力用户快速找到商品,通过个性化推荐提高转化率和用户满意度。
  • 内容平台:为媒体网站、博客平台等提供高效内容搜索,帮助用户发现相关文章、视频或音频内容。
  • 企业内部系统:可提高员工工作效率,促进信息共享。
  • 移动应用:为移动应用提供快速、准确的搜索功能。
  • 客户支持系统:帮助客户快速找到解决方案和相关信息,提高客户服务效率,减少人工支持需求。

Algolia 凭借其强大功能和开发者友好的特性,为各种应用和网站实现高级搜索功能提供了出色解决方案,能推动转化、提升用户满意度,让企业在数字领域具备竞争优势

vitepress静态站点支持离线浏览器本地全文搜索功能的更多相关文章

  1. Postgres全文搜索功能

    当构建一个Web应用时,经常被要求加上搜索功能.其实有时候我们也不知道我要搜索个啥,反正就是要有这个功能.搜索确实很重要的特性,这也是为什么像Elasticsearch和Solr这样基于Lucene的 ...

  2. 使用ElasticSearch服务从MySQL同步数据实现搜索即时提示与全文搜索功能

    最近用了几天时间为公司项目集成了全文搜索引擎,项目初步目标是用于搜索框的即时提示.数据需要从MySQL中同步过来,因为数据不小,因此需要考虑初次同步后进行持续的增量同步.这里用到的开源服务就是Elas ...

  3. 如何在Web前端实现CAD图文字全文搜索功能之技术分享

    现状 在CAD看图过程中我们经常会需要用到查找文字的功能,在AutoCAD软件查找一个文字时,可以通过打开左下角输入命令find,输入查找的文字,然后设置查找范围,就可以搜索到需要查询的文字.但在We ...

  4. GoldenDict词典的超级实用高级玩法----全文搜索功能

    快捷键: Ctrl+Shift+F 菜单进入:搜索--全文搜索 模式:正则表达式 比如:我想知道地道的英文表达    请xx天/周/年假 给搜索框写入正则表达式   请(.)(天|周|年)假 就可以了 ...

  5. 为Jekyll+GitHub Pages添加全文搜索功能

    动态演示如下: [上传失败, 请自行搜索原文] 源码库: program-in-chinese/team_website 找到此JS工具: christian-fei/Simple-Jekyll-Se ...

  6. 08: Django使用haystack借助Whoosh实现全文搜索功能

    参考文章01:http://python.jobbole.com/86123/ 参考文章02: https://segmentfault.com/a/1190000010866019 参考官网自定制v ...

  7. 使用ElasticSearch实现搜索时即时提示与全文搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 用于浏览器本地存储的js插件 - jStorage

    简介 jStorage是一个跨浏览器的将key-value类型的数据存储到浏览器本地存储的js插件——jStorage支持所有主流浏览器,PC机(甚至包括是IE6)和移动终端均可用.此外,jStora ...

  9. MySQL 全文搜索支持, mysql 5.6.4支持Innodb的全文检索和类memcache的nosql支持

    背景:搞个个人博客的全文搜索得用like啥的,现在mysql版本号已经大于5.6.4了也就支持了innodb的全文搜索了,刚查了下目前版本号都到MySQL Community Server 5.6.1 ...

  10. Flask 教程 第十六章:全文搜索

    本文翻译自The Flask Mega-Tutorial Part XVI: Full-Text Search 这是Flask Mega-Tutorial系列的第十六部分,我将在其中为Microblo ...

随机推荐

  1. EntityFrameworkCore 中实体的几种配置方法

    使用数据注解 实体类通常是在Models目录下,直接在实体类上添加属性注解,比如[Required]/[Key]等. using System.ComponentModel.DataAnnotatio ...

  2. FireDAC开发DataSnap应用系统【1】-快储功能

    FireDAC是吧DataSnap服务器当成API来调用,而dbExpress使用IAppServer接口. 关键点: 1.客户端调用API要回传数据,那么FireDAC把数据已Stream的格式传递 ...

  3. SpringAI用嵌入模型操作向量数据库!

    嵌入模型(Embedding Model)和向量数据库(Vector Database/Vector Store)是一对亲密无间的合作伙伴,也是 AI 技术栈中紧密关联的两大核心组件,两者的协同作用构 ...

  4. 使用 AutoGen Studio 打造你的私有团队

    AI Agent 无疑是今年最火爆的概念,从科技巨头的战略布局到创业公司的创新产品,AI 智能体正在重塑我们与机器交互的方式.无论是自动化任务.个性化服务,还是复杂问题的协同解决,AI Agent 都 ...

  5. ArrayBlockingQueue的put方法底层原理

    一.ArrayBlockingQueue的put方法底层原理 ArrayBlockingQueue 是 Java 并发包 (java.util.concurrent) 中的一个基于数组实现的有界阻塞队 ...

  6. PIKACHU之暴力破解

    PIKACHU之暴力破解 基于表单的暴力破解 进入靶场后是一个简易的登录界面 随便输入用户名与密码观察回显 由于回显是模糊回显,并没有表示是用户名错误还是密码错误,直接进入BP采用暴力破解,但是在进行 ...

  7. DPDI(Dispatch PDI)kettle调度管理平台介绍

    DPDI online产品简介 DPDI Online 是一款基于Kettle的强大在线任务调度平台,凭借其高效与灵活性,专为调度和监控Kettle客户端生成的ETL任务而设计 DPDI Online ...

  8. html中的em和rem到底该如何使用,自适应效果中如何确定文字大小/字号?

    如今手机屏幕繁多,自适应效果中如何确定文字大小/字号? em rem vm vw vh你都了解吗? 先说说em和rem em:继承父级的,假设html的font-size默认为16px,body字体大 ...

  9. Netty 心跳机制实现(客户端与服务端)

    Netty 心跳机制实现(客户端与服务端) Netty 的心跳机制是保持长连接有效性的重要手段,可以检测连接是否存活并及时释放无效连接.下面介绍客户端和服务端的完整实现方案. 一.服务端实现 1. 基 ...

  10. 解决chrome浏览器拓展插件颜色变成透明无法使用。

    虚拟机装了chrome之后插件变成了透明的,没办法使用了. 解决办法如下: 1.卸载VMWARE tools 2.地址栏输入: chrome://flags 找到 "Choose ANGLE ...