参考教程和步骤
参考方向教程原帖
顶栏菜单居中Lenous
子菜单横向排布糖果屋
  1. 准备css文件
  2. 引入css
  3. 修改menu_item.pug

新建和引入CSS

新建css

  1. 在BlogRoot\themes\butterfly\source\css下新建_custom文件夹（BlogRoot是我的博客根目录）
  2. 在_custom文件夹下新建文本文档命名为custom后缀改为css
  3. 把下面代码复制进custom.css（名字可自己命名）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#nav .menus_items {
    /* display: inline; 这个带不带都可以，本来就是inline */
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}
/* 横向排布子菜单 */
#nav .menus_items .menus_item .menus_item_child li {
  display: inline-block;
}
/* 圆角隐藏 */
ul.menus_item_child {
  overflow: hidden;
  border-radius: 5px;
}
/* 调整空隙，确保不会天下武功唯快不破 */
#nav .menus_items .menus_item .menus_item_child {
  margin-top: 0px !important;
}

引入CSS

博客根目录下找到_config.butterfly.yml，head处添加如下代码

Bloogroot是我的根目录名，注意替换

custom.css替换成上面自定义的名字。

1
- <link rel="stylesheet" href="BlogRoot/css/_custom/custom.css">

最终结果示例()

1
2
3
4
inject:
  head:
     - <link rel="stylesheet" href="BlogRoot/css/_custom/custom.css"> #sx字体
     - <link rel="stylesheet" href="BlogRoot/css/_custom/custom5.css"> #顶栏菜单居中，子菜单

调整子菜单位置

修改Blogroot\themes\butterfly\layout\includes\header\menu_item.pug,找到ul.menus_item_child这行，添加一个内联样式。把

1
ul.menus_item_child

替换成下面的

1
ul.menus_item_child(style=`right:`+ (-60 * Object.keys(value).length + 65) + `px;`)

结论：

糖果屋只是子菜单居中，并没有先将顶栏居中，所以我在直接复制店长的代码出错。我把left改成right没有报错，后面的“-60”自己看着调整试试。Lenous大佬给出了在浏览器调试的方法，这种调试方法能让每个子菜单都能到达合适位置。这里给出的方法是所有子菜单都偏移相同大小的距离。两种方法自行选择。