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>
  3. Hexo config file _config.yml -> relative_link: false

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