feat: can set icon for navigation menu

XPoet · Mar 5, 2024 · 2301d8c · 2301d8c
1 parent 6915333
commit 2301d8c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 22 deletions.
diff --git a/_config.yml b/_config.yml
@@ -30,16 +30,18 @@ base_info:
 # ---------------------------------------------------------------------------------------
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/menu.html
 # ---------------------------------------------------------------------------------------
-# If you want to enable Categories and Tags, you need to create categories and tags pages
-# e.g. `hexo new page categories` or `hexo new page tags`
+# If you want to enable a new navigation menu, you need to create a corresponding page
+# e.g. to enable categories, you need to execute `hexo new page categories`
+# Use `||` to set icon for navigation menu, e.g. `home: / || fa-solid fa-home`
 menu:
-  Archives: /archives
-  # Tags: /tags
-  # Categories: /categories
-  # Links: /links
-  # About: /about
-  # Changelog: /changelog
-  # Photos: /photos
+  home: /                       # || fa-solid fa-home
+  archives: /archives           # || fa-solid fa-box-archive
+  # tags: /tags                 # || fa-solid fa-tags
+  # categories: /categories     # || fa-solid fa-layer-group
+  # links: /links               # || fa-solid fa-link
+  # about: /about               # || fa-solid fa-user-graduate
+  # changelog: /changelog       # || fa-solid fa-bookmark
+  # photos: /photos             # || fa-solid fa-image
   # ......
 
 
@@ -263,7 +265,7 @@ comment:
   # See: https://github.com/ArtalkJS/Artalk
   #      https://artalk.js.org
   artalk:
-    server:     # Server URL
+    server:                    # Server URL
 
   # Disqus
   # See: https://disqus.com/

diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
@@ -3,9 +3,6 @@ const { title: bi_title, logo: bi_logo } = theme?.base_info || {}
 const { enable: s_fs_enable } = theme?.first_screen || {}
 const { enable: local_search_enable } = theme?.local_search || {}
 const h_menu_nav_object = theme?.menu || { Archives: '/archives' }
-delete h_menu_nav_object['home']
-delete h_menu_nav_object['Home']
-delete h_menu_nav_object['HOME']
 %>
 <header class="header-wrapper<%= s_fs_enable === true && is_home() ? ' transparent-1' : '' %>">
 
@@ -24,15 +21,18 @@ delete h_menu_nav_object['HOME']
         <div class="right border-box">
             <div class="pc">
                 <ul class="menu-list">
-                    <li class="menu-item">
-                        <a class="<%- is_home() ? 'active' : '' %>"
-                           href="<%- url_for('/') %>"
-                        ><%= __('home').toUpperCase() %></a>
-                    </li>
                     <% for (const i in h_menu_nav_object) { %>
+                        <%
+                            const temp_menu_list = h_menu_nav_object[i]?.split('||')
+                            const nav_path = temp_menu_list[0]?.trim()?.toLowerCase()
+                            const nav_icon = temp_menu_list[1]?.trim()?.toLowerCase()
+                        %>
                         <li class="menu-item">
-                            <a class="<%- is_current(h_menu_nav_object[i]) ? 'active' : '' %>"
-                               href="<%- url_for(h_menu_nav_object[i]) %>"
+                            <% if (nav_icon) { %>
+                                <i class="menu-icon <%= nav_icon %>"></i>
+                            <% } %>
+                            <a class="<%- is_current(nav_path) ? 'active' : '' %>"
+                               href="<%- url_for(nav_path) %>"
                             ><%= __(i.toLowerCase()).toUpperCase() %></a>
                         </li>
                     <% } %>

diff --git a/source/css/common/css-variables.styl b/source/css/common/css-variables.styl
@@ -36,12 +36,13 @@
   --header-scroll-progress-bar-height 2px
   --header-title-font-family var(--base-font-family)
   --header-title-font-size 1.8rem
+  --header-menu-icon inline-block   // Option values: inline-block | none
 
 
   // ==============================================================================================
   // first screen
   // ==============================================================================================
-  --first-screen-display block    // Option values: none | block
+  --first-screen-display block    // Option values: block | none
 
   --first-screen-font-family var(--base-font-family)
   --first-screen-font-size 2rem

diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
@@ -150,6 +150,7 @@ $logo-image-box-width = 2.68rem
               margin-left 0
             }
 
+
             a {
               &::before {
                 position absolute
@@ -180,14 +181,21 @@ $logo-image-box-width = 2.68rem
 
 
             &.search {
-              margin-left 26px
+              margin-left 1.6rem
               font-size $pc-search-icon-font-size
 
               i {
                 color var(--text-color-3)
               }
             }
 
+
+            .menu-icon {
+              display var(--header-menu-icon)
+              margin-right 0.1rem
+              color var(--text-color-3)
+            }
+
             .is-home & {
               if (hexo-config('first_screen') && hexo-config('first_screen.enable') == true) {
                 a {