Hugo美化404页面

默认的404页面只有文字，今天发现一个超可爱的 Logo 集合ServiceLogos，于是偷过来了。

步骤

修改Nginx配置

Nginx增加如下网站配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    # index.html fallback
    location / {
        try_files $uri $uri/ =404;
    }

    # 自定义错误页面
    error_page 404 /404.html;
    error_page 403 /403.html;
    location ~ ^/(404|403)\.html$ {
        root /www/public;
        internal;
    }

这段Nginx配置包含了几个部分，下面我逐一解释：

  • index.html fallback：这部分配置定义了Nginx如何处理对根目录(/)的请求。

    • location / { ... }指定了处理根目录及其子目录请求的规则。
    • try_files $uri $uri/ =404;尝试顺序为：首先查找与请求URI相匹配的文件，如果找不到，则尝试将请求作为目录处理，如果这也失败，则返回404错误（即页面未找到）。

    这意味着如果请求的文件或目录不存在，Nginx将返回一个404错误。

  • 自定义错误页面：这部分配置定义了自定义错误页面的路径和处理方式。

    • error_page 404 /404.html;当发生404错误（页面未找到）时，使用/404.html作为错误页面。
    • error_page 403 /403.html;当发生403错误（禁止访问）时，使用/403.html作为错误页面。

    这表示当请求的页面不存在或请求被拒绝时，Nginx将分别展示指定的错误页面。

  • 特定错误页面的处理规则：

    • location ~ ^/(404|403)\.html$ { ... }用正则表达式匹配路径，用于捕获对404.html或403.html的请求。
    • root /www/public;指定了这些错误页面所在的根目录。
    • internal;指令意味着这些页面只能作为内部请求的结果被Nginx处理，即直接浏览器输入这些URL是无法访问的，只有在发生了404或403错误时，由Nginx内部重定向渲染这些页面。

修改404页面模板

复制模板到layouts

1

cp themes/PaperMod/layouts/404.html layouts

内容：

1
2
3
4
5

{{- define "main" }}
<div class="not-found" style="text-align: center;">
    <img src="/img/NotFound.png" alt="404Notfound">
</div>
{{- end }}{{/* end main */ -}}

引用