基于butterfly标签页头部透明

基于butterfly标签页头部透明

一月 30, 2021

前言

这玩意只是适用于butterfly，具体效果看本文头图，没错没了。为什么我要写这玩意呢？因为群里某个叫天的人一直在那bb说要改Butterfly的头图，他一个劲的问，我一个劲的回答，然后我发现，朽木不可雕也！废话不多说，直接进入教程。

教程

首先，在博客根目录找到_config.butterfly.yml，打开，然后在里面搜索配置

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
# Image (圖片設置)
# --------------------------------------

# The banner image of home page
index_img:

# If the banner of page not setting, it will show the top_img
default_top_img:

# The banner image of archive page
archive_img:

# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img:

# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:

# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img:

# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:

把图片配置里面的以上项，改为空（全删了），然后在:root/themes/butterfly/source/css 里面新建一个style.css(你自己的魔改css也可以)，然后，在_config.butterfly.yml里的

1
2
3
4
5
inject:
  head:
    - <link href="/css/style.css">
  bottom:
    # - <script type="text/javascript" src="/js/style.js"></script>

在你的CSS文件里面加入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#page-header {
     background: transparent !important;
}

#page-header.post-bg:before {
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5); /*这个rgba可以自己改*/
     content: '';
}
  1. 1. 前言
  2. 2. 教程