点击查看更新记录

更新记录

2021-07-28:菜单栏解析

  1. 将子菜单从纵向变成横向
  2. 添加内联样式,根据子菜单数量调整偏移量
  3. 菜单栏居中
点击查看参考教程
参考方向教程原贴
hexo-theme-butterfly-heo张洪HEO-产品设计师的知识博客
洪哥的细节美化样式zhheoblog.css

写在最前

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

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

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

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

顶栏菜单

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

  1. 子菜单横向排布很好解决。在custom.css中添加以下样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 横向排布子菜单 */
    #nav .menus_items .menus_item .menus_item_child li {
    display: inline-block;
    }
    /* 圆角隐藏 */
    ul.menus_item_child {
    overflow: hidden;
    border-radius: 5px;
    }
  2. 改成横向之后,会出现一个现象,因为子菜单的显隐是由父元素的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均为估值。是我尝试了几个子菜单的个数,然后在控制台进行调整,最后再联立方程组算出来的估值。这个公式的意义就是让子菜单能够根据菜单项数自动调整偏移量。因此,针对各自的博客,还请各位自己计算属于自己的参数。(二元一次方程组应该还是会的吧
  1. 新建[Blogroot]\themes\butterfly\source\css\custom.css,添加样式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 横向排布子菜单 */
    #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;
    }
  2. 打开[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;`)

TO DO

横向子菜单

作者卡片UI

文章卡片UI

页脚修改

夜间模式按钮和搜索按钮