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 文章完成時間


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM