【 架網站-4 】hexo的NexT主題：側欄篇（版面配置、新增「關於、標籤、分類」的頁面）

發表於 更新於 分類於 閱讀次數：

側欄：更換位置、更換圖標、新增欄位

文章：新增標籤（tags）、分類（categories）的資訊

更改側欄位置：sidebar

  • 點選「_config.next.yml」，搜尋「sidebar」(快速搜索：mac 的話可以點command+F，windows 的話可以點control+F)，原先預設是左側，我改成右側(把position從left改成right)。
    1
    2
    3
    sidebar:
      # Sidebar Position.
      position: right

側欄-新增欄位：搜尋

  • STEP1：在「終端機」輸入下方語法，安裝套件
    1
    npm install hexo-generator-searchdb
  • STEP2：在「_config.yml 」新增下方語法
    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      content: true
      format: html
  • STEP3：點開「_config.next.yml」
    搜尋「local_search」，將「enable」後面改成：true。
    1
    2
    local_search:
      enable: true
  • 成果圖：

側欄-新增欄位：關於(about)、標籤(tags)、分類(categories)

  • 點選「_config.next.yml」，搜尋「menu」。

  • 語法：（（若要啟用該項欄位，要先將文字前方的「＃」刪除，我是只有啟用前面五個，啟用後長這樣，有些要「新增頁面」才可使用哦。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      #schedule: /schedule/ || fa fa-calendar
      #sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat

  • about、tags、categories-需新增頁面才可使用
    STEP1：在終端機分別輸入以下指令，建立about、tags、categories的頁面

    1
    hexo new page about
    1
    hexo new page categories
    1
    hexo new page tags

    STEP2：點入已新增頁面的「index.md」檔案，編輯頁面內容，tags、categories 兩者要分別在頁面上方輸入「type: tags」、「type: categories」才算啟用完成，about則不需要。

    1
    2
    3
    4
    5
    ---
    title: tags
    date: 2024-03-04 10:55:17
    type: tags
    ---
    1
    2
    3
    4
    5
    ---
    title: categories
    date: 2024-03-04 12:19:22
    type: categories
    ---

  • 將文章加上標籤(tags)、分類(categories)：
    1.我每篇文章在內文的上方都有一個區塊是基本資訊欄位，以我其中一篇文章為例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ---
    title: 【倫敦-景點】Frameless Immersive Art Experience
    date: 2024-11-1 00:00:15
    updated: 2024-11-1 00:00:15
    tags:
      - 倫敦-景點
      - 會再訪
    categories: 
      - 🌴 旅遊體驗分享-目前皆為自助遊
      - 🥥 英國（倫敦） 
    ---

    2.「tags」：是平行階層，如果一次將同一篇文章新增好幾個標籤，會併排顯示，實際效果可以點選我側欄的標籤頁。
    3.「categories」：有區分上、下階層，不支持同階層的多項類別，先列的會在上位階，例如所舉例的文章是分類於「🌴 旅遊體驗分享-目前皆為自助遊」內部的「🥥 英國（倫敦）」篇，實際效果可以點選我側欄的分類頁。

側欄-更改圖標：

更改「側欄上方」的圖標：

點選「_config.next.yml」，搜尋「menu」。

  • 語法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      #schedule: /schedule/ || fa fa-calendar
      #sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat

  • 說明：
    fa fa-home、fa fa-user、fa fa-tags、fa fa-th、fa fa-archive，這些都是圖標的語法，可以自行替換，這種圖標叫fontawesome，fontawesome官網還有很多免費圖標可以用哦，不需要登入就可以查詢。

  • 成果圖：

更改「側欄下方」的圖標（作者欄位）：

一樣在「_config.next.yml」，搜尋「social」。

  • 語法： （（ 若要啟用該項欄位，要先將文字前方的「＃」刪除
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    social:
      #GitHub: https://github.com/yourname || fab fa-github
      #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
      #Weibo: https://weibo.com/yourname || fab fa-weibo
      #Twitter: https://twitter.com/yourname || fab fa-twitter
      #FB Page: https://www.facebook.com/yourname || fab fa-facebook
      #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
      #YouTube: https://youtube.com/yourname || fab fa-youtube
      #Instagram: https://instagram.com/yourname || fab fa-instagram
      #Skype: skype:yourname?call|chat || fab fa-skype
  • 說明：網址可以修改為你自己的社交帳號網址
  • 成果圖：