Hexo + Butterfly 主题美化指南 🎨

 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

/* 渐变色滚动动画 */
@-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%;
    }
}

#footer {
    background: linear-gradient(-45deg, #2e3740, #3b4a5e, #665c78, #7d5a52, #4a4a4a, #1e293b);
    background-size: 600% 600%; /* 增加背景尺寸以适应更多的颜色 */
    -webkit-animation: Gradient 15s ease infinite; /* 调整动画时长以更好地展示所有颜色 */
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
#footer:before {
    background-color: rgba(0, 0, 0, 0);
}

1
2
3

inject:
  head: # 引入自定义css
    - <link rel="stylesheet" href="/css/页脚渐变.css">

1

hexo clean; hexo g; hexo s

1
2
3

    // 直达底部按钮
    button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
      i.fas.fa-arrow-down

1

npm install hexo-butterfly-wowjs --save

  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
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215

# Hexo + Butterfly 增加动画特效
wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: true #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-item # - class: recent-post-item #必填项，需要添加动画的元素的class
      style: animate__zoomIn #   style: animate__zoomInLeft #必填项，需要添加的动画
      duration: 900ms #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 800ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 100 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 1 #选填项，动画重复的次数

# 以下是一些常用的动画效果，可以根据自己的需求进行调整
#     文章TOC动画
    - class: card-widget
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      首页导航栏
    - class: menus_item
      style: animate__slideInRight
      duration: 2s
      delay: 1s
#      导航栏-站点标题
    - class: nav-site-title
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      导航栏-搜索按钮
    - class: site-page social-icon search
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      导航栏-明暗模式
    - class: sun_moon faa-parent animated-hover
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      首页文章标题
    - class: post-title
      style: animate__zoomIn
      duration: 2s
      delay: 1s
    - class: meta-firstline
      style: animate__zoomIn
      duration: 2s
      delay: 1s
    - class: meta-secondline
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      标签页
    - class: tag-cloud-list text-center
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      分类页
    - class: category-lists
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      首页侧边栏分类
    - class: card-category-list-item
      style: animate__backInRight
      duration: 2s
      delay: 1s
#      侧边栏-网站信息
    - class: webinfo-item
      style: animate__backInRight
      duration: 2s
      delay: 1s

#      归档页
    - class: article-sort-item
      style: animate__fadeInRightBig
      duration: 2s
      delay: 1s
#      友链页
    - class: flink-list
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      关于页
    - class: container
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      aplayer 播放器
    - class: aplayer-body
      style: animate__slideInRight
      duration: 2s
      delay: 1s
      iteration: 3
#      代码框
    - class: highlight
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      标签外挂
    - class: folding-tag
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      分页
    - class: pagination
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      脚页建站时间
    - class: copyright
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      评论 1
    - class: comment-head
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      评论 2
    - class: comment-wrap
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      文章页书签
    - class: tag_share
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      下一篇文章
    - class: pagination-post
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      相关文章文字
    - class: headline
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      相关文章卡片
    - class: relatedPosts-list
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
#      文章内容
    - class: container post-content
      style: animate__zoomIn
      duration: 2s
      delay: 1s
#      文章内容下面分割线
    - class: custom-hr
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms
    - class: boardsign
      style: animate__zoomIn
      duration: 900ms
      delay: 800ms

#      侧边栏-公告
    - class: announcement_content
      style: animate__backInRight
      duration: 2s
      delay: 1s
#      侧边栏-标签云内容
    - class: card-tag-cloud
      style: animate__backInRight
      duration: 2s
      delay: 1s
#      侧边栏-最近文章
    - class: aside-list-item
      style: animate__backInRight
      duration: 2s
      delay: 1s
#      侧边栏-头像
    - class: site-data
      style: animate__backInRight
      duration: 2s
      delay: 1s
    - class: author-info-name
      style: animate__backInRight
      duration: 2s
      delay: 1s

#      首页文章封面
#    - class: post-bg
#      style: animate__fadeInRightBig
#      duration: 3s
#      delay: 2s
#    - class: recent-post-info
#      style: animate__fadeInRightBig
#      duration: 3s
#      delay: 2s

#      文章TOC目录内容
    - class: toc-item toc-level-2
      style: animate__backInRight
      duration: 2s
      delay: 1s
    - class: item-headline
      style: animate__backInRight
      duration: 2s
      delay: 1s
    - class: toc-link
      style: animate__backInRight
      duration: 2s
      delay: 1s

  animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
  wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
  wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js
  
#  animate_css: https://cdn.jsdelivr.net/gh/meimolihan/cdn@v1.0.0/hexo-butterfly-wowjs/animate.min.css
#  wow_js: https://cdn.jsdelivr.net/gh/meimolihan/cdn@v1.0.0/hexo-butterfly-wowjs/wow.min.js
#  wow_init_js: https://cdn.jsdelivr.net/gh/meimolihan/cdn@v1.0.0/hexo-butterfly-wowjs/wow_init.js

1

hexo clean; hexo g; hexo s

1
2
3
4
5
6

beautify:
  enable: true
  field: post # site/post
  # title-prefix-icon: '\f0c1' 原内容
  title-prefix-icon: '\f863'
  title-prefix-icon-color: "#F47466"

  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
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

/* 导入字体库 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* 风‮基车‬础样式 */
#content-inner.layout h1::before,
#content-inner.layout h2::before,
#content-inner.layout h3::before,
#content-inner.layout h4::before,
#content-inner.layout h5::before,
#content-inner.layout h6::before {
  content: "\f863";                    /* 风车图标 */
  font-family: 'Font Awesome 5 Free';  /* 字体库 */
  font-weight: 900;                    /* 图标粗细 */
  display: inline-block;               /* 确保动画生效 */
  width: 1.2em;                        /* 图‮容标‬器宽度 */
  text-align: center;                  /* 图标居中 */
  transition: all 0.3s ease;           /* 过渡动画 */
  -webkit-animation: ccc 4s linear infinite;
  animation: ccc 4s linear infinite;
  
  /* 新‮定增‬位属性 */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 标‮基题‬础样式 */
#content-inner.layout h1,
#content-inner.layout h2,
#content-inner.layout h3,
#content-inner.layout h4,
#content-inner.layout h5,
#content-inner.layout h6 {
  position: relative;  /* 定位基准 */
  display: block;      /* 改为块级元素 */
  padding-left: 1.8rem !important;  /* 左侧留出‮标图‬空间 */
  margin: 15px 0;
  transition: transform 0.3s ease;
}

/* 各层级‮车风‬颜色与定‮微位‬调 */
#content-inner.layout h1::before {
  color: #ef50a8;
  font-size: 1.3rem;
  left: -0.1rem;
}
#content-inner.layout h2::before {
  color: #fb7061;
  font-size: 1.1rem;
  left: -0.1rem;
}
#content-inner.layout h3::before {
  color: #ffbf00;
  font-size: 0.95rem;
  left: -0.1rem;
}
#content-inner.layout h4::before {
  color: #a9e000;
  font-size: 0.8rem;
}
#content-inner.layout h5::before {
  color: #57c850;
  font-size: 0.7rem;
}
#content-inner.layout h6::before {
  color: #5ec1e0;
  font-size: 0.66rem;
}

/* 旋转动画 */
@keyframes ccc {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(-360deg); }
}

/* 标题悬停效果 */
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: #2196f3 !important;
  transform: scale(1.05);
  transition: color 0.3s ease, transform 0.3s ease;
}

/* 风车‮停悬‬特效 */
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  filter: brightness(1.2);
  transform: translateY(-50%) scale(1.1) rotate(360deg);
  color: #2196f3 !important;
  transition: all 0.3s ease;
  -webkit-animation: ccc 2s linear infinite;
  animation: ccc 2s linear infinite;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  #content-inner.layout h1,
  #content-inner.layout h2,
  #content-inner.layout h3,
  #content-inner.layout h4,
  #content-inner.layout h5,
  #content-inner.layout h6 {
    padding-left: 1.5rem !important;
  }

  #content-inner.layout h1::before { font-size: 1.1rem }
  #content-inner.layout h2::before { font-size: 1.0rem }
  #content-inner.layout h3::before { font-size: 0.9rem }
  #content-inner.layout h4::before { font-size: 0.75rem }
  #content-inner.layout h5::before { font-size: 0.65rem }
  #content-inner.layout h6::before { font-size: 0.6rem }
}

1
2
3

inject:
  head: # 注入自定义css
    - <link rel="stylesheet" href="/css/custom-icon.css">

1

hexo clean; hexo g; hexo s

1

npm install --save hexo-tag-aplayer

1
2
3

aplayer:
  meting: true
  asset_inject: false

1
2
3

aplayerInject:
  enable: true
  per_page: 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
26
27
28
29

// 添加音频播放器代码
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css')
script(src='https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js')
#aplayer
script.
    const home = 'https://xxx.yyyy.com/';
    const songs = [
        '野狼disco-宝石Gem', 
        '除了生死都是擦伤-侯泽润', 
    ];
    let audios = [];
    // 遍历歌曲列表
    songs.forEach((item) => {
        const songInfo = item.split('-');
        audios.push({
            name: songInfo[0],
            artist: songInfo[1],
            url: home + item + '/song.mp3',
            cover: home + item + '/cover.jpg',
            lrc: home + item + '/lyric.lrc'
        });
    });

    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,
        lrcType: 3,
        audio: audios
    });

1
2
3
4
5
6
7

完整歌曲链接：https://xxx.yyyy.com/野狼disco-宝石Gem/lyric.lrc

── https://xxx.yyyy.com/
   ├──  野狼disco-宝石Gem  # 歌曲文件夹（根据`-`前后来匹配歌手名和歌曲名）
        ├── song.mp3  # 歌曲
        ├── cover.jpg  # 封面
        └── lyric.lrc  #歌词

 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
92
93
94
95
96
97
98
99

/*aplayer日间模式调整*/
/*背景色*/
.aplayer{
	background: rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: relative;
}
.aplayer.aplayer-fixed .aplayer-lrc:after,.aplayer.aplayer-fixed .aplayer-lrc:before {
	display: none
}
.aplayer.aplayer.aplayer-fixed .aplayer-body{
	background:rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: fixed;
}
/*毛玻璃效果*/
.aplayer-list{
	backdrop-filter: blur(3px);
}
.aplayer-info{
	backdrop-filter: blur(3px);
}
/*滚动条*/
.aplayer .aplayer-list ol::-webkit-scrollbar {
	width: 5px
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: #b0e1ff
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
	background-color: #b0e1ff
}
/*圆角*/
.aplayer.aplayer-fixed .aplayer-list{
    border-radius: 6px 6px 0 0!important;
}
.aplayer.aplayer-fixed .aplayer-miniswitcher{
    border-radius: 0 6px 6px 0!important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{
    transition: 0.28s!important;
    border-radius: 6px!important;
}	
/*选中与播放中歌曲激活颜色*/
.aplayer .aplayer-list ol li:hover{
    background: #b0e1ff!important;
}
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #ffdffa!important;
}
/*aplayer黑暗模式*/
[data-theme=dark]
.aplayer{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer.aplayer-fixed .aplayer-body{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{
	fill: #d4d4d4;
}
[data-theme=dark]	
.aplayer .aplayer-list ol li:hover{
    background: #407290!important;
}
[data-theme=dark]
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #9c8098!important;
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-index{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-author{
    color: #d4d4d4;
}

/* aplayer 播放器，自动缩进隐藏 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  left: -66px !important;
  /* 默认‮况情‬下缩进左侧66px，只留一点箭‮部头‬分 */
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
  left: 0 !important;
  /* 鼠标悬停‮左是‬侧缩进归零，完全显示按钮 */
}

1
2
3

inject:
  head: #注入自定义css
    - <link rel="stylesheet" href="/css/custom-aplayer.css">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// APlayer 默认关闭歌词
// 创建一个 MutationObserver 实例，用于监听 DOM 的变化
var observer = new MutationObserver(function (mutations) {
  // 查找页面中 class 为 "aplayer-icon-lrc" 的元素
  var lrcButton = document.querySelector(".aplayer-icon-lrc");
  // 如果找到了 lrcButton
  if (lrcButton) {
    // 延迟1毫秒执行点击操作
    setTimeout(function () {
      lrcButton.click();
    }, 1);
    // 断开 MutationObserver 实例，停止监听 DOM 的变化
    observer.disconnect();
  }
});

// 开始观察 body 下的所有子节点及其属性变化
observer.observe(document.body, { childList: true, subtree: true });

1
2
3

inject:
  bottom:
    - <script defer data-pjax src="/js/隐藏歌词.js"></script>

1

hexo clean; hexo g; hexo s

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

    if globalPageType === 'post'
      include ./post-info.pug
+ // butterfly文章顶部添加波浪效果，开始
+      section.main-hero-waves-area.waves-area
+        svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
+          defs
+            path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
+          g.parallax
+            use(href='#gentle-wave', x='48', y='0')
+            use(href='#gentle-wave', x='48', y='3')
+            use(href='#gentle-wave', x='48', y='5')
+            use(href='#gentle-wave', x='48', y='7')
+// butterfly文章顶部添加波浪效果，结束
    else if globalPageType === 'home'
      #site-info
        h1#site-title=config.title

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// butterfly文章顶部添加波浪效果，开始
      section.main-hero-waves-area.waves-area
        svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
          defs
            path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
          g.parallax
            use(href='#gentle-wave', x='48', y='0')
            use(href='#gentle-wave', x='48', y='3')
            use(href='#gentle-wave', x='48', y='5')
            use(href='#gentle-wave', x='48', y='7')
// butterfly文章顶部添加波浪效果，结束

 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
92

/* 波浪css */
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
  /* 设置初始状态，避免闪烁 */
  transform: translate3d(0, 0, 0); 
  will-change: transform;
}

.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
  /* 设置初始状态，避免闪烁 */
  transform: translate3d(0, 0, 0); 
  will-change: transform;
}

/* Animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  /* 设置初始状态，避免闪烁 */
  transform: translate3d(-90px, 0, 0); 
  will-change: transform;
}

.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}

.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}

.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}

.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}

/* 黑色模式背景 */
[data-theme="dark"] .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #18171dc8;
}

[data-theme="dark"] .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #18171d80;
}

[data-theme="dark"] .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #18171d3e;
}

[data-theme="dark"] .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #18171d;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
  }
}

1
2
3

inject:
  head: #注入自定义css
    - <link rel="stylesheet" href="/css/bolang.css">

1

hexo clean; hexo g; hexo s

1
2
3
4
5
6

  #post-info
    position: absolute
    bottom: 100px  //文章信息距离文章块的高度.改为100px
    padding: 0 8%
    width: 100%
    text-align: center

1

npm i hexo-magnet --save

1

npm uninstall hexo-magnet --save --package-lock-only

 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

magnet:
  enable: true
  priority: 1
  enable_page: /
  type: categories
  devide: 2
  display:
    - name: 教程
      display_name: 小冰の魔改教程
      icon: 📚
    - name: 游戏评测
      display_name: 小冰の游戏评测
      icon: 🎮
    - name: 生活趣闻
      display_name: 小冰の生活趣闻
      icon: 🐱‍👓
    - name: vue
      display_name: 小冰の编程学习
      icon: 👩‍💻
    - name: 学习
      display_name: 小冰の读书笔记
      icon: 📒
    - name: 随想
      display_name: 小冰の胡思乱想
      icon: 💡
  color_setting:
    text_color: black
    text_hover_color: white
    background_color: "#f2f2f2"
    background_hover_color: "#b30070"
  layout:
    type: id
    name: recent-posts
    index: 0
  temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
  plus_style: ""

1
2
3

- name: 教程 # 这里是tags或者categories的名称  
 display_name: 小冰の魔改教程 # 这里是替换的名称  
 icon: 📚 # 这里是展示的图标

1
2
3
4

text_color: black # 文字默认颜色  
text_hover_color: white # 文字鼠标悬浮颜色  
background_color: "#f2f2f2" # 文字背景默认颜色  
background_hover_color: "#b30070" # 文字背景悬浮颜色

1
2
3
4
5
6
7
8

<div name="我是墙" id="recent-posts">  
 <!-- id=>type  recent-posts=>name    -->  
 <div name="我是画框">  
 <div name="我是纸">  
 <!--这里通过js挂载magnet，也就是画画-->  
 </div>  
 </div>  
</div>

1
2
3
4
5

<div class="recent-post-item" style="width:100%;height: auto"> <!--文章容器-->  
 <div id="catalog_magnet">  <!--挂载容器-->  
 ${temple_html_item}  
 </div>  
</div>

1

hexo clean; hexo g; hexo s

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 小冰分类分类磁铁黑夜模式适配 */  
/* 一般状态 */  
[data-theme="dark"] .magnet_link_context {  
 background: #1e1e1e;  
 color: antiquewhite;  
}  
/* 鼠标悬浮状态 */  
[data-theme="dark"] .magnet_link_context:hover {  
 background: #3ecdf1;  
 color: #f2f2f2;  
}

1
2
3
4
5
6
7
8
9

svg(aria-hidden='true', style='position:absolute; overflow:hidden; width:0; height:0')
  symbol#icon-sun(viewBox='0 0 1024 1024')
    path(d='M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z', fill='#FFD878', p-id='8420')
    path(d='M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z', fill='#FFE4A9', p-id='8421')
    path(d='M512 109.248L626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z', fill='#4D5152', p-id='8422')
    path(d='M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z', fill='#4D5152', p-id='8423')
  symbol#icon-moon(viewBox='0 0 1024 1024')
    path(d='M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z', fill='#FFB531', p-id='11345')
    path(d='M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z', fill='#030835', p-id='11346')

 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
92
93
94
95
96

.Cuteen_DarkSky,
.Cuteen_DarkSky:before
  content ''
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  z-index 88888888

.Cuteen_DarkSky
  background linear-gradient(to top, #f8cd71 0, #5bfde9 80%)
  &:before
    transition 2s ease all
    opacity 0
    background linear-gradient(to top, #30cfd0 0, #330867 100%)

.DarkMode
  .Cuteen_DarkSky
    &:before
      opacity 1

.Cuteen_DarkPlanet
  z-index 99999999
  position fixed
  left -50%
  top -50%
  width 200%
  height 200%
  -webkit-animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  transform-origin center bottom


@-webkit-keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.Cuteen_DarkPlanet
  #sun
    position absolute
    border-radius 100%
    left 44%
    top 30%
    height 6rem
    width 6rem
    background #ffee94
    box-shadow 0 0 40px #ffee94
    // opacity 0

  #moon
    position absolute
    border-radius 100%
    left 44%
    top 30%
    position absolute
    border-radius 100%
    height 6rem
    width 6rem
    box-shadow -1.8em 1.8em 0 0.2em #fff
    // opacity 1

  // &:after
  //   position absolute
  //   left 42%
  //   top 30%
  //   width 6rem
  //   height 6rem
  //   border-radius 50%
  //   content ''
  //   background #ffef9e
  //   box-shadow 0 0 30px #ffef9e

.search
  span
    display none

.menus_item
  a
    text-decoration none!important
    
//按钮相关，对侧栏按钮做过魔改的可以调整这里的数值
.icon-V
  padding 5px

 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
92

// 定义 saveToLocal 对象
const saveToLocal = {
    set: function (key, value, expiration) {
        // 存储数据时将数据转换为 JSON 字符串
        const data = { value: value, expiration: expiration };
        localStorage.setItem(key, JSON.stringify(data));
    },
    get: function (key) {
        const storedData = localStorage.getItem(key);
        if (storedData) {
            try {
                const parsedData = JSON.parse(storedData);
                // 检查数据是否过期
                if (parsedData.expiration && Date.now() > parsedData.expiration) {
                    localStorage.removeItem(key);
                    return null;
                }
                return parsedData.value;
            } catch (error) {
                console.error('解析 JSON 数据时出错:', error);
                return null;
            }
        }
        return null;
    }
};

function switchNightMode() {
    document.querySelector('body').insertAdjacentHTML('beforeend', '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"><div id="sun"></div><div id="moon"></div></div></div>');
    setTimeout(function () {
        if (document.querySelector('body').classList.contains('DarkMode')) {
            document.querySelector('body').classList.remove('DarkMode');
            localStorage.setItem('isDark', '0');
            document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon');
        } else {
            document.querySelector('body').classList.add('DarkMode');
            localStorage.setItem('isDark', '1');
            document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun');
        }
        setTimeout(function () {
            document.getElementsByClassName('Cuteen_DarkSky')[0].style.transition = 'opacity 3s';
            document.getElementsByClassName('Cuteen_DarkSky')[0].style.opacity = '0';
            setTimeout(function () {
                document.getElementsByClassName('Cuteen_DarkSky')[0].remove();
            }, 1000);
        }, 2000);
    });
    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
    if (nowMode === 'light') {
        // 先设置太阳月亮透明度
        document.getElementById("sun").style.opacity = "1";
        document.getElementById("moon").style.opacity = "0";
        setTimeout(function () {
            document.getElementById("sun").style.opacity = "0";
            document.getElementById("moon").style.opacity = "1";
        }, 1000);

        activateDarkMode();
        saveToLocal.set('theme', 'dark', 2);
        document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun');
    } else {
        // 先设置太阳月亮透明度
        document.getElementById("sun").style.opacity = "0";
        document.getElementById("moon").style.opacity = "1";
        setTimeout(function () {
            document.getElementById("sun").style.opacity = "1";
            document.getElementById("moon").style.opacity = "0";
        }, 1000);

        activateLightMode();
        saveToLocal.set('theme', 'light', 2);
        document.querySelector('body').classList.add('DarkMode');
        document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon');
    }
    // handle some cases
    typeof utterancesTheme === 'function' && utterancesTheme();
    typeof FB === 'object' && window.loadFBComment();
    window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200);
}

// 添加 activateLightMode 函数定义
function activateLightMode() {
    // 这里可以添加切换到白天模式的具体代码
    document.documentElement.setAttribute('data-theme', 'light');
    // 可以添加其他白天模式的样式修改代码
}

// 添加 activateDarkMode 函数定义
function activateDarkMode() {
    // 这里可以添加切换到夜间模式的具体代码
    document.documentElement.setAttribute('data-theme', 'dark');
    // 可以添加其他夜间模式的样式修改代码