功能

Live2D看板娘

准备

检查博客主目录下的package.json是否有”hexo-helper-live2d”，
有的话请先删除

1
npm uninstall hexo-helper-live2d

More info: Writing

安装依赖

1
npm install --save hexo-helper-live2d

成功了之后可以看到当前目录的node_modules/下有个live2d-widget目录，这是动画的主配置

下载model文件

下载模型文件：
模型文件可直接用npm安装：如下

1
npm install live2d-widget-model-shizuku

model名字可在live2d-widget-models中找到

安装完成可以在node_modules/下看到live2d-widget-model-shizuku文件夹

添加live2d看板娘到hexo

配置Hexo的主_config.yml或者使用的主题的_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d: ##自定义看板娘动画
  enable: true
  scriptFrom: local ##主目录
  pluginRootPath: live2d_widget/ ##模型目录
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-hijiki ##对应的模型名称
  display:
    position: left ##居右
    width: 160 ##宽度
    height: 240 ##高度
  mobile:
    show: true ##移动端是否显示
  react:
    opacity: ##透明度

自定义Butterfly主题 Loading 加载动画

准备

本功能涉及的文件：

  • [Blogroot]\themes\butterfly\layout\includes\loading\loading.pug
    • 修改后用于判断preloader功能是否打开以及根据配置项的内容加载指定的页面元素
  • [Blogroot]\themes\butterfly\layout\includes\loading\load_style\
    • 需要新建，用于存放动画模板
  • [Blogroot]\themes\butterfly\source\css_layout\loading.styl
    • 修改后用于判断preloader功能是否打开以及根据配置项的内容加载指定的样式
  • [Blogroot]\themes\butterfly\source\css_load_style\
    • 需要新建，用于存放动画样式
  • [Blogroot]\themes\butterfly\layout\includes\layout.pug
    • 适配需要添加的配置项
  • [Blogroot]\themes\butterfly\source\css\var.styl
    • 添加自定义修改背景色的配置项
  • [Blogroot]_config.butterfly.yml

配置添加动画模板

修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#此处第一行的if用于判断preloader功能是否打开。
#case和when则是根据配置项的内容加载指定的页面元素。
#可更具需要修改
if theme.preloader.enable 
  case theme.preloader.load_style    
    when 'gear'
      include ./load_style/gear.pug
    when 'ironheart'
      include ./load_style/ironheart.pug
    when 'scarecrow'
      include ./load_style/scarecrow.pug
    when 'triangles'
      include ./load_style/triangles.pug
    when 'wizard'
      include ./load_style/wizard.pug
    when 'image'
      include ./load_style/image.pug
    default
      include ./load_style/default.pug

新建动画结构模板存放的文件夹，如无特别提示，所有动画模板均存放在[Blogroot]\themes\butterfly\layout\includes\loading\load_style\目录下(以旋转齿轮为例)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#在load_style下新建gear.pug
#loading-box
  .gear-loader
    .gear-loader_overlay
    .gear-loader_cogs
      .gear-loader_cogs__top
        .gear-top_part
        .gear-top_part
        .gear-top_part
        .gear-top_hole
      .gear-loader_cogs__left
        .gear-left_part
        .gear-left_part
        .gear-left_part
        .gear-left_hole
      .gear-loader_cogs__bottom
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_hole

配置添加动画样式

修改[Blogroot]\themes\butterfly\source\css_layout\loading.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if hexo-config('preloader.enable')
if hexo-config('preloader.load_style') == 'gear'
  @import './_load_style/gear'
else if hexo-config('preloader.load_style') == 'ironheart'
  @import './_load_style/ironheart'
else if hexo-config('preloader.load_style') == 'scarecrow'
  @import './_load_style/scarecrow'
else if hexo-config('preloader.load_style') == 'triangles'
  @import './_load_style/triangles'
else if hexo-config('preloader.load_style') == 'wizard'
  @import './_load_style/wizard'
else if hexo-config('preloader.load_style') == 'image'
  @import './_load_style/image'
else
  @import './_load_style/default'

新建动画样式模板存放的文件夹，如无特别提示，所有动画样式均存放在[Blogroot]\themes\butterfly\source\css_load_style\目录下

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
  #loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  text-align center
  &.loaded
    z-index -1000
    .gear-loader
      display none
  .gear-loader
    height 100%
    position relative
    margin auto
    width 400px
  .gear-loader_overlay
    width 150px
    height 150px
    background transparent
    box-shadow 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset
    border-radius 100%
    z-index -1
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs
    z-index -2
    width 100px
    height 100px
    top -120px !important
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs__top
    position relative
    width 100px
    height 100px
    transform-origin 50px 50px
    -webkit-animation rotate 10s infinite linear
    animation rotate 10s infinite linear
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-top_part
        width 100px
        border-radius 10px
        position absolute
        height 100px
        background #f98db9
      &.gear-top_hole
        width 50px
        height 50px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__left
    position relative
    width 80px
    transform rotate(16deg)
    top 28px
    transform-origin 40px 40px
    animation rotate_left 10s 0.1s infinite reverse linear
    left -24px
    height 80px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-left_part
        width 80px
        border-radius 6px
        position absolute
        height 80px
        background #97ddff
      &.gear-left_hole
        width 40px
        height 40px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__bottom
    position relative
    width 60px
    top -65px
    transform-origin 30px 30px
    -webkit-animation rotate_left 10.2s 0.4s infinite linear
    animation rotate_left 10.2s 0.4s infinite linear
    transform rotate(4deg)
    left 79px
    height 60px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-bottom_part
        width 60px
        border-radius 5px
        position absolute
        height 60px
        background #ffcd66
      &.gear-bottom_hole
        width 30px
        height 30px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto



/* Animations */
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}

添加的配置项

修改[Blogroot]\themes\butterfly\layout\includes\layout.pug，以适配接下来需要添加的配置项

1
2
3
4
5
#+代表添加，-代表删减
    body
-     if theme.preloader
+     if theme.preloader.enable
        !=partial('includes/loading/loading', {}, {cache: true})

修改[Blogroot]\themes\butterfly\source\css\var.styl，添加自定义修改背景色的配置项。(大概98行的位置)
{cache: true})

1
2
3
4
5
      // preloader
-     $preloader-bg = #37474f
+     $preloader-bg = hexo-config('preloader.enable') && hexo-config('preloader.load_color') ? convert(hexo-config('preloader.load_color')) : #37474f
      $preloader-word-color = #fff

修改[Blogroot]_config.butterfly.yml的preloader配置项。

1
2
3
4
5
6
7
          # Loading Animation (加載動畫)
-   preloader: true
+   preloader:
+     enable: true # true|false
+     load_color: '#000000' # '#37474f'
+     load_style: wizard # default|gear|ironheart|scarecrow|triangles|wizard|image
+     load_image:  # url

问题一

按正常流程，在这里hexo clean g s就会有效果，但我遇到了玄学问题，原文七个动画我却只有一个成功，把流程做了三四遍还是无法解决，然后开始到处试错，导致代码很乱，最后出去吃了个饭回来动画又突然生效了，所以遇到问题先原地躺平一会，然后试错前留个后手。

超时自动结束

可以给加载动画设置一个settimeout()的函数来达到伪·加载完毕的效果，即超时了自动关闭加载动画，即使页面还在加载。
得益于loading-js使用的是原生js，所以可以给script添加async属性实现异步加载，以免阻塞后续HTML渲染。
仅仅需要给控制加载动画开关的loading-js.pug添加两行代码即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
-   script.
+   script(async).
      var preloader = {
        endLoading: () => {
          document.body.style.overflow = 'auto';
          document.getElementById('loading-box').classList.add("loaded")
        },
        initLoading: () => {
          document.body.style.overflow = '';
          document.getElementById('loading-box').classList.remove("loaded")

        }
      }
      window.addEventListener('load',()=> {preloader.endLoading()})
+     setTimeout(function(){preloader.endLoading();}, 5000);

手动点击结束

给整个loading-box添加一个点击动作，点击动画就能结束。
同样是修改[Blogroot]\themes\butterfly\layout\includes\loading\loading-js.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-   script.
+   script(async).
      var preloader = {
        endLoading: () => {
          document.body.style.overflow = 'auto';
          document.getElementById('loading-box').classList.add("loaded")
        },
        initLoading: () => {
          document.body.style.overflow = '';
          document.getElementById('loading-box').classList.remove("loaded")

        }
      }
      window.addEventListener('load',()=> {preloader.endLoading()})
+     document.getElementById('loading-box').addEventListener('click',()=> {preloader.endLoading()})

动画加载配置

loading-js.pug中修改：

  • 页面加载完动画结束
    1
    window.addEventListener('load',()=> {preloader.endLoading()})
  • 设置动画延迟时间
    1
    setTimeout(function(){preloader.endLoading();}, 5000);
  • 点击页面即可结束动画
    1
    document.getElementById('loading-box').addEventListener('click',()=> {preloader.endLoading()})

淡出

修改[Blogroot]\themes\butterfly\layout\includes\loading\loading-js.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
script(async).
  var preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').style.transition = 'opacity 3s ease 0s'
      document.getElementById('loading-box').style.opacity = '0'
      setTimeout(function(){
        document.getElementById('loading-box').classList.add("loaded")
      }, 3000);
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').style.transition = '';
      document.getElementById('loading-box').style.opacity = '1'
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> {preloader.endLoading()})
  setTimeout(function(){preloader.endLoading();}, 3000);

参考

糖果屋

百里飞洋

优化

Vercel来加速Hexo博客

简介

Vercel提供免费的serverless和全局CDN服务，使用者只需要通过几步简单的注册以及导入仓库即可完成部署，从个人体验来看，Vercel现已支持根据username.github.io的master分支是否变动来启动自动部署。

教程

注册

进入Vercel进行注册，根据步骤填写GitHub上所部署的静态页面地址（具体省略）

自定义域名配置

在project->settings->domains里配置自定义域名，填入自定义域名以后还要根据Vercel提供的解析记录去自己的域名DNS解析处添加相应解析。以及替换域名解析的DNS服务器（视供应商不同，生效时间可能长达48小时）。这里Vercel的线路建议选择为电信。

可能添加解析记录或者替换DNS服务器供应商以后还是显示不生效。可以检查看看你的线路设置是否把Vercel线路设置为默认。因为检测时不能保证Vercel后台也是走的电信线路。但其实你的配置是生效的。所以可以压制一下强迫症。

域名的 DNS 服务器改成 Vercel 的 DNS 服务器后，就不能在阿里云修改 DNS 记录了

未完待续

待补充挖坑：

  • 使用vercel加速博客
  • 星空背景
  • 图床