update
This commit is contained in:
321
source/_posts/custom-navbar.md
Normal file
321
source/_posts/custom-navbar.md
Normal file
@@ -0,0 +1,321 @@
|
||||
---
|
||||
title: 自定义导航栏
|
||||
categories: 建站手札
|
||||
series: 网站
|
||||
summary: 介绍如何修改导航栏
|
||||
abbrlink: 3e61a389
|
||||
date: 2025-08-13 16:12:25
|
||||
tags:
|
||||
---
|
||||
最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。
|
||||
|
||||
# PC 菜单栏
|
||||
修改`[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug`的内容
|
||||
```diff
|
||||
nav#nav
|
||||
span#blog-info
|
||||
a(href=url_for('/') title=config.title)
|
||||
if theme.nav.logo
|
||||
img.site-icon(src=url_for(theme.nav.logo))
|
||||
if theme.nav.display_title
|
||||
span.site-name=config.title
|
||||
|
||||
#menus
|
||||
- if (theme.algolia_search.enable || theme.local_search.enable)
|
||||
- #search-button
|
||||
- a.site-page.social-icon.search
|
||||
- i.fas.fa-search.fa-fw
|
||||
- span=' '+_p('search.title')
|
||||
!=partial('includes/header/menu_item', {}, {cache: true})
|
||||
+ #nav-right
|
||||
+ if (theme.algolia_search.enable || theme.local_search.enable)
|
||||
+ #search-button
|
||||
+ a.site-page.social-icon.search
|
||||
+ i.fas.fa-search.fa-fw
|
||||
+ #toggle-menu
|
||||
+ a.site-page
|
||||
+ i.fas.fa-bars.fa-fw
|
||||
+ #toggle-menu
|
||||
+ a.site-page
|
||||
+ i.fas.fa-bars.fa-fw
|
||||
```
|
||||
新建css文件
|
||||
|
||||
```css
|
||||
#nav-right{
|
||||
flex:1 1 auto;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-wrap:nowrap;
|
||||
}
|
||||
|
||||
/* 导航栏居中 */
|
||||
#sidebar #sidebar-menus .menus_items .menus_item {
|
||||
margin: 10px 0;
|
||||
}
|
||||
#sidebar #sidebar-menus .menus_items a.site-page {
|
||||
padding-left: 0;
|
||||
}
|
||||
#sidebar #sidebar-menus .menus_items .site-page {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 6px 30px 6px 22px;
|
||||
color: var(--font-color);
|
||||
font-size: 1.15em;
|
||||
border: var(--style-border-always);
|
||||
background: var(--icat-card-bg);
|
||||
font-size: 14px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#sidebar #sidebar-menus .menus_items .site-page i:first-child {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
```
|
||||
# PE端
|
||||
修改`[blogRoot]/themes/butterfly/layout/includes/header/menu_item.pug`内容。
|
||||
```diff
|
||||
if theme.menu
|
||||
.menus_items
|
||||
each value, label in theme.menu
|
||||
if typeof value !== 'object'
|
||||
- .menus_item
|
||||
+ .icat_menus_item
|
||||
- const valueArray = value.split('||')
|
||||
a.site-page(href=url_for(trim(valueArray[0])))
|
||||
|
||||
···
|
||||
```
|
||||
修改`[blogRoot]/themes/butterfly/source/css/_layout/head.styl `内容
|
||||
```diff
|
||||
···
|
||||
|
||||
.menus_items
|
||||
display: inline
|
||||
|
||||
.menus_item
|
||||
+ .icat_menus_item
|
||||
position: relative
|
||||
display: inline-block
|
||||
padding: 0 0 0 14px
|
||||
|
||||
&:hover
|
||||
.menus_item_child
|
||||
display: block
|
||||
|
||||
···
|
||||
```
|
||||
修改[blogRoot]/themes/butterfly/source/css/_layout/sidebar.styl内容
|
||||
```diff
|
||||
|
||||
···
|
||||
|
||||
.menus_items
|
||||
padding: 0 10px 40px
|
||||
|
||||
+ .menus_item
|
||||
+ margin: 10px 0
|
||||
|
||||
.site-page
|
||||
@extend .limit-one-line
|
||||
position: relative
|
||||
display: block
|
||||
padding: 6px 30px 6px 22px
|
||||
color: var(--font-color)
|
||||
font-size: 1.15em
|
||||
+ border: var(--icat-style-border-always)
|
||||
+ background: var(--icat-essay-card-bg)
|
||||
+ font-size: 14px
|
||||
+ border-radius: 12px
|
||||
|
||||
&:hover
|
||||
background: var(--text-bg-hover)
|
||||
|
||||
i:first-child
|
||||
width: 15%
|
||||
text-align: left
|
||||
+ padding-left: 10px
|
||||
|
||||
&.group
|
||||
& > i:last-child
|
||||
position: absolute
|
||||
top: .78em
|
||||
right: 18px
|
||||
transition: transform .3s
|
||||
|
||||
&.hide
|
||||
& > i:last-child
|
||||
transform: rotate(90deg)
|
||||
|
||||
& + .menus_item_child
|
||||
display: none
|
||||
|
||||
.menus_item_child
|
||||
margin: 0
|
||||
list-style: none
|
||||
padding-top: 6px
|
||||
|
||||
+#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
|
||||
```
|
||||
|
||||
在css文件中添加
|
||||
```css
|
||||
#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端菜单栏美化 */
|
||||
```
|
||||
# 参考
|
||||
{% link Meuicat的博客,Meuicat,https://meuicat.com/posts/2dbd58d6.html %}
|
||||
Reference in New Issue
Block a user