Vitepress 自定义 404 页面

在搭建网站的过程中，404 页面是一个不可或缺的部分。在页面丢失的情况下，给一个友好的指引。

当用户访问了一个不存在的页面时，如果能呈现一个精心设计的自定义 404 页面，而不是默认的枯燥提示，那无疑会提升用户体验，给人留下良好的印象。

默认的404页面：

默认的看着略简陋，可以自定义做一个漂亮的。

在 Vitepress 中创建贴心的自定义 404 页面，步骤如下：

一、了解 Vitepress 的基本结构

得对 Vitepress 的架构有个大致的了解。就好比盖房子之前，得知道房子的框架是怎么搭建的。Vitepress 的项目通常包含 docs 文件夹，里面存放着各种页面和配置文件。

二、创建 404 页面

创建 404 页面。

在 docs 文件夹中新建一个名为 404.md 的文件。

在这个 404.md 文件中，您可以尽情发挥创意，编写您想要展示的 404 页面内容。可以是一段温馨的提示文字，比如：“哎呀，您好像迷失在网络的小胡同里啦，别着急，赶紧回头是岸！” 也可以加上一些有趣的图片或者链接，引导用户回到首页或者进行其他操作。

---
layout: 404
---

# 404 - 页面未找到

哎呀，亲！您访问的页面好像去“捉迷藏”了，没找着呀！

要不您点击下面的按钮，回首页重新开始？

[返回首页](/)

三、配置 Vitepress 路由

创建好页面之后，还得告诉 Vitepress 这个页面的存在和作用。在 docs/.vitepress/config.js 文件中进行路由配置。

module.exports = {
  // 其他配置...
  themeConfig: {
    // 其他配置...
    notFound: '/404'
  }
}

当遇到 404 情况时，把用户带到咱们精心准备的 404 页面。

通过以上几个步骤，成功地在 Vitepress 中创建了自定义的 404 页面。这不仅能让用户在遇到页面不存在的情况时不那么迷茫和失落，还能展现咱们网站的个性和贴心。

这个小小的 404 页面，能在关键时刻发挥大作用！