Hugo框架中文文档模板 404页面模板

\在GitHub Pages中部署Hugo时, 您可以提供自己的模板作为定制的404错误页面, 这需要在您的/layouts目录创建一个404.html 模板文件来实现. 在Hugo生成您的站点时, 这个404.html 文件会放置在网站的根目录.

404页面模板可以使用所有的常规页面变量.

在标准页面变量之外, 404页面可以访问所有的可以通过.Pages访问的站点内容.

1
2
▾ layouts/
    404.html

404.html

下面是一个404.html模板的简单例子:

layouts/404.html

1
2
3
4
5
6
7
8

{{ define "main"}}
    <main id="main">
      <div>
       <h1 id="title"><a href="{{ "/" | relURL }}">Go Home</a></h1>
      </div>
    </main>
{{ end }}

自动加载

依赖于web服务器环境, 404.html页面可以设置成当用户输入错误的URL时自动加载. 比如:

在GitHub Pages 和 GitLab Pages服务中404页面自动加载.
在Apache服务器中, 可以在站点根目录的.htaccess 文件中设置ErrorDocument 404 /404.html
在Nginx服务器中可以在nginx.conf文件中声明 error_page 404 /404.html; .
在Amazon AWS S3 单元中设置单元为静态web服务时,可以在S3的管理图形界面中指定错误文件.
在Amazon CloudFront中您可以在CloudFront管理界面中错误页面部分声明错误页详情在这里
在Caddy 服务器中使用errors { 404 /404.html }. 详细信息请看
在Netlify服务中添加 /* /404.html 404 到 content/_redirects中. 详情请看
在Azure静态站点中可以在Azure门户的静态站点配置页面中声明Error document path.更多信息键静态站点文档.

Contents

404.html

自动加载