Butterfly 主题美化

美化 / 特效

自定义主题色

可以修改大部分 UI 颜色

修改 主题配置文件，比如：

颜色值必须被双引号包裹，就像"#000"而不是#000。否则将会在构建的时候报错！

theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#49b1f5"

网站背景

默认显示白色，可设置图片或者颜色

修改 主题配置文件

1	background:

留意: 如果你的网站根目录不是’/‘, 使用本地图片时，需加上你的根目录。
例如：网站是 https://yoursite.com/blog, 引用一张img/xx.png图片，则设置 background 为 `url(/blog/img/xx.png)

background:’#49B202’

background: url(https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png)

修改 主题配置文件

1	footer_bg: true

配置的值	效果
留空 / false	显示默认的顔色
img 链接	图片的链接，显示所配置的图片
顔色 ( HEX 值 - #0000FF RGB 值 - rgb(0,0,255) 顔色单词 - orange 渐变色 - linear-gradient(135deg, #E2B0FF 10%, #9F44D3 100%) ）	对应的顔色
true	显示跟 top_img 一样

true

打字效果

打字效果 activate-power-mode

修改 主题配置文件

activate_power_mode:
  enable: true
  colorful: true 
  shake: true 
  mobile: false

背景特效

好看的綵带背景，可设置每次刷新更换綵带，或者每次点击更换綵带
修改 主题配置文件

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  
  mobile: false

鼠标点击效果

zIndex建议只在-1和9999上选
-1 代表烟火效果在底部
9999 代表烟火效果在前面

修改 主题配置文件

fireworks:
  enable: true
  zIndex: 9999 
  mobile: false

修改 主题配置文件

1
2
3

click_heart:
  enable: true
  mobile: false

修改 主题配置文件

ClickShowText:
  enable: false
  text:
    - I
    - LOVE
    - YOU
  fontSize: 15px
  random: false 
  mobile: false

页面美化

会改变 ol、ul、h1-h5 的样式

field配置生效的区域

post 只在文章页生效
site 在全站生效

修改 主题配置文件

beautify:
  enable: true
  field: site 
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

title-prefix-icon填写的是 fontawesome 的 icon 的 Unicode 数。

未开启美化

开启美化

自定义字体和字体大小

全局字体

可自行设置字体的font-family
如不需要配置，请留空

修改 主题配置文件

font:
  global-font-size:
  code-font-size:
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

Blog 标题字体

可自行设置字体的font-family
如不需要配置，请留空。
如不需要使用网络字体，只需要把 font_link 留空就行

修改 主题配置文件

1
2
3

blog_title_font:
  font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif

网站副标题

可设置主页中显示的网站副标题或者喜欢的座右铭。

修改 主题配置文件

subtitle:
  enable: false
  
  effect: true
  
  loop: true
  
  
  
  
  
  
  source: false
  
  sub:
    - 今日事,今日毕
    - Never put off till tomorrow what you can do today