基于 INFINI Pizza 为 Hugo 静态站点添加搜索功能

news/2024/10/7 6:47:44

INFINI Pizza 是 INFINI Labs 即将发布的一个基于 Rust 编写的搜索引擎(即将完全开源),目前已经完成基本的搜索能力,并且基于 INFINI Pizza 的核心引擎,提供了一个 WASM 版本的超轻量级内核,可以很方便的嵌入到各类应用系统,比如网站,尤其是静态站点或者小型的博客系统等。

目前 Pizza 和 INFINI Labs 官网已经集成了 INFINI Pizza for WebAssembly,具体的搜索效果如下图:

[Pizza 官网]

[INFINI Labs 中文官网]

打开上面的网站(https://infinilabs.cn),通过按下快捷 s即可调出搜索框,然后就可以体验到 INFINI Pizza 提供的搜索能力。值得特别提出的是,在搜索的过程你所有的操作都是在浏览器本地执行,也就是不会像传统的搜索实现方式那样,需要每次输入一个查询条件都会和后端的搜索服务器进行一次交互,相比之下, INFINI Pizza for WebAssembly 则是完全离线操作,即使断网,也能愉快的搜索。

废话不多说,接下来为大家介绍一下如何在你自己的站点来使用 INFINI Pizza for WebAssembly。

首先,INFINI Pizza for WebAssembly 是开源的,Github 地址在这里:https://github.com/infinilabs/pizza-wasm
编译好的 WASM 包在这里可以直接下载:https://github.com/infinilabs/pizza-wasm/tree/main/pkg

➜  wasm git:(main) ✗ du -sh pkg/*
4.0K	pkg/README.md
4.0K	pkg/package.json
4.0K	pkg/pizza_wasm.d.ts
4.0K	pkg/pizza_wasm.js12K	pkg/pizza_wasm_bg.js
580K	pkg/pizza_wasm_bg.wasm
4.0K	pkg/pizza_wasm_bg.wasm.d.ts
256K	pkg/pizza_wasm_bg.wasm.gz

可以看到,WASM 的包只有 500 多 KB,通过 Gzip 压缩之后,只有 200 多 KB,比较轻量级。

Pizza-WASM 是 INFINI Pizza 核心引擎的 WebAssembly 接口封装,只对外暴露了几个简单的访问接口,对于目前的前端搜索应用足够了,在 https://github.com/infinilabs/pizza-wasm/tree/main/web 里面有一个非常简单的 WASM 方法调用的例子,可以简单进行了解。

当然,只是有 Pizza 的 WASM 还是不够的,我们如果要在现有的静态站点上添加搜索框的,还需要考虑数据怎么来,结果如何展现,所以针对这个场景,我们封装好了一个 Pizza-DocSearch 的一个项目,可以直接进一步简化使用,项目也是开源的,Github 地址是:https://github.com/infinilabs/pizza-docsearch

由于示例项目里面默认已经将编译好的代码和样例上传了,我们直接下载这个源代码并本地进行功能预览:

➜  /tmp git clone https://github.com/infinilabs/pizza-docsearch.git
Cloning into 'pizza-docsearch'...
remote: Enumerating objects: 174, done.
remote: Counting objects: 100% (174/174), done.
remote: Compressing objects: 100% (112/112), done.
remote: Total 174 (delta 86), reused 147 (delta 59), pack-reused 0 (from 0)
Receiving objects: 100% (174/174), 941.94 KiB | 1.20 MiB/s, done.
Resolving deltas: 100% (86/86), done.
➜  /tmp cd pizza-docsearch/example/dist
➜  dist git:(main) python3 -m http.server 8083Serving HTTP on :: port 8083 (http://[::]:8083/) ...

打开浏览器,并访问:http://localhost:8083,如下:

观察浏览器的网络请求,可以看到会加载示例的 index.json 数据:

实际的情况,如果是我们自己的静态网站或者是博客,只有保证网站根目录有这个文件及相应的格式,即可快速将这个你看到的搜索功能集成到你自己的网站上去。OK,功能验证完毕了,我们开始集成到我们的站点吧。

Pizza/INFINI Labs 的官网,使用的 Hugo 来静态生成的,index.json 文件不需要手动生成,首先我们需要让 Hugo 生成 JSON 格式的内容,这个是 Hugo 自带的能力,我们需要修改 Hugo 项目的配置:

将 outputs 参数这里新增一个 JSON 的输出,然后我们在主题的模版里面再定义一下 JSON 输出的格式模版:

文本格式的内容如下,方便复制粘贴,保存文件名为 index.json

{{- $index := slice -}}
{{- range where .Site.RegularPages.ByDate.Reverse "Type" "not in" (slice "page" "json") -}}{{- $index = $index | append (dict "title" (.Title | plainify) "url" .Permalink "tags" .Params.tags "category" .Params.category "subcategory" .Params.subcategory "summary" (.Params.Summary | markdownify | plainify) "content" (.Content | markdownify | plainify)) -}}
{{- end -}}
{{- $index | jsonify -}}

OK,接下来就是将站点内每篇文章或者博客的元数据里面加上我们上面已经用到了的标签:

OK, 启动 Hugo 站点:

| EN
-------------------+------Pages            | 181Paginator pages  |   5Non-page files   |   0Static files     | 110Processed images |   0Aliases          |  52Sitemaps         |   1Cleaned          |   0Built in 323 ms
Watching for changes in /Users/medcl/Documents/rust/pizza/website/{assets,content.en,static,themes}
Watching for config changes in /Users/medcl/Documents/rust/pizza/website/config.yaml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

打开 Hugo 的站点地址,并尝试访问 http://localhost:1313/index.json, 应该就可以访问到这个 JSON 文件了:

至此,数据准备完毕,接下来我们集成前端搜索控件。

还记得我们之前从 Pizza-docsearch 下载的资源文件么,我们主要用到 assets 里面的 3 个文件:

/tmp/pizza-docsearch/example/dist
➜  dist git:(main) tree
.
├── assets├── index-C1z1vz3D.css├── index-D_gOo737.js└── pizza_wasm_bg-BRCuviY_.wasm
├── index.html
└── index.json1 directory, 5 files
➜  dist git:(main)

打开 index.html 文件,我们可以看到里面的内容如下:

拷贝这个 assets 目录文件到我们的 Hugo 站点,位置如下:

然后修改 Hugo 的主题模版,在所有页面的头模版 html-head.html里面增加一段代码来加载我们的 CSS 样式文件:

然后继续修改 Hugo 的主题模版文件,在所有页面的页脚模版,增加一段代码来加载 JS 脚本文件:

然后,在页面模版的适当位置,插入一下 Docsearch 的一段标签,用于放置搜索框,如图:

至此,大功告成!

打开浏览器即可看到最终效果:

最后,总结一下,借助 INFINI Pizza Docsearch 的 3 个小文件,只需 3 行代码,你可以在 5 分钟内为你的静态站点添加一个轻量级的离线搜索功能,快去试试吧。

相关链接:

  • Pizza
  • Pizza Wasm
  • Pizza Docsearch

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/54492.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

VulNyx - Internal

扫描发现有三个端口basic验证需要用户名密码登录访问80端口 \URLFinder 发现有个internal的php文件看看有无任意文件读取漏洞发现没有回显 但是总感觉怪怪的 应该是有啥东西 因为他这里的出现了pre 标签也许他是过滤了../ 我们改成....//试试真的读取到了通过读取passwd发现有个…

财务知识-会计科目

财务知识-会计科目

【JAVA开发】JDBC链接各大数据库(纯代码)

原创 OA圈子在开发中,我们有时候会涉及到链接第三方数据库视图或者中间库,此时我们需要在OA代码中去创建相应的链接工具类,下面我们分享链接工具类的方法: 链接工具类: import com.seeyon.ctp.common.AppContext; import java.sql.*;public class JdbcUtil {private stat…

第2天---RSA基础题型

T1.知pqe求d解m题目: from Crypto.Util.number import *flag = bNSSCTF{******}p = getPrime(512) q = getPrime(512) n = p*q e = 65537 phi = (p-1)*(q-1)m = bytes_to_long(flag)c = pow(m, e, n)print(fp = {p}) print(fq = {q}) print(fe = {e}) print(fc = {c}) p = 105…

带记忆的对话api上线

Link.AI 记忆对话 API原生支持开发者在应用/工作流中设置的记忆功能。开发者无需自行维护上下文记忆并通过messages参数传递,只需传入用户问题和身份标识即可,由系统按用户维度对上下文记忆进行维护,从而实现长期记忆下的多轮对话。API 简介 Link.AI 已为开发者提供了调用智…

devexpress 组件使用研究

1.提示框private void textEdit1_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyChar == ( char)Keys.Enter) { AlertControl alert = new AlertControl(); alert.Show(this, "提示", textEdit1.Text, true);} }

Vue2实现应用添加水印的功能

需求 有的情况,我们需要给我们的网页添加水印。我们可以使用第三方库Watermark Design。官方地址:https://watermark-design.github.io/watermark/zh/ 效果示例代码 入口文件main.js import WatermarkDesign from @watermark-design/vue; Vue.use(WatermarkDesign)vue容器App…

Hive源码解析

1.概述 Apache Hive是一款建立在Hadoop之上的数据仓库工具,它提供了类似于SQL的查询语言,使得用户能够通过简单的SQL语句来处理和分析大规模的数据。本文将深入分析Apache Hive的源代码,探讨其关键组件和工作原理,以便更好地理解其在大数据处理中的角色。 2.内容 在开始源代…