实现顶栏 Logo 动态展示

动态变化效果

思路

pug文件

//- themes\butterfly\layout\includes\header\nav.pug
nav#nav
  span#blog-info
    a(href=url_for('/') title=config.title)#blog-info-hover
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo))
      if theme.nav.display_title
        span.site-name=config.title
      img.site-icon-hover(src=url_for(theme.nav.hover_logo))

此处给a标签家里个class，方便添加样式，新增的hover_logo路径需要去_config.yml添加

配置文件添加图标

_config.yml
nav:

  logo: /img/icon.png # image

  hover_logo: /img/home.png # image

样式文件

下面是实现效果的样式

// themes\butterfly\source\css\_layout\head.styl
#blog-info
    flex: 1
    color: var(--light-grey)
    @extend .limit-one-line
  #blog-info-hover
    flex: 1
    color: var(--light-grey)
    @extend .limit-one-line

    .site-icon
      margin-right: 6px
      height: 20px
      margin-top: -8px
      vertical-align: middle

    .site-icon-hover
      background-color: white
      widows 30px
      height: 30px
      vertical-align: middle
      display: none
  #blog-info-hover:hover
    .site-icon-hover
      background-color: transparent
      opacity: 1
      margin-left: -80px
      display: inline-block
      transition: opacity  0.4s
    .site-icon
      opacity 0
      transition opacity  0.2s

    .site-name
      opacity 0
      transition: opacity 0.2s

主要就是吧原来的blog-info加上了hover的样式