Skip to content

Commit

Permalink
feat: supports secondary menu configuration in pc
Browse files Browse the repository at this point in the history
  • Loading branch information
@XPoet
XPoet committed Jul 9, 2024
1 parent d486a7d commit ae9fa33
Show file tree
Hide file tree
Showing 8 changed files with 202 additions and 94 deletions.
51 changes: 30 additions & 21 deletions layout/_partial/header.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,34 @@ for (const key in origin_h_menu_nav_object) {
<div class="right border-box">
<div class="pc">
<ul class="menu-list">
<ul class="menu-list border-box">
<% 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(nav_path) ? 'active' : '' %>"
href="<%- url_for(nav_path) %>"
>
<% if (nav_icon) { %>
<i class="menu-icon <%= nav_icon %>"></i>
<% const { path, icon, name, children } = getMenuItemObj(h_menu_nav_object, i) %>
<li class="menu-item border-box<%- children.length ? ' has-sub-menu' : '' %><%- is_current(path) && !children.length ? ' active' : '' %>">
<a class="border-box" href="<%- !children.length ? url_for(path) : 'javascript:void(0);' %>">
<% if (icon) { %>
<i class="menu-icon <%= icon %>"></i>
<% } %>
<%= __(name).toUpperCase() %>
<% if (children.length) { %>
<i class="collapse-icon fa-solid fa-angle-down"></i>
<% } %>
<%= __(i.toLowerCase()).toUpperCase() %>
</a>
<% if (children.length) { %>
<ul class="sub-menu-list border-box">
<% for (const smi of children) { %>
<% const { path: p2, icon: i2, name: n2 } = parseMenuItem(smi) %>
<li class="sub-menu-item border-box <%- is_current(p2) ? ' active' : '' %>">
<a class="border-box" href="<%- url_for(p2) %>">
<% if (i2) { %>
<i class="sub-menu-icon <%= i2 %>"></i>
<% } %>
<%= __(n2).toUpperCase() %>
</a>
</li>
<% } %>
</ul>
<% } %>
</li>
<% } %>
<% if (local_search_enable === true) { %>
Expand All @@ -64,15 +76,12 @@ for (const key in origin_h_menu_nav_object) {
<div class="header-drawer">
<ul class="drawer-menu-list">
<% for (let i in h_menu_nav_object) { %>
<%
const temp_menu_list2 = h_menu_nav_object[i]?.split('||')
const nav_path2 = temp_menu_list2[0]?.trim()?.toLowerCase()
%>
<% for (const i in h_menu_nav_object) { %>
<% const { path, name} = getMenuItemObj(h_menu_nav_object, i) %>
<li class="drawer-menu-item flex-center">
<a class="<%- is_current(nav_path2) ? 'active' : '' %>"
href="<%- url_for(nav_path2) %>"
><%= __(i.toLowerCase()).toUpperCase() %></a>
<a class="<%- is_current(path) ? 'active' : '' %>"
href="<%- url_for(path) %>"
><%= __(name).toUpperCase() %></a>
</li>
<% } %>
</ul>
Expand Down
8 changes: 5 additions & 3 deletions layout/_template/friends-link.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@
<a class="a-wrap border-box" href="<%= f?.link %>">
<div class="avatar border-box flex-center">
<i class="icon fas fa-eye-slash"></i>
<img src="<%- url_for(f?.avatar) %>"
onerror="this.style.display='none'"
>
<% if (f?.avatar) { %>
<img src="<%- url_for(f.avatar) %>"
onerror="this.style.display='none'"
>
<% } %>
</div>
<div class="details border-box text-ellipsis">
<div class="name border-box text-ellipsis"><%= f?.name %></div>
Expand Down
8 changes: 5 additions & 3 deletions layout/_template/tools-nav.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,11 @@ const tools_nav_data = theme.source_data.tools.filter((t) => t?.category)
<div class="top border-box">
<div class="logo border-box flex-center <%= tool?.image ? '' : 'has-bg' %>">
<span class="text-color-4"><%= tool?.name.charAt(0).toUpperCase() %></span>
<img src="<%- url_for(tool?.image) %>"
onerror="this.style.display = 'none'"
>
<% if (tool?.image) { %>
<img src="<%- url_for(tool?.image) %>"
onerror="this.style.display = 'none'"
>
<% } %>
</div>
<div class="name flex-start border-box text-ellipsis">
<div class="border-box text-color-3 text-ellipsis">
Expand Down
56 changes: 56 additions & 0 deletions scripts/helpers/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,3 +111,59 @@ hexo.extend.helper.register('isJsFile', function (path) {
hexo.extend.helper.register('isCssFile', function (path) {
return /\.css$/i.test(path)
})

const parseMenuItemValue = (menuItemVal) => {
let path = ''
let icon = ''
let children = []

if (typeof menuItemVal === 'string') {
const menu_split_list = menuItemVal?.split('||')
path = menu_split_list[0]?.trim()?.toLowerCase() || ''
icon = menu_split_list[1]?.trim()?.toLowerCase() || ''
}

if (typeof menuItemVal === 'object') {
children = menuItemVal?.children || []
path = menuItemVal?.path || ''
if (children.length) {
path = ''
}
icon = menuItemVal?.icon || ''
}

return {
path,
icon,
children
}
}

hexo.extend.helper.register('parseMenuItem', function (menuItem) {
let name = ''
let menuItemValue = ''

if (typeof menuItem === 'object') {
name = Object.keys(menuItem)[0]
menuItemValue = Object.values(menuItem)[0]
}

const temp = parseMenuItemValue(menuItemValue)

return {
name,
...temp
}
})

hexo.extend.helper.register('getMenuItemObj', function (menuObj, menuKey) {
const menuItemVal = menuObj[menuKey]
menuKey = menuKey.toLowerCase()

const temp = parseMenuItemValue(menuItemVal)

return {
name: menuKey,
...temp
}
})
167 changes: 103 additions & 64 deletions source/css/layout/_partial/header.styl
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
$pc-search-icon-font-size = 1.5rem
$menu-bar-line-height = 2.5px
$menu-icon-gap = 0.1rem
$pc-menu-item-gap = 1.8rem
$logo-image-box-width = 2.68rem

.header-wrapper {
Expand All @@ -17,6 +19,7 @@ $logo-image-box-width = 2.68rem
box-shadow 1px 2px 10px var(--shadow-hover-color)
}


.header-content {
z-index $z-index-5
display flex
Expand Down Expand Up @@ -131,6 +134,7 @@ $logo-image-box-width = 2.68rem
.pc {
.menu-list {
display flex
gap $pc-menu-item-gap
align-items center

+keep-tablet() {
Expand All @@ -139,106 +143,141 @@ $logo-image-box-width = 2.68rem


.menu-item {
position relative
float left
box-sizing border-box
margin-left 2rem
display flex
align-items center
justify-content flex-start
font-size 1rem
cursor pointer

&:first-child {
margin-left 0
&.search {
font-size $pc-search-icon-font-size
}


a {
&::before {
position absolute
bottom -10px
left 50%
box-sizing border-box
width 0
height 2.6px
background var(--primary-color)
border-radius 3px
transform translateX(-50%)
content ''
transition-t("transform, bottom, width", "0, 0, 0", "0.2, 0.2, 0.2", "linear, linear, ease")

.header-shrink & {
bottom calc(-1 * calc(var(--header-shrink-height) * 0.5 - 12px))
}
}
a
i
a i {
color var(--text-color-3)
}

&::before {
position absolute
bottom -10px
left 50%
box-sizing border-box
width 0
height 2.6px
background var(--primary-color)
border-radius 3px
transform translateX(-50%)
content ''
transition-t("transform, bottom, width", "0, 0, 0", "0.2, 0.2, 0.2", "linear, linear, ease")

&:hover
&.active {
&::before {
width 100%
}
.header-shrink & {
bottom calc(-1 * calc(var(--header-shrink-height) * 0.5 - 12px))
}
}


&.search {
margin-left 1.6rem
font-size $pc-search-icon-font-size

i {
color var(--text-color-3)
&:hover
&.active {
&::before {
width 100%
}
}


.menu-icon {
display var(--header-menu-icon)
margin-right 0.1rem
margin-right $menu-icon-gap
}

.is-home & {
if (hexo-config('first_screen') && hexo-config('first_screen.enable') == true) {
a {
color var(--first-screen-header-font-color-light)
a
i
a i {
color var(--first-screen-header-font-color-light) !important
}


.menu-icon {
color var(--first-screen-header-font-color-light)
.dark-mode & {
a
i
a i {
color var(--first-screen-header-font-color-dark) !important
}
}
}
}

&:hover {
color var(--primary-color)

.menu-icon {
color var(--primary-color)
}
}
&.has-sub-menu {
&::after {
position absolute
bottom 0
left 0
box-sizing border-box
width 100%
height 100%
content ''
}

&:hover {
&::after {
bottom -100%
}

.collapse-icon {
transform rotate(180deg)
}

i.search {
color var(--first-screen-header-font-color-light)
.sub-menu-list {
display flex
}
}
}


.dark-mode & {
a {
color var(--first-screen-header-font-color-dark)
.collapse-icon {
margin-left $menu-icon-gap
transition-t("transform", "0", "0.3", "ease")
}
}

.menu-icon {
color var(--first-screen-header-font-color-dark)
}

&:hover {
color var(--primary-color)
.sub-menu-list {
position absolute
bottom -280%
left 50%
display none
gap $pc-menu-item-gap
justify-content flex-start
box-sizing border-box
padding 0.8rem 1.6rem
background var(--background-color-1)
border-radius 0.6rem
box-shadow 0 0 8px var(--shadow-color)
transform translateX(-50%)

.menu-icon {
color var(--primary-color)
}
}
}
.sub-menu-item {

i.search {
color var(--first-screen-header-font-color-dark)
}
&:hover
&.active {
a
a i {
color var(--primary-color) !important
}
}

a {
display flex
align-items center
justify-content flex-start

.sub-menu-icon {
display var(--header-menu-icon)
margin-right $menu-icon-gap * 2
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion source/css/layout/_template/friends-link.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ $friend-link-item-height = 5.2rem
$friend-link-item-height-tablet = 4.2rem
$friend-link-item-border-radius = 0.6rem

if (hexo-config('menu') && hexo-config('menu.links')) {
if (hexo-config('source_data.links')) {
.page-template-container {
.friends-link-list {
display grid
Expand Down
Loading

0 comments on commit ae9fa33

Please sign in to comment.