給你的Zeit page自定義404頁面

本文章最初發表在XJHui’s Blog,未經允許,任何人禁止轉載!

爲使您獲得最好的閱讀體驗,強烈建議您點擊 這裏 前往 XJHui’s Blog 查看!

前言

本教程僅適用於部署在Zeit.co的個人網站。

我的博客使用的是Hexo框架+Butterfly主題+GitHub倉庫+Zeit.co部署+又拍雲CDN(這不是在打廣告,很認真的在寫博客),主題配置文件中有404頁面的具體設置:

這樣配置能渲染出404頁面:

但當你真正404時:

配置好404後也沒有測試過,一直以爲我的404頁面是正常的…

踩坑經歷

這裏記錄踩坑經歷,想跳過的可以直接傳送到 這裏

  1. 百度找到Yavin這篇文章中有說解決方法:

    創建now.json文件:

    {
      "version": 2,
      "routes": [
        { "handle": "filesystem" },
        { "src": "/(.*)", "status": 404, "dest": "/404.html" }
      ]
    }
    

    並把它放到根目錄(我當時認爲是Hexo的根目錄),hexo g 後自動在/public下生成now.json文件:

    於是我興奮的hexo d後發現提交至Zeit.co倉庫失敗了:

    英文看不懂?就是說生成的json文件不符合規範(存在語法錯誤),仔細看上圖會發現json文件中包含了JavaScript,至於爲什麼會這樣至今我也不知道,如果您知道原因歡迎到評論區留言(失敗)。

  2. 於時更換了now.json文件位置,把他放在了主題的根目錄,結果發現hexo g後在/public文件夾下未生成now.json文件(失敗)。

  3. 既然無法生成,那我就直接到GitHub倉庫,創建now.json文件並把上面的代碼沾了進去,再次提交竟然成功了,這才明白原來Yavin說的根目錄是指倉庫根目錄,但這樣做存在的問題是下次hexo dnow.json文件會直接被刪掉(失敗)。

  4. 我知道hexo d其實就是把/public中的文件上傳到倉庫。想把json文件放到倉庫根目錄其實就是先放到/public中,於時開始想哪裏的文件hexo g後能直接生成在/public中,看了一眼倉庫中的文件:

    ​ 有點熟悉呀,這三個文件夾不就是主題根目錄/source(不是hexo根目錄下的/source)中的三個文件夾?:

    ​ 於時我很開心的把now.json文件放進了/source

    ​ 哈哈,測試沒問題,終於解決了。

解決404頁面無法顯示

本博客提供的方法僅在Hexo博客框架下Butterfly主題測試,其餘框架或主題可自行嘗試。

若您的主題使用了頁面壓縮(gulp…),需要先排除掉conf.json這個文件。

在主題根目錄/source下新建now.json文件,粘貼下面的代碼:

{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "status": 404, "dest": "/404.html" }
  ]
}

注:該json文件會調用404.html,所以要保證倉庫根目錄有404.html文件,當然也可以寫成其他文件(也爲下面自定義404頁面創造可能)。

感謝:Yavin

自定義404頁面

主題404頁面可配置項不多(僅支持修改背景圖片),但你可以按照本教程讓你的博客擁有喜歡的404頁面

當然你可以去修改404的pug文件,但我實在是不想動源代碼(主要是怕博客報錯,然後gg)

先上gif,看看我的404頁面:

404頁面代碼來自CodePen,感謝!

其實很簡單,大致思路是新建page頁面 -> 禁止渲染該頁面 -> 修改json.now文件。

新建page頁面

怎麼創建應該都會吧,這裏以404爲例:

hexo new page 404

別擔心這個404會渲染出404.html然後與原有的404.html衝突,因爲page頁渲染出來的是/404/index.html

創建後的文件:

禁止渲染

爲什麼要禁止渲染?如果不禁止會像其他頁面那樣被加上頂部圖、頁腳…

主要有兩種方法,想具體學習的可以看這篇文章,本篇教程指介紹一種我認爲簡單的:

  1. index.md中添加:

    layout: false
    
  2. 插入html代碼時,使用標籤:

    {% raw %}
    ...
    html
    ...
    {% endraw %}
    

例如:

如果喜歡我的404頁面,可以使用下面的代碼(太長了,使用PasteMe平臺):

點擊查看代碼,點擊該位置可以直接複製哦:

說起PasteMe,又讓我想起來iamzxf,還是很感謝他…

修改now.json文件

來到了最後一步,離成功又近了一步。

將原now.json文件中的:

"dest": "/404.html" 

修改爲:

"dest": "/404/" 

至於爲什麼這樣修改,應該很好理解,不多解釋了。


不足之處,歡迎留言,評論會及時回覆,錯誤會及時更正!

創作不易,感謝支持!

最後的最後,歡迎訪問我的個人博客XJHui’s Blog

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章