butterfly-heo主题反编译日记
butterfly-heo主题反编译日记
点击查看更新记录
更新记录
2021-07-28:菜单栏解析
- 将子菜单从纵向变成横向
- 添加内联样式，根据子菜单数量调整偏移量
- 菜单栏居中
点击查看参考教程
参考方向 | 教程原贴 |
|---|---|
hexo-theme-butterfly-heo | 张洪HEO-产品设计师的知识博客 |
洪哥的细节美化样式 | zhheoblog.css |
写在最前
洪哥的博客可以说算是基于butterfly主题里魔改的最舒服的一款了，从最基础的圆角到卡片UI排布，乃至侧栏底栏的UI重构，处处都能体现出产品设计师的专业素养。本文旨在对洪哥博客的一些组件进行反向解析。 此处之所以是反向解析，是因为我想的是告诉各位洪哥的改动思路，而不是单纯叫你们去抄洪哥的css,本文的最终目的是让各位既知其然亦知其所以然，能够在掌握之后开发属于自己的个性化主题。 因此，并不是说学完本文，你的主题就能和洪哥的博客一样了。而是学完以后，你就会自己制作了。 行文顺序会一个组件一个组件的解析，更新时间可能会很长。还请各位有点耐心。
有必要声明的一点是，请各位在反编译的过程中尊重他人的劳动成果，尤其需要注意站点的版权协议，抄UI就差不多了，可别把洪哥设计的各种图标也抠走了。那我可就成罪人了。
洪哥的细节美化样式都很贴心的写在了单独的css里，以供参考:zhheoblog.css，可以说，直接引用这个样式，对洪哥的主题模拟就完成了一大半。
下文会重点解析的也是各种dom结构的更改。所以读起来会非常像糖果屋微调合集。
顶栏菜单
洪哥的顶栏菜单，子菜单是横向排布的，且子菜单居中。
- 解析过程
- 最终改动
子菜单横向排布很好解决。在中添加以下样式
改成横向之后，会出现一个现象，因为子菜单的显隐是由父元素的hover属性控制的，所以当我们改动UI以后，为了按子菜单，鼠标势必会有一瞬间离开父菜单。这就导致一度出现“天下武功，唯快不破”的局面。为此，我们需要调整一下子菜单的偏移量，让他始终相对父元素保持居中。同时适当上调子菜单位置，让他能更好的和父菜单接合。
新建,添加样式
打开,修改内容。参数记得自己计算。