butterfly页脚页头的美化

1. 修改页头

  1. 在sources 下创建assets/css/head.styl 文件 添加以下代码 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     @import 'nib'

    // 顶部图
    #page-header
      &, &:before
        background: transparent !important
      &.post-bg, &.not-home-page
        height: 280px !important
      #post-info
        bottom: 40px !important
      #page-site-info
        top: 140px !important

      @media screen and (max-width: 768px)
        &.not-home-page
          height: 200px !important
        #post-info
          bottom: 10px !important
        #page-site-info
          top: 100px !important

    .top-img
      height: 250px
      margin: -50px -40px 50px
      border-top-left-radius: inherit
      border-top-right-radius: inherit
      background-position: center center
      background-size: cover
      transition: all 0.3s

      @media screen and (max-width: 768px)
        height: 230px
        margin: -36px -14px 36px

      [data-theme='dark'] &
        filter: brightness(0.5)

2. 修改页脚文件

在sources 下创建assets/css/footer.styl 文件 添加以下代码

1
2
3
4
5
6
7
8
/*  页脚 */
/* 
  #footer:before
  background-color: alpha(#FFF, .1)

  [data-theme='dark'] &
    background-color: alpha(#000, .1) 
*/

$nsb:一开始想取消页脚的蓝色背景，使其和背景颜色保持统一，从作者博客以及其他博客那里了解的方案都是动用css 文件，也就是下面的方案。 最近查看的butterfly的源码，发现其本身针对页脚进行了处理， 在 主题配置文件中存在 #footer_bg: 参数， 我们只需将其值改为 transparent 之后 我们会发现 页脚的蓝色已经不见了，取而代之的是一层黑色遮罩。 这是因为butterfly 是默认增加黑色半透遮罩， 其控制参数为 

1
2
3
mask:  
 header: true  
 footer: true

只需将其改为 false 即可

1
2
3
mask:  
 header: false  
 footer: false

3. 引入文件

在主题配置文件中引入以上两个文件

1
2
3
4
5
6
7
 inject:
  head: 
  - <link rel="stylesheet" href="/assets/css/head.css">
  bottom:
  - <link rel="stylesheet" href="/assets/css/footer.css">
index_img: transparent
foot_bg: transparent