Hugo搭建博客时大纲目录消失的解决方法

在搭建Hugo博客时，您可能会遇到一个常见的问题：当文章存储在包含中文路径的目录中时，右侧的大纲目录在本地预览或部署后可能不会显示。这个问题通常是由于URL中包含了未经处理的中文特殊字符所导致的。大多数主题（包括FixIt）依赖JavaScript在前端动态生成大纲，而这些脚本需要解析当前页面的URL来定位标题和生成链接。当URL包含特殊字符时，JavaScript的URL解析器可能会出错，导致大纲生成失败。

要解决这个问题，您可以通过配置永久链接（Permalinks）与Slug来实现。具体步骤如下：

1. 打开根目录下的config/_default/hugo.toml文件，在[permalinks]部分添加一行配置：posts = "/:section/:slug/"。这会设置生成的URL格式，将文章的URL与其文件路径解耦，改用唯一的、URL友好的标识符（slug）来生成链接。
2. 打开根目录下的archetypes/default.md文件，在元信息中添加一行slug: {{ substr (md5 (printf "%s%d" .Name now.Unix)) 0 8 }}。这会为每篇文章随机生成一个8位的字符串作为slug。
3. 同时，为了保证本地使用的多级目录可以被识别，您需要在元信息中添加type: posts字段。

完成以上步骤后，您的文章URL将变为类似https://your-site/posts/cbb9x342的格式，且不管本地目录的层级如何，大纲目录都可以正确显示。这样，您就可以在Hugo博客中正常使用大纲功能了。