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

当然在整个站点还没修改完之前，这些魔改内容只会在猹的魔改测试站出现。你可以在测试站点进行预览。（当然测试站点会有非常多的 bug 和还没调的设置和样式，这些也不需要和猹吐槽）在魔改完成之前主站也不会再做任何样式调整

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

小菜单的调整

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

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

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

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

基础面板布局和样式

目录布局和样式

各个按钮的功能

细节修改

复制提醒和 F12 禁用与提醒

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

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

<!-- 引入VUE -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/packages/theme-chalk/lib/index.css">

然后 js 引入

// 复制提醒
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 须替换源码

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

JS 源码（须与 alement 的 cdn 一起自行引入）

售后（糖果屋小广告

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