butterfly-heo主题反编译日记

点击查看更新记录

更新记录

2021-07-28:菜单栏解析

将子菜单从纵向变成横向
添加内联样式，根据子菜单数量调整偏移量
菜单栏居中

点击查看参考教程

参考方向	教程原贴
hexo-theme-butterfly-heo	张洪HEO-产品设计师的知识博客
洪哥的细节美化样式	zhheoblog.css

写在最前

洪哥的博客可以说算是基于butterfly主题里魔改的最舒服的一款了，从最基础的圆角到卡片UI排布，乃至侧栏底栏的UI重构，处处都能体现出产品设计师的专业素养。本文旨在对洪哥博客的一些组件进行反向解析。
此处之所以是反向解析，是因为我想的是告诉各位洪哥的改动思路，而不是单纯叫你们去抄洪哥的css,本文的最终目的是让各位既知其然亦知其所以然，能够在掌握之后开发属于自己的个性化主题。
因此，并不是说学完本文，你的主题就能和洪哥的博客一样了。而是学完以后，你就会自己制作了。
行文顺序会一个组件一个组件的解析，更新时间可能会很长。还请各位有点耐心。

有必要声明的一点是，请各位在反编译的过程中尊重他人的劳动成果，尤其需要注意站点的版权协议，抄UI就差不多了，可别把洪哥设计的各种图标也抠走了。那我可就成罪人了。

洪哥的细节美化样式都很贴心的写在了单独的css里，以供参考:zhheoblog.css，可以说，直接引用这个样式，对洪哥的主题模拟就完成了一大半。

下文会重点解析的也是各种dom结构的更改。所以读起来会非常像糖果屋微调合集。

顶栏菜单

洪哥的顶栏菜单，子菜单是横向排布的，且子菜单居中。

子菜单横向排布很好解决。在custom.css中添加以下样式

/* 横向排布子菜单 */
#nav .menus_items .menus_item .menus_item_child li {
  display: inline-block;
}
/* 圆角隐藏 */
ul.menus_item_child {
  overflow: hidden;
  border-radius: 5px;
}

改成横向之后，会出现一个现象，因为子菜单的显隐是由父元素的hover属性控制的，所以当我们改动UI以后，为了按子菜单，鼠标势必会有一瞬间离开父菜单。这就导致一度出现“天下武功，唯快不破”的局面。为此，我们需要调整一下子菜单的偏移量，让他始终相对父元素保持居中。同时适当上调子菜单位置，让他能更好的和父菜单接合。
- 在custom.css加样式
  1
  2
  3
  #nav .menus_items .menus_item .menus_item_child {
  margin-top: 0px !important;
  }
- 修改[Blogroot]\themes\butterfly\layout\includes\header\menu_item.pug,
  找到ul.menus_item_child这行，添加一个内联样式，有使用糖果屋微调合集里的iconfont图标菜单的也是同样的改法。
  1
  2
  - ul.menus_item_child
  + ul.menus_item_child(style=`left:`+ (-40 * Object.keys(value).length + 65) + `px;`)
  因为这里的子菜单宽度和配置的字体大小有关，而我查找源文件只看到一个width:100%,找遍了也没找到这100%是继承自谁的宽度，所以此处的-40和65均为估值。是我尝试了几个子菜单的个数，然后在控制台进行调整，最后再联立方程组算出来的估值。这个公式的意义就是让子菜单能够根据菜单项数自动调整偏移量。因此，针对各自的博客，还请各位自己计算属于自己的参数。（~~二元一次方程组应该还是会的吧~~）

新建[Blogroot]\themes\butterfly\source\css\custom.css,添加样式

/* 横向排布子菜单 */
#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;
}

打开[Blogroot]\themes\butterfly\layout\includes\header\menu_item.pug,修改内容。参数记得自己计算。
1
2
- ul.menus_item_child
+ ul.menus_item_child(style=`left:`+ (-40 * Object.keys(value).length + 65) + `px;`)