一、特效

1、过场动画

在每个页面打开前会有个过场动画，这个配置就是一个纯动画效果看个人喜好开启。这个配置对全站所有网页生效。

preloader:
  enable: true
  source: 1 #可选值1=fullpage或2=progress bar，可查看https://codebyzach.github.io/pace/
  pace_css_url:

2、背景特效

静止彩带

可查看canvas_ribbon，可设置每次刷新更换彩带，或者每次点击更换彩带

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #设置是否每次点击都更换綵带
  mobile: false # false 手机端不显示 true 手机端显示

动态彩带

canvas_fluttering_ribbon:
  enable: true
  mobile: false # false 手机端不显示 true 手机端显示

动态几何

canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false # false 手机端不显示 true 手机端显示

3、鼠标点击特效

可配置三种，不建议开启，看着比较眼花。详细说明如下：

fireworks: # Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
  enable: false
  zIndex: 9999 # -1 or 9999
  mobile: false

click_heart: # Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
  enable: false
  mobile: false

ClickShowText: # Mouse click effects: words (鼠標點擊效果: 文字)
  enable: false
  text:
  fontSize: 15px
  random: false
  mobile: false

二、颜色

1、自定义主題色

可以修改大部分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"

2、Header和Footer美化

可增加自定义的css和js文件来美化此部分。

inject: # 插入代码到头部 </head> 之前 和 底部 </body> 之前
  head: # - <link rel="stylesheet" href="/xxx.css">
  bottom: # - <script src="xxxx"></script>

3、header和footer半透明效果

mask: # 为 header 或 footer 添加黑色半透遮罩
  header: true
  footer: true

4、代码块美化

highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: 400 # unit: px
code_word_wrap: false # 设置代码是否会自动换行

5、全局字体和字体大小

此设置对全站有效，可自行设置字体的font-family，如不需要配置，請留空

修改 主題配置文件

# Global font settings
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

6、分隔线图标

hr_icon: # 水平分隔线图标设置，带个小剪刀图标
  enable: true
  icon: # the unicode value of Font Awesome icon, such as '\3423'
  icon-top:

三、图标

1、给列表项添加图标

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

# 美化頁面顯示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1' #填写的是fontawesome的icon的Unicode数。
  title-prefix-icon-color: "#F47466"