custom navbar

_config.butterfly.yml

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

_config.yml

@@ -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/

themes/butterfly/layout/includes/header/menu_item.pug

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

themes/butterfly/layout/includes/header/nav.pug

@@ -13,14 +13,21 @@ nav#nav
           span= '  ' + _p('post.back_to_home')
 
   #menus
-    if theme.search.use
+    //- if theme.search.use
-      #search-button
+    //-   #search-button
-        span.site-page.social-icon.search
+    //-     span.site-page.social-icon.search
-          i.fas.fa-search.fa-fw
+    //-       i.fas.fa-search.fa-fw
-          span= ' ' + _p('search.title')
+    //-       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

themes/butterfly/source/css/_layout/head.styl

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

themes/butterfly/source/css/_layout/sidebar.styl

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

themes/butterfly/source/css/style.css

@@ -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端菜单栏美化 */