NexT 主題配置（2）－自訂頁面、404

發表於 更新於 分類於

接下來需要處理的就是自定義頁面，像是 tag、categories page。

前言

自定義頁面沒有做看起來不會怎麼樣，但是如果有做會看起來不一樣，至少可能確保自己 blog 在提供給使用者看時，確保和諧性、一致性。

Hexo 版本

  • hexo：6.2.0
  • hexo-server：3.0.0
    NexT 版本
  • NexT：^8.12.1

Tag page

  1. hexo new page tags
  2. 接著會在 /source/tags 看到 index.md
  3. 確保 slidebar 是否需要顯示 tag，_config.next.yml
1
2
3
4
5
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags # here
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

categories page

其實跟 tag 步驟一樣，但需要確保你都有把 tag 相關的關鍵字改成 categories

  1. hexo new page categories
  2. 接著會在 /source/categories 看到 index.md
  3. 確保 slidebar 是否需要顯示 tag，_config.next.yml
1
2
3
4
5
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th # here
  archives: /archives/ || fa fa-archive

不管是 tag or categories，都可透過 index.md 修改 page name 等。

404 page

  1. hexo new page 404
  2. 接著會在 /source/404 看到 index.md，可針對頁面內容進行設計、處理，並且確保 permalink: /404.html 有設定到
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
---
title: '404 - OMG 在這裡遇到你'
date: 2022-06-10 16:59:54
comments: false
permalink: /404.html
---
<!-- markdownlint-disable MD039 MD033 -->

## 這是一個不存在的頁面

很抱歉，你目前存取的頁面並不存在。

預計將在約 <span id="timeout">5</span> 秒後返回首頁。

如果你很急著想看文章，你可以 **[點這裡](https://shijia22.github.io/)** 返回首頁。

<script>
let countTime = 5;

function count() {

  document.getElementById('timeout').textContent = countTime;
  countTime -= 1;
  if(countTime === 0){
    location.href = 'https://shijia22.github.io/';
  }
  setTimeout(() => {
    count();
  }, 1000);
}

count();
</script>
  1. Hexo config file _config.yml -> relative_link: false

參考資料：Custom 404 Page
、(23) 試著學 Hexo - SEO 篇 - 新增你的 404 頁面