设置图片

发表于

更新于

阅读量

这个是 Butterfly 自带的功能，修改主题的配置文件 _config.butterfly.yml。

编辑 index_img、background、footer_bg 选项。 设置网站背景，并将主页顶部图和页脚背景改为透明。 (需要将以下示例地址替换为自己的图片地址。)

# Image (圖片設置)
# --------------------------------------

# The banner image of home page
index_img: transparent

# Beautify/Effect (美化/效果)
# --------------------------------------

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

# Footer Background
footer_bg: transparent

引入相关样式

发表于

更新于

阅读量

1、在[BlogRoot]\source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：

/* 页脚与头图透明 */
#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;
}

2、在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法）

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

3、在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载

# The banner image of home page
index_img: 

# Footer Background
footer_bg: false

4、在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的background配置项设置背景图

background: url('https://jyh-img.oss-cn-hangzhou.aliyuncs.com/Blog/20230803_wallhaven-x8gkpo.jpg')

大功告成

发表于

更新于

阅读量

👏 恭喜你完成了修改，可以使用以下命令进行预览。

hexo cl
hexo g
hexo s