butterfly主题

前言

如果你是 clone 原主题 dev 分支的话，这篇博客可能不需要继续阅读下去，你只需将主题下Butterfly.yml 中 preloader: false 变为 true 即可。但是如果你是 clone 的 master 分支，需要添加加载动画，则得一步步来哦！

开始操作

  1. 第一步，在 themes/Butterfly/layout/includes/layout.pug 找到body，在其下面添加如下代码：

    1
    2
    if theme.preloader
          !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})

  2. 在 themes/Butterfly/layout/404.pug 找到body，在其下面添加如下代码：

    1
    2
    3
    if theme.preloader
      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})  
    if theme.fireworks && theme.fireworks.enable

  3. 在 themes/Butterfly/layout/includes/additional-js.pug 最后一行添加如下代码：

    1
    2
    if theme.preloader
      !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})

  4. 在 themes/Butterfly/layout/includes 下新建一个文件夹，命名为 loading，添加两个文件。

loading-js.pug

1
2
3
4
5
6
script.
 var endLoading = function () {
   document.body.style.overflow = 'auto';
   document.getElementById('loading-box').classList.add("loaded")
 }
 window.addEventListener('load',endLoading)

loading.pug

1
2
3
4
5
6
7
8
9
#loading-box
.loading-left-bg
.loading-right-bg
.spinner-box
.configure-border-1
.configure-core
.configure-border-2
.configure-core
.loading-word= _p('loading')
  1. 在 themse/Butterfly/source/css/_layout/ 文件夹下新建 loadding.styl，添加如下代码：
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
if hexo-config('preloader')
  loading-bg()
    position: fixed
    z-index: 1000
    width: 50%
    height: 100%
    background-color: $preloader-bg
    transition: all .5s

  #loading-box
    .loading-left-bg
      loading-bg()

    .loading-right-bg
      loading-bg()
      right: 0

    .spinner-box
      position: fixed
      z-index: 1001
      display: flex
      justify-content: center
      align-items: center
      width: 100%
      height: 100vh

      .configure-border-1
        position: absolute
        padding: 3px
        width: 115px
        height: 115px
        background: #ffab91
        animation: configure-clockwise 3s ease-in-out 0s infinite alternate

      .configure-border-2
        left: -115px
        padding: 3px
        width: 115px
        height: 115px
        background: rgb(63, 249, 220)
        transform: rotate(45deg)
        animation: configure-xclockwise 3s ease-in-out 0s infinite alternate

      .loading-word
        position: absolute
        color: $white
        font-size: .8rem

      .configure-core
        width: 100%
        height: 100%
        background-color: $preloader-bg

    &.loaded
      .loading-left-bg
        transform: translate(-100%, 0)

      .loading-right-bg
        transform: translate(100%, 0)

      .spinner-box
        display: none

  @keyframes configure-clockwise
    0%
      transform: rotate(0)

    25%
      transform: rotate(90deg)

    50%
      transform: rotate(180deg)

    75%
      transform: rotate(270deg)

    100%
      transform: rotate(360deg)

  @keyframes configure-xclockwise
    0%
      transform: rotate(45deg)

    25%
      transform: rotate(-45deg)

    50%
      transform: rotate(-135deg)

    75%
      transform: rotate(-225deg)

    100%
      transform: rotate(-315deg)
  1. 在 themse/Butterfly/source/css/_mode/darkmode.styl 文件最后一行添加如下代码：
1
2
3
4
5
6
7
8
9
if hexo-config('preloader')
  #loading-box
    .loading-left-bg,
    .loading-right-bg,
    .configure-core
      background-color: darken(#121212, 2)

    .loading-word
      color: alpha(#FFFFFF, .6)

  1. 在 themse/Butterfly/source/css/var.styl 文件大约在85行添加如下代码：

    1
    2
    //preloader
    $preloader-bg = #37474f

  2. 在 themes/Butterfly/languages/zh-CN.yml 文件最后一行，添加如下代码

    1
    loading: 加载中...

  3. 将 themes/Butterfly/layout/includes/head/subtitle.pug 文件替换为如下代码（将原本的删除）

    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
    if theme.subtitle.enable
      - var source = theme.subtitle.source
      - var subtitleEffect = theme.subtitle.effect

      if subtitleEffect
        script(src=url_for(theme.CDN.typed))

      if source == '1'
        script.
          var subtitleType = function () {
            var subtitleEffect = !{ subtitleEffect }
            fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',)
              .then(function (res) {
                return res.json()
              })
              .then(function (data) {
                if (subtitleEffect) {
                  var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
                  var both = sub.unshift(data.text)
                  var typed = new Typed('#subtitle', {
                    strings: sub,
                    startDelay: 300,
                    typeSpeed: 150,
                    loop: !{theme.subtitle.loop},
                    backSpeed: 50,
                  })
                } else {
                  document.getElementById('subtitle').innerHTML = data.text
                }
              })
              .catch(function (err) {
                console.error(err)
              })
          }
          window.addEventListener('load', subtitleType)

      else if source == '2'
        script.
          var subtitleType = function () {
            var subtitleEffect = !{ subtitleEffect }
            fetch('https://v1.hitokoto.cn')
              .then(function (res) {
                return res.json()
              })
              .then(function (data) {
                if (subtitleEffect) {
                  var from = '出自 ' + data.from
                  var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
                  var both = sub.unshift(data.hitokoto, from)
                  var typed = new Typed('#subtitle', {
                    strings: sub,
                    startDelay: 300,
                    typeSpeed: 150,
                    loop: !{theme.subtitle.loop},
                    backSpeed: 50,
                  })
                } else {
                  document.getElementById('subtitle').innerHTML = data.hitokoto
                }
              })
              .catch(function (err) {
                console.error(err)
              })
          }
          window.addEventListener('load', subtitleType)

      else if source == '3'
        script.
          var subtitleType = function () {
            loadScript('http://yijuzhan.com/api/word.php?m=js', function () {
              var subtitleEffect = !{ subtitleEffect }
              var con = str[0]
              if (subtitleEffect) {
                var from = '出自 ' + str[1]
                var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
                var both = sub.unshift(con, from)
                var typed = new Typed('#subtitle', {
                  strings: sub,
                  startDelay: 300,
                  typeSpeed: 150,
                  loop: !{theme.subtitle.loop},
                  backSpeed: 50,
                })
              } else {
                document.getElementById('subtitle').innerHTML = con
              }
            })
          }
          window.addEventListener('load', subtitleType)

      else if source == '4'
        script.
          var subtitleType = function () {
            loadScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
                var subtitleEffect = !{ subtitleEffect }
                jinrishici.load(function (result) {
                  if (subtitleEffect) {
                    var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
                    var content = result.data.content
                    var both = sub.unshift(content)
                    var typed = new Typed('#subtitle', {
                      strings: sub,
                      startDelay: 300,
                      typeSpeed: 150,
                      loop: !{theme.subtitle.loop},
                      backSpeed: 50,
                    })
                  } else {
                    document.getElementById('subtitle').innerHTML = result.data.content
                  }
                })
              }
            )
          }
          window.addEventListener('load', subtitleType)

      else
        script.
          var subtitleEffect = !{subtitleEffect}
          if (subtitleEffect) { 
            var typed = new Typed("#subtitle", {
              strings: '!{theme.subtitle.sub}'.split(","),
              startDelay: 300,
              typeSpeed: 150,
              loop: !{theme.subtitle.loop},
              backSpeed: 50
            })
          } else {
            document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
          }

  4. 在主题文件 butterfly.yml 任意位置添加如下代码，启用加载动画，不启用可以设置为 false

其他主题

  1. 第一步，将以下内容添加到 标签内：

    1
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/loading.min.css">

  2. 第二步，将以下内容添加到 标签后面：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="loading-box">
      <div class="loading-left-bg"></div>
      <div class="loading-right-bg"></div>
      <div class="spinner-box">
        <div class="configure-border-1">
          <div class="configure-core"></div>
        </div>
        <div class="configure-border-2">
          <div class="configure-core"></div>
        </div>
        <div class="loading-word">加载中...</div>
      </div>
    </div>

  3. 第三步，将以下内容添加到 标签前面：

    1
    2
    3
    4
    5
    6
    7
    <script>
      var endLoading = function () {
        document.body.style.overflow = 'auto';
        document.getElementById('loading-box').classList.add("loaded");
      }
      window.addEventListener('load',endLoading);
    </script>