GithubPage自定义腾讯404界面

思路来源

之前看到腾讯网络的404和github自带的404,反差很大,于是想自己弄一个了.

过程

github的404一点也不复杂,只是需要在根目录添加一个404.html的文档,或者404.md的文档就行了.

具体的代码可以参考如下:

404.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>系统出现错误,我们会尽快修复,对您造成不便我们感到非常抱歉。</title>
    <style type="text/css">
        .ui-error-box{
 
            background-image: url(/images/error_bj.jpg); height:260px; width: 410px; margin: 80px auto;
            color: #eb6100; font-weight: bold; padding: 140px 0 0 198px;
         
}
        .ui-error-box a{
            color: #037cd6; margin-right: 20px;
}
 
    </style>
    <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="https://wangkun19930608.github.io/" homePageName="回到我的主页"></script>
    
</head>
<body>
    <div class="ui-error-box">
        <p>资源不存在或者系统内部错误<br>对您造成不便我们感到非常抱歉。</p>
    </div>
     <div style="display:none">
          <!-- github blog-->
          <script type="text/javascript">
          var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
          document.write(unescape("%3Cspan id='cnzz_stat_icon_1271464027'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1271464027%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));
          </script>
          <!--all blog-->
          <script src="https://s13.cnzz.com/z_stat.php?id=1264550437&web_id=1264550437" language="JavaScript"></script>
    </div>
</body> 

404.md

---
permalink: /404.html
---
<html>
  <head></head>
  <body>
对不起,目前无法访问你的连接,你可以访问主页https://wangkun19930608.github.io
    </body>
</html>

[注意]

下面的代码加了就直接成为了腾讯的404页面了,有兴趣的可以自己弄弄.不想要的可以把前面的这一句话删掉.

<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="https://wangkun19930608.github.io/" homePageName="回到我的主页"></script>

如果你想换成其他的404界面,可以参考下下面的连接:

猫的状态码

狗的状态码

使用时候直接跳转或者内联到对应的状态码即可.如:

https://http.cat/404

https://httpstatusdogs.com/404

参考文章

Github page 如何自定义404页面_百度经验

关于网站所有404页面替换为腾讯公益404页面的说明

版本说明

20180814 文章完成时间

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

先行者计划--1107微课 《什么是Vuex?》| 文字简版

vuex是什么东西? 官网对Vuex的定义,"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。" 恩,从这句话可以看出,它应该是一种编写js的...

25590
来自专栏木子昭的博客

微信小程序通过ip获取用户所在城市

1.1K30
来自专栏蓝天

三种web性能压力测试工具http_load webbench ab小结

题记:压力和性能测试工具很多,下文讨论的是我觉得比较容易上手,用的比较多的三种 http_load 下载地址:http://www.acme.com/sof...

20610
来自专栏技术栈大杂烩

Linux: Nginx proxy_pass域名解析引发的故障

部署细节:   两容器均部署在同一机器上,通过 docker-compose 编排,并且通过link方式链接。

24020
来自专栏Web 开发

NodeJS那些事

下半年做了挺多活动型需求,因为我们业务人力有限,我在业务的策略是不依赖NodeJS。

19000
来自专栏一名合格java开发的自我修养

计算机操作系统之存储管理

内存的回收与分配,地址变换(程序中的逻辑地址与内存中的物理地址之间的转换),内存扩充(借助虚拟技术或覆盖技术从逻辑上扩充内存容量),内存保护(保证进入内存的各道...

7810
来自专栏黑白安全

社会工程学之手机号伪造

任意显示手机号,使用者想令对方看到你的手机号是怎样的,对方就看到是怎样的,不会显示机主号。

33530
来自专栏happyJared

程序员神器,IntelliJ IDEA 2018.1 正式发布

3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再次让人眼前一亮:什么,还能这么玩?

10810
来自专栏一只程序汪的自我修养

使用requirejs编写模块化代码

25750
来自专栏Linyb极客之路

杂谈Java高并发

对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了。而并发问题是绝大部分的程序员头疼的问题,但话又说回来了,既然逃避不掉,那...

58750

扫码关注云+社区

领取腾讯云代金券