iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

30 天利用 Hexo 打造技術部落格系列 第 20

Day 20:設定 404 頁面,不要讓讀者迷路了!

  • 分享至 

  • xImage
  •  

當網站建立一段時間,或多或少可能會有頁面因為時間推移改變或是刪除了,但此時頁面已經被搜尋引擎收錄或是說有人將網址轉貼到其它地方,如果有人進入了該網址卻發現已經失效了,不免讓人感到尷尬。

Github Pages 預設 404 頁面

以 Github Pages 來說預設有提供一個 404 頁面,而且 404 上顯示的也不是你的網站,因此無助於將讀者留在自己的網站裡。此時建議可以新增一個屬於自己部落格的 404 頁面,這樣就算該網址內容已被移除,還是能多少留住一些讀者,也有利於 SEO。

建立 Hexo 404 頁面

先透過指令建立頁面:

hexo new page 404

建立好後利用編輯器開啟頁面 .md 檔,並增加以下語法:

---
title: 404 錯誤
date: 2021-09-08 13:50:44
type: categories
comments: false
permalink: /404.html
description: 很抱歉,找不到您想要存取的頁面。您可以經由以下分類找到您想要的內容。
---

其中:

  • 我增加 type 為 categgories,以至於取得目前 Hexo 的分類
  • 增加 permalink: /404.html,這樣才能在讀者存取不存在頁面時顯示 404 頁面
  • 增加 description 並設定提示訊息(內容可自行設定)

設定成果

當然這是我的設定方式,你不一定要跟我這麼做。你也能夠不去設定 type 為分類,而是自己撰寫頁面內容或是放張圖也可以。

另外在本機伺服器上是沒有效果的,所以你可以直接到 http://localhost:4000/404/ 頁面查看編輯狀況,在部署到 Github Pages,亂輸入一個不存在的頁面網址確認。

參考資料

本篇文章同步發布於我的部落格 Gui Blog


上一篇
Day 19:Hexo 文章分類設定小知識!你都知道了嗎?
下一篇
Day 21:在 Hexo 增加作者版權聲明(使用 Next 佈景)
系列文
30 天利用 Hexo 打造技術部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言