使用pagefind支持博客中文搜索

目前我的博客采用的是hugo自动部署的，当前尝试了很多博客主题，终于找到一款自己满意的开源主题MemE。原作者的设计中，没有加入文章的中文检索功能，对于中文使用用户，无法使用中文搜索是极其不方便的，特别是当文章内容增多，很难方便访问者快速检索到需要的内容。于此，测试了多种工具后，用PageFind从侧面实现了这一功能。本着受益于开源社区，则贡献于开源社区的想法，现在分享下个人的实践。

先简单梳理下我的博客自动部署流程：

graph TD
	upload_obsidian[obsidian提交] --> GitHub[代码仓库] 
	upload_Git[Git源码提交] --> GitHub[代码仓库] 
	GitHub --> Vercel[Vercel自动部署]
	Vercel --> Vercel_scripts[自动更新pagefind]

从流程图可以看出实际上和大部分人的部署方式是一致的，只是多了一步自动更新pagefind的步骤。从操作上来说，这一步几乎也没有难度，属于一次部署终身受用的方式，所以这里重点就只介绍自动更新pagefind以及如何挂载pagefind到博客中去。

自动更新pagefind设置

主要的设置点在于配置vercel设置中的部署依赖，加上pagefind即可，如下图所示。

使用pagefind支持博客中文搜索.png

pagefind编译更新是需要配置文件的，这个配置文件放置于代码库根目录pagefind.yml即可。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
# 生成的 pagefind 的目录
site: "public"
output-path: "pagefind"

# 指定要索引的源目录，通常是 Hugo 生成的静态文件目录
#contentDir: "public"

# 指定输出索引文件的目录
#indexDir: "static/pagefind"

# 指定静态文件的 URL 前缀，这通常与你的 Hugo 网站的 URL 结构相匹配
baseURL: "https://zytomorrow.top"

# 指定要索引的文件类型，例如 .html
indexDocs: [".html"]

# 指定要排除索引的文件或目录的 glob 模式
excludeFiles: ["**/404.html", "*/noindex/*", "*/categories/*"]

# 指定要包含的字段，这些字段将被索引用于搜索
fields: ["title", "description", "content"]

# 指定用于生成摘要的字段
excerptField: "excerpt"

# 指定排除的选择器
exclude_selectors:
  - "#main > div > div.post-share"
  - "#my_navigation"
  - "blockquote > span"
  - "[id^='prefix-']"

# 指定用于搜索结果标题的字段
titleField: "title"

# 指定用于搜索结果 URL 的字段
#urlField: "link"

# 指定用于搜索结果内容的字段
#contentField: "content"

# 指定是否将 HTML 内容转换为纯文本
htmlAsText: true

# 指定是否启用对中文语言的支持
chinese: true

# 指定是否在控制台中显示详细的日志信息
verbose: true

# 指定是否跟踪堆内存使用情况
traceHeap: false

# 指定是否启用调试模式
debug: true

到这一步，pagefind的部署即完成了。

博客插入中文搜索组件

在MemE中，可以很方便的自定义页面。在代码库中按以下路径创建文件layouts/_default/search.html。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{{ define "main" }}
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<style type="text/css">
    body {
        --pagefind-ui-font: 'LXGW WenKai Mono TC', 'LXGW WenKai TC', 'LXGW WenKai Screen', 'LXGW Bright','LXGW WenKai Light', 'LXGW WenKai'
    }

</style>
<script src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        let search = new PagefindUI({
            element: "#search",
            showSubResults: true
        });
    });
</script>
<main class="main list" id="main">
    <h1 class="list-title">搜索</h1>
    <div class="main-inner" >
        <div class="content post">
            <h2>{{ i18n "insite_search" }}</h2>
        <p><strong>{{ i18n "search_tips" }}</strong></p>
        <div id="search"></div>
        <br>
        <ul class="list-part">
            {{ .Content }}
        </ul>
     </div>
</main>
{{ end }}

到这一步部署就完成了。

使用pagefind支持博客中文搜索-1.png

使用pagefind支持博客中文搜索-2.png

使用pagefind支持博客中文搜索

自动更新pagefind设置

博客插入中文搜索组件

相关文章：