Hexo Cactus主题404页面自定义配置指南

Hexo Cactus主题404页面自定义配置指南

【免费下载链接】hexo-theme-cactus :cactus: A responsive, clean and simple theme for Hexo. 项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-cactus

Hexo Cactus是一款响应式、简洁优雅的Hexo主题，提供了丰富的自定义选项，包括404错误页面的个性化配置。本指南将详细介绍如何轻松自定义Hexo Cactus主题的404页面，让你的网站在用户访问错误链接时展现独特风格。

404页面基础配置

Cactus主题默认已内置404页面功能，你可以通过主题配置文件快速修改基本信息。打开主题配置文件 _config.yml，找到error_404配置段：

error_404:
  enabled: true
  title: "404 Page Not Found"
  description: "The page you are looking for might have been removed, had its name changed, or is temporarily unavailable."

核心配置参数说明

• enabled: 控制404页面是否启用，设置为true启用，false禁用
• title: 404页面主标题，支持自定义文本
• description: 404页面描述文本，用于说明错误原因或提供指引

快速修改示例

要将404页面标题改为"页面走丢啦~"，描述改为"抱歉，你访问的页面不存在或已被移动"，只需修改配置如下：

error_404:
  enabled: true
  title: "页面走丢啦~"
  description: "抱歉，你访问的页面不存在或已被移动"

高级自定义：修改404页面模板

如果基础配置无法满足需求，你可以直接编辑404页面模板文件来自定义页面结构。模板文件位于 layout/404.ejs，默认内容如下：

<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
    <%- partial('_partial/post/gallery') %>
    <div class="content" itemprop="articleBody">
        <% if (theme.error_404.enabled && theme.error_404.title && theme.error_404.description ) { %>
            <h1><%= theme.error_404.title %></h1>
            <p><%= theme.error_404.description %></p>
        <% } %>
    </div>
</article>

添加返回首页按钮

要在404页面添加一个返回首页的按钮，可以修改模板文件，添加链接代码：

<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
    <%- partial('_partial/post/gallery') %>
    <div class="content" itemprop="articleBody">
        <% if (theme.error_404.enabled && theme.error_404.title && theme.error_404.description ) { %>
            <h1><%= theme.error_404.title %></h1>
            <p><%= theme.error_404.description %></p>
            <a href="/" class="button">返回首页</a>
        <% } %>
    </div>
</article>

添加自定义图片

Cactus主题支持在404页面添加图片，首先将图片文件放入 source/images/ 目录，然后修改模板文件：

<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
    <%- partial('_partial/post/gallery') %>
    <div class="content" itemprop="articleBody">
        <% if (theme.error_404.enabled && theme.error_404.title && theme.error_404.description ) { %>
            <h1><%= theme.error_404.title %></h1>
            <p><%= theme.error_404.description %></p>
            <img src="/images/404-image.jpg" alt="404页面插图" class="error-image">
            <a href="/" class="button">返回首页</a>
        <% } %>
    </div>
</article>

404页面生成机制

Cactus主题通过专门的生成器脚本确保404页面正确生成，脚本文件位于 scripts/error_404.js，代码如下：

hexo.extend.generator.register('error_404', function (locals) {
    return {
        path: '404.html',
        data: locals.posts,
        layout: '404'
    }
})

这个脚本告诉Hexo生成一个路径为404.html的文件，使用404.ejs作为模板。只要保持这个脚本启用，修改配置和模板后执行hexo generate即可生成自定义的404页面。

完整配置步骤总结

1. 基础自定义（推荐新手）：

   • 编辑 _config.yml 文件
   • 修改error_404部分的title和description
   • 执行hexo clean && hexo generate应用更改

2. 高级自定义（适合有一定经验用户）：

   • 编辑 layout/404.ejs 自定义页面结构
   • 添加自定义CSS样式到 source/css/style.styl
   • 添加图片到 source/images/ 目录并在模板中引用
   • 执行hexo clean && hexo generate应用更改

通过以上步骤，你可以轻松打造一个既美观又实用的404错误页面，提升网站的用户体验。如果需要更多自定义选项，可以结合Cactus主题的颜色方案和布局系统，创建完全符合个人风格的404页面。

希望本指南能帮助你顺利完成Hexo Cactus主题404页面的自定义配置。如有任何问题，可以查阅主题的官方文档或提交issue获取帮助。

【免费下载链接】hexo-theme-cactus :cactus: A responsive, clean and simple theme for Hexo. 项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-cactus