点击查看更新记录

更新记录

2022-04-15:内测版v0.03

  1. 应洪哥意见，移除时间栏冗余交互。
  2. 移除悬停显示描述功能。拟将来装载在文章内banner处。
  3. 移除了点击跳转回首页。请直接通过顶栏的博客主页按钮返回首页。
  4. 调整了时间翻转效果。由纵向轴换为横向轴。
  5. 调整了整体布局配色。采用了SAO-UI风格配色
  6. 新增了手机端侧栏（可开关）。
  7. 新增了滑动监测，实现自动隐藏。
  8. 简化魔改内容，前置教程缩小范围至iconfont inject。

2022-04-14:内测版v0.02

  1. 采用iconfont图标，整合微调合集内三个魔改方案
  2. 时间栏翻转显示副标题，悬停显示描述
  3. 将悬停描述样式改为SAO-notify
  4. 适配夜间模式配色
  5. 笨蛋贰猹，首页卡片都没扒走，天天在配色上计较。

2022-04-13:内测版v0.01

  1. 重写顶栏菜单UI布局demo
  2. 编写新版样式，初步完成交互逻辑
  3. 调整配色
  4. 修复与原顶栏菜单的样式冲突
  5. 新增和风天气插件
  6. 新增顶栏中央时间
  7. 新增新版顶栏菜单横向滚动监测
  8. 拟采用iconfont图标
点击查看参考教程
参考方向教程原贴
Flex布局参数解释Flex 布局教程:语法篇 - 阮一峰的网络日志
Transition属性实现平滑过渡动画CSS3实现伪类hover离开时平滑过渡效果示例
使用clip-path实现多边形剪裁。不可思议的CSS之clip-path
本站的iconfont引入教程iconfont inject
本站之前针对顶栏菜单做的部分魔改微调糖果屋微调合集
复用洪哥的鼠标滚轮控制横向滚动代码Butterfly魔改：动态分类条，可以根据页面变化而改变的分类列表展示方式
天气插件的申请平台和风天气创建简约版天气插件

写在最前

点击查看店长的碎碎念

顶栏算是目前首页唯二还能看出来是Butterfly的版块了，另一个是侧栏按钮。因为之前的SAO-controller没有达到预期。

原本这篇文章我是打算放到SAO-UI-PLAN里的，但是从写完以后的效果来看，没有特别明显的刀剑神域的风格，想想还是算了吧。

这回的设计灵感来源于手机端的状态栏，我想着把菜单栏选项隐藏，通过下拉拖动之类的操作来处理交互逻辑，在效果上应该会很惊艳。但是考虑到之前写controldot时的经验，拖动的逻辑处理很容易在电脑端出bug，所以在设计之初就放弃了。改用悬停或者点击逻辑（最后发现悬停逻辑交互过于频繁，误触概率也很高，所以采用了点击交互逻辑）

这次的顶栏因为涉及到了#nav的修改，而main.js中，关于原生顶栏的自适应部分是有相关代码的，所以弃用#nav会导致main.js中的部分代码报错。为了保证正常运行，需要手动删除这部分的代码。我不是没想过就像以往一样只修改css样式，但是那样的工作量还不如直接重写。而且凭啥只准jerry对布局id和class动刀子？

所以这次的魔改将是目前最劝退的教程。我开始对main.js动刀了，以后要想升级到butterfly最新版对新手就更难了。

另外，因为以前在微调合集里就已经改动过顶栏标题和菜单栏图标，所以这次我也保持着勤俭节约的优良传统，硬是把它们弄进来了。

前置教程

在使用本教程之前，请务必确保您已经完成了前置教程，并且充分理解教程中提到的概念，这将有助于您在接下来的魔改过程中，能够自主更改那些本站特化的内容。对于那些追更糖果屋魔改比较积极的同学来说，这篇看起来应该就不会太吃力。

前置教程需要掌握的内容

糖果屋微调合集

/posts/23fdf850/

通过这篇文章，要求读者起码掌握文章副标题显示方案和iconfont的symbol的引入方案，且已经配置了自己的图标库。在微调合集中，请选择动态图标的配置方案。本帖不会再提供静态方案的代码写法。糖果屋微调合集中，对配置文件中menu配置项进行了重写。所以若您没有完成相关改动，将遇到报错。

添加白天夜间模式转换动画

/posts/d9550c81/

此篇为夜间模式切换动画和夜间模式按钮的依赖教程。可以不做，但是相对的，顶栏的夜间模式按钮就没有月亮太阳的变换了，当然，没有这种效果的代码我也是不会提供的。

custom beautify

/posts/ebf20e02/

此篇非必要教程，但是对于您调整代码内涉及到的部分本站特化内容会有一定帮助，建议了解了解。

基于Butterfly的pjax适配方案

/posts/3b78b69a/

此篇非必要教程，但是对于您自主修改本帖讨论的天气插件的植入会有一定帮助，建议了解了解。

Hexo异步加载

/posts/615d5ede/

此篇非必要教程，但是对于您自主修改本帖讨论的天气插件的植入会有一定帮助，建议了解了解。

魔改步骤

  1. 请务必确保您已经充分理解了上文提到的前置教程中的内容。
  2. 重写[Blogroot]\themes\butterfly\layout\includes\header\nav.pug，为避免被原生菜单栏的样式影响，class和id都换为了全新的。倒数几行的搜索图标#icon-search-01和手机端展开图标#icon-multi-window-01是用的我自己的图标库，记得换成你的图标。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    #menu-container.menu-container
      .menu-item
        each value, label in theme.menu
          if typeof value !== 'object'
            .menu-item-main
              a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])))
                if value.split('||')[1]
                  - var icon_value = trim(value.split('||')[1])
                  - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
                  if icon_value.substring(0,2)=="fa"      
                    i.fa-fw(class=icon_value + ' ' + anima_value)
                  else if icon_value.substring(0,4)=="icon"          
                    svg.icon(aria-hidden="true" class=anima_value)
                      use(xlink:href=`#`+ icon_value)
                span=' '+label
          else
            .menu-item-main.has-child
              .menu-item-parent
                a.site-page.faa-parent.animated-hover(href='javascript:void(0);')
                  if label.split('||')[1]
                    - var icon_label = trim(label.split('||')[1])
                    - var anima_label = label.split('||')[2] ? trim(label.split('||')[2]) : 'faa-tada'
                    if icon_label.substring(0,2)=="fa"      
                      i.fa-fw(class=icon_label + ' ' + anima_label)
                    else if icon_label.substring(0,4)=="icon"    
                      svg.icon(aria-hidden="true" class=anima_label)
                        use(xlink:href=`#`+ icon_label)
                  span=' '+ trim(label.split('||')[0])
              each val,lab in value
                .menu-item-child
                  a.faa-parent.animated-hover.site-page.child(href=url_for(trim(val.split('||')[0])))
                    if val.split('||')[1]
                      - var icon_val = trim(val.split('||')[1])
                      - var anima_val = val.split('||')[2] ? trim(val.split('||')[2]) : 'faa-tada'
                      if icon_val.substring(0,2)=="fa"      
                        i.fa-fw(class=icon_val + ' ' + anima_val)
                      else if icon_val.substring(0,4)=="icon"
                        svg.icon(aria-hidden="true" class=anima_val)
                          use(xlink:href=`#`+ icon_val)
                    span=' '+ lab
      .top-bar
        .message-container
          .message-item.message-weather(onclick='btf.scrollToDest(0, 500)')
            #he-plugin-simple.message-weather-box
          .message-item.message-date(onclick='Navvisible()')
            #message-date-box.message-date-box
            - var pagedescr = page.description ? page.description : '欢迎光临糖果屋，愿你有愉快的一天'
            - var subtitle = page.subtitle ? page.subtitle : page.title
            if is_post()
              #message-title-box.message-title-box
                a#site-name(title=pagedescr) #[=subtitle]  
            else if is_page()
              #message-title-box.message-title-box
                a#site-name(title=pagedescr) #[=subtitle]
            else
              #message-title-box.message-title-box
                a#site-name(title=pagedescr) #[=config.title]
          .message-item.message-function
            if (theme.algolia_search.enable || theme.local_search.enable)
              #search-button
                a.site-page.social-icon.search.faa-parent.animated-hover
                  svg.faa-tada.icon(style="height:25px;width:25px" aria-hidden="true")
                    use(xlink:href='#icon-search-01')
                  span=' '+_p('search.title')
            a.icon-V.hidden.faa-parent.animated-hover(onclick='switchNightMode()',  title=_p('rightside.night_mode_title'))
              svg.faa-tada(width='25', height='25', viewBox='0 0 1024 1024')
                use#modeicon(xlink:href='#icon-moon')
            #toggle-menu
              a.site-page.faa-parent.animated-hover
                svg.faa-tada.icon(style="height:25px;width:25px" aria-hidden="true")
                  use(xlink:href='#icon-multi-window-01')
      button.active-button(onclick='Navvisible()')
  3. 新建[Blogroot]\themes\butterfly\source\css\_layout\nav.styl,原生的顶栏内容耦合在head.styl文件里，styl一层套一层的剥离起来太麻烦，担心误删样式，所以干脆新建一个了。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    //default color:
    :root
      --nav-bar-background-color: rgba(249, 249, 249, 0.79)
      --nav-font-color: #494748
      --nav-font-hover-color: #494748
      --nav-button-color: transparent
      --nav-active-button-color: rgba(40, 185, 230, 0.65)
      --nav-menu-background-color: rgba(160,160,160,0.7)
      --nav-menu-item-background-color: rgba(249, 249, 249,0.8)
      --nav-menu-item-font-color: #494748
      --nav-menu-item-hover-background-color: #eda60c
      --nav-menu-item-hover-font-color: #f9f9f9
    [data-theme="dark"]
      --nav-bar-background-color: rgba(66,66,66,0.8)
      --nav-font-color: #f9f9f9
      --nav-font-hover-color: #f9f9f9
      --nav-button-color: rgba(20, 97, 227, 0.65)
      --nav-active-button-color: rgba(249, 246, 14, 0.71)
      --nav-menu-background-color: rgb(66,66,66)
      --nav-menu-item-background-color: rgba(77, 72, 73,0.8)
      --nav-menu-item-font-color: #f9f9f9
      --nav-menu-item-hover-background-color: #cdd0ce
      --nav-menu-item-hover-font-color: #4d4849
    .nav-fixed
      #menu-container
        top: -110px
        transition: all 0.5s
      &.nav-visible
        #menu-container
          top: -60px
          transition: all 0.5s
    .menu-container
      background: transparent
      position: fixed
      z-index: 90
      top: -60px
      left: 0
      height: auto
      width: 100vw
      transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
      &.active-menu-bar
        top 0px !important
        transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
        button.active-button
          background var(--nav-active-button-color) !important
      .menu-item
        background: var(--nav-menu-background-color)
        height: 60px
        width 100%
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        text-align: center;
        font-size: 16px
        &::-webkit-scrollbar
          display: none
        .menu-item-main
          font-size: 16px !important;
          display: inline-flex;
          color: var(--nav-menu-item-font-color)
          background: var(--nav-menu-item-background-color)
          width: auto
          min-width: 100px;
          height: 50px;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          margin: 5px 5px;
          clip-path: polygon(3px 0, calc(50% - 5px) 0,50% 0px,calc(50% + 5px) 0 ,calc(100% - 3px) 0, 100% 3px,100% calc(50% - 5px), 100% 50%,100% calc(50% + 5px), 100% calc(100% - 3px), calc(100% - 3px) 100%,calc(50% + 5px) 100%,50% 100%,calc(50% - 5px) 100%,3px 100%, 0 calc(100% - 3px), 0 calc(50% + 5px), 0px 50%,0 calc(50% - 5px),0 3px);
          transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
          a
            color: var(--nav-menu-item-font-color)
          &:hover
            color: var(--nav-menu-item-hover-font-color)
            background: var(--nav-menu-item-hover-background-color)
            clip-path: polygon(3px 0, calc(50% - 5px) 0,50% 8px,calc(50% + 5px) 0 ,calc(100% - 3px) 0, 100% 3px,100% calc(50% - 5px), calc(100% - 8px) 50%,100% calc(50% + 5px), 100% calc(100% - 3px), calc(100% - 3px) 100%,calc(50% + 5px) 100%,50% calc(100% - 8px),calc(50% - 5px) 100%,3px 100%, 0 calc(100% - 3px), 0 calc(50% + 5px), 8px 50%,0 calc(50% - 5px),0 3px);
            transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
            a
              color: var(--nav-menu-item-hover-font-color)
            .menu-item-parent
              width: 0
              opacity 0
              color: var(--nav-menu-item-hover-font-color)
              background: var(--nav-menu-item-hover-background-color)
              pointer-events: none;
              transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
            .menu-item-child
              color: var(--nav-menu-item-font-color)
              background: var(--nav-menu-item-background-color)
              width: 100px;
              opacity 1
              pointer-events: inherit;
              transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
          &.has-child
            &:hover
              background: var(--nav-menu-item-background-color) !important
          .menu-item-parent
            color: var(--nav-menu-item-font-color)
            background: var(--nav-menu-item-background-color)
            opacity: 1
            pointer-events: inherit
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width 100px
            height: 50px;
            transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
            a
              color: var(--nav-menu-item-font-color)
          .menu-item-child
            color: var(--nav-menu-item-font-color)
            background: var(--nav-menu-item-background-color)
            opacity: 0
            pointer-events: none
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width 0
            height: 50px;
            transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
            a
              color: var(--nav-menu-item-font-color)
            &:hover
              color: var(--nav-menu-item-font-color)
              background: var(--nav-menu-item-hover-background-color)
              a
                color: var(--nav-menu-item-hover-font-color)



      .top-bar
        background: var(--nav-bar-background-color);
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        border-radius 0 0 10px 10px
        .message-container
          display: flex;
          flex-wrap: nowrap;
          height: 50px;
          width: 100%;
          align-items: center;
          flex-direction: row;
          .message-item
            display: inline-flex
            justify-content: center
            height: 50px
            align-items: center;
          .message-weather
            width 25%
            .s-sticker-tmp.module
              color: var(--nav-font-color) !important;
              font-family: 'ZhuZiAYuanJWD' !important;
            .s-sticker-city.module
              color: var(--nav-font-color) !important;
              font-family: 'ZhuZiAYuanJWD' !important;
          .message-date
            width 50%
            .message-date-box
              display: flex;
              align-items: center;
              justify-content: center;
              width 50%
              height: 50px
              position absolute
              background transparent
              transform rotateX(0deg)
              transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17);
              opacity 1
              font-family: 'UnidreamLED','ZhuZiAYuanJWD';
              font-size: 20px;
            .message-title-box
              display: flex;
              align-items: center;
              justify-content: center;
              width 50%
              height: 50px
              position absolute
              background transparent
              transform rotateX(-180deg)
              transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17);
              opacity 0
              font-family: 'ZhuZiAYuanJWD';
              font-size: 20px;
              a
                color: var(--nav-font-color)
                &:hover
                  color: var(--nav-font-hover-color)
            &:hover
              .message-date-box
                transform rotateX(180deg)
                opacity 0
                transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17);
              .message-title-box
                transform rotateX(0deg)
                opacity 1
                transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17);
          .message-function
            justify-content: center;
            width 25%
            a
              display: flex;
              align-items: center;
            #toggle-menu
              display none
      button.active-button
        background: var(--nav-button-color);
        width: 70px;
        height: 10px;
        border-radius: 1px;
        margin: 0px auto;
        border-bottom: 3px solid var(--nav-bar-background-color);
        border-top: 3px solid var(--nav-bar-background-color);
        border-left: 10px solid var(--nav-bar-background-color);
        border-right: 10px solid var(--nav-bar-background-color);
        transform: perspective(0.5em) rotateX(-5deg);
        left: calc(50% - 35px);
        position: absolute;
        &:hover
          background var(--nav-active-button-color) !important
    @media screen and (max-width: 768px)
      .menu-container
        .top-bar
          .message-container
            .message-weather
              .s-sticker-tmp.module
                display none !important
              .s-sticker-city.module
                display none !important;
    if hexo-config('mobile_menu')
      @media screen and (max-width: 768px)
        .menu-container
          .top-bar
            .message-container
              .message-function
                #toggle-menu
                  display block !important
  4. 移除main.js中关于原生顶栏的内容。注意本帖是基于butterfly_v4.1.0进行的改动，低版本的内容不做考虑，请自行判断与原生顶栏有关的内容进行删除。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
      。
      。
      。    
      let blogNameWidth, menusWidth, searchWidth, $nav
      let mobileSidebarOpen = false

    - const adjustMenu = (init) => {
    -   if (init) {
    -     blogNameWidth = document.getElementById('site-name').offsetWidth
    -     const $menusEle = document.querySelectorAll('#menus .menus_item')
    -     menusWidth = 0
    -     $menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
    -     const $searchEle = document.querySelector('#search-button')
    -     searchWidth = $searchEle ? $searchEle.offsetWidth : 0
    -     $nav = document.getElementById('nav')
    -   }
    -
    -   let hideMenuIndex = ''
    -   if (window.innerWidth < 768) hideMenuIndex = true
    -   else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
    -
    -   if (hideMenuIndex) {
    -     $nav.classList.add('hide-menu')
    -   } else {
    -     $nav.classList.remove('hide-menu')
    -   }
    - }
    -
    - // 初始化header
    - const initAdjust = () => {
    -   adjustMenu(true)
    -   $nav.classList.add('show')
    - }

      // sidebar menus
      const sidebarFn = {
        open: () => {

      。
      。
      。

      const unRefreshFn = function () {
        window.addEventListener('resize', () => {
    -     adjustMenu(false)
          btf.isHidden(document.getElementById('toggle-menu')) && mobileSidebarOpen && sidebarFn.close()
        })

      。
      。
      。

      window.refreshFn = function () {
    -   initAdjust()

        if (GLOBAL_CONFIG_SITE.isPost) {
          GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
          GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
  5. 新建[Blogroot]\themes\butterfly\source\js\custom\nav.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    //鼠标控制横向滚动
    if (document.getElementsByClassName("menu-item")[0]){
      var xscroll = document.getElementsByClassName("menu-item")[0];
      xscroll.addEventListener("mousewheel", function (e) {
      //计算鼠标滚轮滚动的距离
      var v = -e.wheelDelta / 2;
      xscroll.scrollLeft += v;
      //阻止浏览器默认方法
      e.preventDefault();
      }, false);
    }

    // 获取当前时间

    var box = document.getElementById('message-date-box')

    //不足十位补零
    var addZero = val => val < 10 ? '0' + val : val
    //把阿拉伯数字的星期转化为中国汉字的星期 // 星期映射表
    var trans = val => {
        var obj = {
            0: '日',
            1: '一',
            2: '二',
            3: '三',
            4: '四',
            5: '五',
            6: '六'
        }
        return obj[val]
    }
    setTime ()
    //获取时间的方法
    function setTime() {
        var time = new Date();
        // var year = time.getFullYear(); // 获取年
        // var month = time.getMonth() + 1; // 获取月（是从0到11，所以我们要给他加1）
        // var date = time.getDate(); // 获取日
        var hour = time.getHours(); // 获取小时
        var min = time.getMinutes(); // 获取分钟
        var sec = time.getSeconds(); // 获取秒
        var day = time.getDay(); // 获取星期几(0是星期日)


        var value = addZero(hour) +
            ':' + addZero(min) + ":" + addZero(sec) + ' 星期'+ trans(day)
        // 把所有的时间拼接到一起
        box.innerText = value
        // console.log(value)
        // 把拼接好的时间插入到页面

    }
    // 让定时器每间隔一秒就执行一次setTime这个方法（这是实现时钟的核心）
    setInterval(setTime, 1000)


    function Navvisible(){
      var navbar = document.getElementById('menu-container')
      if (navbar) {
          // 首先判断是否存在active类
          if (navbar.className.indexOf('active-menu-bar') > -1){
            // 存在则移除
            navbar.classList.remove('active-menu-bar');
          }
          else{
            // 不存在则先添加
            navbar.classList.add('active-menu-bar');
          }
      }
    }
  6. 本帖还用到了一个天气插件，使用的是和风天气提供的免费插件。请按照网页引导自主完成账号注册，并创建插件。插件完全免费，并且没有流量限制。

    和风天气创建简约插件

    https://widget.qweather.com/create-simple/

    插件名称随意，内容选择温度，城市名称，天气实况。（剩下两个可以选，但是窄屏效果不理想。和风天气自带悬停显示详细面板，不用过于追求全部内容），温度文字颜色选择#000000，城市名文字颜色选择#000000，图标尺寸默认即可，空气质量文字颜色默认即可，背景颜色选择透明。剩余内容全部默认。

    点击生成代码后会看到如下内容，记下WIDGET中最后一行的key，这是你应用的密钥。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <div id="he-plugin-simple"></div>
    <script>
    WIDGET = {
      "CONFIG": {
        "modules": "012",
        "background": "5",
        "tmpColor": "000000",
        "tmpSize": "16",
        "cityColor": "000000",
        "citySize": "16",
        "aqiColor": "FFFFFF",
        "aqiSize": "16",
        "weatherIconSize": "24",
        "alertIconSize": "18",
        "padding": "10px 10px 10px 10px",
        "shadow": "0",
        "language": "auto",
        "fixed": "false",
        "vertical": "top",
        "horizontal": "left",
        "key": "3dc0b38fcf984869865c340d2fd33c68"
      }
    }
    </script>
    <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
  7. 在[Blogroot]\_config.butterfly.yml的inject配置项中引入以下内容,记得将key替换为你自己申请的。
    1
    2
    3
    4
    5
    6
    7
    inject:
      head:
        - <link rel="stylesheet" href="https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0" media="defer" onload="this.media='all'">
      bottom:
        - <script async data-pjax src="/js/custom/nav.js"></script>
        - <script>WIDGET = {"CONFIG":{"modules":"012","background":"5","tmpColor":"FFFFFF","tmpSize":"16","cityColor":"FFFFFF","citySize":"16","aqiColor":"FFFFFF","aqiSize":"16","weatherIconSize":"24","alertIconSize":"18","padding":"10px 10px 10px 10px","shadow":"0","language":"auto","fixed":"false","vertical":"top","horizontal":"left","key":"3da94e567f5e4e88baf90f066f0893c2"}}</script> #记得将key替换为你自己申请的。
        - <script defer data-pjax src="https://widget.heweather.net/simple/static/js/he-simple.js?v=1.4.0"></script>
  8. 在[Blogroot]\_config.butterfly.yml中新增配置项mobile_menu以控制手机端是否需要启用侧栏展开的菜单，事实上本帖设计的方案自适应良好，可以满足手机端的使用。所以我更建议关闭他。请不了解main.js的内容的读者不要盲目删除sidebar.pug相关的内容，main.js中依然有部分代码涉及#toggle-menu版块的监测，盲目删除sidebar.pug会导致新的bug。（当然我自己会剥离所以没关系，我就要删）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
      # 完成糖果屋微调合集内容后的菜单示例
      menu:
        博客: / || icon-computer-01 || faa-tada
        时间轴: /archives/ || icon-calendar-01 || faa-tada
        标签: /tags/ || icon-multi-window-01 || faa-tada
        # 分类: /categories/ || fas fa-folder-open || faa-tada
        朋友圈: /fcircle/ || icon-webpage-01 || faa-tada
        友人帐: /link/ || icon-positioning-01 || faa-tada
        留言板: /comments/ || icon-message-01 || faa-tada
        生活|| icon-hourglass-01 || faa-tada:
          相册: /gallery/ || icon-photograph-01 || faa-tada
          追番: /bangumis/ || icon-television-01 || faa-tada
          关于: /about/ || icon-identity-01 || faa-tada
        随便看看: /random/ || icon-coffee-01 || faa-tada

    + mobile_menu: false

  9. 再次确认你已经完成了本帖上文提到的前置教程，若因前置教程未完成或未理解导致的问题，本店概不负责。建议将问题归纳后在评论区提问，方便店长完善教程中的注意事项。