关于themes-butterfly主题的解决方案

如何设置单图页面

插入代码

  • 在 /blog/source/ 下新建 css 文件夹,文件夹中建 xxx.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

修改配置文件

  • 在主题配置文件 /blog/_config.butterfly.yml 文件中 inject 配置下的 head加入以下代码，引入刚刚创建的 xxx.css文件
1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/xxx.css" media="defer" onload="this.media='all'">
  • 在主题配置文件 /blog/_config.butterfly.yml 文件中配置 index_img 和 footer_bg 以及 background
1
2
3
4
5
6
7
8
9
10
11
# The banner image of home page
index_img: 

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(https://gcore.jsdelivr.net/gh/mikeytki/CDN/13.jpg)


# Footer Background
footer_bg: false
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

主域名：
mikeytk.cn
📬：704596141@qq.com

分享文章