最新消息:

Pagefind,让静态页面站也支持实时站内搜索功能

佳软 yeeach 689浏览 0评论

一直有人建议聚BT增加站内搜索功能,一直没有足够时间弄。网站是基于 WebStackPage 构建,纯HTML架构,要让网站支持站内搜索,可选用的几种方案:

1、升级成类似 WebStack-Laravel 支持数据库的WebStackPage 系版本,通过数据库搜索实现全站搜索

可行性分析:不可性。数据库搜索性能差,升级迁移工作量大

 

2、迁移到VitePress,VitePress 官方版本已经内置通过MiniSearch实现站内搜索

FMHY等众多主流的导航站都采用VitePress,确实有诸多优势。

可行性分析:不可行,迁移工作量大。

 

3、采用支持静态页面搜索的搜索引擎

可选用的方案:

a、传统基于Lucence的搜索引擎,包括 Elasticsearch、Solr、OpenSearch 等

b、RAG以及向量搜索解决方案

c、类 Algolia、Meilisearch、Typesense的轻量级搜索引擎

d、类似Pagefind、MiniSearch、TinySearch、FlexSearch 的无搜索服务器方案

这几种方案的对比不具体描述。

类似Pagefind、MiniSearch、TinySearch、FlexSearch 的无搜索服务器方案是比较好的选择。

对比后,选择了Pagefind作为静态页面站内搜索解决方案。

 

Pagefind 官网:https://pagefind.app/

Pagefind的安装使用并不复杂,具体可以参考官方文档。

 

直接用AntiGravity进行Vibe Coding,很快集成了Pagefind,体验还不错。

目前 聚BT 基于Pagefind 增加全站内容搜索功能,在聚BT首页的底部、其他页面的顶部和底部都有Pagefind搜索框,有兴趣的可以体验:

体验:https://jubt.top/cn/about.html

 

一些经验:

1、使用Pagefind对静态页面索引后,要在Pagefind搜索结果中精准跳转到原HTML页面的具体元素,可以使用URL Text Fragments

搜索结果大致效果:/test.html#:~:text=Keyword

优点:不需要对原HTML页面元素做任何调整,只需要在Javascript中对Pagefind返回的搜索结果拼接 Text Fragments即可:#:~:text=搜索词

 

 

 

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址