本文章最初發表在XJHui’s Blog,未經允許,任何人禁止轉載!
爲使您獲得最好的閱讀體驗,強烈建議您點擊 這裏 前往 XJHui’s Blog 查看!
前言
本教程僅適用於部署在Zeit.co的個人網站。
我的博客使用的是Hexo框架
+Butterfly主題
+GitHub倉庫
+Zeit.co部署
+又拍雲CDN
(這不是在打廣告,很認真的在寫博客),主題配置文件中有404頁面的具體設置:
這樣配置能渲染出404頁面:
但當你真正404時:
配置好404後也沒有測試過,一直以爲我的404頁面是正常的…
踩坑經歷
這裏記錄踩坑經歷,想跳過的可以直接傳送到 這裏 。
-
創建
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,至於爲什麼會這樣至今我也不知道,如果您知道原因歡迎到評論區
留言(失敗)。 -
於時更換了
now.json
文件位置,把他放在了主題
的根目錄,結果發現hexo g後在/public文件夾下未生成now.json文件(失敗)。 -
既然無法生成,那我就直接到GitHub倉庫,創建
now.json
文件並把上面的代碼
沾了進去,再次提交竟然成功了,這才明白原來Yavin說的根目錄
是指倉庫根目錄
,但這樣做存在的問題是下次hexo d
後now.json
文件會直接被刪掉(失敗)。 -
我知道
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
創建後的文件:
禁止渲染
爲什麼要禁止渲染?如果不禁止會像其他頁面那樣被加上頂部圖、頁腳…
主要有兩種方法,想具體學習的可以看這篇文章,本篇教程指介紹一種我認爲簡單的:
-
index.md中添加:
layout: false
-
插入html代碼時,使用標籤:
{% raw %} ... html ... {% endraw %}
例如:
如果喜歡我的404頁面,可以使用下面的代碼(太長了,使用PasteMe平臺):
點擊查看代碼,點擊該位置可以直接複製
哦:
說起PasteMe,又讓我想起來iamzxf,還是很感謝他…
修改now.json
文件
來到了最後一步,離成功又近了一步。
將原now.json
文件中的:
"dest": "/404.html"
修改爲:
"dest": "/404/"
至於爲什麼這樣修改,應該很好理解,不多解釋了。
不足之處,歡迎留言,評論會及時回覆,錯誤會及時更正!
創作不易,感謝支持!
最後的最後,歡迎訪問我的個人博客XJHui’s Blog。