Butterfly主题优化

本文最后更新于：2 分钟前

关于Butterfly主题的一些魔改，由于主题版本更新迭代，可能部分方法已经不适用，仅供参考

优化文章链接

Hexo默认使用的文章永久链接格式是：

1
year/:month/:day/:title/

这种链接，如果遇上个中文标题，简直要爆炸，在分享时会出现乱码问题。

这种方式不仅导致链接变得非常长，而且一旦修改文章发布日期或者标题，链接立马失效，造成大量死链

解决方法

安装abbrlink插件

在博客根目录下执行以下代码

1
npm install hexo-abbrlink --save

安装完成后编辑站点配置文件，修改如下配置

1
2
3
4
5
6
#permalink: :year/:month/:day/:title/
#permalink_defaults:
permalink: posts/:abbrlink/
abbrlink:
  alg: crc32 #support crc16(default) and crc32
  rep: dec   #support dec(default) and hex

重新生成部署即可

加入哔哩哔哩番剧页面插件

效果

实例效果

安装插件

1
npm install hexo-bilibili-bangumi --save

更新插件

1
npm install hexo-bilibili-bangumi --update --save

修改站点配置文件

1
2
3
4
5
6
7
8
bangumi:
  enable: true 
  path: 
  vmid: 
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  loading:
  • enable: 是否启用
  • path: 番剧页面路径，默认 bangumis/index.html
  • vmid: 哔哩哔哩番剧页面的 vmid(uid), https://space.bilibili.com/ 通过这个链接获取
  • title: 该页面的标题
  • quote: 写在页面开头的一段话，支持 html 语法
  • show: 初始显示页面：0: 想看 , 1: 在看 , 2: 看过，默认为 1
  • loading: 图片加载完成前的 loading 图片

创建一个页面

1
hexo new page bangumis

编辑这个页面的index.md文件，加入type

1
2
3
4
5
---
title: 番剧
date: 2020-06-01 08:06:18
type: "bangumis"
---

如果哔哩哔哩上面的番剧进行了更新，需要用

1
hexo bangumi -u

执行番剧的更新

删除数据

1
hexo bangumi -d

参考自Hexo哔哩哔哩番剧页面插件

添加音乐页面

效果

实例页面

安装插件

1
2
3
npm install aplayer

npm install --save hexo-tag-aplayer

创建页面

1
hexo new page music

修改index.md文件，加入type

1
2
3
4
5
---
title: 音乐
date: 2020-05-29 13:51:08
type: "music"
---

然后加入以下代码，即可实现效果

1
2
3
4
5
6
7
8
<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8" /> 		<title></title>	 	<!-- require APlayer --> 	
    <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"></script> 	<!-- require MetingJS --> 
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script> 	</head> 
    <body>  
        <meting-js server="netease" type="playlist" id="你的网易云歌单id"></meting-js> 		 	</body>
</html>

文章统计图表

详情

标签页

分类页

归档页

安装插件

1
npm install hexo-charts -S

归档页面

在主题目录/Butterfly/layout/archive.pug文件的#archive下面添加一行#posts-chart, 新添加的比上一行多缩进两个空格

1
2
3
4
block content
  include ./includes/mixins/article-sort.pug
  #archive
    #posts-chart

标签和分类页

编辑主题目录/Butterfly/layout/page.pug文件，在.tag-cloud下面添加一行#tags-chart，在.category-content下面添加一行#categories-chart，新添加的比上一行多缩进两个空格。

1
2
3
4
block content
  if page.type === 'tags'
    .tag-cloud
      #tags-chart
1
2
3
else if page.type === 'categories'
  .category-content
    #categories-chart

此功能参考自一个懒人的博客

Valine添加标签及图标

参考一个懒人的博客

解决Valine自动唤醒失败问题

参考小康博客

添加说说功能

具体实现效果可以去官方文档查看

优化移动端显示

参考自 乐特博客

标签

标签内容来自 小康博客

自定义小标签

默认red

quote

info

done

success

danger

error

radiation

bug

idea-yellow

link- blue

paperclip

todo

msg cyan

guide

download

up

undo

小标题

使用neat压缩

在博客根目录下执行

1
npm install hexo-neat --save

在站点配置文件加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
neat_enable: true
neat_html:
  enable: true
  exclude:
neat_css:
  enable: true
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

hexo-offline-popup

以下代码来自于 Colsrch’s blog

hexo-offline-popup 是一个 hexo 插件， 它可加速你的Hexo网站的加载速度，以及网站内容更新弹窗提示。

  1. 使用

    在博客根目录安装插件

    1
    npm i hexo-offline-popup --save

  2. 在博客根目录的_config.yml中添加如下配置

    1
    2
    3
    4
    5
    6
    7
    # offline config passed to sw-precache.
    service_worker:
      maximumFileSizeToCacheInBytes: 5242880
      staticFileGlobs:
      - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
      stripPrefix: public
      verbose: false

侧边栏的github-badge

以下代码来自于卓越科技的Blog

具体效果：

  • 在 themes\Butterfly\source\css 文件夹新建 custom.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
.github-badge {
    display:inline-block;
    border-radius:4px;
    text-shadow:none;
    font-size:13px;
    color:#fff;
    line-height:15px;
    margin-bottom:5px;
}
.github-badge a{
    display: inline-block;
    margin: 0 1px 5px;
}
.github-badge .badge-subject {
    display:inline-block;
    background-color:#4D4D4D;
    padding:4px 4px 4px 6px;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}
.github-badge .badge-value {
    display:inline-block;
    padding:4px 6px 4px 4px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
.github-badge .bg-brightgreen {
    background-color:#4DC820 !important;
}
.github-badge .bg-orange {
    background-color:#FFA500 !important;
}
.github-badge .bg-yellow {
    background-color:#D8B024 !important;
}
.github-badge .bg-blueviolet {
    background-color:#8833D7 !important;
}
.github-badge .bg-pink {
    background-color:#F26BAE !important;
}
.github-badge .bg-red {
    background-color:#e05d44 !important;
}
.github-badge .bg-blue {
    background-color:#007EC6 !important;
}
.github-badge .bg-lightgrey {
    background-color:#9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color:#555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color:#9f9f9f !important;
}
  • 在 butterfly.yml、card_announcement 下 content 中添加
1
<div class="item-headline" style="margin:10px 0"><i class="fas fa-laptop card-announcement-animation"></i><span>关于本站</span></div><div class="github-badge"><a style="color:#fff" href="https://hexo.io/" target="_blank" title="由 Hexo 强力驱动"><span class="badge-subject">Powered</span><span class="badge-value bg-blue">Hexo5.0.0</span></a><a style="color:#fff" href="https://github.com/" target="_blank" title="静态网页托管于 Github" ><span class="badge-subject">Hosted</span><span class="badge-value bg-brightgreen">Github</span><a style="color:#fff" href="https://www.jsdelivr.com/" target="_blank" title="jsDelivr 提供 CDN 加速服务" ><span class="badge-subject">CDN</span><span class="badge-value bg-orange">jsDelivr</span></a><a style="color:#fff" href="https://github.com/jerryc127/hexo-theme-butterfly" target="_blank" title="站点使用 Butterfly 3.0.0-rc2 主题" ><span class="badge-subject">Theme</span><span class="badge-value bg-blue">Butterfly 3.0.0-rc2</span></a><a style="color:#fff" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="本站点采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可"><span class="badge-subject"><i class="fa fa-copyright"></i></span><span class="badge-value bg-lightgrey">BY-NC-SA 4.0</span></a></div>

具体可以到我的侧边栏查看

添加当前访问用户

以下代码来自于卓越科技的Blog

  1. 在 themes\Butterfly\source\css 下创建 tag.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
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    601
    602
    603
    604
    605
    606
    607
    608
    609
    610
    611
    612
    613
    614
    615
    616
    617
    618
    619
    620
    621
    622
    623
    624
    625
    626
    627
    628
    629
    630
    631
    632
    633
    634
    635
    636
    637
    638
    639
    640
    641
    642
    643
    644
    645
    646
    647
    648
    649
    650
    651
    652
    653
    654
    655
    656
    657
    658
    659
    660
    661
    662
    663
    664
    665
    666
    667
    668
    669
    670
    671
    672
    673
    674
    675
    676
    677
    678
    679
    680
    681
    682
    683
    684
    685
    686
    687
    688
    689
    690
    691
    692
    693
    694
    695
    696
    697
    698
    699
    700
    701
    702
    703
    704
    705
    706
    707
    708
    709
    710
    711
    712
    713
    714
    715
    716
    717
    718
    719
    720
    721
    722
    723
    724
    725
    726
    727
    728
    729
    730
    731
    732
    733
    734
    735
    736
    737
    738
    739
    740
    741
    742
    743
    744
    745
    746
    747
    748
    749
    750
    751
    752
    753
    754
    755
    756
    757
    758
    759
    760
    761
    762
    763
    764
    765
    766
    767
    768
    769
    770
    771
    772
    773
    774
    775
    776
    777
    778
    779
    780
    781
    782
    783
    784
    785
    786
    787
    788
    789
    790
    791
    792
    793
    794
    795
    796
    797
    798
    799
    800
    801
    802
    803
    804
    805
    806
    807
    808
    809
    810
    811
    812
    813
    814
    815
    816
    817
    818
    819
    span.btn {
        display: inline;
    }

    span.btn > a {
        display: inline-block;
        background: #2196f3;
        color: #fff;
        padding: 4px 4px 2px 4px;
        margin: 2px;
        line-height: 1.1;
        border-radius: 2px;
        transition: all .28s ease;
        -moz-transition: all .28s ease;
        -webkit-transition: all .28s ease;
        -o-transition: all .28s ease;
    }

    span.btn > a i {
        margin-right: 2px;
    }

    span.btn > a:hover {
        color: #fff;
        background: #ff5722;
    }

    span.btn > a:not([href]) {
        opacity: .5;
    }

    span.btn > a:not([href]):hover {
        cursor: not-allowed;
    }

    span.btn.regular > a {
        padding: 8px 12px 6px 12px;
    }

    span.btn.regular > a i {
        margin-right: 4px;
    }

    span.btn.large > a {
        padding: 12px 36px 10px 36px;
    }

    span.btn.large > a i {
        margin-right: 8px;
    }

    span.btn.center {
        display: block;
        text-align: center;
    }

    [data-theme="dark"] div.btns {
        filter: brightness(0.7);
    }

    [data-theme="dark"] div.btns a {
        background: 0 0;
    }

    div.btns {
        margin: 0 -8px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        overflow: visible;
        line-height: 1.8;
    }

    div.btns, div.btns p, div.btns a {
        font-size: .8125rem;
        color: #555;
    }

    div.btns b {
        font-size: .875rem;
    }

    div.btns.wide > a {
        padding-left: 32px;
        padding-right: 32px;
    }

    div.btns.fill > a {
        flex-grow: 1;
        width: auto;
    }

    div.btns.around {
        justify-content: space-around
    }

    div.btns.center {
        justify-content: center
    }

    div.btns.grid2 > a {
        width: calc(100% / 2 - 16px);
    }

    @media screen and (max-width: 1024px) {
        div.btns.grid2 > a {
            width: calc(100% / 2 - 16px);
        }
    }

    @media screen and (max-width: 768px) {
        div.btns.grid2 > a {
            width: calc(100% / 2 - 16px);
        }
    }

    @media screen and (max-width: 500px) {
        div.btns.grid2 > a {
            width: calc(100% / 1 - 16px);
        }
    }

    div.btns.grid3 > a {
        width: calc(100% / 3 - 16px);
    }

    @media screen and (max-width: 1024px) {
        div.btns.grid3 > a {
            width: calc(100% / 3 - 16px);
        }
    }

    @media screen and (max-width: 768px) {
        div.btns.grid3 > a {
            width: calc(100% / 3 - 16px);
        }
    }

    @media screen and (max-width: 500px) {
        div.btns.grid3 > a {
            width: calc(100% / 1 - 16px);
        }
    }

    div.btns.grid4 > a {
        width: calc(100% / 4 - 16px);
    }

    @media screen and (max-width: 1024px) {
        div.btns.grid4 > a {
            width: calc(100% / 3 - 16px);
        }
    }

    @media screen and (max-width: 768px) {
        div.btns.grid4 > a {
            width: calc(100% / 3 - 16px);
        }
    }

    @media screen and (max-width: 500px) {
        div.btns.grid4 > a {
            width: calc(100% / 2 - 16px);
        }
    }

    div.btns.grid5 > a {
        width: calc(100% / 5 - 16px);
    }

    @media screen and (max-width: 1024px) {
        div.btns.grid5 > a {
            width: calc(100% / 4 - 16px);
        }
    }

    @media screen and (max-width: 768px) {
        div.btns.grid5 > a {
            width: calc(100% / 3 - 16px);
        }
    }

    @media screen and (max-width: 500px) {
        div.btns.grid5 > a {
            width: calc(100% / 2 - 16px);
        }
    }

    div.btns a {
        transition: all .28s ease;
        -moz-transition: all .28s ease;
        -webkit-transition: all .28s ease;
        -o-transition: all .28s ease;
        margin: 8px;
        margin-top: calc(1.25 * 16px + 32px);
        min-width: 120px;
        font-weight: bold;
        display: flex;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
        flex-direction: column;
        padding: 8px;
        text-align: center;
        background: #f6f6f6;
        border-radius: 4px;
    }

    div.btns a > img:first-child, div.btns a > i:first-child {
        transition: all .28s ease;
        -moz-transition: all .28s ease;
        -webkit-transition: all .28s ease;
        -o-transition: all .28s ease;
        height: 64px;
        width: 64px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
        margin: 16px 8px 4px 8px;
        margin-top: calc(-1.25 * 16px - 32px);
        border: 2px solid #fff;
        background: #fff;
        line-height: 60px;
        font-size: 28px;
    }

    div.btns a > img:first-child.auto, div.btns a > i:first-child.auto {
        width: auto
    }

    div.btns a > i:first-child {
        color: #fff;
        background: #2196f3;
    }

    div.btns a p, div.btns a b {
        margin: .25em;
        font-weight: normal;
        line-height: 1.25;
        word-wrap: break-word;
    }

    div.btns a b {
        font-weight: bold;
        line-height: 1.3;
    }

    div.btns a img {
        margin: .4em auto;
    }

    div.btns a:not([href]) {
        cursor: default;
        color: inherit;
    }

    div.btns a[href]:hover {
        background: rgba(255, 87, 34, 0.15);
    }

    div.btns a[href]:hover, div.btns a[href]:hover b {
        color: #ff5722;
    }

    div.btns a[href]:hover > img:first-child, div.btns a[href]:hover > i:first-child {
        transform: scale(1.1) translateY(-8px);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    }

    div.btns a[href]:hover > i:first-child {
        background: #ff5722;
    }

    div.btns.circle a > img:first-child, div.btns.circle a > i:first-child {
        border-radius: 32px;
    }

    div.btns.rounded a > img:first-child, div.btns.rounded a > i:first-child {
        border-radius: 16px;
    }

    [data-theme="dark"] .checkbox {
        filter: brightness(0.7);
    }

    .checkbox {
        display: flex;
        align-items: center;
    }

    .checkbox input {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
        position: relative;
        height: 16px;
        width: 16px;
        transition: all .15s ease-out 0s;
        cursor: pointer;
        display: inline-block;
        outline: none;
        border-radius: 2px;
        flex-shrink: 0;
        margin-right: 8px;
    }

    .checkbox input[type=checkbox]:before, .checkbox input[type=checkbox]:after {
        position: absolute;
        content: "";
        background: #fff;
    }

    .checkbox input[type=checkbox]:before {
        left: 1px;
        top: 5px;
        width: 0;
        height: 2px;
        transition: all .2s ease-in;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }

    .checkbox input[type=checkbox]:after {
        right: 7px;
        bottom: 3px;
        width: 2px;
        height: 0;
        transition: all .2s ease-out;
        transform: rotate(40deg);
        -webkit-transform: rotate(40deg);
        -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        -o-transform: rotate(40deg);
        transition-delay: .25s;
    }

    .checkbox input[type=checkbox]:checked:before {
        left: 0;
        top: 7px;
        width: 6px;
        height: 2px;
    }

    .checkbox input[type=checkbox]:checked:after {
        right: 3px;
        bottom: 1px;
        width: 2px;
        height: 10px;
    }

    .checkbox.minus input[type=checkbox]:before {
        transform: rotate(0);
        left: 1px;
        top: 5px;
        width: 0;
        height: 2px;
    }

    .checkbox.minus input[type=checkbox]:after {
        transform: rotate(0);
        left: 1px;
        top: 5px;
        width: 0;
        height: 2px;
    }

    .checkbox.minus input[type=checkbox]:checked:before {
        left: 1px;
        top: 5px;
        width: 10px;
        height: 2px;
    }

    .checkbox.minus input[type=checkbox]:checked:after {
        left: 1px;
        top: 5px;
        width: 10px;
        height: 2px;
    }

    .checkbox.plus input[type=checkbox]:before {
        transform: rotate(0);
        left: 1px;
        top: 5px;
        width: 0;
        height: 2px;
    }

    .checkbox.plus input[type=checkbox]:after {
        transform: rotate(0);
        left: 5px;
        top: 1px;
        width: 2px;
        height: 0;
    }

    .checkbox.plus input[type=checkbox]:checked:before {
        left: 1px;
        top: 5px;
        width: 10px;
        height: 2px;
    }

    .checkbox.plus input[type=checkbox]:checked:after {
        left: 5px;
        top: 1px;
        width: 2px;
        height: 10px;
    }

    .checkbox.times input[type=checkbox]:before {
        transform: rotate(45deg);
        left: 3px;
        top: 1px;
        width: 0;
        height: 2px;
    }

    .checkbox.times input[type=checkbox]:after {
        transform: rotate(135deg);
        right: 3px;
        top: 1px;
        width: 0;
        height: 2px;
    }

    .checkbox.times input[type=checkbox]:checked:before {
        left: 1px;
        top: 5px;
        width: 10px;
        height: 2px;
    }

    .checkbox.times input[type=checkbox]:checked:after {
        right: 1px;
        top: 5px;
        width: 10px;
        height: 2px;
    }

    .checkbox input[type=radio] {
        border-radius: 50%;
    }

    .checkbox input[type=radio]:before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin: 2px;
        transform: scale(0);
        transition: all .25s ease-out;
    }

    .checkbox input[type=radio]:checked:before {
        transform: scale(1);
    }

    .checkbox input {
        border: 2px solid #2196f3;
    }

    .checkbox input[type=checkbox]:checked {
        background: #2196f3;
    }

    .checkbox input[type=radio]:checked:before {
        background: #2196f3;
    }

    .checkbox.red input {
        border-color: #fe5f58;
    }

    .checkbox.red input[type=checkbox]:checked {
        background: #fe5f58;
    }

    .checkbox.red input[type=radio]:checked:before {
        background: #fe5f58;
    }

    .checkbox.green input {
        border-color: #3dc550;
    }

    .checkbox.green input[type=checkbox]:checked {
        background: #3dc550;
    }

    .checkbox.green input[type=radio]:checked:before {
        background: #3dc550;
    }

    .checkbox.yellow input {
        border-color: #ffbd2b;
    }

    .checkbox.yellow input[type=checkbox]:checked {
        background: #ffbd2b;
    }

    .checkbox.yellow input[type=radio]:checked:before {
        background: #ffbd2b;
    }

    .checkbox.cyan input {
        border-color: #1bcdfc;
    }

    .checkbox.cyan input[type=checkbox]:checked {
        background: #1bcdfc;
    }

    .checkbox.cyan input[type=radio]:checked:before {
        background: #1bcdfc;
    }

    .checkbox.blue input {
        border-color: #2196f3;
    }

    .checkbox.blue input[type=checkbox]:checked {
        background: #2196f3;
    }

    .checkbox.blue input[type=radio]:checked:before {
        background: #2196f3;
    }

    .checkbox p {
        display: inline-block;
        margin-top: 2px !important;
        margin-bottom: 0 !important;
    }

    [data-theme="dark"] details {
        filter: brightness(0.7);
    }

    details {
        display: block;
        padding: 16px;
        margin: .5rem 0;
        border-radius: 4px;
        font-size: .7375rem;
        transition: all .28s ease;
        -moz-transition: all .28s ease;
        -webkit-transition: all .28s ease;
        -o-transition: all .28s ease;
        border: 1px solid #f6f6f6;
    }

    details summary {
        cursor: pointer;
        padding: 16px;
        margin: -16px;
        border-radius: 4px;
        color: rgba(85, 85, 85, 0.7);
        font-size: .7375rem;
        font-weight: bold;
        position: relative;
        line-height: normal;
    }

    details summary > p, details summary > h1, details summary > h2, details summary > h3, details summary > h4, details summary > h5, details summary > h6 {
        display: inline;
        border-bottom: none !important;
    }

    details summary:hover {
        color: #555;
    }

    details summary:hover:after {
        position: absolute;
        content: '+';
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
    }

    details > summary {
        background: #f6f6f6;
    }

    details[blue] {
        border-color: #e8f4fd;
    }

    details[blue] > summary {
        background: #e8f4fd;
    }

    details[cyan] {
        border-color: #e8fafe;
    }

    details[cyan] > summary {
        background: #e8fafe;
    }

    details[green] {
        border-color: #ebf9ed;
    }

    details[green] > summary {
        background: #ebf9ed;
    }

    details[yellow] {
        border-color: #fff8e9;
    }

    details[yellow] > summary {
        background: #fff8e9;
    }

    details[red] {
        border-color: #feefee;
    }

    details[red] > summary {
        background: #feefee;
    }

    details[open] {
        border-color: rgba(85, 85, 85, 0.2);
    }

    details[open] > summary {
        border-bottom: 1px solid rgba(85, 85, 85, 0.2);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    details[open][blue] {
        border-color: rgba(33, 150, 243, 0.3);
    }

    details[open][blue] > summary {
        border-bottom-color: rgba(33, 150, 243, 0.3);
    }

    details[open][cyan] {
        border-color: rgba(27, 205, 252, 0.3);
    }

    details[open][cyan] > summary {
        border-bottom-color: rgba(27, 205, 252, 0.3);
    }

    details[open][green] {
        border-color: rgba(61, 197, 80, 0.3);
    }

    details[open][green] > summary {
        border-bottom-color: rgba(61, 197, 80, 0.3);
    }

    details[open][yellow] {
        border-color: rgba(255, 189, 43, 0.3);
    }

    details[open][yellow] > summary {
        border-bottom-color: rgba(255, 189, 43, 0.3);
    }

    details[open][red] {
        border-color: rgba(254, 95, 88, 0.3);
    }

    details[open][red] > summary {
        border-bottom-color: rgba(254, 95, 88, 0.3);
    }

    details[open] > summary {
        color: #555;
        margin-bottom: 0;
    }

    details[open] > summary:hover:after {
        content: '-';
    }

    details[open] > div.content {
        padding: 16px;
        margin: -16px;
        margin-top: 0;
    }

    details[open] > div.content p > a:hover {
        text-decoration: underline;
    }

    details[open] > div.content > p:first-child, details[open] > div.content > .tabs:first-child, details[open] > div.content > ul:first-child, details[open] > div.content > ol:first-child, details[open] > div.content > .highlight:first-child, details[open] > div.content > .note:first-child, details[open] > div.content > .fancybox:first-child, details[open] > div.content > details:first-child {
        margin-top: 0;
    }

    details[open] > div.content > p:last-child, details[open] > div.content > .tabs:last-child, details[open] > div.content > ul:last-child, details[open] > div.content > ol:last-child, details[open] > div.content > .highlight:last-child, details[open] > div.content > .note:last-child, details[open] > div.content > .fancybox:last-child, details[open] > div.content > details:last-child {
        margin-bottom: 0;
    }


    [data-theme="dark"] span.p {
        filter: brightness(0.7);
    }

    p.p.subtitle {
        font-weight: bold;
        color: #2196f3;
        padding-top: 1rem;
    }

    p.p.subtitle:first-child {
        padding-top: .5rem;
    }

    span.p.code, p.p.code {
        font-family: Menlo, Monaco, monospace, courier, sans-serif
    }

    span.p.left, p.p.left {
        display: block;
        text-align: left;
    }

    span.p.center, p.p.center {
        display: block;
        text-align: center;
    }

    span.p.right, p.p.right {
        display: block;
        text-align: right;
    }

    span.p.small, p.p.small {
        font-size: .575rem;
    }

    span.p.large, p.p.large {
        font-size: 2rem;
        line-height: 1.4;
    }

    span.p.huge, p.p.huge {
        font-size: 4rem;
        line-height: 1.4;
    }

    span.p.ultra, p.p.ultra {
        font-size: 6rem;
        line-height: 1.4;
    }

    span.p.small, p.p.small, span.p.large, p.p.large, span.p.huge, p.p.huge, span.p.ultra, p.p.ultra {
        font-family: UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial, Menlo, Monaco, monospace, sans-serif;
        margin: 0;
        padding: 0;
    }

    span.p.bold, p.p.bold {
        font-weight: bold;
    }

    span.p.h1, p.p.h1 {
        font-size: 1.625rem;
        color: #555;
        padding-top: 1rem;
    }

    span.p.h2, p.p.h2 {
        font-size: 1.375rem;
        color: #555;
        padding-top: 1rem;
        border-bottom: 1px solid rgba(85, 85, 85, 0.1)
    }

    span.p.h3, p.p.h3 {
        font-size: 1.25rem;
        color: #2196f3;
        padding-top: 1rem
    }

    span.p.h4, p.p.h4 {
        font-size: 1.125rem;
        color: #555;
        padding-top: 1rem
    }

    span.p.red, p.p.red {
        color: #fe5f58
    }

    span.p.yellow, p.p.yellow {
        color: #ffbd2b
    }

    span.p.green, p.p.green {
        color: #3dc550
    }

    span.p.cyan, p.p.cyan {
        color: #1bcdfc
    }

    span.p.blue, p.p.blue {
        color: #2196f3
    }

    span.p.gray, p.p.gray {
        color: #666
    }

    如果不填加此css 会无法显示色彩样式

  2. 在 themes\Butterfly\layout\includes\widget\ 下创建 card_ip.pug 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .card-widget.card-ip
            .card-content
                .item-headline
                    i.fa.fa-user(aria-hidden="true")
                    span= _p('aside.card_ip')
                .ip_content
                    = _p('欢迎来自 ')
                    span(class="p red")= _p('未知区域')
                    = _p(' 的小伙伴')
                    br
                    = _p('访问IP为： ')
                    span(class="p cyan")= _p('未知IP')
                    br
                    = _p('浏览器版本：')
                    span(class="p blue")= _p('未知浏览器')

  3. 编辑此目录下的 index.pug 、 在合适位置添加

    1
    2
    if theme.aside.card_ip
            !=partial('includes/widget/card_ip', {}, {cache: theme.fragment_cache})

  4. 编辑 themes\Butterfly\languages\zh-CN.yml 文件、在 aside 下添加

    1
    card_ip: 当前访问用户

  5. 在 source\_data\butterfly.yml - aside 下添加

    1
    card_ip: true

  6. 在 themes\Butterfly\source\js 下创建 ip_content.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
    32
    33
    34
    35
    //获取当前IP地址和浏览器标识
    function getBrowserInfo() {
        var agent = navigator.userAgent.toLowerCase();

        var regStr_ie = /msie [\d.]+;/gi;
        var regStr_ff = /firefox\/[\d.]+/gi
        var regStr_chrome = /chrome\/[\d.]+/gi;
        var regStr_saf = /safari\/[\d.]+/gi;

        //IE
        if (agent.indexOf("msie") > 0) {
            return agent.match(regStr_ie);
        }

        //firefox
        if (agent.indexOf("firefox") > 0) {
            return agent.match(regStr_ff);
        }

        //Chrome
        if (agent.indexOf("chrome") > 0) {
            return agent.match(regStr_chrome);
        }

        //Safari
        if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
            return agent.match(regStr_saf);
        }
    }

    var ip_content = document.querySelector(".ip_content");

    if (ip_content != null && typeof (returnCitySN) != undefined) {
        ip_content.innerHTML = '欢迎来自 <span class="p red">' + returnCitySN["cname"] + "</span> 的小伙伴<br>" + "访问IP为： <span class='p cyan'>" + returnCitySN["cip"] + "</span><br>浏览器版本：<span class='p blue'>" + getBrowserInfo() + '</span>';
    }

  7. 最后编辑butterfly.yml，在inject中添加以下内容

    1
    2
    3
    4
    5
    6
    inject:
      head:
       - <link rel="stylesheet" href="/css/tag.css">   #色彩样式
      bottom:
          - <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>   #搜狐的获取 ip 和位置
          - <script src="/js/ip_content.js"></script>	#新建的js

添加文章日历

本功能具体实现方法转载自 Hexo添加小部件(Butterfly主题) 日历，参考自 HCLonely Blog

首先，安装 hexo-generator-calendar 插件

1
npm install --save git://github.com/howiefh/hexo-generator-calendar.git

然后在themes\butterfly\source\js下创建两个js文件，文件名为 calendar.js 和 languages.js

calendar.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
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
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
/**
 * Calendar - displays a calendar of the current month. Dates appear links if there are posts for that day.
 */

(function($) {

    var aCalendar = function(language, options, object) {
      var now = new Date();
      var nDay = now.getDate();
      var nMonth = now.getMonth();
      var nYear = now.getFullYear();
      var dDay = nDay;
      var dMonth = nMonth;
      var dYear = nYear;
      var instance = object;
      var allPosts = null;
      var months = null;
      /* Current month's posts */
      var current = {
        posts: [],
        prev: null,
        next: null
      };
      var currentLanguage = 'en';
  
      initLanguage(language);
  
      var settings = $.extend({}, $.fn.aCalendar.defaults, typeof calLanguages === 'undefined' ? {} : calLanguages[currentLanguage], options);
  
      if (settings.root[0] !== '/') {
        settings.root = '/' + settings.root;
      }
  
      if (settings.root[settings.root.length - 1] !== '/') {
        settings.root += '/';
      }
  
      /**
       * Initial language.
       */
      function initLanguage(key) {
        if (key && typeof calLanguages !== 'undefined' && calLanguages[key]) {
          currentLanguage = key;
        }
      }
  
      /**
       * Click handler for next month arrow button.
       */
      function nextMonth() {
        if (dMonth < 11) {
          dMonth++;
        } else {
          dMonth = 0;
          dYear++;
        }
  
        draw();
      };
  
      /**
       * Click handler for previous month arrow button.
       */
      function previousMonth() {
        if (dMonth > 0) {
          dMonth--;
        } else {
          dMonth = 11;
          dYear--;
        }
  
        draw();
      };
  
      /**
       * Click handler for navigating to a month if there are posts.
       */
      function toPostsMonth(date) {
        if (date) {
          dYear = date.getFullYear();
          dMonth = date.getMonth();
          draw();
        }
      }
  
      /**
       * Load current month's posts.
       */
      function loadPosts() {
        if (settings.single) {
          loadAllPosts();
        } else {
          loadPostsByMonth();
        }
      }
  
      /**
       * Load all month's posts.
       */
      function loadAllPosts() {
        if (settings.url != null && settings.url != '') {
          if (allPosts === null) {
            $.ajax({
              url: settings.url,
              async: false,
              success: function(data) {
                allPosts = data;
                initMonths(Object.keys(allPosts));
              }
            });
          }
  
          if (allPosts !== null) {
            if (parse()) {
              current.posts = allPosts[dYear + '-' + (dMonth + 1)];
            }
          }
        }
      }
  
      /**
       * Load posts by the month.
       */
      function loadPostsByMonth() {
        if (months === null) {
          $.ajax({
            url: settings.root + 'list.json',
            async: false,
            success: function(data) {
              initMonths(data);
            }
          });
        }
  
        if (parse()) {
          $.ajax({
            url: settings.root + dYear + '-' + (dMonth + 1) + '.json',
            async: false,
            success: function(data) {
              current.posts = data;
            }
          });
        }
      }
  
      /**
       * Initial months array.
       */
      function initMonths(array) {
        months = array.map(function(item) {
          var ym = item.split('-');
          return new Date(Date.UTC(+ym[0], +ym[1] - 1));
        });
      }
  
      /**
       * Parse posts month array, and set current.next and current.prev.
       *
       * @return if there are posts in this month, return true. ortherwise return false.
       */
      function parse() {
        var time = Date.UTC(dYear, dMonth);
  
        if (months === null || months.length === 0) {
          return false;
        }
  
        //If no posts in the current month, and before (or after) the current month yet not published articles, then the response to click previous month's (or next month's) event don't need to parse months array
        if (current.posts.length === 0 && (current.prev === null && current.next !== null && current.next.getTime() > time || current.next === null && current.prev !== null && current.prev.getTime() < time)) {
          return false;
        }
  
        current.posts = [];
  
        for (var i = 0; i < months.length; i++) {
          var cTime = months[i].getTime();
          if (time === cTime) {
            current.prev = i === 0 ? null : months[i - 1];
            current.next = i === months.length - 1 ? null : months[i + 1];
            return true;
          } else if (time < cTime) {
            current.prev = i === 0 ? null : months[i - 1];
            current.next = months[i];
            break;
          } else {
            current.prev = months[i];
            current.next = null;
          }
        }
  
        return false;
      }
  
      /**
       * Format date object.
       */
      function simpleDateFormat(date, fmt) {
        var o = {
          'LMM+': settings.months[date.getMonth()],
          'MM+': date.getMonth() + 1
        };
  
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
  
        for (var k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (k === 'LMM+') ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
          }
        }
  
        return fmt;
      }
  
      /**
       * Draw calendar.
       *
       */
      function draw() {
        loadPosts();
        var dWeekDayOfMonthStart = new Date(dYear, dMonth, 1).getDay() - settings.weekOffset;
        if (dWeekDayOfMonthStart <= 0) {
          dWeekDayOfMonthStart = 6 - ((dWeekDayOfMonthStart + 1) * -1);
        }
  
        var dLastDayOfMonth = new Date(dYear, dMonth + 1, 0).getDate();
        var dLastDayOfPreviousMonth = new Date(dYear, dMonth, 0).getDate() - dWeekDayOfMonthStart + 1;
  
        var cHead = $('<div/>').addClass('cal-head');
        var cNext = $('<div/>');
        var cPrevious = $('<div/>');
        var cTitle = $('<div/>').addClass('cal-title');
        cPrevious.html(settings.headArrows.previous);
        cNext.html(settings.headArrows.next);
        curDate = new Date(Date.UTC(dYear, dMonth));
        if (current.posts.length === 0) {
          cTitle.html(simpleDateFormat(curDate, settings.titleFormat));
        } else {
          cTitleLink = $('<a/>').attr('href', simpleDateFormat(curDate, settings.titleLinkFormat))
            .attr('title', simpleDateFormat(curDate, settings.postsMonthTip))
            .html(simpleDateFormat(curDate, settings.titleFormat));
          cTitle.html(cTitleLink);
        }
  
        cPrevious.on('click', previousMonth);
        cNext.on('click', nextMonth);
  
        cHead.append(cPrevious);
        cHead.append(cTitle);
        cHead.append(cNext);
  
        var cBody = $('<table/>').addClass('cal');
  
        var dayOfWeek = settings.weekOffset;
        var cWeekHead = $('<thead/>');
        var cWeekHeadRow = $('<tr/>');
        for (var i = 0; i < 7; i++) {
          if (dayOfWeek > 6) {
            dayOfWeek = 0;
          }
  
          var cWeekDay = $('<th/>').attr('scope', 'col').attr('title', settings.dayOfWeek[dayOfWeek]);
          cWeekDay.html(settings.dayOfWeekShort[dayOfWeek]);
          cWeekHeadRow.append(cWeekDay);
          dayOfWeek++;
        }
  
        cWeekHead.append(cWeekHeadRow);
        cBody.append(cWeekHead);
  
        var cFoot = $('<tfoot/>');
        var cFootRow = $('<tr/>');
        var cPrevPosts = $('<td/>').attr('colspan', 3);
        var cPad = $('<td/>').html('&nbsp;');
        var cNextPosts = $('<td/>').attr('colspan', 3);
        if (current.prev) {
          cPrevPosts.html(settings.footArrows.previous + settings.months[current.prev.getMonth()])
            .addClass('cal-foot')
            .attr('title', simpleDateFormat(current.prev, settings.postsMonthTip));
        }
  
        if (current.next) {
          cNextPosts.html(settings.months[current.next.getMonth()] + settings.footArrows.next)
            .addClass('cal-foot')
            .attr('title', simpleDateFormat(current.next, settings.postsMonthTip));
        }
  
        cPrevPosts.on('click', function() {
          toPostsMonth(current.prev);
        });
  
        cNextPosts.on('click', function() {
          toPostsMonth(current.next);
        });
  
        cFootRow.append(cPrevPosts);
        cFootRow.append(cPad);
        cFootRow.append(cNextPosts);
        cFoot.append(cFootRow);
  
        var cMainPad = $('<tbody/>');
        var day = 1;
        var dayOfNextMonth = 1;
        for (var i = 0; i < 6; i++) {
          var cWeek = $('<tr/>');
          for (var j = 0; j < 7; j++) {
            var cDay = $('<td/>');
            if (i * 7 + j < dWeekDayOfMonthStart) {
              cDay.addClass('cal-gray');
              cDay.html(dLastDayOfPreviousMonth++);
            } else if (day <= dLastDayOfMonth) {
              if (day == dDay && nMonth == dMonth && nYear == dYear) {
                cDay.addClass('cal-today');
              }
  
              var count = {
                num: 0,
                keys: []
              };
              for (var k = 0; k < current.posts.length; k++) {
                var d = new Date(Date.parse(current.posts[k].date));
                if (d.getDate() == day) {
                  count.keys[count.num++] = k;
                }
              }
  
              if (count.num !== 0) {
                var index = count.keys[0];
                var cLink = $('<a>').attr('href', current.posts[index].link).attr('title', current.posts[index].title).html(day++);
                cDay.append(cLink);
              } else {
                cDay.html(day++);
              }
            } else {
              cDay.addClass('cal-gray');
              cDay.html(dayOfNextMonth++);
            }
  
            cWeek.append(cDay);
          }
  
          cMainPad.append(cWeek);
        }
  
        cBody.append(cWeekHead);
        cBody.append(cFoot);
        cBody.append(cMainPad);
  
        $(instance).html(cHead);
        $(instance).append(cBody);
      }
  
      return draw();
    };
  
    $.fn.aCalendar = function(Lang, oInit) {
      return this.each(function() {
        return aCalendar(Lang, oInit, $(this));
      });
    };
  
    // plugin defaults
    $.fn.aCalendar.defaults = {
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      dayOfWeekShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
      postsMonthTip: 'Posts published in LMM yyyy',
      titleFormat: 'yyyy LMM',
      titleLinkFormat: '/archives/yyyy/MM/',
      headArrows: {previous: '<span class="cal-prev"></span>', next: '<span class="cal-next"></span>'},
      footArrows: {previous: '« ', next: ' »'},
      weekOffset: 0,
      single: true,
      root: '/calendar/',
      url: '/calendar.json'
    };
  
    $(document).ready(function () {
        $('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择
    });
    

  }(jQuery));

languages.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
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
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
var calLanguages = {
    ar: { // Arabic
      months: [
        'كانون الثاني', 'شباط', 'آذار', 'نيسان', 'مايو', 'حزيران', 'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني', 'كانون الأول'
      ],
      dayOfWeekShort: [
        'ن', 'ث', 'ع', 'خ', 'ج', 'س', 'ح'
      ],
      dayOfWeek: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد']
    },
    ro: { // Romanian
      months: [
        'Ianuarie', 'Februarie', 'Martie', 'Aprilie', 'Mai', 'Iunie', 'Iulie', 'August', 'Septembrie', 'Octombrie', 'Noiembrie', 'Decembrie'
      ],
      dayOfWeekShort: [
        'Du', 'Lu', 'Ma', 'Mi', 'Jo', 'Vi', 'Sâ'
      ],
      dayOfWeek: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă']
    },
    id: { // Indonesian
      months: [
        'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
      ],
      dayOfWeekShort: [
        'Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'
      ],
      dayOfWeek: ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
    },
    is: { // Icelandic
      months: [
        'Janúar', 'Febrúar', 'Mars', 'Apríl', 'Maí', 'Júní', 'Júlí', 'Ágúst', 'September', 'Október', 'Nóvember', 'Desember'
      ],
      dayOfWeekShort: [
        'Sun', 'Mán', 'Þrið', 'Mið', 'Fim', 'Fös', 'Lau'
      ],
      dayOfWeek: ['Sunnudagur', 'Mánudagur', 'Þriðjudagur', 'Miðvikudagur', 'Fimmtudagur', 'Föstudagur', 'Laugardagur']
    },
    bg: { // Bulgarian
      months: [
        'Януари', 'Февруари', 'Март', 'Април', 'Май', 'Юни', 'Юли', 'Август', 'Септември', 'Октомври', 'Ноември', 'Декември'
      ],
      dayOfWeekShort: [
        'Нд', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'
      ],
      dayOfWeek: ['Неделя', 'Понеделник', 'Вторник', 'Сряда', 'Четвъртък', 'Петък', 'Събота']
    },
    fa: { // Persian/Farsi
      months: [
        'فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'
      ],
      dayOfWeekShort: [
        'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه', 'شنبه'
      ],
      dayOfWeek: ['یک‌شنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه', 'شنبه', 'یک‌شنبه']
    },
    ru: { // Russian
      months: [
        'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
      ],
      dayOfWeekShort: [
        'Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'
      ],
      dayOfWeek: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота']
    },
    uk: { // Ukrainian
      months: [
        'Січень', 'Лютий', 'Березень', 'Квітень', 'Травень', 'Червень', 'Липень', 'Серпень', 'Вересень', 'Жовтень', 'Листопад', 'Грудень'
      ],
      dayOfWeekShort: [
        'Ндл', 'Пнд', 'Втр', 'Срд', 'Чтв', 'Птн', 'Сбт'
      ],
      dayOfWeek: ['Неділя', 'Понеділок', 'Вівторок', 'Середа', 'Четвер', 'П\'ятниця', 'Субота']
    },
    en: { // English
      months: [
        'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
      ],
      dayOfWeekShort: [
        'S', 'M', 'T', 'W', 'T', 'F', 'S'
      ],
      dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
      postsMonthTip: 'Posts published in LMM yyyy',
      titleFormat: 'LMM yyyy'
    },
    el: { // Ελληνικά
      months: [
        'Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος'
      ],
      dayOfWeekShort: [
        'Κυρ', 'Δευ', 'Τρι', 'Τετ', 'Πεμ', 'Παρ', 'Σαβ'
      ],
      dayOfWeek: ['Κυριακή', 'Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη', 'Παρασκευή', 'Σάββατο']
    },
    de: { // German
      months: [
        'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
      ],
      dayOfWeekShort: [
        'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'
      ],
      dayOfWeek: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
    },
    nl: { // Dutch
      months: [
        'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'
      ],
      dayOfWeekShort: [
        'zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'
      ],
      dayOfWeek: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag']
    },
    tr: { // Turkish
      months: [
        'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'
      ],
      dayOfWeekShort: [
        'Paz', 'Pts', 'Sal', 'Çar', 'Per', 'Cum', 'Cts'
      ],
      dayOfWeek: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi']
    },
    fr: { //French
      months: [
        'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
      ],
      dayOfWeekShort: [
        'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'
      ],
      dayOfWeek: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi']
    },
    es: { // Spanish
      months: [
        'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
      ],
      dayOfWeekShort: [
        'Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'
      ],
      dayOfWeek: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
    },
    th: { // Thai
      months: [
        'มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'
      ],
      dayOfWeekShort: [
        'อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'
      ],
      dayOfWeek: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัส', 'ศุกร์', 'เสาร์', 'อาทิตย์']
    },
    pl: { // Polish
      months: [
        'styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień'
      ],
      dayOfWeekShort: [
        'nd', 'pn', 'wt', 'śr', 'cz', 'pt', 'sb'
      ],
      dayOfWeek: ['niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota']
    },
    pt: { // Portuguese
      months: [
        'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
      ],
      dayOfWeekShort: [
        'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'
      ],
      dayOfWeek: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado']
    },
    ch: { // Simplified Chinese
      months: [
        '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
      ],
      dayOfWeekShort: [
        '日', '一', '二', '三', '四', '五', '六'
      ]
    },
    se: { // Swedish
      months: [
        'Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'
      ],
      dayOfWeekShort: [
        'Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör'
      ]
    },
    kr: { // Korean
      months: [
        '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'
      ],
      dayOfWeekShort: [
        '일', '월', '화', '수', '목', '금', '토'
      ],
      dayOfWeek: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']
    },
    it: { // Italian
      months: [
        'Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'
      ],
      dayOfWeekShort: [
        'Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'
      ],
      dayOfWeek: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato']
    },
    da: { // Dansk
      months: [
        'January', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'July', 'August', 'September', 'Oktober', 'November', 'December'
      ],
      dayOfWeekShort: [
        'Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'
      ],
      dayOfWeek: ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag']
    },
    no: { // Norwegian
      months: [
        'Januar', 'Februar', 'Mars', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Desember'
      ],
      dayOfWeekShort: [
        'Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'
      ],
      dayOfWeek: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag']
    },
    ja: { // Japanese
      months: [
        '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
      ],
      dayOfWeekShort: [
        '日', '月', '火', '水', '木', '金', '土'
      ],
      dayOfWeek: ['日曜', '月曜', '火曜', '水曜', '木曜', '金曜', '土曜']
    },
    vi: { // Vietnamese
      months: [
        'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'
      ],
      dayOfWeekShort: [
        'CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'
      ],
      dayOfWeek: ['Chủ nhật', 'Thứ hai', 'Thứ ba', 'Thứ tư', 'Thứ năm', 'Thứ sáu', 'Thứ bảy']
    },
    sl: { // Slovenščina
      months: [
        'Januar', 'Februar', 'Marec', 'April', 'Maj', 'Junij', 'Julij', 'Avgust', 'September', 'Oktober', 'November', 'December'
      ],
      dayOfWeekShort: [
        'Ned', 'Pon', 'Tor', 'Sre', 'Čet', 'Pet', 'Sob'
      ],
      dayOfWeek: ['Nedelja', 'Ponedeljek', 'Torek', 'Sreda', 'Četrtek', 'Petek', 'Sobota']
    },
    cs: { // Čeština
      months: [
        'Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'
      ],
      dayOfWeekShort: [
        'Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'
      ]
    },
    hu: { // Hungarian
      months: [
        'Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'
      ],
      dayOfWeekShort: [
        'Va', 'Hé', 'Ke', 'Sze', 'Cs', 'Pé', 'Szo'
      ],
      dayOfWeek: ['vasárnap', 'hétfő', 'kedd', 'szerda', 'csütörtök', 'péntek', 'szombat']
    },
    az: { //Azerbaijanian (Azeri)
      months: [
        'Yanvar', 'Fevral', 'Mart', 'Aprel', 'May', 'Iyun', 'Iyul', 'Avqust', 'Sentyabr', 'Oktyabr', 'Noyabr', 'Dekabr'
      ],
      dayOfWeekShort: [
        'B', 'Be', 'Ça', 'Ç', 'Ca', 'C', 'Ş'
      ],
      dayOfWeek: ['Bazar', 'Bazar ertəsi', 'Çərşənbə axşamı', 'Çərşənbə', 'Cümə axşamı', 'Cümə', 'Şənbə']
    },
    bs: { //Bosanski
      months: [
        'Januar', 'Februar', 'Mart', 'April', 'Maj', 'Jun', 'Jul', 'Avgust', 'Septembar', 'Oktobar', 'Novembar', 'Decembar'
      ],
      dayOfWeekShort: [
        'Ned', 'Pon', 'Uto', 'Sri', 'Čet', 'Pet', 'Sub'
      ],
      dayOfWeek: ['Nedjelja', 'Ponedjeljak', 'Utorak', 'Srijeda', 'Četvrtak', 'Petak', 'Subota']
    },
    ca: { //Català
      months: [
        'Gener', 'Febrer', 'Març', 'Abril', 'Maig', 'Juny', 'Juliol', 'Agost', 'Setembre', 'Octubre', 'Novembre', 'Desembre'
      ],
      dayOfWeekShort: [
        'Dg', 'Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds'
      ],
      dayOfWeek: ['Diumenge', 'Dilluns', 'Dimarts', 'Dimecres', 'Dijous', 'Divendres', 'Dissabte']
    },
    'en-GB': { //English (British)
      months: [
        'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
      ],
      dayOfWeekShort: [
        'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
      ],
      dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
    },
    et: { //'Eesti'
      months: [
        'Jaanuar', 'Veebruar', 'Märts', 'Aprill', 'Mai', 'Juuni', 'Juuli', 'August', 'September', 'Oktoober', 'November', 'Detsember'
      ],
      dayOfWeekShort: [
        'P', 'E', 'T', 'K', 'N', 'R', 'L'
      ],
      dayOfWeek: ['Pühapäev', 'Esmaspäev', 'Teisipäev', 'Kolmapäev', 'Neljapäev', 'Reede', 'Laupäev']
    },
    eu: { //Euskara
      months: [
        'Urtarrila', 'Otsaila', 'Martxoa', 'Apirila', 'Maiatza', 'Ekaina', 'Uztaila', 'Abuztua', 'Iraila', 'Urria', 'Azaroa', 'Abendua'
      ],
      dayOfWeekShort: [
        'Ig.', 'Al.', 'Ar.', 'Az.', 'Og.', 'Or.', 'La.'
      ],
      dayOfWeek: ['Igandea', 'Astelehena', 'Asteartea', 'Asteazkena', 'Osteguna', 'Ostirala', 'Larunbata']
    },
    fi: { //Finnish (Suomi)
      months: [
        'Tammikuu', 'Helmikuu', 'Maaliskuu', 'Huhtikuu', 'Toukokuu', 'Kesäkuu', 'Heinäkuu', 'Elokuu', 'Syyskuu', 'Lokakuu', 'Marraskuu', 'Joulukuu'
      ],
      dayOfWeekShort: [
        'Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'
      ],
      dayOfWeek: ['sunnuntai', 'maanantai', 'tiistai', 'keskiviikko', 'torstai', 'perjantai', 'lauantai']
    },
    gl: { //Galego
      months: [
        'Xan', 'Feb', 'Maz', 'Abr', 'Mai', 'Xun', 'Xul', 'Ago', 'Set', 'Out', 'Nov', 'Dec'
      ],
      dayOfWeekShort: [
        'Dom', 'Lun', 'Mar', 'Mer', 'Xov', 'Ven', 'Sab'
      ],
      dayOfWeek: ['Domingo', 'Luns', 'Martes', 'Mércores', 'Xoves', 'Venres', 'Sábado']
    },
    hr: { //Hrvatski
      months: [
        'Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj', 'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac'
      ],
      dayOfWeekShort: [
        'Ned', 'Pon', 'Uto', 'Sri', 'Čet', 'Pet', 'Sub'
      ],
      dayOfWeek: ['Nedjelja', 'Ponedjeljak', 'Utorak', 'Srijeda', 'Četvrtak', 'Petak', 'Subotagg']
    },
    ko: { //Korean (한국어)
      months: [
        '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'
      ],
      dayOfWeekShort: [
        '일', '월', '화', '수', '목', '금', '토'
      ],
      dayOfWeek: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']
    },
    lt: { //Lithuanian (lietuvių)
      months: [
        'Sausio', 'Vasario', 'Kovo', 'Balandžio', 'Gegužės', 'Birželio', 'Liepos', 'Rugpjūčio', 'Rugsėjo', 'Spalio', 'Lapkričio', 'Gruodžio'
      ],
      dayOfWeekShort: [
        'Sek', 'Pir', 'Ant', 'Tre', 'Ket', 'Pen', 'Šeš'
      ],
      dayOfWeek: ['Sekmadienis', 'Pirmadienis', 'Antradienis', 'Trečiadienis', 'Ketvirtadienis', 'Penktadienis', 'Šeštadienis']
    },
    lv: { //Latvian (Latviešu)
      months: [
        'Janvāris', 'Februāris', 'Marts', 'Aprīlis ', 'Maijs', 'Jūnijs', 'Jūlijs', 'Augusts', 'Septembris', 'Oktobris', 'Novembris', 'Decembris'
      ],
      dayOfWeekShort: [
        'Sv', 'Pr', 'Ot', 'Tr', 'Ct', 'Pk', 'St'
      ],
      dayOfWeek: ['Svētdiena', 'Pirmdiena', 'Otrdiena', 'Trešdiena', 'Ceturtdiena', 'Piektdiena', 'Sestdiena']
    },
    mk: { //Macedonian (Македонски)
      months: [
        'јануари', 'февруари', 'март', 'април', 'мај', 'јуни', 'јули', 'август', 'септември', 'октомври', 'ноември', 'декември'
      ],
      dayOfWeekShort: [
        'нед', 'пон', 'вто', 'сре', 'чет', 'пет', 'саб'
      ],
      dayOfWeek: ['Недела', 'Понеделник', 'Вторник', 'Среда', 'Четврток', 'Петок', 'Сабота']
    },
    mn: { //Mongolian (Монгол)
      months: [
        '1-р сар', '2-р сар', '3-р сар', '4-р сар', '5-р сар', '6-р сар', '7-р сар', '8-р сар', '9-р сар', '10-р сар', '11-р сар', '12-р сар'
      ],
      dayOfWeekShort: [
        'Дав', 'Мяг', 'Лха', 'Пүр', 'Бсн', 'Бям', 'Ням'
      ],
      dayOfWeek: ['Даваа', 'Мягмар', 'Лхагва', 'Пүрэв', 'Баасан', 'Бямба', 'Ням']
    },
    'pt-BR': { //Português(Brasil)
      months: [
        'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
      ],
      dayOfWeekShort: [
        'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'
      ],
      dayOfWeek: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado']
    },
    sk: { //Slovenčina
      months: [
        'Január', 'Február', 'Marec', 'Apríl', 'Máj', 'Jún', 'Júl', 'August', 'September', 'Október', 'November', 'December'
      ],
      dayOfWeekShort: [
        'Ne', 'Po', 'Ut', 'St', 'Št', 'Pi', 'So'
      ],
      dayOfWeek: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota']
    },
    sq: { //Albanian (Shqip)
      months: [
        'Janar', 'Shkurt', 'Mars', 'Prill', 'Maj', 'Qershor', 'Korrik', 'Gusht', 'Shtator', 'Tetor', 'Nëntor', 'Dhjetor'
      ],
      dayOfWeekShort: [
        'Die', 'Hën', 'Mar', 'Mër', 'Enj', 'Pre', 'Shtu'
      ],
      dayOfWeek: ['E Diel', 'E Hënë', 'E Martē', 'E Mërkurë', 'E Enjte', 'E Premte', 'E Shtunë']
    },
    'sr-YU': { //Serbian (Srpski)
      months: [
        'Januar', 'Februar', 'Mart', 'April', 'Maj', 'Jun', 'Jul', 'Avgust', 'Septembar', 'Oktobar', 'Novembar', 'Decembar'
      ],
      dayOfWeekShort: [
        'Ned', 'Pon', 'Uto', 'Sre', 'čet', 'Pet', 'Sub'
      ],
      dayOfWeek: ['Nedelja', 'Ponedeljak', 'Utorak', 'Sreda', 'Četvrtak', 'Petak', 'Subota']
    },
    sr: { //Serbian Cyrillic (Српски)
      months: [
        'јануар', 'фебруар', 'март', 'април', 'мај', 'јун', 'јул', 'август', 'септембар', 'октобар', 'новембар', 'децембар'
      ],
      dayOfWeekShort: [
        'нед', 'пон', 'уто', 'сре', 'чет', 'пет', 'суб'
      ],
      dayOfWeek: ['Недеља', 'Понедељак', 'Уторак', 'Среда', 'Четвртак', 'Петак', 'Субота']
    },
    sv: { //Svenska
      months: [
        'Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'
      ],
      dayOfWeekShort: [
        'Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör'
      ],
      dayOfWeek: ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag']
    },
    'zh-TW': { //Traditional Chinese (繁體中文)
      months: [
        '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
      ],
      dayOfWeekShort: [
        '日', '一', '二', '三', '四', '五', '六'
      ],
      dayOfWeek: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    },
    'zh-CN': { //Simplified Chinese (简体中文)
      months: [
        '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
      ],
      dayOfWeekShort: [
        '日', '一', '二', '三', '四', '五', '六'
      ],
      dayOfWeek: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      postsMonthTip: '查看yyyy年MM月的文章',
      titleFormat: 'yyyy年MM月'
    },
    he: { //Hebrew (עברית)
      months: [
        'ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'
      ],
      dayOfWeekShort: [
        'א\'', 'ב\'', 'ג\'', 'ד\'', 'ה\'', 'ו\'', 'שבת'
      ],
      dayOfWeek: ['ראשון', 'שני', 'שלישי', 'רביעי', 'חמישי', 'שישי', 'שבת', 'ראשון']
    },
    hy: { // Armenian
      months: [
        'Հունվար', 'Փետրվար', 'Մարտ', 'Ապրիլ', 'Մայիս', 'Հունիս', 'Հուլիս', 'Օգոստոս', 'Սեպտեմբեր', 'Հոկտեմբեր', 'Նոյեմբեր', 'Դեկտեմբեր'
      ],
      dayOfWeekShort: [
        'Կի', 'Երկ', 'Երք', 'Չոր', 'Հնգ', 'Ուրբ', 'Շբթ'
      ],
      dayOfWeek: ['Կիրակի', 'Երկուշաբթի', 'Երեքշաբթի', 'Չորեքշաբթի', 'Հինգշաբթի', 'Ուրբաթ', 'Շաբաթ']
    },
    kg: { // Kyrgyz
      months: [
        'Үчтүн айы', 'Бирдин айы', 'Жалган Куран', 'Чын Куран', 'Бугу', 'Кулжа', 'Теке', 'Баш Оона', 'Аяк Оона', 'Тогуздун айы', 'Жетинин айы', 'Бештин айы'
      ],
      dayOfWeekShort: [
        'Жек', 'Дүй', 'Шей', 'Шар', 'Бей', 'Жум', 'Ише'
      ],
      dayOfWeek: [
        'Жекшемб', 'Дүйшөмб', 'Шейшемб', 'Шаршемб', 'Бейшемби', 'Жума', 'Ишенб'
      ]
    },
    rm: { // Romansh
      months: [
        'Schaner', 'Favrer', 'Mars', 'Avrigl', 'Matg', 'Zercladur', 'Fanadur', 'Avust', 'Settember', 'October', 'November', 'December'
      ],
      dayOfWeekShort: [
        'Du', 'Gli', 'Ma', 'Me', 'Gie', 'Ve', 'So'
      ],
      dayOfWeek: [
        'Dumengia', 'Glindesdi', 'Mardi', 'Mesemna', 'Gievgia', 'Venderdi', 'Sonda'
      ]
    },
    ka: { // Georgian
      months: [
        'იანვარი', 'თებერვალი', 'მარტი', 'აპრილი', 'მაისი', 'ივნისი', 'ივლისი', 'აგვისტო', 'სექტემბერი', 'ოქტომბერი', 'ნოემბერი', 'დეკემბერი'
      ],
      dayOfWeekShort: [
        'კვ', 'ორშ', 'სამშ', 'ოთხ', 'ხუთ', 'პარ', 'შაბ'
      ],
      dayOfWeek: ['კვირა', 'ორშაბათი', 'სამშაბათი', 'ოთხშაბათი', 'ხუთშაბათი', 'პარასკევი', 'შაბათი']
    },
  };

然后编辑calendar.js 文件，在文件最后}(jQuery));之前添加:

1
2
3
$(document).ready(function () {
    $('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择
});

当然我这里已经添加好了，你也可以直接引用链接，放到butterfly.yml.里的inject->bottom里面

1
2
- <script src="https://cdn.jsdelivr.net/gh/jinan6/CDN/js/calendar.js"></script>
- <script src="https://cdn.jsdelivr.net/gh/jinan6/CDN/js/languages.js"></script>

在 themes\Butterfly\source\css\_layout 目录下，新建 calendar.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
#calendar
  a
    text-decoration none

.cal-head
  margin-bottom: 15px
  position relative
  height 20px
  padding 8px 6px 2px 6px

.cal-prev,.cal-next
  position absolute
  top 9px
  width 16px
  height 18px
  padding 3px 4px
  border 1px solid transparent
  color #333
  outline 0

.cal-prev
  left 8px
  &:before
    border-right 9px solid #333

.cal-next
  right 8px
  &:before
    border-left 9px solid #333

.cal-prev:before,.cal-next:before
  content ''
  display block
  width 0
  height 0
  border-top 5px solid transparent
  border-bottom 5px solid transparent

.cal-title
  width 120px
  margin 0 auto
  color #333
  font bold 14px/18px Arial
  text-align center
  a
    border 1px solid transparent
    color #9f9f9f

.cal,
.cal th,
.cal td
  border 1px solid #d1d1d1

.cal
  display: table
  border-collapse separate
  border-spacing 0
  border-width 1px 0 0 1px
  table-layout fixed
  width 100%
  margin 0
  th
    background #9f9f9f
    color #fff
    border-width 0 1px 1px 0
    font-weight 700
  td
    border-width 0 1px 1px 0
  tbody
    a
      background-color #007acc
      color #fff
      display block
      font-weight 700
    .cal-today
      background-color #66ecfd
      color #fff
  .cal-gray
    color #bbb8b8

[data-theme='dark'] .cal .cal-gray
  color #505050

.cal th,
.cal td
  font-weight normal
  line-height 2.5625
  padding 0
  text-align center

[data-theme='dark'] .cal .cal-foot
  color #9f9f9f

.cal .cal-foot
  color #2ca6cb

.cal-title a:hover,
.cal-prev:hover,
.cal-next:hover,
.cal .cal-foot:hover,
.cal .cal-foot:focus,
.cal tbody a:hover,
.cal tbody a:focus
  background-color #686868
  color #fff
  cursor pointer

在themes\Butterfly\layout\includes\widget 文件夹新建card_calendar.pug 文件，文件内容如下：

1
2
3
4
5
6
7
.card-widget.card-calendar
  .card-content
    .item-headline
      i.far.fa-calendar-alt(aria-hidden="true")
      span= _p('aside.card_calendar')
    div.widget-wrap
    div#calendar.widget

编辑同目录下的index.pug 文件，在你想要显示的位置插入以下代码：

1
2
if theme.aside.card_calendar
        !=partial('includes/widget/card_calendar', {}, {cache:theme.fragment_cache})

编辑 butterfly.yml文件，在 card_webinfo下面添加一行card_calendar: true

1
card_calendar: true

编辑themes\butterfly\languages\zh-CN.yml文件，找到 card_announcement: 公告 , 在下面添加一行 card_calendar: 文章日历 (后面的文本可自定义)

1
card_calendar: 文章日历

修改源码

参考转载于木槿的博客

调整页码圆角

修改\source\css\_layout\pagination.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.page-number
  display: inline-block
  margin: 0 .2rem
  min-width: w = 1.5rem
  height: w
  text-align: center
  line-height: w
  cursor: pointer

&.current
  background: $theme-color
  color: $button-color
  cursor: default
  border-radius: 20px

修改右下角返回顶部按钮

修改\source\css\_layout\rightside.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
#rightside
  position: fixed
  right: -38px
  bottom: 10px
  z-index: 100
  opacity: 0
  transition: all .3s

  #rightside-config-hide
    transition: transform .4s
    transform: translate(40px, 0)

  & > div
    & > button,
    & > a
      display: block
      margin-bottom: 2px
      width: 35px
      height: 35px
      background-color: var(--btn-bg)
      color: var(--btn-color)
      text-align: center
      font-size: 16px
      line-height: 35px
      margin-bottom: 4px
      margin-right: 4px
      cursor: pointer
      border-radius: 3px

文章目录美化

选择某一目录时，背景框宽度为最大且为方形，修改选中时边框为圆润且适应标题长度。

修改\source\css\_layout\sidebar.styl

1
2
3
4
5
6
7
8
&.active
  border-right-color: darken($theme-toc-color, 20%)
  background: $theme-toc-color
  color: $sidebar-active-color
  border-radius: 5px
  width: max-content
  padding-right: 5px
  padding-left: 5px

修改文章底部标签框

修改\source\css\_layout\post.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
&__tags
  display: inline-block
  margin: .4rem .4rem .4rem 0
  padding: 0 .6rem
  width: fit-content
  border: 2px solid $font-black
  border-radius: .2rem
  color: $font-black
  font-size: 14px
  text-decoration: overline
  cursor: pointer
  transition: all .2s ease-in-out
  
  .post-copyright
  position: relative
  margin: 2rem 0 .5rem
  padding: .5rem .8rem
  border: 1px solid $dark-white
  transition: box-shadow .3s ease-in-out
  border-radius: 5px
  
 .post-copyright
   &-meta
     color: $grey
     font-weight: bold

修改链接颜色

修改\source\css\var.styl

1
$a-link-color = #638fff

自动切换夜间模式时间

修改\layout\includes\head\darkmode.styl，根据需要修改即可

修改推荐文章和上下篇文章的图片圆角

上一篇下一篇图片圆角，修改\source\css\_layout\pagination.styl

1
2
3
4
5
#pagination
  overflow: hidden
  margin-top: 1rem
  width: 100%
  border-radius: 8px

相关文章图片圆角

修改\source\css\_layout\relatedposts.styl

1
2
3
4
5
6
7
8
9
10
11
.relatedPosts_item
  position: relative
  display: inline-block
  overflow: hidden
  margin: 3px
  width: calc(33.333% - 6px)
  height: 200px
  background: $dark-black
  vertical-align: bottom
  border-radius: 8px
  // 3.3.0 -b2 变为 .relatedPosts-list

页脚跳动的心

此功能转载于一个懒人的博客

  1. 编辑博客根目录/themes/Butterfly/layout/includes/footer.pug文件
  2. 将©${theme.since} - ${nowYear} By ${config.author}改为&copy;${theme.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}
  3. 将©${nowYear} By ${config.author}改为&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}
  4. 在inject->head下面添加如下内容：
1
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

添加左下角全局音乐播放器

此功能转载于Jerry的博客，供以后方便自己查找使用

首先，需要安装hexo-tag-aplayer这款插件。

  1. 在你的博客目录，右键Git Bash Here，输入以下命令安装插件

    1
    npm install --save hexo-tag-aplayer

  2. 在博客配置文件中加入以下设置

    1
    2
    3
    aplayer:
      meting: false
      asset_inject: false

  3. 在主题配置文件中，修改以下内容

    1
    2
    3
    4
    # Inject the css and script (aplayer/meting)
    aplayerInject:
      enable: true
      per_page: true

  4. 需要把 aplayer代碼插入到主題配置文件的 inject.bottom 去

1
2
3
4
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

参数详情：

选项默认值描述
id必须值歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server必须值音乐平台: netease, tencent, kugou, xiami, baidu
type必须值song, playlist, album, search, artist
fixedfalse开启固定模式
minifalse开启迷你模式
loopall列表循环模式：all, one,none
orderlist列表播放模式： list, random
volume0.7播放器音量
lrctype0歌词格式类型
listfoldedfalse指定音乐播放列表是否折叠
storagenamemetingjsLocalStorage 中存储播放器设定的键名
autoplaytrue自动播放，移动端浏览器暂时不支持此功能
mutextrue该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight340px播放列表的最大长度
preloadauto音乐文件预载入模式，可选项： none, metadata, auto
theme#ad7a86播放器风格色彩设置

如果需要刷新网页音乐不间断，就需要在主题配置文件中将pjax设置为true

实现全站黑白

只需引入一条css即可实现

1
2
- '<style type="text/css">html{filter:progid:DXImageTransForm.Microsoft.BasicImage(grayscale=1);-webkit-filter:saturate(0)}</style>'  #全站黑白css

添加封面小菜单

最近闲来无事，逛了下友链，发现了一个魔改的小菜单功能，于是就跟着配置了😁。

本功能转载自👉PaddyLin的博客。

由于主题版本的不同，我做了一些修改，此方法适用于 Butterfly 3.2.0-b7，其他的主题版本可能稍有差异。根据实际情况自行修改。

效果图

具体方法

  1. 在butterfly\source\css下建立文件cover.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
    .l_cover{min-height:56px}

    .cover-wrapper{
    	top:0;
    	left:0;
    	max-width:100%;
    	display:flex;
    	flex-wrap:nowrap;
    	flex-direction:column;
    	align-items:center;
    	align-self:center;
    	align-content:center;
    	color:#555;
    	padding:0 16px;
    	-moz-user-select:none;
    	-ms-user-select:none;
    	-webkit-user-select:none;
    	user-select:none;
    	position:relative;
    	overflow:hidden;
    	margin-bottom:-100px
    	}
    .cover-wrapper .cover-backstretch,.cover-wrapper .cover-bg{
    	position:absolute;
    	width:100%;
    	height:100%;
    	background-position:center;
    	background-size:cover
    }
    .cover-wrapper .cover-backstretch.lazyload:not(.loaded),.cover-wrapper .cover-bg.lazyload:not(.loaded){opacity:0}
    .cover-wrapper .cover-backstretch.lazyload.loaded,.cover-wrapper .cover-bg.lazyload.loaded{
    	animation-delay:0s;
    	animation-duration:.5s;
    	animation-fill-mode:forwards;
    	animation-timing-function:ease-out;
    	animation-name:fadeIn
    }

    @-moz-keyframes fadeIn{
    	0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
    	100%{opacity:1}
    }

    @-webkit-keyframes fadeIn{
    	0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
    	100%{opacity:1}
    }

    @-o-keyframes fadeIn{
    	0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
    	100%{opacity:1}
    }

    @keyframes fadeIn{
    	0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
    	100%{opacity:1}
    }
    .cover-wrapper .cover-body{
    	z-index:1;position:relative;
    	height:30%;
    }
    .cover-wrapper#half{
    	max-height:640px;
    	min-height:400px;
    	height:calc(36vh - 56px + 200px)
    }
    .cover-wrapper .cover-body{margin-top:25px;margin-bottom:100px;}
    .cover-wrapper .cover-body,.cover-wrapper .cover-body .bottom,.cover-wrapper .cover-body .top{display:flex;flex-direction:column;align-items:center;max-width:100%;}
    .cover-wrapper .cover-body .bottom{margin-top:32px}
    .cover-wrapper .list-h{
    	display:flex;
    	flex-direction:row;
    	flex-wrap:wrap;
    	align-items:stretch;
    	border-radius:4px;
    	-moz-user-select:none;
    	-ms-user-select:none;
    	-webkit-user-select:none;
    	user-select:none
    }
    .cover-wrapper .list-h a{
    	flex:1;
    	display:flex;
    	font-weight:600
    }
    .cover-wrapper .list-h a img{
    	display:block;
    	border-radius:2px;
    	margin:4px;
    	min-width:40px;
    	max-width:44px
    }
    @media screen and (max-width:768px){
    	.cover-wrapper .list-h a img{
    		min-width:36px;
    		max-width:40px
    	}
    }
    @media screen and (max-width:500px){
    	.cover-wrapper .list-h a img{
    		margin:2px 4px;
    		min-width:32px;
    		max-width:36px
    	}
    }
    @media screen and (max-width:375px){
    	.cover-wrapper .list-h a img{min-width:28px;max-width:32px}}
    	.cover-wrapper{max-width:100%}
    	.cover-wrapper.search .bottom .menu{margin-top:16px}
    	.cover-wrapper.search .bottom .menu .list-h a{
    		white-space:nowrap;
    		flex-direction:row;
    		align-items:baseline;
    		font-size:1rem;
    		padding:2px;
    		margin:4px;
    		color:rgba(85,85,85,.75);
    		text-shadow:0 1px 2px rgba(0,0,0,.05);
    		border-bottom:2px solid transparent
    }
    @media screen and (max-width:500px){.cover-wrapper.search .bottom .menu .list-h a{margin:4px 12px}}
    .cover-wrapper.search .bottom .menu .list-h a i{margin-right:4px}
    .cover-wrapper.search .bottom .menu .list-h a p{font-size:1rem}
    .cover-wrapper.search .bottom .menu .list-h a.active,.cover-wrapper.search .bottom .menu .list-h a:active,.cover-wrapper.search .bottom .menu .list-h a:hover{color:#555;border-bottom:2px solid #555}
    .cover-wrapper.dock .menu,.cover-wrapper.featured .menu,.cover-wrapper.focus .menu{border-radius:6px}
    .cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{flex-direction:column;align-items:center;padding:12px;line-height:1px;border-radius:4px;border-bottom:none;text-align:center;align-content:flex-end;color:rgba(68,68,68,.7);font-size:1.5rem}
    @media screen and (max-width:500px){.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{padding:12px 8px}}
    .cover-wrapper.dock .menu .list-h a i,.cover-wrapper.featured .menu .list-h a i,.cover-wrapper.focus .menu .list-h a i{margin:8px}
    .cover-wrapper.dock .menu .list-h a p,.cover-wrapper.featured .menu .list-h a p,.cover-wrapper.focus .menu .list-h a p{font-size:.875rem}
    .cover-wrapper.dock .menu .list-h a.active,.cover-wrapper.featured .menu .list-h a.active,.cover-wrapper.focus .menu .list-h a.active{backdrop-filter:none}
    .cover-wrapper.dock .menu .list-h a.active i,.cover-wrapper.dock .menu .list-h a.active i+p,.cover-wrapper.featured .menu .list-h a.active i,.cover-wrapper.featured .menu .list-h a.active i+p,.cover-wrapper.focus .menu .list-h a.active i,.cover-wrapper.focus .menu .list-h a.active i+p{color:#7c5246}
    .cover-wrapper.dock .menu .list-h a.active img+p,.cover-wrapper.featured .menu .list-h a.active img+p,.cover-wrapper.focus .menu .list-h a.active img+p{color:#444}.cover-wrapper.dock .menu .list-h a:hover,.cover-wrapper.featured .menu .list-h a:hover,.cover-wrapper.focus .menu .list-h a:hover{background:#fff}
    .cover-wrapper.dock .top{margin-bottom:48px}
    .cover-wrapper.dock .menu{background:rgba(255,255,255,.5);position:absolute;bottom:0;max-width:100%}
    .cover-wrapper.dock .menu .list-h{flex-wrap:nowrap;margin:4px}
    .cover-wrapper.dock .menu .list-h a+a{margin-left:4px}
    @media screen and (max-width:500px){
    	.cover-wrapper.dock .menu .list-h{overflow-x:scroll}
    	.cover-wrapper.dock .menu .list-h::-webkit-scrollbar{height:0;width:0}
    	.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-track-piece{background:0 0}
    	.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb{background:#7c5246;cursor:pointer;border-radius:0}
    	.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb:hover{background:#ff5722}}
    @supports (backdrop-filter:blur(20px)){
    	.cover-wrapper.dock .menu{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}
    	.cover-wrapper.featured .menu .list-h{margin:-2px}
    	.cover-wrapper.featured .menu .list-h a{margin:2px;background:rgba(255,255,255,.5)}
    @supports (backdrop-filter:blur(20px)){
    	.cover-wrapper.featured .menu .list-h a{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}
        .cover-wrapper.focus .menu{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}
        .cover-wrapper.focus .menu .list-h{margin:2px}
        .cover-wrapper.focus .menu:hover{background:rgba(255,255,255,.5)}
    @supports (backdrop-filter:blur(20px)){
    	.cover-wrapper.focus .menu:hover{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}
    	.cover-wrapper.focus .menu .list-h a{margin:2px}
    	.cover-wrapper.focus .menu .list-h a:hover{opacity:1;background:#fff}

  2. 在主题配置文件中引入此css文件

    1
    - <link rel="stylesheet" href="/css/cover.css">

  3. 找到butterfly\layout\includes\header中的index.pug文件，修改代码

    修改前

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    header#page-header(class=isHomeClass style=bg_img)
      !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
      if top_img !== false
        if is_post()
          include ./post-info.pug
        else if is_home() 
          #site-info
            h1#site-title=site_title
            #site-subtitle
              span#subtitle
            if(theme.social)
              #site_social_icons
                !=fragment_cache('social', function(){return partial('includes/header/social')})
          #scroll-down
            i.fas.fa-angle-down.scroll-down-effects
        else
          #page-site-info
            h1#site-title=site_title

    修改后

    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
    header#page-header(class=isHomeClass style=bg_img)
      !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
      if top_img !== false
        if is_post()
          include ./post-info.pug
        else if is_home() 
          #site-info
            h1#site-title=site_title
            #site-subtitle
              span#subtitle
            #full.cover-wrapper.featured(style='')
              .cover-backstretch
              .cover-body
                .bottom
                  .menu.navigation
                    .list-h
                      a#home.active(href='/', data-pjax-state='')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923110533.png', srcset='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923110533.png', data-ll-status='loaded')
                        p 主页
                      a#archives(href='/archives/', data-pjax-state='load')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923110830.svg', srcset='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923110830.svg', data-ll-status='loaded')
                        p 归档
                      a#links(href='/tags/', data-pjax-state='load')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923111232.svg', srcset='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923111232.svg', data-ll-status='loaded')
                        p 标签
                      a#comments(href='/categories/', data-pjax-state='')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923111427.svg', srcset='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923111427.svg', data-ll-status='loaded')
                        p 分类
                      a#about(href='/link/', data-pjax-state='load')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923111759.svg', srcset='https://cdn.jsdelivr.net/gh/jinan6/PicGo-img/img/20200923111759.svg', data-ll-status='loaded')
                        p 友链

            if(theme.social)
              #site_social_icons
                !=fragment_cache('social', function(){return partial('includes/header/social')})
          #scroll-down
            i.fas.fa-angle-down.scroll-down-effects
        else
          #page-site-info
            h1#site-title=site_title

  4. 最后 三连就可以查看效果了

Hexo Butterfly
Butterfly

本文作者: 仅安
本文链接: https://jinan6.vip/posts/3112011529/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！