■■Loading：《hugo 装修日志 06》■■

pagefind 搜索界面

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

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

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

npm i pagefind
Copy
Copy

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

hugo --minify
Copy
Copy

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

3. 生成 pagefind 索引。

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

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

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

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

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

npx pagefind
Copy
Copy

6. 建立搜索界面的html文件，并引入/public目录指定文件夹下的 pagefind 的js和css文件，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>
Copy
Copy

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>
Copy
Copy

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

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

在文章模板的 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>
Copy
Copy

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

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

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

博客 URL 链接的修改

参考文章：更改 Hugo 博客的永久 URL 链接，并用 Netlify 实现旧博文跳转

Fuji 主题默认的博客文章 URL 是 md 文件名称，我又习惯直接用标题命名文件，导致博客链接十分冗长，每次分享到毛象上看着都有些别扭。其实挺早就想改了，因为太懒拖到了现在（。

首先，在博客根目录的config.toml文件里修改博客 URL 模板。

[permalinks]
post = "/:section/:slug/"
Copy
Copy

之后在博客文章的 front matter 处定义slug，以这篇装修报告为例：

---
title: ■■Loading：《hugo装修日志06》■■
date: 2024-03-20
slug: loading-hugo-06
---
Copy
Copy

这样博客文章就可以拥有简洁明了的 URL 了！不过因为修改了整个 URL，没有办法重定向，算了，这也是博客建设过程中必然经历的……

waline 评论迁移

waline 的评论追踪的是博客链接，一旦 URL 更换，评论就会无法显示，但此时的评论依旧还储存在数据库里，管理员后台也可以看到，因此我们可以在Leancloud的数据存储→结构化数据→comment 里修改每条评论所指向的 URL 地址。

数据库

使用 cloudflare R2 存储桶功能搭建个人图床

参考文章：PICGO + 白嫖 Cloudflare R2 存储做图床。

cdn.jsdelivr.net因污染彻底疯狂，有两种解决方法，一是将cdn.jsdelivr.net换成gcore.jsdelivr.net（这个方法被我应用到了 waline 所有自定义表情），二是自己建一个免费个人图床，实现图片 URL 也有家的温暖！（？

1，在 cloudflare 注册账号。侧边栏选择R2并开通。没有外币银行卡的话可以绑定paypal。

2，创建新的存储桶，名称取喜欢的就行，位置我选择了亚太地区。

创建桶

3，在存储桶的设置中绑定自定义域名，只能绑定服务器在 cloudflare 托管的域或子域名，cloudflare 会自动帮你在 DNS 设置里添加 CNAME。如果不用自定义域名，也可以开启下面的R2.dev子域，允许公开访问。

自定义域

然后你就可以直接在存储桶上传文件了，我把存在 github 仓库上的图片下载了下来，全部上传进去，存储桶就会给每个文件分配自定义 URL。R2 存储桶有单次上传限制，需要分批次上传。

4，为了使用picgo进行文件上传操作，我们需要生成存储桶的 API，回到 R2 的概述页面，点击右上角的管理API令牌，创建一个新的 API 令牌，勾选允许对象读和写，权限时间永久。生成 API 令牌后，记下 S3 访问密钥 ID 和机密访问密钥。

5，打开 picgo，在插件设置里搜索s3并安装，此过程可能需要一定时间。安装完成后，可以在图床设置一栏看到Amazon S3选项。

安装插件

6, 填写图床配置并保存。

应用密钥ID为 S3 访问密钥 ID。
应用密钥为机密访问密钥。
桶名与 R2 存储桶同名（？
文件路径可以参考官方文档，根据需要填写。
地区我觉得空着也可以（？
自定义节点为存储桶设置→存储桶详细信息中的 S3API，值得注意的是最后的/image可以改成自己喜欢的二级路径名字，直接删掉也可以，图片会直接传到存储桶根目录。
自定义域名填使用的存储桶公开访问域名。