为了去往别处

0%

hexo博客怎样自定义404页面

发表于 更新于 分类于
本文字数： 1.1k 阅读时长 ≈ 1 分钟
hexo博客自定义404页面的方法

前言

今天看了下我的博客“长ping”关键词竟然排到了谷歌搜索结果的第一位！但是昨天更新了所有文章的url地址，谷歌并没有及时抓取最新内容。所以导致这个排名第一的网页，用户打开之后看不到内容，这样的用户体验是绝对无法忍受的！于是，就有了自定义404页面的需求。本文记录了将404页面重定向到网站首页，并引导客户在网站内进行搜索的具体操作步骤。

image.png

操作步骤

以下操作步骤适用于任何主题，不管你是hexo还是其他主题，操作步骤都一样。

  1. 在博客主题的source文件夹下面创建404.html，这个html文件就是用来自定义404页面的。
    比如我是next主题的博客，就是在\themes\next\source路径下创建404.html
    image8f94f3a6ef348c9f.png

  2. 接下来编辑这个html文件，写入自定义404页面的内容，我用了腾讯的公益404页面，以下代码供参考：

    ！！注意：请将以下代码中的https://dana5haw.com替换为你的网站首页，返回主页（您可以进入首页继续搜索）替换为引导用户回到网站首页的引导语。

js文件的地址可能会有更新，请以腾讯官方代码为准
image845ad54beb3a14e4.png

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="https://dana5haw.com" homePageName="返回主页（您可以进入首页继续搜索）"></script>
</body>
</html>
  1. 部署上传，更新网站。输入命令hexo g -d即可。
  2. 测试404页面。在域名下输入一个不存在的地址，看看404页面是否更新成功。比如我的域名是dana5haw.com，那么我可以输入https://dana5haw.com/111这个不存在的地址进行测试。
    看看自定义之后的404页面是什么样子呢？
    image61eb468b2a976a0f.png

结语

你还可以把404页面写得很炫酷，掌握这个操作方法就可以了。

参考

https://www.zhihu.com/question/21650209

相关文章

https://dana5haw.com/posts/en/how-to-customize-404-page-in-hexo-blog.html

-------------本文结束感谢您的阅读-------------