hexo butterfly主题配置文章界面的透明度

参考教程

• https://blog.ac2g.com/post/2624

正文

1.创建一个文件，位于source/css/theme.css，写入一下内容

/* 文章页背景 */
.layout_post>#post {
    /* 以下代表透明度为0.7 可以自行修改*/
    background: rgba(255,255,255,.7);
}
 
/* 所有页面背景 */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表透明度为0.7 */
    background: rgba(255,255,255,.7);
}
/*侧边卡片的透明度 */
:root {
  --card-bg: rgba(255, 255, 255, .7);
}
[data-theme="dark"] {
  --card-bg: rgba(255, 255, 255, 0.2);
}
/* 页脚透明 */
#footer {
	/* 以下代表透明度为0.7 */
	background: rgba(255,255,255, .0);
}

2.修改butterfly的配置文件_config.butterfly.yml，在 inject.head 选项引入样式

inject:
  head:
    - <link rel="stylesheet" href="/css/theme.css">

3.之后重新部署即可