Hugo网站设置Pagefind本地搜索(3)

2024-01-13

#Blog

1. 前言

Hugo 给出的网站搜索工具 ¹，比较有名的是 lunr.js 和 Fuse.js，不过设置比较复杂 ²。

已有的实践是：利用外部搜索，比如，Google、Bing、Baidu等，前提是收录了个人网站^{3, 4}。

比较简单的本地搜索策略是：Pagefind ⁵，只需要两步就能设置完成网站的本地搜索 ⁶。

2. 安装和设置Pagefind

安装 npm 工具

macOS 下用 brew 安装命令行工具 npm ：

brew install nmp

Linux 和 Windows 下安装 npm ： https://nodejs.org/en/download/

npm i pagefind
hugo

说明：安装 Pagefind 工具，并发布 hugo 站点。网站的默认发布文件夹为网站的根目录下的 public/

生成索引

npx pagefind --source public --bundle-dir search

说明： pagefind 在 public/文件夹下生成索引 search/文件夹

3. 设置静态网页的搜索入口

创建 html 格式的 shortcodes 文件

在 themes/simple-style/layouts/shortcodes/目录下，新建 search.html 模板文件，内容为：

<link href="/search/pagefind-ui.css" rel="stylesheet">
<script src="/search/pagefind-ui.js" type="text/javascript"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search" });
    });
</script>

创建搜索页面

在 content路径下，新建 search.md文件，内容为：

---
title: "Local Search"
date: 2024-01-13T16:54:22+01:0
---

Please enter what you want to search for this website directly in the input box below:

\{\{< search >}}

注意⚠️：\{\{ 变为 {{，此行代码为搜索框的位置。

而后，在根目录的 config.toml 文件中，加入：

[[menu.main]]
weight = 40
name = "Search"
url = "/search/"

说明：

这是在网站的主菜单 main 中，添加 search 页面的入口
用 hugo server可以本地浏览 search 页面，但搜索框看不到
上传 GitHub 后，search 页面可以看到搜索框

注意⚠️：

搜索结果中，标题可以指定，即themes/simple-style/layouts/_default/single.html加入标题的data-pagefind-meta="title"属性^{7, 8, 9}
搜索结果中，日期可以指定，即themes/simple-style/layouts/_default/single.html加入日期的data-pagefind-meta="date"属性
搜索结果中，可以去除重复的 tags / categories 目录下的结果，即themes/simple-style/layouts/_default/list.html 加入 aside data-pagefind-ignore 属性
搜索结果中，可以去除重复的 pages 下的结果，即themes/simple-style/layouts/_default/section.html 加入 aside data-pagefind-ignore 属性
搜索结果中，可以去除重复的主页目录下的结果，即themes/simple-style/layouts/index.html 加入 aside data-pagefind-ignore 属性

3. 每次上传 public 文件夹

在 job.sh 文件里加入命令：

# 生成新索引
/opt/homebrew/bin/npx pagefind --source public --bundle-dir search

逻辑是：每次上传 public 文件夹时，都重新生成搜索索引。