butterfly主题

butterfly主题是一款简单美观的Hexo主题，本博客也是使用了该主题。

若想了解该主题可以前往：

文章中修改所使用的butterfly主题版本为3.6.2。不同版本修改的结果可能有所不同。

 

简单的修改

修改butterfly主题文件夹下的_config.yml文件，找到默认顶部图设置default_top_img:将默认顶部图设置成为透明： 
1
default_top_img: transparent

transparent为透明，butterfly Docs中有说明。

再往下拉找到background：的设置项并填入一张自己喜欢的背景图的链接：

1
background: url(http://xxxxxx.com/xxx.jpg)

英文括号中的链接为背景图链接请自定义。

经过这系列的操作顶部图和背景图就会变成同一张图片，也就是你自定义的那张图片。再参考butterfly Docs修改一下效果大概如下：

 

接下来再修改一下文章文字背景和侧边栏背景的颜色及透明度：

进入hexo博客的themes/butterfly/source/css/文件夹下找到名为var.styl的文件

找到这一段：

1
2
3
4
5
6
7
8
9
10
11
$light-blue = $theme-color
$dark-black = #000000
$light-grey = #EEEEEE
$grey = #858585
$white = #FFFFFF
$whitesmoke = #f5f5f5
$font-black = #4C4948
$card-bg = $white
$text-highlight-color = $font-color
$text-hover = $theme-color
$text-bg-hover = $theme-color

把其中的$white = #FFFFFF 改为：

1
$white = rgba(255,255,255,0.8)

注释：255,255,255是白色的rgb色码值，也就是文章和侧边栏背景的颜色，可自定义为自己喜欢的。后面的 0.8 是透明度数值在0到1之间，0为透明1为不透明，根据个人喜好设置。

未设置透明度效果展示：

已设置透明效果度展示：

 

结语

这只是简单的修改并没有太多技术含量，若想修改更多请参考：Butterfly Docs

 

 

注：