魔改日记本-小菜单和复制/F12提示栏

本文最后更新于：6 个月前

前言

温馨提示：本日记本只提供魔改参考，并不做通用处理，很多源码修改都需要根据自己博客做小小微调

另外在修改源码时注意做好备份处理。本帖只提供思路与方法，如果哪里炸了，请检查语法与缩进等，猹概不负责啦！

继白嫖店长、冰老师、小康、小N等大佬的魔改之后，猹终于不满于白嫖，开始想动手实操，把自己的博客调教成想要的样子，也以此来使猹学前端有实操的机会。

注：这部分前言内容会在魔改日记本的每一篇都出现；另外这是一篇日记而非教程，文风可能不是那么友好（逃

小菜单的调整

缘由

其实小菜单的魔改要从上篇日记说起。双栏变单栏，就需要把侧边栏有用的部分提取出来。对于我而言，侧边栏最有用的莫过于作者卡片和文章页的目录，至于统计也算稍稍有用（数据咱还是偶尔要康康的嘛），这个可以丢页脚。

在上篇日记中，我已经实现了侧边菜单栏集成作者卡片。但是侧栏只有移动端具备，电脑端整一个侧边菜单栏显然不合适。那么小菜单就成了丢作者卡片的好去处。而目录丢小菜单也是再合适不过了，本来butterfly主题的移动端也是这么干的。现在就差怎么设计合适了。

我前前后后想过了好多个方案，有类似于两侧加雷姆角标的（来自火喵的建议，想试试的可以直接引入<script src="https://cdn1.tianli0.top/gh/fz6m/lamu-leimu-button@1.2/dist/lamu-leimu.min.js"></script> ## 拉姆雷姆角标参考；还有类似书签一样的侧边菜单；最后写了现在这版

另外其实这篇魔改大部分是可以直接用的（只要你只限于我开的这些功能的话

基础面板布局和样式

本身卡片直接从侧边栏的源码直接扒就有，只有样式和JS函数算是对于我来讲真正麻烦的东西。毕竟是个前端大白菜，很多东西还是得一步一步来。

首先是html的原本代码。除开目录页，小功能菜单显然能在电脑端时有作者卡片、跳转最顶和展开关闭，而在文章页（这个判断hexo有内部函数可以实现）则必须有目录和评论跳转功能。最基本的几项功能就有了。因为展开和关闭写在一起再用js、css去完成动画的变化显然比分开写两个要难，所以不如写两个再去控制显隐吧。

把原先的[root]\themes\butterfly\layout\includes\rightside.pug备份，重写一份代码

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
#rightside
  #rightside-menu
    //- 作者UI卡片
    #rightside-avatar-card
      .is-center#rightside-avatar
        .avatar-img
          img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
        .author-info__name= config.author
        .author-info__description!= theme.aside.card_author.description || config.description

      .site-data
        if site.posts.length
          .data-item.is-center
            .data-item-link
              a(href=url_for(config.archive_dir) + '/')
                .headline= _p('aside.articles')
                .length-num= site.posts.length

        if site.tags.length
          .data-item.is-center
            .data-item-link
              a(href=url_for(config.tag_dir) + '/' )
                .headline= _p('aside.tags')
                .length-num= site.tags.length

        if site.categories.length
          .data-item.is-center
            .data-item-link
              a(href=url_for(config.category_dir) + '/')
                .headline= _p('aside.categories')
                .length-num= site.categories.length

      //- begin follow_me按钮
      if theme.aside.card_author.button.enable
        a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
          i(class=theme.aside.card_author.button.icon)
          span=theme.aside.card_author.button.text
      //- end

      //- begin 社交
      if(theme.social)
        .menu-info-social-icons.is-center
          !=fragment_cache('social', function(){return partial('includes/header/social')})
      //- end

    #rightside-menus.is-center
      //- 繁简体切换
        button#rightside-childmenu-translate(type="button", title=_p('rightside.translate_title'))
          i.fas.fa-cog.fa-spin
      //- 目录
      if is_post()
        button#rightside-childmenu-contents(type="button", title="目录")
          i.fas.fa-list-ul
      //- 跳转评论
      if is_post()
        button#rightside-childmenu-comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
          i.fas.fa-comments
      //- 跳转最上
      button#rightside-childmenu-go-up(type="button" title=_p("rightside.back_to_top"))
        i.fas.fa-arrow-up
      //- 菜单展开/关闭
      button#rightside-childmenu-unfold(type="button" title="展开菜单")
        i.fas.fa-angle-up
      button#rightside-childmenu-fold(type="button" title="收起菜单")
        i.fas.fa-angle-down

html的基本架构就有了

现在来考虑每一部分的css。这里就不唠嗑咋写的了，不断调试出真知喽（记得不忘黑夜模式）

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
rightside-menu
  position: absolute
  transform: translate(-13rem, -21rem)
  #rightside-avatar-card
    box-shadow: 0 0 5px #000
    background: linear-gradient(60deg, #ffd7e4 0%, #c8f1ff 100%)
    border-radius: 1rem
    padding: 0.5rem 1rem 0.5rem 1rem
    width: 12rem
    height: 19.6rem
    display: none
    //transform: translate(-20px, -20px)
    font-family: 'aqqxs', sans-serif
    #rightside-avatar
      margin-top: 0.3rem
    /* 手机侧栏菜单展开 信息、头像位置调整*/
    .site-data
      margin-top: 0.5rem
      display: table
      padding: 0 0.5rem
      width: 100%
      table-layout: fixed
      .data-item
        display: table-cell
    /* 分类等字体加粗 */
    .headline
      font-size: 0.875rem
      color: #000
    .length-num
      font-size: 0.8rem !important
      color: #000
    .author-info__name
      color: #000
    .author-info__description
      color: #000
    /* 作者名 */
    .author-info__name
      font-weight: 500
      font-size: 1.57em
    /* 手机侧栏菜单展开 follow_me按钮*/
    #card-info-btn
      display: block
      margin: 0.3rem 0 0 0
      background-color: var(--btn-bg)
      color: var(--btn-color)
      text-align: center
      line-height: 2.4
      overflow: hidden
      border-radius: 0.625rem
    /* 手机侧栏菜单展开 社交图标 */
    .menu-info-social-icons
      margin: 0.5rem 0 0 0
      .social-icon
        display: inline
        padding: 0 0.3rem 0 0.3rem

  #rightside-menus
    padding: 0.5rem 1rem 0.5rem 1rem
    width: 12rem
    transform: translateY(19.6rem)
    #rightside-childmenu-contents
    #rightside-childmenu-comment
      visibility: hidden
    #rightside-childmenu-fold
      display: none
    /* 功能按钮栏 */
    button
      box-shadow: 0 0 5px #000
      height: 2rem
      width: 2rem
      border-radius: 0.6rem
      background: var(--card-bg)
      margin: 0 0.15rem 0 0.15rem

[data-theme="dark"]
  #rightside-menu
    #rightside-avatar-card
      box-shadow: 0 0 5px #fff
      background: linear-gradient(60deg, #2c0c16 0%, #043749 100%)
      .author-info__name
      .author-info__description
      .headline
      .length-num
        color: #fff
    #rightside-menus
      button
        box-shadow: 0 0 5px #fff
        background: #000
        .fas
          color: #fff

样子基本成行啦（正常而言的显隐状态也已经写进上面的代码里了）

目录布局和样式

按照这个布局，我们其实只需要在作者卡片相同位置上覆盖一层相同块大小的目录即可。这样空间也不会显得太挤。

所以再加入新的html和css来描述目录和样式（一般而言鼠标在停留于目录某一项时，此项重点突出会更好一点，所以给他加上了hover的样式。至于追踪页面定位目录调项，这咱还不会就没做）

1
2
3
4
5
6
7
8
9
10
11
12
if is_post()
  #rightside-contents
    //- - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
    #card-toc.card-widget
      .item-headline.is-center
        i.fas.fa-stream
        span= _p('aside.card_toc')

      if (page.encrypt == true)
        .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
      else
        .toc-content!=toc(page.content, {list_number: tocNumber})
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
#rightside-contents
  position: absolute
  transform: translate(-13rem, -21rem)
  display: none
  #card-toc
    box-shadow: 0 0 5px #000
    background: linear-gradient(60deg, #ffd7e4 0%, #c8f1ff 100%)
    border-radius: 1rem
    padding: 0.5rem 1rem 0.5rem 1rem
    width: 12rem
    height: 19.6rem
    .item-headline
      font-size: 1rem
      span
        margin-left: 0.5rem
        font-family: 'aqqxs', sans-serif
    span.toc-text
      color: #000
    .toc
      width: 105%
      overflow-y: scroll
      height: 16.3rem
      margin-top: -0.3rem
      margin-left: -0.7rem
      .toc-child
        margin-left: -1rem
      &::-webkit-scrollbar
        width: 0
    .toc-link
      display: block
      padding-left: .3rem
      border-left: 3px solid transparent
      color: var(--toc-link-color)
      transition: all 0.6s ease-in-out
      margin: 0.1rem 0 0.1rem 0.1rem
      &:hover
        background: var(--btn-bg)
        border-radius: 0.4rem
        box-shadow: 0 0 0.2rem #000
        margin: 0.3rem 0 0.3rem 0.1rem
        span.toc-text
          color: #fff

[data-theme="dark"]
  #rightside-contents
    #card-toc
      background: linear-gradient(60deg, #2c0c16 0%, #043749 100%)
      span.toc-text
        color: #fff

各个按钮功能

这个对于我应该算是最难的吧，毕竟没学过js。所以就查了一下原先的js来进行仿写。（如果熟悉bf源码的会发现我有好多都是源码直接扣过来的）

这里涉及的函数应该有三项，小菜单的展开和关闭、目录的展开和关闭、还有跳转顶部。跳转顶部最好解决，可以直接抄源码。而其他块元素的显示隐藏一般有两种，一是写两套样式，然后用js给对应块套类（店长的方法，可惜我懒，咱不想写两套）；另一种是直接对块进行显隐控制。

这里咱吃了大亏，因为display: none会使元素的体积被忽略，咱为了少写个校准便宜就直接用了visibility: visible/hidden。visibility的原理是让浏览器重写样式，比如令元素不可见，层次比较多的元素不会一次性消失，而是一个个消失（这就特别怪异）

最后还是写偏移了

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
document.addEventListener('DOMContentLoaded', function () {
  const rightSideFn = {
    showBtn: () => { // 点击展开
      if (window.innerWidth > 900) {
        document.getElementById('rightside-avatar-card').style.display = "inline-block"
        document.getElementById('rightside-menus').style.transform = "translateY(0)"
      }
      document.getElementById('rightside-childmenu-unfold').style.display = "none"
      document.getElementById('rightside-childmenu-fold').style.display = "inline-block"
      document.getElementById('rightside-childmenu-contents').style.visibility = "visible"
      document.getElementById('rightside-childmenu-comment').style.visibility = "visible"
    },

    hideBtn: () => { // 点击收起
      document.getElementById('rightside-avatar-card').style.display = "none"
      document.getElementById('rightside-childmenu-unfold').style.display = "inline-block"
      document.getElementById('rightside-childmenu-fold').style.display = "none"
      document.getElementById('rightside-menus').style.transform = "translateY(19.6rem)"
      document.getElementById('rightside-contents').style.display = "none"
      document.getElementById('rightside-childmenu-contents').style.background = "var(--card-bg)"
      document.getElementById('rightside-childmenu-contents').style.visibility = "hidden"
      document.getElementById('rightside-childmenu-comment').style.visibility = "hidden"
    },

    ShowOrHideContent: () =>{ //目录展开/关闭
      if (document.getElementById('rightside-contents').style.display == "inline-block") {
        document.getElementById('rightside-contents').style.display = "none"
        document.getElementById('rightside-childmenu-contents').style.background = "var(--card-bg)"
      }
      else {
        document.getElementById('rightside-contents').style.display = "inline-block"
        document.getElementById('rightside-childmenu-contents').style.background = "var(--btn-bg)"
      }
      event.stopPropagation()
    },

    scrollToTop: () => { // 回到顶部
      btf.scrollToDest(0, 500)
    }
  }

  document.getElementById('rightside').addEventListener('click', function (e) {
    const $target = e.target.id || e.target.parentNode.id
    switch ($target) {
      case 'rightside-childmenu-go-up':
        rightSideFn.scrollToTop()
        break
      case 'rightside-childmenu-unfold':
        rightSideFn.showBtn()
        break
      case 'rightside-childmenu-fold':
        rightSideFn.hideBtn()
        break
      case 'rightside-childmenu-contents':
        rightSideFn.ShowOrHideContent()
        break
      default:
        break
    }
  })

细节修改

大体上面的已经可以做完了，但咱魔改自己的站点，那肯定是希望精益求精。电脑端时看不出啥问题了，就从移动端下手喽

手机看小菜单时总觉得不居中奇奇怪怪的；因为在手机时作者卡片是不需要显示了（侧边菜单栏有了），首页那个展开也展开不出啥来，不如干脆默认展开；最后是目录，移动端可能在展开目录想收起时是点目录外区域而非点目录按钮。

于是我针对移动端做了css和js的一点点修复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media screen and (max-width: 900px)
  #rightside
    height: 2rem
    width: 12rem
    margin: auto
    left: 38px
    #rightside-menu
      transform: translate(0, -18rem)
      #rightside-childmenu-unfold
        display: none
      #rightside-childmenu-contents
      #rightside-childmenu-comment
        visibility: visible
      button
        height: 1.5rem
        width: 1.5rem
    #rightside-contents
      transform: translate(0, -18rem)
1
2
3
4
5
6
7
8
9
// 补充：移动端点击目录外区域关闭目录
document.addEventListener("click", function(event){
  if (document.getElementById('rightside-contents').style.display == "inline-block" && window.innerWidth <= 900)
    rightSideFn.ShowOrHideContent()
})
document.getElementById('rightside').addEventListener("click", function(event){
  event = event || window.event
  event.stopPropagation()
})

复制提醒和F12禁用与提醒

这个是根据火喵酱的利用element显示Notification通知，复制提醒，禁用F12或右键菜单提醒来做的（我写的时候这个笨蛋火喵把cdn写错了，导致我以为hexo不能直接用这玩意）

引入vue组件（我很想把这个去掉的）和alement组件库/样式表

1
2
3
4
5
6
<!-- 引入VUE -->
<script src="https://cdn1.tianli0.top/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://cdn1.tianli0.top/npm/element-ui@2.15.6/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://cdn1.tianli0.top/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css">

然后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
// 复制提醒
document.addEventListener("copy",function(e){
  new Vue({
    data:function(){
      this.$notify({
        title:"哎嘿！复制成功",
        message:"若要转载请务必保留原文链接！猹分你个瓜！",
        position: 'bottom-right',
        offset: 50,
        showClose: false,
        type:"success"
      });
      return{visible:false}
    }
  })
})

/* 禁用F12按键并提醒 */
document.onkeydown = function () {
  if (window.event && window.event.keyCode == 123) {
    event.keyCode = 0;
    event.returnValue = false;
    new Vue({
      data:function(){
        this.$notify({
          title:"啊啊！你干嘛啊！",
          message:"怎么能随随便便想扒猹的底裤呢？坏！",
          position: 'bottom-right',
          offset: 50,
          showClose: false,
          type:"error"
        });
        return{visible:false}
      }
    })
    return false;
  }
};

即可享用（魔改测试站的控制台如果打开，会看到我的一段话哦（感觉貌似有点涩

完整的代码

这篇魔改的大部分都是可以直接拿去用的（小菜单阉割了好多功能所以要就自己加喽），所以就放完整的源码以供参考了

rightside.pug须替换源码

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
#rightside
  #rightside-menu
    //- 作者UI卡片
    #rightside-avatar-card
      .is-center#rightside-avatar
        .avatar-img
          img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
        .author-info__name= config.author
        .author-info__description!= theme.aside.card_author.description || config.description

      .site-data
        if site.posts.length
          .data-item.is-center
            .data-item-link
              a(href=url_for(config.archive_dir) + '/')
                .headline= _p('aside.articles')
                .length-num= site.posts.length

        if site.tags.length
          .data-item.is-center
            .data-item-link
              a(href=url_for(config.tag_dir) + '/' )
                .headline= _p('aside.tags')
                .length-num= site.tags.length

        if site.categories.length
          .data-item.is-center
            .data-item-link
              a(href=url_for(config.category_dir) + '/')
                .headline= _p('aside.categories')
                .length-num= site.categories.length

      //- begin follow_me按钮
      if theme.aside.card_author.button.enable
        a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
          i(class=theme.aside.card_author.button.icon)
          span=theme.aside.card_author.button.text
      //- end

      //- begin 社交
      if(theme.social)
        .menu-info-social-icons.is-center
          !=fragment_cache('social', function(){return partial('includes/header/social')})
      //- end

    #rightside-menus.is-center
      //- 繁简体切换
        button#rightside-childmenu-translate(type="button", title=_p('rightside.translate_title'))
          i.fas.fa-cog.fa-spin
      //- 目录
      if is_post()
        button#rightside-childmenu-contents(type="button", title="目录")
          i.fas.fa-list-ul
      //- 跳转评论
      if is_post()
        button#rightside-childmenu-comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
          i.fas.fa-comments
      //- 跳转最上
      button#rightside-childmenu-go-up(type="button" title=_p("rightside.back_to_top"))
        i.fas.fa-arrow-up
      //- 菜单展开/关闭
      button#rightside-childmenu-unfold(type="button" title="展开菜单")
        i.fas.fa-angle-up
      button#rightside-childmenu-fold(type="button" title="收起菜单")
        i.fas.fa-angle-down

  if is_post()
    #rightside-contents
      //- - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
      #card-toc.card-widget
        .item-headline.is-center
          i.fas.fa-stream
          span= _p('aside.card_toc')

        if (page.encrypt == true)
          .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
        else
          .toc-content!=toc(page.content, {list_number: tocNumber})

CSS(STYLUS)源码（自行引入）

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
#rightside-menu
  position: absolute
  transform: translate(-13rem, -21rem)
  #rightside-avatar-card
    box-shadow: 0 0 5px #000
    background: linear-gradient(60deg, #ffd7e4 0%, #c8f1ff 100%)
    border-radius: 1rem
    padding: 0.5rem 1rem 0.5rem 1rem
    width: 12rem
    height: 19.6rem
    display: none
    //transform: translate(-20px, -20px)
    font-family: 'aqqxs', sans-serif
    #rightside-avatar
      margin-top: 0.3rem
    /* 手机侧栏菜单展开 信息、头像位置调整*/
    .site-data
      margin-top: 0.5rem
      display: table
      padding: 0 0.5rem
      width: 100%
      table-layout: fixed
      .data-item
        display: table-cell
    /* 分类等字体加粗 */
    .headline
      font-size: 0.875rem
      color: #000
    .length-num
      font-size: 0.8rem !important
      color: #000
    .author-info__name
      color: #000
    .author-info__description
      color: #000
    /* 作者名 */
    .author-info__name
      font-weight: 500
      font-size: 1.57em
    /* 手机侧栏菜单展开 follow_me按钮*/
    #card-info-btn
      display: block
      margin: 0.3rem 0 0 0
      background-color: var(--btn-bg)
      color: var(--btn-color)
      text-align: center
      line-height: 2.4
      overflow: hidden
      border-radius: 0.625rem
    /* 手机侧栏菜单展开 社交图标 */
    .menu-info-social-icons
      margin: 0.5rem 0 0 0
      .social-icon
        display: inline
        padding: 0 0.3rem 0 0.3rem

  #rightside-menus
    padding: 0.5rem 1rem 0.5rem 1rem
    width: 12rem
    transform: translateY(19.6rem)
    #rightside-childmenu-contents
    #rightside-childmenu-comment
      visibility: hidden
    #rightside-childmenu-fold
      display: none
    /* 功能按钮栏 */
    button
      box-shadow: 0 0 5px #000
      height: 2rem
      width: 2rem
      border-radius: 0.6rem
      background: var(--card-bg)
      margin: 0 0.15rem 0 0.15rem

#rightside-contents
  position: absolute
  transform: translate(-13rem, -21rem)
  display: none
  #card-toc
    box-shadow: 0 0 5px #000
    background: linear-gradient(60deg, #ffd7e4 0%, #c8f1ff 100%)
    border-radius: 1rem
    padding: 0.5rem 1rem 0.5rem 1rem
    width: 12rem
    height: 19.6rem
    .item-headline
      font-size: 1rem
      span
        margin-left: 0.5rem
        font-family: 'aqqxs', sans-serif
    span.toc-text
      color: #000
    .toc
      width: 105%
      overflow-y: scroll
      height: 16.3rem
      margin-top: -0.3rem
      margin-left: -0.7rem
      .toc-child
        margin-left: -1rem
      &::-webkit-scrollbar
        width: 0
    .toc-link
      display: block
      padding-left: .3rem
      border-left: 3px solid transparent
      color: var(--toc-link-color)
      transition: all 0.6s ease-in-out
      margin: 0.1rem 0 0.1rem 0.1rem
      &:hover
        background: var(--btn-bg)
        border-radius: 0.4rem
        box-shadow: 0 0 0.2rem #000
        margin: 0.3rem 0 0.3rem 0.1rem
        span.toc-text
          color: #fff

.el-notification
  box-shadow: 0 0 10px #000

[data-theme="dark"]
  #rightside-menu
    #rightside-avatar-card
      box-shadow: 0 0 5px #fff
      background: linear-gradient(60deg, #2c0c16 0%, #043749 100%)
      .author-info__name
      .author-info__description
      .headline
      .length-num
        color: #fff
    #rightside-menus
      button
        box-shadow: 0 0 5px #fff
        background: #000
        .fas
          color: #fff

  #rightside-contents
    #card-toc
      background: linear-gradient(60deg, #2c0c16 0%, #043749 100%)
      span.toc-text
        color: #fff

  .el-notification
    box-shadow: 0 0 10px #fff


@media screen and (max-width: 900px)
  #rightside
    height: 2rem
    width: 12rem
    margin: auto
    left: 38px
    #rightside-menu
      transform: translate(0, -18rem)
      #rightside-childmenu-unfold
        display: none
      #rightside-childmenu-contents
      #rightside-childmenu-comment
        visibility: visible
      button
        height: 1.5rem
        width: 1.5rem
    #rightside-contents
      transform: translate(0, -18rem)
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
document.addEventListener('DOMContentLoaded', function () {
  const rightSideFn = {
    showBtn: () => { // 点击展开
      if (window.innerWidth > 900) {
        document.getElementById('rightside-avatar-card').style.display = "inline-block"
        document.getElementById('rightside-menus').style.transform = "translateY(0)"
      }
      document.getElementById('rightside-childmenu-unfold').style.display = "none"
      document.getElementById('rightside-childmenu-fold').style.display = "inline-block"
      document.getElementById('rightside-childmenu-contents').style.visibility = "visible"
      document.getElementById('rightside-childmenu-comment').style.visibility = "visible"
    },

    hideBtn: () => { // 点击收起
      document.getElementById('rightside-avatar-card').style.display = "none"
      document.getElementById('rightside-childmenu-unfold').style.display = "inline-block"
      document.getElementById('rightside-childmenu-fold').style.display = "none"
      document.getElementById('rightside-menus').style.transform = "translateY(19.6rem)"
      document.getElementById('rightside-contents').style.display = "none"
      document.getElementById('rightside-childmenu-contents').style.background = "var(--card-bg)"
      document.getElementById('rightside-childmenu-contents').style.visibility = "hidden"
      document.getElementById('rightside-childmenu-comment').style.visibility = "hidden"
    },

    ShowOrHideContent: () =>{ //目录展开/关闭
      if (document.getElementById('rightside-contents').style.display == "inline-block") {
        document.getElementById('rightside-contents').style.display = "none"
        document.getElementById('rightside-childmenu-contents').style.background = "var(--card-bg)"
      }
      else {
        document.getElementById('rightside-contents').style.display = "inline-block"
        document.getElementById('rightside-childmenu-contents').style.background = "var(--btn-bg)"
      }
      event.stopPropagation()
    },

    scrollToTop: () => { // 回到顶部
      btf.scrollToDest(0, 500)
    }
  }

  document.getElementById('rightside').addEventListener('click', function (e) {
    const $target = e.target.id || e.target.parentNode.id
    switch ($target) {
      case 'rightside-childmenu-go-up':
        rightSideFn.scrollToTop()
        break
      case 'rightside-childmenu-unfold':
        rightSideFn.showBtn()
        break
      case 'rightside-childmenu-fold':
        rightSideFn.hideBtn()
        break
      case 'rightside-childmenu-contents':
        rightSideFn.ShowOrHideContent()
        break
      default:
        break
    }
  })

  // 补充：移动端点击目录外区域关闭目录
  document.addEventListener("click", function(event){
    if (document.getElementById('rightside-contents').style.display == "inline-block" && window.innerWidth <= 900)
      rightSideFn.ShowOrHideContent()
  })
  document.getElementById('rightside').addEventListener("click", function(event){
    event = event || window.event
    event.stopPropagation()
  })


  // 复制提醒
  document.addEventListener("copy",function(e){
    new Vue({
      data:function(){
        this.$notify({
          title:"哎嘿！复制成功",
          message:"若要转载请务必保留原文链接！猹分你个瓜！",
          position: 'bottom-right',
          offset: 50,
          showClose: false,
          type:"success"
        });
        return{visible:false}
      }
    })
  })

  /* 禁用F12按键并提醒 */
  document.onkeydown = function () {
    if (window.event && window.event.keyCode == 123) {
      event.keyCode = 0;
      event.returnValue = false;
      new Vue({
        data:function(){
          this.$notify({
            title:"啊啊！你干嘛啊！",
            message:"怎么能随随便便想扒猹的底裤呢？坏！",
            position: 'bottom-right',
            offset: 50,
            showClose: false,
            type:"error"
          });
          return{visible:false}
        }
      })
      return false;
    }
  };
})

售后（糖果屋小广告

菜单栏的魔改就这样结束啦！如果有需要询问的，可以加入糖果屋交流讨论（猹已经常驻糖果屋且不想开自己的群

🧊Akilarの糖果屋
魔改
#Course #Diary #魔改 #butterfly #hexo
魔改日记本-小菜单和复制/F12提示栏
https://noionion.top/40244.html
作者
noionion
发布于
2021年11月30日
许可协议