324 lines
8.0 KiB
Markdown
324 lines
8.0 KiB
Markdown
---
|
||
title: 自定义导航栏
|
||
categories: 建站手札
|
||
series: webcustom
|
||
abbrlink: 3e61a389
|
||
tags: 网站
|
||
summary: >-
|
||
这篇文章介绍了如何在最新版的Butterfly
|
||
5.4中自定义导航栏，包括PC端和PE端的修改方法以及CSS文件的调整。主要内容包括修改header\nav.pug和menu_item.pug文件中的内容，调整head.styl和sidebar.styl中的CSS样式，以及在CSS文件中添加新的样式规则。这些修改旨在实现导航栏的个性化设置，如菜单项的显示、位置调整、背景颜色变化等，以提升网站的用户体验和视觉效果。
|
||
date: 2025-08-13 16:12:25
|
||
---
|
||
|
||
最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版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 %} |