【butterfly】导航栏魔改

📚 文档目录

01-添加自定义css和js文件02-footer栏03-友链卡片样式04-站点图片批量半自动截图05-分类磁贴插件版06-添加侧边栏电子钟07-侧边栏归档、分类修改08-标签云增加文章数上下标09-顶部加载渐变条10-导航栏魔改11.1-返回顶部按钮显示网页阅读进度11.2-添加白天夜间模式转换动画11.3-增加分享本页11.4-直达底部12-添加51统计13-404页面展示最近文章14-分类标签归档页增加文章索引15-新标签打开文章16-使用Algolia搜索17-文章双栏布局插件18-动态分类标签导航栏19-增加评论热评轮播功能20-链接卡片标签外挂21-新年倒计时卡片22-文章统计图页面23-隐藏部分文章不在首页显示

看到Heo大佬的导航栏很喜欢，正好Heo大佬还出了教程，可是按照步骤操作了并没有实现，于是开始F12复刻，有了以下成果记录下来；

修改主题配置文件

在[you_blog]\_config.butterfly.yml文件中添加以下内容：

# 开往
travellings:
  enable: true
  title: 开往-友链接力
  link: https://www.travellings.cn/go.html

# 十年之约
foreverblog:
  enable: true
  title: 虫洞-穿梭十年之约
  link: https://foreverblog.cn/go.html

修改nav.pug

修改文件[you_blog]\themes\butterfly\layout\includes\header\nav.pug

nav#nav
+  .nav-group
    span#blog_name
+      a#site-name(href=url_for('/'))
+        span#site-name-icon=config.name
  #menus
    !=partial('includes/header/menu_item', {}, {cache: true})
+    span#page_name
+      a#page-title(title=_p("rightside.back_to_top") onclick="btf.scrollToDest(0, 500)")
+        span #[=config.title]
+  #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
          span=' '+_p('search.title')
+    a.site-page.icon-V.hidden(onclick='switchNightMode()', title='浅色和深色模式转换', data-pjax-state)
+      i.fas.fa-moon.fa-fw
+    if (theme.travellings.enable)
+      a.site-page#travellings(target='_blank', title=theme.travellings.title, href=theme.travellings.link)
+        i.fas.fa-subway
+    if (theme.foreverblog.enable)
+      a.site-page#foreverblog(target='_blank', title=theme.foreverblog.title, href=theme.foreverblog.link)
+        svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', x='0px', y='0px', width='200', height='200', viewBox='0 0 200 200')
+          path(d='M100,12.52A87.49,87.49,0,1,0,187.5,100,87.49,87.49,0,0,0,100,12.52ZM128.54,150H84.11a6,6,0,0,1-6-6v-8.55a6,6,0,0,1,6-6H125.9a11.32,11.32,0,0,0,0-22.62v0H84.61a6.5,6.5,0,0,1-6.5-6.49V92.77a6.5,6.5,0,0,1,6.5-6.49h41.9a10.27,10.27,0,0,0,0-20.54H75.21A12.71,12.71,0,0,0,62.5,78.45v64.82A6.74,6.74,0,0,1,55.77,150h-3.6a6.73,6.73,0,0,1-6.73-6.73V73.42A28.21,28.21,0,0,1,73.65,45.2h53a29.74,29.74,0,0,1,19.3,51.72,31.18,31.18,0,0,1,9.71,22.91C155.62,136.24,143.56,149.58,128.54,150Z')
  #toggle-menu
    a.site-page
      i.fas.fa-bars.fa-fw

自定义CSS样式

在source\css文件夹下新建custom.scss文件并加入以下代码：

也可以编译成css加入到自定义的css文件中。

#page-header {
  #nav {
    // 固定在顶端
    &.show {
      position: fixed;
      top: 0;
    }
    filter: none;
    padding: 0 5%;
    /* 左侧文字 */
    /* ================================= */
    .nav-group {
      flex:1;
      display: flex;
      justify-content: flex-start;
      #blog_name {
        position: relative;
        display: inline-block;
        font-size: 1.5em;
        a#site-name {
          &:hover {
            border-radius: 15px;
            transition: 0.1s;
            color: var(--white) !important;
            background: var(--blue) !important;
            &>a {
              color: var(--white) !important;
            }
            span#site-name-icon {
              opacity: 0;
            }
            &:after {
              opacity: 1;
            }
          }
          span#site-name-icon {
            transition: .2s;
            opacity: 1;
            padding: 5px 0;
          }
          &:after {
            background: url(/img/home.png) no-repeat 50% 50%;
            opacity: 0;
            position: absolute;
            display: flex;
            top: 0;
            width: 132px;
            height: 100%;
            z-index: 1;
            content: "";
            transition: .2s;
            transition-timing-function: ease-in;
          }
        }
      }
    }
    
    /* 中间菜单 */
    /* ================================= */
    #menus {
      #page_name {
        position: absolute;
        justify-content: center;
        align-items: center;
        transform: translateY(-60px);
        &>a {
          font-weight: bold;
          letter-spacing: 2px;
          padding: 5px 10px;
          &:hover {
            color: var(--white) !important;
            background: var(--blue) !important;
            border-radius: var(--fillet);
          }
        }
        
      }
      flex:3;
      display: flex;
      justify-content: center;
      /* 垂直居中 */
      .menus_items {
        display: flex;
        align-items: center;
        .menus_item {
          padding: 0 5px;
          &>a.site-page {
            display: flex;
            align-items: center;
            height: 2.5em;
            padding: 0 5px;
            span {
              margin-left: 4px;
            }
          }
          /* 鼠标移上去效果 */
          &:hover {
            border-radius: 15px;
            transition: 0.1s;
            color: var(--white) !important;
            background: var(--blue) !important;
            // border: 1px solid var(--white);
            &>a {
              color: var(--white) !important;
            }
          }
          /* 下拉菜单 */
          /* ==================== */
          /* 下拉菜单鼠标移上去效果 */
          ul.menus_item_child {
            padding: 8px 12px;
            border-radius: 15px;
            border: 1px solid var(--blue);
            li {
              display: flex;
              border-radius: 15px;
              &:hover {
                  background: var(--blue) !important;
                  a.site-page.child {
                    color: var(--white) !important;
                  }
                }
              a.site-page.child {
                padding: 1px 10px;
                align-items: center;
              }
            }
          }
        }
      }
    }
    /* 右侧按钮 */
    /* ================================= */
    #nav-right {
      flex:1;
      display: flex;
      justify-content: flex-end;
      a.site-page {
        height: 2.5em;
        width: 2.5em;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 40px;
        position: relative;
        cursor: pointer;
        i {
          font-size: 1.3rem;
        }
        svg {
          height: 27px;
        }
        &:hover {
          background: var(--blue) !important;
          svg path {
            fill: var(--white) !important;
          }
          i {
            color: var(--white) !important;
          }
        }
      }
    }
    /* 取消下划线 */
    .site-page:not(.child):after {
      display: none;
    }
  }
  // 颜色
  &.full_page,
  &.not-home-page,
  &.post-bg {
    #nav #nav-right a.site-page svg path {
      fill: #eee;
    }
    &.nav-fixed {
      #nav #nav-right a.site-page svg path {
        fill: #4b4948;
      }
    }
  }
  &.not-home-page {
    &.nav-fixed #nav #nav-right a.site-page svg path {
      fill: #4b4948;
    }
  }
  &.not-top-img {
    #nav #nav-right a.site-page svg path {
      fill: #4c4948;
    }
    &.nav-fixed #nav #nav-right a.site-page svg path {
      fill: #4b4948;
    }
  }
  // 滑动标题显示于隐藏
  &.full_page,
  &.not-home-page,
  &.post-bg,
  &.not-home-page,
  &.not-top-img {
    &.nav-fixed {
      #page_name {
        transform: translateY(0px) !important;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
      }
      .menus_items {
        transform: translateY(-60px) !important;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
      }
      &.nav-visible {
        #page_name {
          transform: translateY(-60px) !important;
          transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }
        .menus_items {
          transform: translateY(0px) !important;
          transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }
      }
      #nav.show {
        background-color: var(--global-bg);
      }
    }
    #page_name {
      cursor: pointer;
    }
  }
  // 取消滚动动画
  &.nav-visible #nav {
    transform: none;
  }
}
[data-theme='dark'] #page-header {
  &.full_page,
  &.not-home-page,
  &.not-top-img,
  &.post-bg {
    #nav #nav-right a.site-page svg path {
      fill: rgba(255,255,255,0.7);
    }
    &.nav-fixed #nav #nav-right a.site-page svg path {
      fill: rgba(255,255,255,0.7);
    }
  }
}

适配移动端CSS样式

在source\css文件夹下新建mobile.scss文件并加入以下代码：

也可以编译成css加入到自定义的css文件中。

@media screen and (max-width: 768px) {
  #nav #menus {
    display: none !important;
  }
  #nav .nav-group #blog_name {
    font-size: 1.2em !important;
  }
  #sidebar-menus .menus_items .menus_item .site-page > i {
    text-align: center !important;
  }
  #content-inner #recent-posts .recent-post-item {
    height: 20em !important;
  }
  .article-sort .article-sort-item .article-sort-item-info .article-sort-item-index {
    display: none;
  }
  #aside-content {
    display: none !important;
  }
  #page-header #site-info #site-title {
    font-size: 1.5em;
    letter-spacing: 2px !important;
  }
  #page-header #site-info #site-subtitle {
    font-size: 1em;
  }
  #page-header #page-site-info #site-title {
    font-size: 2em;
    letter-spacing: 2px !important;
  }
  #footer #footer-wrap {
    padding: 10px 0;
  }
}

自定义js

在自定义js文件中添加如下代码：

// 页面标题start
window.onscroll = page_title;
function page_title() {
    document.getElementById('page-title').style.display = window.location.pathname === '/' || /^\/page\/[0-9]+\//.test(window.location.pathname)
    document.querySelector('#page-title>span').innerHTML = GLOBAL_CONFIG_SITE.title
}
// 页面标题end

修改main.js

修改文件[you_blog]\Blog\Hexo_butterfly\themes\butterfly\source\js\main.js

/**
  * 滾動處理
  */
const scrollFn = function () {
  const $rightside = document.getElementById('rightside')
  const innerHeight = window.innerHeight + 56

  // 當滾動條小于 56 的時候
  if (document.body.scrollHeight <= innerHeight) {
    $rightside.style.cssText = 'opacity: 1; transform: translateX(-58px)'
    return
  }

  // find the scroll direction
  function scrollDirection (currentTop) {
    const result = currentTop > initTop // true is down & false is up
    initTop = currentTop
    return result
  }

  let initTop = 0
-  let isChatShow = true
  const $header = document.getElementById('page-header')
-  const isChatBtnHide = typeof chatBtnHide === 'function'
-  const isChatBtnShow = typeof chatBtnShow === 'function'
-
  const scrollTask = btf.throttle(() => {
      const currentTop = window.scrollY || document.documentElement.scrollTop
      const isDown = scrollDirection(currentTop)
      if (currentTop > 56) {
        if (isDown) {
          if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-          if (isChatBtnShow && isChatShow === true) {
-            chatBtnHide()
-            isChatShow = false
-          }
        } else {
          if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-          if (isChatBtnHide && isChatShow === false) {
-            chatBtnShow()
-            isChatShow = true
-          }
        }
        $header.classList.add('nav-fixed')
        if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
          $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
        }
      } else {
        if (currentTop === 0) {
          $header.classList.remove('nav-fixed', 'nav-visible')
        }
        $rightside.style.cssText = "opacity: ''; transform: ''"
      }

      if (document.body.scrollHeight <= innerHeight) {
        $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
      }
    }, 200)
  
  window.scrollCollect = scrollTask

  window.addEventListener('scroll', scrollCollect)
}

11.1-返回顶部按钮显示网页阅读进度 09-顶部加载渐变条