pagefind搜索界面

博客主题自带的搜索引擎不知道为什么忽然坏掉了,半天没查出原因,遂决定重新修一个。试了常见的轻量型Fuse.jsflexsearch,也无法达到我想实现的效果。只好寻找其它方案,最后靠google搜到了pagefind插件,参考了白汤四物点半九博客的教程,总算一次搭建成功!在这里记录一下博客搜索界面重生全过程。

准备工作Git。如果你也是根据塔塔的教程搭建的hugo博客,那么一定会有这个工具!

1.安装pagefind,在hugo博客根目录右键,点击Git Bash Here调出指令页面,输入以下内容后回车:

npm i pagefind

2.生成hugo网站的静态文件。

hugo --minify

成功后博客根目录下会多出一个public文件。

3.生成pagefind索引。

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

4.在博客根目录下新建pagefind.yml文件,内容如下:

source: public
glob: post/*/*.{html}
bundle_dir: search

glob是指定pagefind都需要索引哪些位置的文件。例如我的博客文章路径是content/post,生成到public之后对应的目录是在post中,加上这个设置可以让pagefind只搜索博客文章。

5.运行pagefind,生成离线索引。

npx pagefind

6.建立搜索界面的html文件,并引入/public目录指定文件夹下的pagefind的jscss文件,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",
             showImages: false,
             excerptLength: 3,
             translations: {
            placeholder: "请小狗搜索员搜索——",
            clear_search: "删除!",
            load_more: "让小狗搜索员继续寻找",
            search_label: "站内检索",
            filters_label: "文件分类",
            zero_results: "小狗搜索员没有找到关于 [SEARCH_TERM] 的文件,可能一不小心被丢到地狱去了……",
            many_results: "小狗搜索员成功找到了 [COUNT] 个关于 [SEARCH_TERM] 的文件!",
            one_result: "小狗搜索员成功找到了 [COUNT] 个关于 [SEARCH_TERM] 的文件!",
            alt_search: "小狗搜索员找不到关于 [SEARCH_TERM] 的文件。但是为你带来了另一份关于 [DIFFERENT_TERM] 的文件!",
            search_suggestion: "小狗搜索员没能找到关于 [SEARCH_TERM] 的文件。可以试试以下方案。",
            searching: "小狗搜索员正抱着 [SEARCH_TERM] 的委托努力搜索…"
    }
     });
    });
</script>

7.自定义索引。pagefind默认所有h1文件都是标题,检索结果甚至会把博客名也放进去,可以通过data-pagefind-meta元素在hugo博客默认single.html里框定出标题的元素。

<h2 data-pagefind-meta="title" class="post-item post-title">
  <a href="{{ .Permalink }}">{{ .Title }}</a>
</h2>

也可以直接在article元素里补上ata-pagefind-body表示需要索引此处的内容,虽然目前没看出加了这个和没加有什么区别,不过加了就加了吧(?

<article data-pagefind-body>
...
</article>

在文章模板的tag部分加入data-pagefind-filter元素后,搜索界面左侧就会出现标签分类模块。

<span data-pagefind-filter="标签"><i class="iconfont icon-pricetags-sharp"></i>&nbsp;{{ if .Params.tags }}{{ range .Params.tags }}<a href="{{ "tags/" | relURL }}{{ . | urlize }}">{{ . }}</a>&nbsp;{{ end }}{{ else }}{{ i18n "postMetaNoTag" }}{{ end }}</span>

8.自定义css。我把生成的默认css文件复制到了/static路径下魔改了样式引入,因为代码过长且过于个性化,所以就不贴在这里了。简单来说就是对着想改的地方右键检查,确认对应的是哪一串css代码后直接上手调整,如果还有不懂的就交给ChatGPT解答。

9.推送!如果你也是用Github Dekstop推送,那么会出现pagefind_extended.exe文件过大的报警,解决方案是右键一下这个文件.gitignore就好了嗯(亲测其实整个node_modules文件不上传都不会有影响x

Ps.教程里还有关于Github action自动更新配置索引的设定,不过我的博客是vercel部署的,还没研究vercel是否有相同的功能。因此目前每次更新博客都得手动重复一下步骤2,3,5。不过要优化也是之后再思考的事情了,能用就行,先躺一会再说!