原文地址：Hexo中Buttefly主题美化进阶（八） | 偷掉月亮 (moonshuo.cn)

大家好，我是阿硕，专注与后端，略懂前端的一个菜鸟程序猿，今天将为大家讲述Butterfly主题的我们页面的整体美化

设置透明度

打开我们外部引入的css文件，复制以下的代码

image-20221110154603393

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*文章的整体背景，渐变色设置*/
#web_bg {
	background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
	#background: #FFEFBA;
	/* fallback for old browsers */
	#background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);
	/* Chrome 10-25, Safari 5.1-6 */
	#background: linear-gradient(to right, #FFFFFF, #FFEFBA);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background: #2BC0E4;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #EAECC6, #2BC0E4);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #EAECC6, #2BC0E4);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 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.5 */
	background: rgba(255, 255, 255, .5);
}

/*侧边栏页面*/
#aside-content>.card-widget {
	background: rgba(255, 255, 255, .6);
}

#aside-content>.sticky_layout>.card-widget {
	background: rgba(255, 255, 255, .6);
}

/*文章页面*/
.layout>#post {
	background: rgba(255, 255, 255, .6);
}

/*分类页面*/
.layout>#page {

	background: rgba(255, 255, 255, .6);
}

/*时间轴页面*/
.layout>#archive {
	background: rgba(255, 255, 255, .6);
}

动态渐变

上面设置了静态渐变色，而这里我们设置动态渐变色，大家二选一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
#web_bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

图片渐变

大家一定要选择一张合适的图片，要不还是很难看的，这里其实就是设置了背景图片，图片放在与css同级的img文件下

1
2
3
4
5
/*文章的整体背景*/
#web_bg {
	background-image: url("../img/bg.jpg"), 
	linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), 
}

说明

这里参考了的大佬（Fomalhaut）的配置

如果大家同时设置了首页的banner图片与背景图片，建议大家使用同一张图片，否则会显得很突兀，当然大家也可以自行配置，下面给出博主自己的配置

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

#web_bg {
	background-image: url("../img/banner.jpg"),
		linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35))
}

/* 侧边栏个人信息卡片动态渐变色 */
#aside-content>.card-widget {
	background: linear-gradient(-45deg,
			#e8d8b9,
			#eccec5,
			#a3e9eb,
			#bdbdf0,
			#eec1ea);
	box-shadow: 0 0 5px rgb(66, 68, 68);
	position: relative;
	background-size: 400% 400%;
	-webkit-animation: Gradient 10s ease infinite;
	-moz-animation: Gradient 10s ease infinite;
	animation: Gradient 10s ease infinite !important;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* 个人信息Follow me按钮 */
#aside-content>.card-widget.card-info>#card-info-btn {
	background-color: #3eb8be;
	border-radius: 8px;
}

#aside-content>.sticky_layout>.card-widget {
	background: rgba(255, 255, 255, .8);


}

/*文章页面*/
.layout>#post {
	background: rgba(255, 255, 255, .8);
}

/*分类页面*/
.layout>#page {

	background: rgba(255, 255, 255, .6);
}

/*时间轴页面*/
.layout>#archive {
	background: rgba(255, 255, 255, .6);
}
关于渐变色的配置，博主的审美不敢恭维。给出大家网站[uiGradients - Beautiful colored gradients](https://uigradients.com/#DigitalWater)，大家选择自己需要的css代码进行配置即可

image-20221110163959476

在这个配置过程中，如果以上的小伙伴按照上面的配置没有生效，那么打开butterfly的主题文件，搜索background，这样也是可以使得背景生效的

image-20221114141004115

**注意注意注意，如果这里出现黑色，白色主题下不协调的情况，请参考下面这一篇文章的关于透明度bug的修复，这可能是新版本的问题**

Hexo中Buttefly主题美化进阶续篇（十一） | 偷掉月亮 (moonshuo.cn)

深浅模式下不同背景

首先在butterfly的主题配置文件下添加以下内容

1
2
3
4
5
6
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url("../img/banner.jpg")
#黑暗主题下文件的位置
background_dark: url("../img/bannerBlack.jpg")

打开以下的路径的文件，…themes\butterfly\source\css\var.styl

我们在第36行左右将代码更换下面的代码

1
2
3
$web-bg = hexo-config('background') && unquote(hexo-config('background'))
$web-bg-dark = hexo-config('background_dark') && unquote(hexo-config('background_dark'))
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh

最终一步，打开..themes\butterfly\source\css_mode\darkmode.styl这个文件，然后我们在41行左右，更改为以下的内容，这里是去除了一行，增加了两行哦

1
2
3
4
5
6
7
8
9
#web_bg
      background: $web-bg-dark
    #footer:before,
    #page-header:before
      position: absolute
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .7)
      content: ''

页脚的设置

背景设置

设置完上面的之后，我们发现页脚显得非常突兀！！！我们进行的设置并没有影响到页脚的变化

去掉丑丑的蓝色背景

….themes\butterfly\source\css_layout\footer.styl

打开上述路径的文件，把blue那一行删除

image-20221111201249433

更改底层文字

image-20221111201408664

在js文件下新建foot.js文件，复制以下代码

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
28
// 动态心跳，更改自己的名称
$(document).ready(function(e){
    $('.copyright').html('©2022 <i class="fa-fw fas fa-heartbeat card-announcement-animation cc_pointer"></i> By 偷掉月亮的阿硕');
})

$(document).ready(function(e){
    show_date_time();
})

//本站运行时间，更改自己建立站点的时间
function show_date_time(){
$('.framework-info').html('小破站已经安全运行<span id="span_dt_dt" style="color: #fff;"></span>');
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("3/5/2022 0:0:0");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='<font style=color:#afb4db>'+daysold+'</font> 天 <font style=color:#f391a9>'+hrsold+'</font> 时 <font style=color:#fdb933>'+minsold+'</font> 分 <font style=color:#a3cf62>'+seconds+'</font> 秒';
}

同时因为这个代码是jquery文件进行解析的，所以我们需要下载jquery.js文件，打开下面的网站，另存为js文件，同样也放在js文件下(这里我将下载的文件更改名字了，大家可以不更改名字，但是引入的时候和名字要相同)

https://code.jquery.com/jquery-3.6.1.min.js

image-20221111201822874

注意jquey文件引入在前

image-20221111201959892

阿里巴巴彩色图标

前面的文章中我们介绍了如何引用图标，现在教大家如何使用彩色的图标，Hexo中Buttefly主题配置美化（六） | 偷掉月亮 (moonshuo.cn)

image-20221112160316589

image-20221112160419639

剩下的操作与原来的相似，我们直接下载代码，替换原来的即可，不会的同学可以看上面的文章

成功，导航栏有点难看，就不截图了

image-20221112160659206

更换字体

下载

首先我们在网络上面搜索一款字体（要开源免费的，要不小心律师函），这里给上一些网址

庞门正道标题体字体免费下载和在线预览-字体天下 (fonts.net.cn)

Google Fonts | 谷歌字体中文版 | GoogleFonts

首先将文件放到下面，大家可以看到我已经有一个font.css,但是这个图标的，图标可能会经常换，所以这里我新建立一个css文件

image-20221112164142144

在新建立的css文件中复制以下代码,在这里文件结构虽然看来有点乱，但是怕大家没有编程经验，所以怎么简单怎么设置

1
2
3
4
5
6
@font-face {
    /*字体名称，名字可以随便起，但是注意要一致，建议英文*/
    font-family: 'PMZDCST';
    font-display: swap;
    src: url('./PangMenZhengDaoCuShuTi-2.ttf') format("truetype");
  }

在配置文件中引入

image-20221112165112860

配置字体

在主题配置文件搜索font，我们可以看到原作者已经将对应的字体位置写的很清楚了，我们只需要写入即可，我们也可以引入多个字体，下面挑选一些主要进行说明

1
2
3
4
5
6
7
8
9
font:
# 全局字体大小
  global-font-size:
#代码字体大小
  code-font-size:
#全局字体，与我们css文件中的字体名称要一致
  font-family: 'PMZDCST'
#代码字体
  code-font-family: 'PMZDCST'

刷新之后，我们查看会成功，为了网站的可读性，大家尽量选择耐看的字体，而不是花里胡哨的字体

image-20221112165850990

鼠标样式更改

博主参考了很多文章，但是大部分都是叫我们直接引入超链接，我们不能自定义自己的图片，现在我们准备自定义自己的图片作为自己的鼠标

准备工作

首先找好我们的图片，但是注意不能太大，像素大小最好为50*50或者以下（大家可以自行更改图片像素大小），太大的话有时不会显示这个效果，而且那样的话我们网页的图标会显得巨大

image-20221113153422187

现在我们打开下面的网站Convertio — 文件转换器，将我们的图片上传，转换为CRU模式，转换完毕我们将文件下载，我在source文件下建立了一个mouse文件，专门存储cru文件，将文件存储到下面

image-20221113154002779

代码引入

复制以下代码到css文件中，在使用外挂标签进行引入，我们也可以直接写入到已经存在的css文件中，替换为我们自己的代码名称即可，然后会发现这个鼠标已经生效，

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/* 全局默认鼠标指针 */
body,
html {
	cursor: url('./mouse/月亮.cur'), auto !important;
}

/* 悬停图片时的鼠标指针 */
img {
	
	cursor: url('./mouse/move.cur'), auto !important;
}

/* 选择链接标签时的鼠标指针 */
a:hover {
	cursor: url('./mouse/help.cur'), auto;
}

/* 选中输入框时的鼠标指针 */
input:hover {
	cursor: url('指定样式cur文件路径'), auto;
}

/* 悬停按钮时的鼠标指针 */
button:hover {
	cursor: url('指定样式cur文件路径'), auto;
}

/* 悬停列表标签时的鼠标指针 */
i:hover {
	cursor: url('指定样式cur文件路径'), auto;
}

/* 悬停页脚链接标签（例如页脚徽标）时的鼠标指针 */
#footer-wrap a:hover {
	cursor: url('指定样式cur文件路径'), auto;
}

/* 悬停页码时的鼠标指针 */
#pagination .page-number:hover {
	cursor: url('指定样式cur文件路径'), auto;
}

/* 悬停菜单栏时的鼠标指针 */
#nav .site-page:hover {
	cursor: url('指定样式cur文件路径'), auto;
}

小建议

如果大家不知道用什么鼠标样式，可以打开下面的网站，里面有一些免费的，但是可能比较大，大家可以使用上面的工具先转换为图片，调整像素，然后在转换为回来

鼠标指针 - 光标 - 电脑鼠标指针下载 - 致美化 - 漫锋网 (zhutix.com)

鼠标点击效果

上面学会了鼠标的样式更改，那么现在我们可以尝试更改鼠标的点击效果，在butterfly配置文件中，找到下面的，更改自己的代码就OK，注意mobile是在手机端的是否显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
  enable: false
  zIndex: 9999 # -1 or 9999
  mobile: false

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

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

导航栏修改

参考：关于Butterfly的导航栏的一些教程 | Ariasakaの小窝 (yisous.xyz)

分离搜索与菜单栏

打开以下路径的文件

..\themes\butterfly\layout\includes\header\nav.pug，直接使用下面的代码替代源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
nav#nav
  span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]
    
  #menus
  !=partial('includes/header/menu_item', {}, {cache: true})
  #nav-right
     if (theme.algolia_search.enable || theme.local_search.enable)
       #search-button
         a.site-page.social-icon.search
           i.fas.fa-search.fa-fw
           span=' '+_p('search.title')

       #toggle-menu
         a.site-page
           i.fas.fa-bars.fa-fw

导航栏居中

现在我们想要将导航栏居中显示，我们只需要在我们的自定义css文件中添加以下代码即可

1
2
3
4
5
6
7
#nav-right{
	flex:1 1 auto;
	justify-content: flex-end;
	margin-left: auto;
	display: flex;
	flex-wrap:nowrap;
  }

导航栏常驻

在我们看文章的时候，顶栏会消失，但是这里想要一直显示，在定义css中添加下面的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.nav-fixed #nav{
    transform: translateY(58px)!important;
    -webkit-transform: translateY(58px)!important;
    -moz-transform: translateY(58px)!important;
    -ms-transform: translateY(58px)!important;
    -o-transform: translateY(58px)!important;
}
#nav{
    transition: none!important;
    -webkit-transition: none!important;
    -moz-transition: none!important;
    -ms-transition: none!important;
    -o-transition: none!important;
}

导航栏显示标题

在文章下滑的时候，显示文章的标题，而不是显示菜单，但是当停顿时，显示菜单

image-20221116145517796

首先打开..\themes\butterfly\layout\includes\header\nav.pug文件，在以下位置添加代码，注意格式，否则会报错，最后的两行是添加的代码

1
2
3
4
#menus
  !=partial('includes/header/menu_item', {}, {cache: true})
  center(id="name-container")
    a(id="page-name" href="javascript:scrollToTop()") PAGE_NAME

新建nav.js文件，复制以下代码

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
28
29
30
31
document.getElementById("name-container").setAttribute("style", "display:none");

var position = $(window).scrollTop();

$(window).scroll(function () {

  var scroll = $(window).scrollTop();

  if (scroll > position) {


    document.getElementById("name-container").setAttribute("style", "");
    document.getElementsByClassName("menus_items")[1].setAttribute("style", "display:none!important");

  } else {


    document.getElementsByClassName("menus_items")[1].setAttribute("style", "");
    document.getElementById("name-container").setAttribute("style", "display:none");

  }

  position = scroll;

});
function scrollToTop(){
    document.getElementsByClassName("menus_items")[1].setAttribute("style","");
    document.getElementById("name-container").setAttribute("style","display:none");
    btf.scrollToDest(0, 500);
}
document.getElementById("page-name").innerText = document.title.split(" |")[0];

复制以下css代码进行到自定义css文件中

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*显示标题*/
#page-name::before {
	font-size: 18px;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	color: white !important;
	top: 0;
	left: 0;
	background-color: var(--lyx-theme);
	transition: all .3s;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	opacity: 0;
	box-shadow: 0 0 3px var(--lyx-theme);
	line-height: 45px;
	/*如果垂直位置不居中可以微调此值，也可以删了*/
}

#page-name:hover:before {
	opacity: 1;
}

@media screen and (max-width:900px) {

	#page-name,
	#menus {
		display: none !important;
	}
}

#name-container {
	transition: all .3s;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
}

#name-container:hover {
	scale: 1.03
}

#page-name {
	position: relative;
	padding: 10px 30px
}

#nav {
	padding: 0 20px;
}
最终注意不要忘了引入以上的js文件和css文件，hexo 三部即可成功

顶部加载条

在自定义css文件中复制以下的代码

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/*顶部加载进度条*/
.pace {
	pointer-events: none;
	user-select: none;
	z-index: 2;
	position: fixed;
	margin: auto;
	top: 4px;
	left: 0;
	right: 0;
	height: 8px;
	border-radius: 8px;
	width: 6rem;
	background: #eaecf2;
	overflow: hidden;
  }
  
  .pace-inactive .pace-progress {
	opacity: 0;
	transition: 0.3s ease-in;
  }
  
  .pace.pace-inactive {
	opacity: 0;
	transition: 0.3s;
	top: -8px;
  }
  
  .pace .pace-progress {
	box-sizing: border-box;
	transform: translate3d(0, 0, 0);
	position: fixed;
	z-index: 2;
	display: block;
	position: absolute;
	top: 0;
	right: 100%;
	height: 100%;
	width: 100%;
	background: #49b1f5;
	background: linear-gradient(
	  to right,
	  rgb(18, 194, 233),
	  rgb(196, 113, 237),
	  rgb(246, 79, 89)
	);
	animation: gradient 2s ease infinite;
	background-size: 200%;
  }

#nav-right {
	flex: 1 1 auto;
	justify-content: flex-end;
	margin-left: auto;
	display: flex;
	flex-wrap: nowrap;
}

然后在butterfly主题中引入以下的js文件

1
- <script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js" async></script>

小更改

下面是一些小更改，但是作者就不单单写一篇了，这里一起讲出来

更改分割线图标

image-20221112191102548

我们可以对图中的小剪刀样式进行更改，但是无法使用阿里巴巴的图标，比较遗憾

Find Icons with the Perfect Look & Feel | Font Awesome，打开下面网站，找到对应的图标复制对应的编号，比较可惜的是这个图标的颜色受到主题配置文件中theme标签的限制，与文章整体一起变化

1
2
3
4
5
# The setting of divider icon (水平分隔線圖標設置)
hr_icon:
  enable: true
  icon: '\f197' # the unicode value of Font Awesome icon, such as '\3423'
  icon-top:

更改侧边框位置

看下面的注解进行更改，大家自行选择开启，博主关闭了大部分，这样给其他的小组件留位置

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# aside (側邊欄)
# --------------------------------------

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  #侧边栏右边还是左边显示
  position: right # left or right
  display:
  #这个目前还不清除是干嘛的
    archive: true
    tag: true
    category: false
  #作者卡片是否开启
  card_author:
    enable: true
    description:
    #链接按钮是否显示
    button:
      enable: false
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx
 #公告卡片
  card_announcement:
    enable: true
    content: 欢迎来到阿硕的博客，如果你有什么疑问请留言
  #侧边栏展示下面信息吗还有数量限制等等
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: false
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: false
    limit: 40 # if set 0 will show all
    color: false
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: false
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works

网站运行时间

虽然这里与我们上面的页脚设置重复了，但是大家可以选择开启

1
2
3
4
5
# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: true
  publish_date: 3/5/2022 00:00:00

image-20221112194849216

背景效果

改为true即可，如果设置了背景建议不要进行设置

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
# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  enable: false
  mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  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

加载效果

页面没有加载完毕的的时候，加载的效果

1
2
3
4
5
6
7
8
9
# Loading Animation (加載動畫)
preloader:
  enable: false
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: