修改背景色

修改butterfly主题的配置文件：_config.butterfly.yml

1
2
3
4
5
6
7
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: 'linear-gradient(270deg, #00c1a5, #2680eb)'

# Footer Background （footer背景）
footer_bg: 'linear-gradient(270deg, #00c1a5, #2680eb)'

修改主题半透明

创建css文件

在\themes\butterfly\source\css目录下创建一个css文件，名称为transpancy.css，拷贝以下代码到文件
其中的 .1 .7为透明度的数值，可自行修改

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
/* 文章页背景 */
.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.9 */
    background: rgba(255, 255, 255, .7);
}

/*侧边卡片的透明度 */
:root {
    --card-bg: rgba(255, 255, 255, .7);
}

/* 页脚透明 */
#footer {
    /* 以下代表透明度为0.1*/
    background: rgba(255, 255, 255, .1);
}

主题引入新建的css文件

找到_config.butterfly.yml文件的inject位置，在head引入刚才新建的css，如下：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/transpancy.css">

重新生成页面

1
2
3
4
5
6
7
8
9
10
11
清除缓存
hexo clean

重新生成文件
hexo gen

启动本地hexo，使用localhost:4000查看效果
hexo server

没有问题就可以上传到github
hexo dep