魔改一时爽，升级火葬场。

样式类修改

样式的的修改需要自行添加inject.css文件并在主题配置中导入。

页脚透明

在inject.css中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#footer {
	background: rgba(255, 255, 255, .15);
	color: #000;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	-webkit-backdrop-filter: saturate(100%) blur(5px);
	backdrop-filter: saturate(100%) blur(5px)
}

#footer::before {
	background: rgba(255, 255, 255, .15);
}

#footer #footer-wrap {
	color: var(--font-color);
}

#footer #footer-wrap a {
	color: var(--font-color);
}

页面渐变背景

添加如下css：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 页面背景 */

#body-wrap {
	background: linear-gradient(90deg,
		rgba(247, 149, 51, 0.1) 0,
		rgba(243, 112, 85, 0.1) 15%,
		rgba(239, 78, 123, 0.1) 30%,
		rgba(161, 102, 171, 0.1) 44%,
		rgba(80, 115, 184, 0.1) 58%,
		rgba(16, 152, 173, 0.1) 72%,
		rgba(7, 179, 155, 0.1) 86%,
		rgba(109, 186, 130, 0.1) 100%);
}

滚动条

将下面代码插入inject.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
/* 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-moz-selection {
  color: #fff;
  background-color: #49b1f5;
}

搜索框圆角

添加如下css：

1
2
3
4
5
 /* 搜索框圆角 */

.search-dialog{
	  border-radius: 10px;
  }

友链卡片

  1. 修改 [Blogroot]\themes\butterfly\layout\includes\page\flink.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
    #article-container
      if top_img === false
        h1.page-title= page.title

      if (theme.flink_style === 'butterfly')
        .flink
          if site.data.link
            each i in site.data.link
              if i.class_name
                h2!= i.class_name
              if i.class_desc
                .flink-desc!=i.class_desc
              .flink-list
                each item in i.link_list
                  .flink-list-item
                    a(href=url_for(item.link)  title=item.name target="_blank")
                      if theme.lazyload.enable
                        img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                      else
                        img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                      span.flink-item-name= item.name
                      span.flink-item-desc(title=item.descr)= item.descr
          != page.content
      else if (theme.flink_style === 'volantis')
        .flink
          if site.data.link
            each i in site.data.link
              if i.class_name
                h2!= i.class_name
              if i.class_desc
                .flink-desc!=i.class_desc
              .site-card-group
                each item in i.link_list
                  a.site-card(target='_blank' rel='noopener' href=url_for(item.link))
                    .img
                      - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
                      if theme.lazyload.enable
                        img(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
                      else
                        img(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
                    .info
                      if theme.lazyload.enable
                        img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
                      else
                        img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
                      span.title= item.name
                      span.desc(title=item.descr)= item.descr
          != page.content
      else if (theme.flink_style === 'flexcard')
        .flink
          if site.data.link
            each i in site.data.link
              if i.class_name
                h2!= i.class_name
              if i.class_desc
                .flink-desc!=i.class_desc
              .flink-list
                each item in i.link_list
                  a.flink-list-card(href=url_for(item.link) target='_blank' data-title=item.descr)
                    .wrapper.cover
                      - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
                      if theme.lazyload.enable
                        img.cover.fadeIn(data-lazy-src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
                      else
                        img.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )    
                    .info
                      if theme.lazyload.enable
                        img.flink-avatar(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
                      else
                        img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
                      span.flink-sitename= item.name
          != page.content

  2. 修改 [Blogroot]\themes\butterfly\source\css\_page\flink.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
    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
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    if hexo-config('flink_style') == 'butterfly'
      .flink#article-container
        .flink-desc
          margin: .2rem 0 .5rem

        .flink-list
          overflow: auto
          padding: 10px 10px 0
          text-align: center

          & > .flink-list-item
            position: relative
            float: left
            overflow: hidden
            margin: 15px 7px
            width: calc(100% / 3 - 15px)
            height: 90px
            border-radius: 8px
            line-height: 17px
            -webkit-transform: translateZ(0)

            +maxWidth1024()
              width: calc(50% - 15px) !important

            +maxWidth600()
              width: calc(100% - 15px) !important

            &:hover
              img
                transform: rotate(360deg)

            &:before
              position: absolute
              top: 0
              right: 0
              bottom: 0
              left: 0
              z-index: -1
              background: var(--text-bg-hover)
              content: ''
              transition: transform .3s ease-out
              transform: scale(0)

            &:hover:before,
            &:focus:before,
            &:active:before
              transform: scale(1)

            a
              color: var(--font-color)
              text-decoration: none

              img
                float: left
                margin: 15px 10px
                width: 60px
                height: 60px
                border-radius: 35px
                transition: all .3s

              .img-alt
                display: none

              .flink-item-name
                @extend .limit-one-line
                display: block
                padding: 16px 10px 0 0
                height: 40px
                font-weight: bold
                font-size: 1.43em

              .flink-item-desc
                @extend .limit-one-line
                display: block
                padding: 16px 10px 16px 0
                height: 50px
                font-size: .93em
    else if hexo-config('flink_style') == 'volantis'
      trans($time = 0.28s)
        transition: all $time ease
        -moz-transition: all $time ease
        -webkit-transition: all $time ease
        -o-transition: all $time ease
      .site-card-group
        display: flex
        flex-wrap: wrap
        justify-content: flex-start
        margin: -0.5 * 16px
        align-items: stretch
      .site-card
        margin: 16px * 0.5
        width: "calc(100% / 4 - %s)" % 16px
        @media screen and (min-width: 2048px)
            width: "calc(100% / 5 - %s)" % 16px
        @media screen and (max-width: 768px)
            width: "calc(100% / 3 - %s)" % 16px
        @media screen and (max-width: 500px)
            width: "calc(100% / 2 - %s)" % 16px
        display: block
        line-height: 1.4
        height 100%
        .img
          width: 100%
          height 120px
          @media screen and (max-width: 500px)
            height 100px
          overflow: hidden
          border-radius: 12px * 0.5
          box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
          background: #f6f6f6
          img
            width: 100%
            height 100%
            // trans(.75s)
            transition: transform 2s ease
            object-fit: cover

        .info
          margin-top: 16px * 0.5
          img
            width: 32px
            height: 32px
            border-radius: 16px
            float: left
            margin-right: 8px
            margin-top: 2px
          span
            display: block
          .title
            font-weight: 600
            font-size: $fontsize-list
            color: #444
            display: -webkit-box
            -webkit-box-orient: vertical
            overflow: hidden
            -webkit-line-clamp: 1
            trans()
          .desc
            font-size: $fontsize-footnote
            word-wrap: break-word;
            line-height: 1.2
            color: #888
            display: -webkit-box
            -webkit-box-orient: vertical
            overflow: hidden
            -webkit-line-clamp: 2
        .img
          trans()
        &:hover
          .img
            box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
          .info .title
            color: #ff5722
    else if hexo-config('flink_style') == 'flexcard'
      #article-container img
            margin 0 auto!important
      .flink-list
        overflow auto
        & > a
          width calc(25% - 15px)
          height 130px
          position relative
          display block
          margin 15px 7px
          float left
          overflow hidden
          border-radius 10px
          transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
          box-shadow 0 14px 38px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .06)
          &:hover
            .info
              transform translateY(-100%)
            .wrapper
              img
                transform scale(1.2)
            &:before
              position: fixed
              width:inherit
              margin:auto
              left:0
              right:0
              top:10%
              border-radius: 10px
              text-align: center
              z-index: 100
              content: attr(data-title)
              font-size: 20px
              color: #fff
              padding: 10px
              background-color: rgba($theme-color,0.8)
          .cover
            width 100%
            transition transform .5s ease-out
          .wrapper
            position relative
            .fadeIn
              animation coverIn .8s ease-out forwards
            img
              height 130px
              pointer-events none
          .info
            display flex
            flex-direction column
            justify-content center
            align-items center
            width 100%
            height 100%
            overflow hidden
            border-radius 3px
            background-color hsla(0, 0%, 100%, .7)
            transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
            img
              position relative
              top 22px //因为字体大小不同，可能导致头像偏高，可以在此处通过修改top的值来微调头像框的位置至卡片正中。
              width 66px
              height 66px
              border-radius 50%
              box-shadow 0 0 10px rgba(0, 0, 0, .3)
              z-index 1
              text-align center
              pointer-events none
            span
              padding 20px 10% 60px 10%
              font-size 16px
              width 100%
              text-align center
              box-shadow 0 0 10px rgba(0, 0, 0, .3)
              background-color hsla(0, 0%, 100%, .7)
              color var(--font-color)
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
      .flink-list>a .info,
      .flink-list>a .wrapper .cover
        position absolute
        top 0
        left 0

      @media screen and (max-width:1024px)
        .flink-list
          & > a
            width calc(33.33333% - 15px)

      @media screen and (max-width:600px)
        .flink-list
          & > a
            width calc(50% - 15px)

      [data-theme=dark]
        .flink-list a .info,
        .flink-list a .info span
          background-color rgba(0, 0, 0, .6)
        .flink-list
          & > a
            &:hover
              &:before
                background-color: rgba(#121212,0.8);

  3. 因为 Volantis 的 site-card 比 Butterfly 的 flink-card 多出了一个站点缩略图，所以需要再额外添加一条配置项。修改 [Blogroot]\source\_data\link.yml, 添加一条名为 siteshot 的配置项。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    - class_name: 糖果屋のVIP
      class_desc: 售后服务享五折优惠2333
      link_list:
        - name: Akilar
          link: https://akilar.top
          avatar: https://akilar.top/img/siteicon/favicon.png
          descr: 欢迎光临糖果屋
          siteshot: https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg
          # siteshot就是站点缩略图的链接。

  4. 在 [Blogroot]\_config.butterfly.yml 中添加配置项：

    1
    2
    # 友链样式，butterfly为默认样式，volantis为站点卡片样式.flexcard为弹性卡片样式
    flink_style: flexcard # butterfly | volantis | flexcard

导航栏背景模糊

这个简单，添加CSS：

1
2
3
4
5
/* 导航栏背景模糊 */

#page-header.nav-visible #nav{
	backdrop-filter: blur(10px);
}

仿Waline评论样式修改(原创)

在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
 /* Twikoo评论美化 */

 .tk-submit{
border: #90939950 dashed 1px!important;
padding: 15px;
border-radius: 10px;
 }

 .el-textarea__inner {
  min-height: 200px!important;
  background-image: url("https://cdn.jsdelivr.net/gh/skyilz/CDN@master/img/comment_bg.png")!important;
  background-position: right bottom!important;
  background-repeat: no-repeat!important;
  border: none!important;
 }

 .el-textarea__inner:focus{
  background-image: none!important;
 }

 .el-input-group__prepend{
  background: transparent!important;
  border: none!important;
  border-bottom: #90939950 dashed 1px!important;
 }

 .el-input__inner{
background: transparent!important;
border: none!important;
border-bottom: #90939950 dashed 1px!important;
 }

 .el-input__inner:focus{
  border-color: #409eff!important;
 }

功能拓展类修改

volantis 主题的 note 标签

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
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
/* snote夜间模式 */
[data-theme="dark"] .snote {
  color: #4c4948;
}
[data-theme="dark"] .snote {
  filter: brightness(0.7);
}

div.tabs div.snote{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* TAG 小标签 */
.snote {
  position: relative;
  margin: 0 0 1rem;
  padding: 15px;
  border: initial;
  border-left: 5px solid #eee;
  background-color: #f9f9f9;
  border-radius: 3px;
}

.snote h2,
.snote h3,
.snote h4,
.snote h5,
.snote h6 {
  margin-top: 3px;
  margin-bottom: 0;
  padding-top: 0 !important;
  border-bottom: initial;
}
.snote p:first-child,
.snote ul:first-child,
.snote ol:first-child,
.snote table:first-child,
.snote pre:first-child,
.snote blockquote:first-child,
.snote img:first-child {
  margin-top: 0 !important;
}
.snote p:last-child,
.snote ul:last-child,
.snote ol:last-child,
.snote table:last-child,
.snote pre:last-child,
.snote blockquote:last-child,
.snote img:last-child {
  margin-bottom: 0 !important;
}
.snote:not(.no-icon) {
  padding-left: 45px;
}
.snote:not(.no-icon)::before {
  position: absolute;
  top: 13px;
  left: 15px;
  font-size: larger;
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
}
.snote.default {
  background-color: #f7f7f7;
  border-left-color: #777;
}
.snote.default h2,
.snote.default h3,
.snote.default h4,
.snote.default h5,
.snote.default h6 {
  color: #777;
}
.snote.default:not(.no-icon)::before {
  content: "\f0a9";
  color: #777;
}
.snote.primary {
  background-color: #f5f0fa;
  border-left-color: #6f42c1;
}
.snote.primary h2,
.snote.primary h3,
.snote.primary h4,
.snote.primary h5,
.snote.primary h6 {
  color: #6f42c1;
}
.snote.primary:not(.no-icon)::before {
  content: "\f055";
  color: #6f42c1;
}
.snote.info {
  background-color: #eef7fa;
  border-left-color: #428bca;
}
.snote.info h2,
.snote.info h3,
.snote.info h4,
.snote.info h5,
.snote.info h6 {
  color: #428bca;
}
.snote.info:not(.no-icon)::before {
  content: "\f05a";
  color: #428bca;
}
.snote.success {
  background-color: #eff8f0;
  border-left-color: #5cb85c;
}
.snote.success h2,
.snote.success h3,
.snote.success h4,
.snote.success h5,
.snote.success h6 {
  color: #5cb85c;
}
.snote.success:not(.no-icon)::before {
  content: "\f058";
  color: #5cb85c;
}
.snote.warning {
  background-color: #fdf8ea;
  border-left-color: #f0ad4e;
}
.snote.warning h2,
.snote.warning h3,
.snote.warning h4,
.snote.warning h5,
.snote.warning h6 {
  color: #f0ad4e;
}
.snote.warning:not(.no-icon)::before {
  content: "\f06a";
  color: #f0ad4e;
}
.snote.danger {
  background-color: #fcf1f2;
  border-left-color: #d9534f;
}
.snote.danger h2,
.snote.danger h3,
.snote.danger h4,
.snote.danger h5,
.snote.danger h6 {
  color: #d9534f;
}
.snote.danger:not(.no-icon)::before {
  content: "\f056";
  color: #d9534f;
}

div.snote {
  position: relative;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.6rem 16px 0.5rem 16px;
  padding-left: calc(16px + 16px);
  border-radius: 4px;
  background: #f6f6f6;
  border-left: 4px solid #767676;
}
div.snote h2,
div.snote h3,
div.snote h4,
div.snote h5,
div.snote h6 {
  margin-top: 3px;
  margin-bottom: 0;
  padding-top: 0 !important;
  border-bottom: initial;
}
div.snote p,
div.snote ul,
div.snote ol,
div.snote blockquote,
div.snote img {
  font-size: 14px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
div.snote::before {
  position: absolute;
  top: calc(50% - 24px * 0.5);
  left: 4px;
  width: 24px;
  height: 24px;
  text-align: center;
  font-weight: 600;
  line-height: 24px;
  vertical-align: middle;
  font-family: "Font Awesome 5 Free";
}
div.snote::before {
  color: #767676;
  content: "\f054";
}
div.snote::before {
  content: "\f054";
}
div.snote.quote {
  background: #e8f4fd;
  border-color: #2196f3;
}
div.snote.quote::before {
  color: #2196f3;
  content: "\f10d";
}
div.snote.info {
  background: #e8f4fd;
  border-color: #2196f3;
}
div.snote.info::before {
  color: #2196f3;
  content: "\f129";
}
div.snote.success,
div.snote.done {
  background: #ebf9ed;
  border-color: #3dc550;
}
div.snote.success::before,
div.snote.done::before {
  color: #3dc550;
  content: "\f00c";
}
div.snote.warning {
  background: #fff8e9;
  border-color: #ffbd2b;
}
div.snote.warning::before {
  color: #ffbd2b;
  content: "\f12a";
}
div.snote.danger,
div.snote.error {
  background: #feefee;
  border-color: #fe5f58;
}
div.snote.danger::before,
div.snote.error::before {
  color: #fe5f58;
  content: "\f00d";
}
div.snote.radiation::before {
  content: "\f7b9";
}
div.snote.bug::before {
  content: "\f188";
}
div.snote.idea::before {
  content: "\f0eb";
}
div.snote.link::before {
  content: "\f0c1";
}
div.snote.paperclip::before {
  content: "\f0c6";
}
div.snote.todo::before {
  content: "\f0ae";
}
div.snote.message::before {
  content: "\f4ad";
}
div.snote.guide::before {
  content: "\f277";
}
div.snote.download::before {
  content: "\f019";
}
div.snote.up::before {
  content: "\f102";
}
div.snote.undo::before {
  content: "\f2ea";
}
div.snote.play::before {
  content: "\f144";
}
div.snote.clear {
  background: none;
  border-color: none;
}
div.snote.light {
  background: #f6f6f6;
  border-color: #aaa;
}
div.snote.light::before {
  color: #aaa;
}
div.snote.gray {
  background: #f6f6f6;
  border-color: #767676;
}
div.snote.gray::before {
  color: #767676;
}
div.snote.red {
  background: #feefee;
  border-color: #fe5f58;
}
div.snote.red::before {
  color: #fe5f58;
}
div.snote.yellow {
  background: #fff8e9;
  border-color: #ffbd2b;
}
div.snote.yellow::before {
  color: #ffbd2b;
}
div.snote.green {
  background: #ebf9ed;
  border-color: #3dc550;
}
div.snote.green::before {
  color: #3dc550;
}
div.snote.cyan {
  background: #e8fafe;
  border-color: #1bcdfc;
}
div.snote.cyan::before {
  color: #1bcdfc;
}
div.snote.blue {
  background: #e8f4fd;
  border-color: #2196f3;
}
div.snote.blue::before {
  color: #2196f3;
}

volantis 主题的时间线标签

添加如下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
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
/* TAG Link */

#post a.link-card {
  text-decoration: none;
  margin: 0.2rem auto;
  background: var(--tab-botton-bg);
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font-size: 0.575rem;
  min-width: 200px;
  max-width: 361px;
  color: var(--tab-botton-color);
  border-radius: 8px;
}
@media screen and (max-width: 425px) {
  #post a.link-card {
    max-width: 100%;
  }
}
@media screen and (max-width: 375px) {
  #post a.link-card {
    width: 100%;
  }
}
#post a.link-card:hover {
  box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.1);
}
#post a.link-card div.left,
#post a.link-card div.right {
  pointer-events: none;
}
#post a.link-card div.left {
  width: 48px;
  height: 48px;
  margin: 12px;
  overflow: hidden;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
}
#post a.link-card div.left i {
  font-size: 32px;
  line-height: 48px;
  margin-left: 4px;
}
#post a.link-card div.left img {
  display: block;
  position: absolute;
  border-radius: 8px/4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#post a.link-card div.right {
  overflow: hidden;
  margin-right: 12px;
}
#post a.link-card p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#post a.link-card p.text {
  font-weight: bold;
}
#post a.link-card p.url {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: var(--search-input-color);
  font-size: 0.7125rem;
}
/* TAG 时间线 */
span.p.h2,
p.p.h2 {
  font-size: 1.375rem;
  color: var(--font-color);
  padding-top: 0.8rem;
  border-bottom: 1px solid var(--hr-border);
}
div.timenode {
  position: relative;
}
div.timenode:before,
div.timenode:after {
  content: "";
  z-index: 1;
  position: absolute;
  background: rgba(68, 215, 182, 0.5);
  width: 2px;
  left: 7px;
}
div.timenode:before {
  top: 0px;
  height: 6px;
}
div.timenode:after {
  top: 26px;
  height: calc(100% - 26px);
}
div.timenode:last-child:after {
  height: calc(100% - 26px - 16px);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
div.timenode .meta {
  position: relative;
  color: var(--tab-botton-color);
  font-size: 0.375rem;
  line-height: 32px;
  height: 32px;
  left: 27px;
}
div.timenode .meta:before,
div.timenode .meta:after {
  content: "";
  position: absolute;
  top: 8px;
  z-index: 2;
  left: -27px;
}
div.timenode .meta:before {
  background: rgba(68, 215, 182, 0.5);
  width: 16px;
  height: 16px;
  border-radius: 8px;
}
div.timenode .meta:after {
  background: #44d7b6;
  margin-left: 2px;
  margin-top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  transform: scale(0.5);
  transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
}
div.timenode .meta p {
  font-weight: bold;
  margin: 0 0 0 24px;
}
div.timenode .body {
  margin: 4px 0 16px 24px;
  padding: 16px;
  border-radius: 8px;
  background: var(--blockquote-bg);
}
div.timenode .body p:first-child {
  margin-top: 0;
}
div.timenode .body p:last-child {
  margin-bottom: 0;
}
div.timenode:hover .meta {
  color: var(--text-highlight-color);
}
div.timenode:hover .meta:before {
  background: rgba(255, 87, 34, 0.5);
}
div.timenode:hover .meta:after {
  background: #ff5722;
  transform: scale(1);
}

页面逻辑类修改

顶部导航条常显

修改main.js文件,从第323行做如下修改：

1
2
3
4
5
6
7
8
9
      const isDown = scrollDirection(currentTop)
+     if(isDown) $header.classList.add('nav-visible','nav-fixed')
      if (currentTop > 56) {
        if (isDown) {
-       if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
          if (isChatBtnShow && isChatShow === true) {
            chatBtnHide()
            isChatShow = false
          }

内容参考

本篇魔改参考了以下魔改文章，特此注明。