biss/blog
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

custom navbar

Browse Source
This commit is contained in:
biss
2025-08-13 15:46:38 +08:00
parent fe6bb1da09
commit 03c979666f
7 changed files with 268 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
_config.butterfly.yml
View File

@@ -1069,6 +1069,7 @@ inject:
- <script src="/js/calendar.js"></script>
- <script src="https://unpkg.com/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script>
- <script src="/js/day.js"></script>
- <script src="/js/random.js"></script>
- <script defer type="text/javascript" src="https://cdn1.tianli0.top/npm/sweetalert2@8.19.0/dist/sweetalert2.all.js"></script>
# CDN Settings

1
_config.yml
View File

@@ -145,7 +145,6 @@ sitemap:
rel: false
tags: true
categories: true
pretty_atom_file: atom.xsl
# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/

2
themes/butterfly/layout/includes/header/menu_item.pug
View File

@@ -2,7 +2,7 @@ if theme.menu
.menus_items
each value, label in theme.menu
if typeof value !== 'object'
.menus_item
.icat_menus_item
- const [link, icon] = value.split('||').map(part => trim(part))
a.site-page(href=url_for(link))
if icon

19
themes/butterfly/layout/includes/header/nav.pug
View File

@@ -13,14 +13,21 @@ nav#nav
span= ' ' + _p('post.back_to_home')
#menus
if theme.search.use
#search-button
span.site-page.social-icon.search
i.fas.fa-search.fa-fw
span= ' ' + _p('search.title')
//- if theme.search.use
//- #search-button
//- span.site-page.social-icon.search
//- i.fas.fa-search.fa-fw
//- span= ' ' + _p('search.title')
if theme.menu
!= partial('includes/header/menu_item', {}, {cache: true})
#nav-right
if theme.search.use
#random-post-button
a.site-page.social-icon#random-post-link(href='javascript:randomPost();')
i.fas.fa-solid.fa-shuffle
#search-button
a.site-page.social-icon.search
i.fas.fa-search.fa-fw
#toggle-menu
span.site-page
i.fas.fa-bars.fa-fw

2
themes/butterfly/source/css/_layout/head.styl
View File

@@ -338,7 +338,7 @@
.menus_items
display: inline
.menus_item
.icat_menus_item
position: relative
display: inline-block
padding: 0 0 0 14px

34
themes/butterfly/source/css/_layout/sidebar.styl
View File

@@ -38,7 +38,8 @@
background: var(--sidebar-menu-bg)
box-shadow: 0 0 1px 1px rgba(7, 17, 27, .05)
addBorderRadius(10)
.menus_item
margin: 10px 0
.site-page
@extend .limit-one-line
position: relative
@@ -49,6 +50,11 @@
font-size: 1.15em
cursor: pointer
addBorderRadius(6)
border: var(--icat-style-border-always)
background: var(--icat-essay-card-bg)
font-size: 14px
border-radius: 12px
&:hover
background: var(--text-bg-hover)
@@ -57,6 +63,7 @@
i:first-child
width: 15%
text-align: left
padding-left: 10px
&.group
& > i:last-child
@@ -76,3 +83,28 @@
margin: 0
padding-left: 25px
list-style: none
#sidebar
#sidebar-menus
.icat_menus_item
display: inline-block
width: 50%
.site-page
text-align: center
margin: 4px
display: flex
flex-direction: column
align-items: center
padding: 8px 0
border-radius: 12px
font-size: 14px
i:first-child
padding-left: 0
& > .icat-essay
font-weight: 500
span
margin-top: -8px

217
themes/butterfly/source/css/style.css
View File

@@ -364,3 +364,220 @@
background: url(https://free.picui.cn/free/2025/08/10/689845496a283.png) no-repeat center center;
background-size: cover;
}
#nav-right{
flex:1 1 auto;
justify-content: flex-end;
margin-left: auto;
display: flex;
flex-wrap:nowrap;
}
/* 菜单栏居中 */
#blog-info a:hover {
background: var(--icat-blue);
transition: background .3s;
border-radius: 8px;
}
#blog-info a:hover .site-name {
color: var(--icat-blue) !important;
position: relative;
text-shadow: 0 0 transparent;
}
#blog-info a:hover .site-name:after {
position: absolute;
display: flex;
top: 0;
width: 100%;
height: 100%;
content: "\e03a";
font-family: "iconfont" !important;
font-size: 22px;
line-height: 1;
color: var(--icat-white);
justify-content: center;
align-items: center;
}
@media screen and (max-width: 768px) {
#blog-info a:hover {
background: 0;
transition: unset;
border-radius: 0;
}
#blog-info a:hover .site-name {
color: var(--icat-blue) !important;
position: relative;
text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
}
#blog-info a:hover .site-name:after {
display: none;
}
}
/* 主页按钮 */
#nav.show {
display: flex;
justify-content: center;
}
#nav .site-page {
padding-bottom: 14px;
}
#page-header.not-top-img #nav {
display: flex;
justify-content: center;
border-bottom: 1px solid var(--icat-secondbg);
}
#nav-group {
width: 1400px;
display: flex;
align-items: center;
padding: 0 0.6rem;
margin-left: auto;
margin-right: auto;
}
/* 顶部栏宽度定义 */
#nav .menus_items .menus_item .menus_item_child, #nav .menus_items .icat_menus_item .menus_item_child {
margin-top: 14px;
border: 1px solid var(--icat-secondbg);
}
#nav .menus_items .menus_item .menus_item_child li a, #nav .menus_items .icat_menus_item .menus_item_child li a {
padding: 8px 34px;
text-align: center;
}
#travellings {
padding: 0 14px 0 0;
}
/* PC菜单栏美化 */
#sidebar #sidebar-menus .menus_items .menus_item_child {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#sidebar #sidebar-menus .menus_items a.site-page, #sidebar .menus_item ul {
padding-left: 0;
}
#sidebar #sidebar-menus .menus_item_child li {
width: calc(50% - 8px);
margin: 4px;
}
#sidebar #sidebar-menus .menus_item_child .site-page.child {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding: 8px;
border-radius: 12px;
border: var(--style-border-always);
background: var(--icat-card-bg);
font-size: 14px;
}
#nav.hide-menu #toggle-menu {
padding: 0 0 0 12px;
}
#sidebar #sidebar-menus .icat_menus_item .site-page {
text-align: center;
margin: 4px;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding: 8px 0;
border-radius: 12px;
font-size: 14px;
}
@media screen and (max-width: 768px) {
#sidebar #sidebar-menus .menus_items .site-page.group > i:last-child {
margin-top: 4px;
}
#sidebar #sidebar-menus .menus_items .icat_menus_item .site-page i:first-child {
text-align: center;
padding-left: 0;
}
}
/* 子菜单美化 */
#sidebar .open > .avatar-img img {
height: 100px;
width: 100px;
border-radius: 50%;
}
#sidebar .open > .avatar-img img {
border: 5px #fff solid;
}
#sidebar .open > .avatar-img::before {
bottom: 8px;
height: 12px;
width: 12px;
}
#sidebar .open > .avatar-img::before {
content: '';
position: absolute;
left: 50%;
transform: translate(65%);
background: #6bdf8f;
border: 5px solid #fff;
border-radius: 50%;
transition: filter 375ms ease-in .2s,transform .3s;
z-index: 2;
}
/* 头像美化 */
#sidebar #sidebar-menus .sidebar-site-data {
padding: 0;
margin-left: 10px;
background: var(--icat-card-bg);
border-radius: 12px;
border: var(--style-border-always);
}
@media screen and (max-width: 768px) {
.site-data {
width: 94%;
}
}
/* 侧边栏的统计栏美化 */
/* PE端菜单栏美化 */