update

source/_posts/custom-navbar.md

@@ -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 %}

themes/butterfly/source/css/style.css

@@ -449,6 +449,13 @@
 }
 
 /* PC菜单栏美化 */
+@supports not (selector(::-webkit-scrollbar)) {
+    html {
+        scrollbar-width: auto;
+        scrollbar-color: #bbb #bbb;
+    }
+}
+
 #sidebar #sidebar-menus .menus_items .menus_item_child {
     display: -webkit-box;
     display: -moz-box;
@@ -580,4 +587,90 @@
 }
 /* 侧边栏的统计栏美化 */
   
-/* PE端菜单栏美化 */
+/* ===========================================
+   极简版权卡片 – 参考图片重制
+   亮色 / 暗色 自动切换
+   =========================================== */
+
+:root {
+  /* 亮色变量 */
+  --card-bg: #ffffff;
+  --card-border: #e5e7eb;
+  --text-primary: #111827;
+  --text-secondary: #6b7280;
+  --link-color: #2563eb;
+  --link-hover: #3b82f6;
+}
+
+[data-theme=dark]{
+  :root {
+    /* 暗色变量 */
+    --card-bg: #111827;
+    --card-border: #374151;
+    --text-primary: #f9fafb;
+    --text-secondary: #9ca3af;
+    --link-color: #60a5fa;
+    --link-hover: #93c5fd;
+  }
+}
+
+/* 强制暗色模式（加 .dark 到 <html> 或 <body>） */
+.dark {
+  --card-bg: #111827;
+  --card-border: #374151;
+  --text-primary: #f9fafb;
+  --text-secondary: #9ca3af;
+  --link-color: #60a5fa;
+  --link-hover: #93c5fd;
+}
+
+/* 版权卡片整体 */
+.post-copyright {
+  margin: 2rem 0;
+  padding: 1.5rem 1.75rem;
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: 8px;
+  font-size: 0.925rem;
+  line-height: 1.6;
+  color: var(--text-primary);
+}
+
+/* 标题（文章名） */
+.post-copyright__title {
+  font-weight: 700;
+  font-size: 1.125rem;
+  margin-bottom: 0.75rem;
+  color: var(--text-primary);
+}
+
+/* 链接 */
+.post-copyright__link {
+  color: var(--link-color);
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.post-copyright__link:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+/* 元数据行 */
+.post-copyright__meta {
+  margin-top: 0.5rem;
+  color: var(--text-secondary);
+}
+
+.post-copyright__meta strong {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+/* 移动端适配 */
+@media (max-width: 600px) {
+  .post-copyright {
+    padding: 1.25rem;
+    font-size: 0.875rem;
+  }
+}