Hexo Note 04：NexT 主題菜單 (menu) 進階設置

發表於 更新於 分類於 ， 閱讀次數： Disqus： 文章字數： 450 所需閱讀時間 ≈ 2 分鐘

NexT 主題 提供了 多階層動態子菜單 (Dynamic sub-menu within hierarchy structure)，讓 Blog 可以更彈性的編排頁面。

範例

預設情況 menu 是沒有階層的：

_config.next.yml
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

一般 menu

NexT 官網 本身的 menu 提供了階層式 menu 的良好範例：

_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
menu:
  home: / || fa fa-bell # 首頁路徑其實是 /index.html (以專案的 /public 作為根目錄)

  Docs: # 第一階菜單選項
    default: /docs/ || fa fa-book # 第一階菜單的默認頁面 (/docs/index.html)

    Theme Settings: # 第二階菜單選項
      default: /theme-settings/ || fa fa-star # 第二階菜單的默認頁面 (/docs/theme-settings/index.html)
      Sidebar: /sidebar.html || fa fa-bars # 第三階菜單選項
      Footer: /footer.html || fa fa-sticky-note
      Posts: /posts.html || fa fa-paragraph
      Custom Pages: /custom-pages.html || fa fa-swatchbook
      Miscellaneous: /miscellaneous.html || fa fa-university
      SEO: /seo.html || fa fa-external-link-square-alt
      i18n: /internationalization.html || fa fa-language

這裡以 Docs/Theme Settings 為範例

左手邊的菜單為第一階菜單，上方 Header 同時有第二階 (上排) 與第三階菜單 (下排)。

注意事項

  • 超過一階的菜單都必須有 default 頁。
  • 菜單元素的格式為 Key: /link/ || icon；Key 為元素名稱、link 為 Blog 網站相對 URL 目標 (以專案的 /public 作為根目錄)，這也是為何第三階菜單元素的副檔名是 html 而不是 md、icon 就是圖標代號。
  • 各目錄的默認路徑都是 index.html (經過 Hexo 轉換前是 index.md)。
  • 不更改 NexT 主題原始碼的情況下，首頁 (home)、標籤 (tags)、分類 (categories)、歸檔 (archives) 頁面無法使用此功能 (無效果或導致錯誤)。

結語

雖然知道了創建子菜單的方法，但真正缺的是可以放在那的內容 🙂