Hexo 框架下404页面的设置

前言

​ 今天心情不错,Google Search Console 上一直报错通过不了的站点地图终于获取成功了…别问我为什么,它之前绝对是抽了,好好地把旧版更新到新版,结果各种问题。在sitemap这个问题上折腾了有四天多(上周四 — 本周二),此处po图同庆下。

站点地图验收成功

​ 补充下站点地图的作用,搜索引擎的工作并非如常人所想,只要你发布相应的网页,内容就会被搜索引擎自动收录。而是需要网站向搜索引擎提交自身链接,然后相应的网页信息才会在搜索时按照rank机制进行显示。这里具体说明下Baidu常用的站点内容推送方式。

多种推送站点内容的方案:

  • 主动推送:通过 API 接口推送站点内容,实时性较高
  • 自动推送:在网页内添加 JS 脚本,每当页面被访问的时候会将页面 url 推送给百度,比较被动
  • sitemap:填写站点地图文件地址,百度会周期性的抓取其中的内容进行分析收录,收录效率比较低
  • 手动提交:手动填写链接地址进行收录

本站在针对百度搜索引擎收录上使用三种推送方案:

  • 主动推送 该方式需要借助hexo-baidu-url-submit插件实现快捷推送,在根目录下安装相应依赖
1
npm install hexo-baidu-url-submit --save

并在站点配置文件_confirg.yml上添加下列语句:

1
2
3
4
5
6
# 百度主动推送
baidu_url_submit:
count: 100 # 提交最新的一个链接
host: yearito.cn # 在百度站长平台中注册的域名
token: xxxxx # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里

然后在站点配置文件中修改部署策略

1
2
3
4
5
6
7
8
9
 # Deployment
## Docs: https://hexo.io/docs/deployment.html
- deploy:
- type: git
- repo: git@yearito.cn:~/blog.yearito.git
+ deploy:
+ - type: git
+ repo: git@yearito.cn:~/blog.yearito.git
+ - type: baidu_url_submitter # 百度

每次部署的时候将会自动推送网站内容到百度。

  • 自动推送 Next 主题配置文件中内置了一键开启百度自动推送的选项:

    1
    2
    # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
    baidu_push: true

每次访问站点页面都会通过以上脚本推送本页 url 到百度。

  • sitemap 在站长页面提交属于自己网站的sitemap.xml文件,若判断提交成功,则搜索引擎的爬虫会间隔一段时间爬取sitemap中所收录网站页面的内容信息。

​ 建议不采用主动推送方式进行内容推送,在你未将自己的GitHub pages仓库的属性设为private之前,这样做风险很大…

​ 码到这感觉应该单独开个页面,系统讲述下以上内容,包括网站验证的几种方式sitemap.xml的格式robots.txt的具体配置等等,本站毕竟新开张,刚刚才被Google收录…陆陆续续我也会出相应的博文的,接下来回归正题。

常规404页面

常规404页面,便是你在主题配置_config.yml中把内置的menu下相应注释符号去掉,然后它会显示一个很难以描述的404页面,本质上和创建tagscategories等页面一样。

还有一种常规方式就是创建腾讯公益的404页面,这也是hexo框架下很多用户会采取的404页面。既能有效提示页面不存在,还能做下公益,何乐而不为~

言归正传,下面是该方式的具体操作步骤👇:

  • 进入本地hexo目录,输入以下命令
1
hexo new page "404"
  • 打开刚新建的页面文件,默认在 Hexo 文件夹根目录下 /source/404/index.md ,输入以下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 404 Not Found:该页无法显示
toc: false
comments: false
permalink: /404
---
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="https://www.nickyam.com"></script>
true</body>
</html>
  • 然后部署上传
1
hexo clean && hexo g && hexo d

自定义404.html页面

看到这里应该会有不少人会和我一样,想DIY属于自己的独特404页面,这个过程中本人也进行很多尝试,也总结出一些设置心得,首先推荐一个不错的HTML网站CodePen,上面有不少可以用来制作404页面的素材源码。

制作自定义html页面,在hexo主题下会遇到各种bug:

  • 404页面只在一级域名下一级子路径下能正常跳转显示,在二级乃至三级···子路径下无法正常显示

    解决方法: 不要使用相对路径对依赖文件进行调用!!!使用链接形式对依赖文件进行调用

1
2
3
4
5
//将 .html中下列语句
<script src="./rain_script.js"></script>
//修改为
<script src="https://zejinwang.com/rain_script.js"></script>
//注意:不要使用http为前缀的路径,Chrome不支持读取http外链
  • 按照很多博文描述的思路,将html依赖的css文件和js文件放在根目录下的source文件夹下或者source/你创建的page文件夹 下,在经过 hexo g 生成和 hexo d上传后,无法正常调用依赖的两个文件

    解决方法:将依赖的jscss依赖文件放到主题所在目录的source文件下,而不是hexo根目录下的source文件夹中

创建步骤

  • 创建自定义page文件夹

     
    1
    hexo new page "404 not found"
  • 将‘’404 not found‘’文件夹下的index.md文件替换为你准备的index.html文件

  • 将index.html文件以来的css和js文件依赖放到主题目录下的source文件夹中

  • 修改theme目录下的主题配置文件中menu部分,添加上自定义page信息

主题配置文件修改部分

自定义页面效果展示见404特效源码雨特效

Reference

Hexo博客添加腾讯404公益页面

hexo创建404页面

Hexo 搭建个人博客系列:部署上线篇

Some say the world will end in fire,

Some say in ice.

From what I’ve tasted of desire

I hold with those who favor fire.

But if it had to perish twice,

I think I know enough of hate

To say that for destruction ice

Is also great

And would suffice.

-------------本文结束感谢阅读-------------
Thanks for your rewarding ~
0%