給你的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 d

   後

   now.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

檔案中的：

修改為：

至于為什麼這樣修改，應該很好了解，不多解釋了。

不足之處，歡迎留言，評論會及時回複，錯誤會及時更正！

創作不易，感謝支援！

最後的最後，歡迎通路我的個人部落格XJHui’s Blog。