0%

使用Hexo与Next的建博客之旅

使用GitHub和HEXO的博客搭建过程

废话

作为一个小白,在WEB方面的小白,搭建一个简单的静态博客确实费了许多精力.其中参考了无数资料,有官方的,非官方的…反正搭建不易,现在就详述一下,博客是怎么搭建起来的.

没错,看到这个一级标题了吧,这篇文章里面不是一个水到渠成的方法,我会把我所踩过的坑以及踩坑用的方法写进来,所以…😜

准备工作

Git

准备什么咧?因为我们的博客是建在GitHub上啦,所以你需要一个Git. Git 下载地址

按照Windows下面装软件的惯例,就 下一步 下一步 下一步 我同意 下一步 下一步 安装 完成 就装好啦~

如果是Linux, Git 应该已经集成到大部分的系统里啦~如果没有,就

DEB系: Debian, Ubuntu, Deepin, Linux Mint以及各种衍生版本,包括Kali Linux和Parrot Sec Linux

1
$ sudo apt-get install git

RedHat系: Fedora, RHEL, CentOS

1
$ sudo dnf install git

emmm如果是CentOS这种万年不更新的系统的话,用yum就好啦:

1
$ sudo yum install git

Open SUSE: 没办法,SUSE自成一派,不过 YasT 确实好用,笔者电脑上就是Windows 10 + Open SUSE

1
$ sudo zypper install git

Arch系:Arch Linux, Manjaro, Gentoo

1
$ sudo pacman -S git

我猜装个git不需要用AUR吧😨

(别问笔者为啥各大Linux的安装包管理器背的这么熟练,说出来都是泪)

Node.js

好了,Git 装完了,接下来装Hexo(我们的主角)的必备依赖!

他就是Node.js!(反正笔者也没学过,感觉很厉害就是了) Node.js下载地址

GitHub账号配置

接下来我们得注册一个GitHub 账号…… 喂,这么重要的东西,应该早就有了吧(手动滑稽

注册完后,我们继续……

现在我们来配置一下Git (什么?Hexo还没装呢?就先配置Git? )

Windows用户:

装好Git后,会有一个叫做Git Bash的东东出现在你的桌面上 ( Linux用户:不存在的 )

然后…… 你可以找个清闲的地方 ( 不是叫你喝茶 ) ,新建一个文件夹,取一个喜欢的名字. ( 喂,不是给女儿起名字,那么认真干嘛 ) 然后右键,选择Git Bash Here.

Linux用户:

1
2
$ mkdir ./MyBlog ##你喜欢就好
$ cd ./MyBlog ##进入这个目录

然后,现在我们就可以把Windows和Linux统一起来说啦.

先配置一下你刚注册的账户~

1
2
$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub注册邮箱"

( 啥? 没有一个叫 你的GitHub用户名 的用户? 不至于吧,我说的是你的GitHub的用户名,不是叫”你的GitHub用户名”的用户😓)

我们为了避免每次使用都要输入密码登录,可以配置一个叫SSH Key的东西:

1
$ ssh-keygen -t rsa -C "你的GitHub注册邮箱"

( 你不至于连open-ssh都没有吧……那得是一个多么精简的系统 )

接下来会让你输入各种信息,啥都不输,无脑回车就行了.

然后找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制.

再然后…… ( 我为哈说啥都要带个然后 )

打开GitHub_Settings_keys 页面,新建new SSH Key

为了保证访问速度……我就不在博客上添加图片了哈,不然GitHub该生气了(手动滑稽

Title随便写,想写啥写啥,然后把刚刚复制的id_rsa.pub的内容粘贴到下面的Key里面,点击 Add SSH key,就OK啦!

然后我们回到Bash ( Linux用户别抬杠, 是个shell都可以, 笔者用的是zsh )

1
$ ssh git@github.com

如果出现了 Hi XXXX! You’ve successfully……balabala……就说明配置成功啦! 具体原理如下:

引自知乎 吴润的文章

这里之所以设置GitHub密钥原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

正式开始

安装HEXO

当当当! 我们的主角HEXO要登场啦!

1
$ npm install -g hexo-cli

在我们的Git Bash里使用这条指令来安装hexo!安装会 比较 狠 慢! 因为……我们有伟大的万里长城防火墙啊…… ( 逃

初始化博客

安装好之后,检查一下你当前的路径是不是刚刚让你找的清闲之地———一个你想把博客布置起来的空文件夹.

怎么检查?

1
$ pwd

然后看输出的路径是不是 xxx/MyBlog 或者其他你取的名字.

确认完毕后,输入:

1
$ hexo init

开始初始化你的博客吧!

然后一屏令人目眩的代码飞过……

我们现在打开你的博客文件夹,就能看见下面多出了很多文件啦!

本地预览博客

输入:

1
2
$ hexo g
$ hexo s

然后在浏览器点开 本地博客 就能看见我们的博客啦!

HEXO的正确使用姿势

现在我们瞅一眼 hexo 的正确使用姿势:

1
2
3
$ npm install hexo -g #安装Hexo
$ npm update hexo -g #升级
$ hexo init #初始化博客

命令简写:

1
2
3
4
5
6
7
8
9
$ hexo n "文章名称" == hexo new "文章名称" #新建文章,注意,""里面是你的文章名称,不是 文章名称 ......
$ hexo g == hexo generate #生成本地文件
$ hexo s == hexo server #启动服务预览
$ hexo d == hexo deploy #部署到远程服务器
$ hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
$ hexo server -s #静态模式
$ hexo server -p 5000 #更改端口
$ hexo server -i 192.168.1.1 #自定义 IP
$ hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

就这样, 我们就可以掌握 hexo 的用法啦!

发布到GitHub

看我们刚搭好的博客, 是不是有些激动?

什么? 嫌丑?

那不是现在要操心的事情……应当操心的是,如何才能发布到网站上?

这个时候,GitHub就要大显神威了. 打开你的GitHub页面, 然后新建一个仓库……仓库取名叫

1
你的用户名.github.io

我也不知道为啥非要写用户名,但是不写用户名后面的配置会出各种各样的奇怪问题……

然后创建就可以啦.

然后! 用Visual Studio Code / Vim / Emacs / Sublime / Atom / Kate / Notepad …… ( 是个编辑器都行 ) 打开位于博客文件夹下的_config.yml, 然后把光标扯到最下面, 看到尾端有一个deploy的东东,编辑一下:

1
2
3
4
5
6
## Deployment
### Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:你的用户名/你的用户名.github.io.git
branch: master

回到Bash, 输入下面的指令安装部署插件:

1
$ npm install hexo-deployer-git --save

然后! 我们就可以很方便的部署网站啦! 两条指令搞定!

1
2
$ hexo clean #清除上次的缓存
$ hexo g -d #等价于执行hexo g 后再执行一次 hexo d , 这两个指令已经介绍过了.

打开 你的用户名.github.io,你的网站就已经部署好啦!

日常使用

那我们怎么写博客呢?

只要打开Git Bash, cd到你的博客文件夹 ( Windows用户可以点开博客文件夹,右键 Git Bash Here)然后输入:

1
$ hexo new post "文章名称"

就能新建一篇文章啦!

你可以去下载一个 Typora ,一款很好用的MarkDown编辑器–——-好用到你根本不会觉得你在写一个叫做MarkDown的标记语言…….事实上, 笔者现在仍旧对MarkDown保持着一股生疏感.安装好Typora之后,你可以打开设置,然后就可以设置每次打开的文件夹啦! 我们把文件夹设置为:

1
MyBlog\source\_posts

以后写的文章就可以保存在这里啦!

想更新到GitHub的话,就是:

1
2
$ hexo clean
$ hexo g -d

然后打开你的博客地址 : 你的用户名.github.io就可以看见你刚写的文章啦!

PS: 由于GitHub Pages需要每次重建,所以你可能不会很快的看见自己的文章咯~这样的话最好等上两分钟,你的文章就会出现在博客列表里啦!

用Next美化 HEXO & GitHub 博客

回顾

上文我们已经搭建好一个基于 GitHub Pages 的播客啦, 但是 HEXO 自带的主题是真的丑……

所以, 作为外观协会的成员(假的), 我觉得有必要美化一下我们的博客.

那怎么美化咧??? 会不会很麻烦?

你要是个死宅, 那还真挺麻烦的…

开始吧

安装NexT主题

为了省事, 我们选择了美观而又方便的NexT主题.

安装这么做:

1
2
3
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

git clone git://github.com/theme-next/hexo-theme-next themes/next

注意哦, 这一定是在你的博客目录下面执行的, 在别的文件夹下面是没有效果的哦!

然后你可以用编辑器打开站点配置文件_config.yml, 然后找到theme, 把landscape 改成 next就大功告成啦! 但是一定要注意哦, 对于yml文件, 每个属性名称冒号的后面一定是有一个空格的, 否则设置会出错哦!

1
theme: next #注意 ‘:’ 后面是有空格的!

初级配置

现在我们对NexT主题进行一个小小的配置.

打开博客文件夹下的themes → next → _config.yml文件, 对,也叫 _config.yml …… 不要晕了哦!

NexT提供了四种主题风格,分别是Muse、Mist、Pisces、Gemini, 可以在刚打开的_config.yml里找到scheme这一项进行修改,然后 :

1
$ hexo s

浏览器打开 本地博客 就能看见你的新主题啦!

想立刻部署到GitHub? 没问题呀, 但是我们先不急……在本地配置满意了在上传也不迟呀.

自定义外观

笔者的站点配置文件 ( 可以先跳过 )

我先在这里贴一下我的站点配置,可以先跳过哦:

主题配置文件:

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
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
## ---------------------------------------------------------------
## Theme Core Configuration Settings
## See: https://theme-next.org/docs/theme-settings/
## ---------------------------------------------------------------

## If false, merge configs from `_data/next.yml` into default configuration (rewrite).
## If true, will fully override default configuration by options from `_data/next.yml` (override). Only for NexT settings.
## And if true, all config from default NexT `_config.yml` must be copied into `next.yml`. Use if you know what you are doing.
## Useful if you want to comment some options from NexT `_config.yml` by `next.yml` without editing default config.
override: false

## Console reminder if new version released.
reminder: false

## Allow to cache content generation. Introduced in NexT v6.0.0.
cache:
enable: true

## Remove unnecessary files after hexo generate.
minify: false

## Define custom file paths.
## Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl


## ---------------------------------------------------------------
## Site Information Settings
## See: https://theme-next.org/docs/getting-started/
## ---------------------------------------------------------------

favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

## hexo-generator-feed required for rss support. Leave rss as blank to use site's feed link.
## Set rss to false to disable feed link. Set rss to specific value if you have burned your feed already.
rss: /atom.xml

footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2019

# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heart
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#808080"

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright: Reverier

powered:
# Hexo link (Powered by Hexo).
enable: false
# Version info of Hexo after Hexo link (vX.X.X).
version: false

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: false

# Beian ICP information for Chinese users. See: http://www.beian.miit.gov.cn
beian:
enable: false
icp:
baidushare:
type: button
baidushare: true
jiathis: true

## Creative Commons 4.0 International License.
## See: https://creativecommons.org/share-your-work/licensing-types-examples
## Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
## You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
## CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
license: zero
sidebar: false
post: false
language:


## ---------------------------------------------------------------
## SEO Settings
## ---------------------------------------------------------------

## Disable Baidu transformation on mobile devices.
disable_baidu_transformation: false

## Set a canonical link tag in your hexo, you could use it for your SEO of blog.
## See: https://support.google.com/webmasters/answer/139066
## Remember to set up your URL in Hexo `_config.yml` (e.g. url: http://yourdomain.com)
canonical: true

## Change headers hierarchy on site-subtitle (will be main site description) and on all post / page titles for better SEO-optimization.
seo: false

## If true, will add site-subtitle to index page.
## Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: false

## Automatically add external URL with Base64 encrypt & decrypt.
exturl: false

## Google Webmaster tools verification.
## See: https://www.google.com/webmasters
google_site_verification: true

## Bing Webmaster tools verification.
## See: https://www.bing.com/webmaster
bing_site_verification:

## Yandex Webmaster tools verification.
## See: https://webmaster.yandex.ru
yandex_site_verification:

## Baidu Webmaster tools verification.
## See: https://ziyuan.baidu.com/site
baidu_site_verification:

## Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
baidu_push: true


## ---------------------------------------------------------------
## Menu Settings
## ---------------------------------------------------------------

## Usage: `Key: /link/ || icon`
## Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
## Value before `||` delimiter is the target link.
## Value after `||` delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, question icon will be loaded.
## When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
## External url should start with http:// or https://
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

## Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: true


## ---------------------------------------------------------------
## Scheme Settings
## ---------------------------------------------------------------

## Schemes
##scheme: Muse
##scheme: Mist
##scheme: Pisces
scheme: Gemini

## Fireworks
fireworks: true
## ---------------------------------------------------------------
## Sidebar Settings
## See: https://theme-next.org/docs/theme-settings/sidebar
## ---------------------------------------------------------------

## Posts / Categories / Tags in sidebar.
site_state: true

## Social Links
## Usage: `Key: permalink || icon`
## Key is the link label showing to end users.
## Value before `||` delimiter is the target permalink.
## Value after `||` delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/Reverier-Xu || github
E-Mail: mailto:reverier.xu@gmail.com || envelope
微博: https://weibo.com/dreamskytech || weibo
知乎: https://www.zhihu.com/people/reverier-78/activities || stack-overflow
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

social_icons:
enable: true
icons_only: false
transition: false

## Blog rolls
links_icon: link
links_title: Links
links_layout: block
##links_layout: inline
links:
Title: http://example.com

## Sidebar Avatar
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/logo.jpg
# If true, the avatar would be dispalyed in circle.
rounded: true
# If true, the avatar would be rotated with the cursor.
rotated: true

## Table Of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
max_depth: 6

sidebar:
# Sidebar Position.
position: left
#position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar Display (only for Muse | Mist), available values:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false

## A button to open designated chat widget in sidebar.
## Firstly, you need enable the chat service you want to activate its sidebar button.
chat:
enable: true
service: chatra
#service: tidio
icon: comment # Icon name in Font Awesome, set false to disable icon.
text: 聊天 # Button text, change it as you wish.

# Post wordcount display settings
## Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true

## ---------------------------------------------------------------
## Post Settings
## See: https://theme-next.org/docs/theme-settings/posts
## ---------------------------------------------------------------

## Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true

## Automatically saving scroll position of each page in the browser.
save_scroll: false
## rss: /atom.xml
## Automatically excerpt description in homepage as preamble text.
excerpt_description: true

## Automatically excerpt (Not recommend).
## Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150

## Read more button
## If true, the read more button would be displayed in excerpt section.
read_more_btn: true

## Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: true
categories: true

## Post wordcount display settings
## Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: false
item_text_post: false
item_text_total: false
awl: 2
wpm: 275

## Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: false

## Wechat Subscriber
wechat_subscriber:
enable: false
qcode: #/uploads/wechat-qcode.jpg
#description: Subscribe to my blog by scanning my public wechat account.

## Reward (Donate)
reward_settings:
# If true, reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
enable: false
animation: false
#comment: Donate comment here.

reward:
#wechatpay: /images/wechatpay.png
#alipay: /images/alipay.png
#bitcoin: /images/bitcoin.png

## Related popular posts
## Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: false
title: # Custom header, leave empty to use the default one
display_in_home: false
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false

## Post edit
## Dependencies: https://github.com/hexojs/hexo-deployer-git
post_edit:
enable: false
url: https://github.com/reverier-xu/reverier-xu.github.com/tree/master/ # Link for view source
#url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name # Link for fork & edit


## ---------------------------------------------------------------
## Custom Page Settings
## See: https://theme-next.org/docs/theme-settings/custom-pages
## ---------------------------------------------------------------

## Enable "cheers" for archive page.
cheers: true

## TagCloud settings for tags page.
tagcloud:
# If true, font size, font color and amount of tags can be customized
enable: false
# All values below are same as default, change them by yourself
min: 12 # Minimun font size in px
max: 30 # Maxium font size in px
start: "#ccc" # Start color (hex, rgba, hsla or color keywords)
end: "#111" # End color (hex, rgba, hsla or color keywords)
amount: 200 # Amount of tags, change it if you have more than 200 tags

## Google Calendar
## Share your recent schedule to others via calendar page.
## API Documentation: https://developers.google.com/google-apps/calendar/v3/reference/events/list
## To get api_key: https://console.developers.google.com
## Create & manage a public Google calendar: https://support.google.com/calendar/answer/37083


## ---------------------------------------------------------------
## Misc Theme Settings
## ---------------------------------------------------------------

## Set the text alignment in posts / pages.
text_align:
# Available values: start | end | left | right | center | justify | justify-all | match-parent
desktop: justify
mobile: justify

## Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false

## Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222"

## Hide sticky headers and color the menu bar on Safari (iOS / macOS).
safari_rainbow: false

## Optimize the display of scrollbars on webkit based browsers.
custom_scrollbar: false

## Custom Logo (Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.jpg

codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style:

back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: false


## Reading progress bar
reading_progress:
enable: false
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 2px

## `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true
permalink: https://github.com/Reverier-Xu
title: My tour on GitHub


## ---------------------------------------------------------------
## Font Settings
## See: https://theme-next.org/docs/theme-settings/#Fonts-Customization
## ---------------------------------------------------------------
## Find fonts on Google Fonts (https://www.google.com/fonts)
## All fonts set here will have the following styles:
## light | light italic | normal | normal italic | bold | bold italic
## Be aware that setting too much fonts will cause site running slowly
## ---------------------------------------------------------------
## To avoid space between header and sidebar in scheme Pisces / Gemini, Web Safe fonts are recommended for `global` (and `title`):
## Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
## ---------------------------------------------------------------

font:
# Use custom fonts families or not.
# Depended options: `external` and `family`.
enable: true

# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host: https://fonts.cat.net

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.
global:
external: true
family: #Fira Code, Helvetica, Tahoma, Arial, "PingFang SC", "WenQuanYi Micro Hei","Hiragino Sans GB", "Heiti SC", "Microsoft YaHei"
size:

# Font settings for site title (.site-title).
title:
external: true
family: #"PingFang SC", "WenQuanYi Micro Hei","Hiragino Sans GB", "Heiti SC", "Microsoft YaHei"
size:

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family:
size:

# Font settings for posts (.post-body).
posts:
external: true
family:

# Font settings for <code> and code blocks.
codes:
external: true
family: 'Fira Code'


## ---------------------------------------------------------------
## Third Party Plugins & Services Settings
## See: https://theme-next.org/docs/third-party-services/
## You may need to install dependencies or set CDN URLs in `vendors`
## There are two different CDN providers by default:
## - jsDelivr (cdn.jsdelivr.net), works everywhere even in China
## - CDNJS (cdnjs.cloudflare.com), provided by cloudflare
## ---------------------------------------------------------------

## Math Formulas Render Support
math:
enable: false

# Default (true) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in Front-matter.
# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
per_page: true

# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
mathjax:
enable: false
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: false

# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
katex:
enable: false
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false

## Easily enable fast Ajax navigation on your website.
## Dependencies: https://github.com/theme-next/theme-next-pjax
## For moreinformation: https://github.com/MoOx/pjax
pjax: false

## Fancybox. There is support for old version 2 and new version 3.
## Choose only one variant, do not need to install both.
## To install 2.x: https://github.com/theme-next/theme-next-fancybox
## To install 3.x: https://github.com/theme-next/theme-next-fancybox3
## For more information: https://fancyapps.com/fancybox
fancybox: false

## A JavaScript library for zooming images like Medium.
## Do not enable both `fancybox` and `mediumzoom`.
## Dependencies: https://github.com/theme-next/theme-next-mediumzoom
## For more information: https://github.com/francoischalifour/medium-zoom
mediumzoom: false

## Vanilla JavaScript plugin for lazyloading images.
## Dependencies: https://github.com/theme-next/theme-next-lazyload
## For more information: https://github.com/ApoorvSaxena/lozad.js
lazyload: false

## Pangu Support
## Dependencies: https://github.com/theme-next/theme-next-pangu
## For more information: https://github.com/vinta/pangu.js
pangu: false

## Quicklink Support
## Dependencies: https://github.com/theme-next/theme-next-quicklink
## For more information: https://github.com/GoogleChromeLabs/quicklink
quicklink:
enable: false

# Quicklink (quicklink.umd.js script) is loaded on demand.
# Add `quicklink: true` in Front-matter of the page or post you need.
# Home page and archive page can be controlled through home and archive options below.
home: true
archive: true

# Default (true) will initialize quicklink after the load event fires.
delay: true
# Custom a time in milliseconds by which the browser must execute prefetching.
timeout: 3000
# Default (true) will enable fetch() or falls back to XHR.
priority: true

# For more flexibility you can add some patterns (RegExp, Function, or Array) to ignores.
# See: https://github.com/GoogleChromeLabs/quicklink#custom-ignore-patterns
ignores:

## Bookmark Support
## Dependencies: https://github.com/theme-next/theme-next-bookmark
bookmark:
enable: false
# If auto, save the reading position when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto


## ---------------------------------------------------------------
## Comments and Widgets
## See: https://theme-next.org/docs/third-party-services/comments-and-widgets
## ---------------------------------------------------------------

## Multiple Comment System Support
comments:
# Available values: tabs | buttons
style: tabs
# Choose a comment system to be displayed by default.
# Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte
active:
# Setting `true` means remembering the comment system selected by the visitor.
storage: true

## Disqus
disqus:
enable: false
shortname:
count: true
lazyload: false

## DisqusJS
## Alternative Disqus - Render comment component using Disqus API.
## Demo: https://suka.js.org/DisqusJS/
## For more information: https://github.com/SukkaW/DisqusJS
disqusjs:
enable: false
# API Endpoint of Disqus API (https://disqus.com/api/).
# Leave api empty if you are able to connect to Disqus API.
# Otherwise you need a reverse proxy for Disqus API.
# For example:
# api: https://disqus.skk.moe/disqus/
api:
apikey: # Register new application from https://disqus.com/api/applications/
shortname: # See: https://disqus.com/admin/settings/general/

## Changyan
changyan:
enable: false
appid:
appkey:

## Valine
## You can get your appid and appkey from https://leancloud.cn
## For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
notify: false # Mail notifier. See: https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: zh-cn # Language, available values: en, zh-cn
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # If false, comment count will only be displayed in post page, not in home page

## LiveRe comments system
## You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: MTAyMC80NjE1MC8yMjY2MQ==

## Gitalk
## Demo: https://gitalk.github.io
## For more information: https://github.com/gitalk/gitalk
gitalk:
enable: false
github_id: # GitHub repo owner
repo: # Repository name to store issues
client_id: # GitHub Application Client ID
client_secret: # GitHub Application Client Secret
admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language:


## ---------------------------------------------------------------
## Content Sharing Services
## See: https://theme-next.org/docs/third-party-services/content-sharing-services
## ---------------------------------------------------------------

## AddThis Share. See: https://www.addthis.com
## Go to https://www.addthis.com/dashboard to customize your tools.
add_this_id:

## Likely Share
## For more information: https://ilyabirman.net/projects/likely/, https://github.com/ilyabirman/Likely
## Likely supports four looks, nine social networks, any button text.
## You are free to modify the text value and order of any network.
likely:
enable: false
look: normal # Available values: normal | light | small | big
networks:
twitter: Tweet
facebook: Share
linkedin: Link
gplus: Plus
vkontakte: Share
odnoklassniki: Class
telegram: Send
whatsapp: Send
pinterest: Pin

## NeedMoreShare2
## Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
## For more information: https://github.com/revir/need-more-share2
## iconStyle: default | box
## boxForm: horizontal | vertical
## position: top / middle / bottom + Left / Center / Right
## networks:
## Weibo | Wechat | Douban | QQZone | Twitter | Facebook | Linkedin | Mailto | Reddit | Delicious | StumbleUpon | Pinterest
## GooglePlus | Tumblr | GoogleBookmarks | Newsvine | Evernote | Friendfeed | Vkontakte | Odnoklassniki | Mailru
needmoreshare2:
enable: false
postbottom:
enable: false
options:
iconStyle: box
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: false
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook


## ---------------------------------------------------------------
## Statistics and Analytics
## See: https://theme-next.org/docs/third-party-services/statistics-and-analytics
## ---------------------------------------------------------------


## CNZZ count
cnzz_siteid:

## Application Insights
## See: https://azure.microsoft.com/en-us/services/application-insights
application_insights:



## Facebook comments plugin
## This plugin depends on Facebook SDK.
## If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
enable: false
num_of_posts: 10 # Minimum posts num is 1
width: 100% # Default width is 550px
scheme: light # Default scheme is light (light or dark)

## VKontakte API Support


## Another tool to show number of visitors to each article.
## Visit https://console.firebase.google.com/u/0/ to get apiKey and projectId.
## Visit https://firebase.google.com/docs/firestore/ to get more information about firestore.
firestore:
enable: false
collection: articles # Required, a string collection name to access firestore database
apiKey: # Required
projectId: # Required

## Show Views / Visitors of the website / page with busuanzi.
## Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye


## ---------------------------------------------------------------
## Search Services
## See: https://theme-next.org/docs/third-party-services/search-services
## ---------------------------------------------------------------

## Algolia Search
## Dependencies: https://github.com/theme-next/theme-next-algolia-instant-search
## For more information: https://www.algolia.com
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"

## Local search
## Dependencies: https://github.com/wzpan/hexo-generator-search
local_search:
enable: false
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

## Swiftype Search API Key
swiftype_key:


## ---------------------------------------------------------------
## Chat Services
## See: https://theme-next.org/docs/third-party-services/chat-services
## ---------------------------------------------------------------

## Chatra Support
## See: https://chatra.io
## Dashboard: https://app.chatra.io/settings/general
chatra:
enable: false
async: true
id: # Visit Dashboard to get your ChatraID
#embed: # Unfinished experimental feature for developers. See: https://chatra.io/help/api/#injectto

## Tidio Support
## See: https://www.tidiochat.com
## Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
enable: false
key: # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer


## ---------------------------------------------------------------
## Tags Settings
## See: https://theme-next.org/docs/tag-plugins/
## ---------------------------------------------------------------

## Note tag (bs-callout)
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

## Tabs tag
tabs:
transition:
tabs: false
labels: true
border_radius: 0

## PDF tag, requires two plugins: pdfObject and pdf.js
## pdfObject will try to load pdf files natively, if failed, pdf.js will be used.
## The following `cdn` setting is only for pdfObject, because cdn for pdf.js might be blocked by CORS policy.
## So, you must install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
## See: https://github.com/theme-next/theme-next-pdf
pdf:
enable: false
# Default height
height: 500px

## Mermaid tag
mermaid:
enable: false
# Available themes: default | dark | forest | neutral
theme: forest


## ---------------------------------------------------------------
## Animation Settings
## ---------------------------------------------------------------

## Use velocity to animate everything.
## For more information: http://velocityjs.org
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn

## Progress bar in the top during page loading.
## Dependencies: https://github.com/theme-next/theme-next-pace
## For more information: https://github.com/HubSpot/pace
pace:
enable: false
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal

## JavaScript 3D library.
## Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: false
delay: false # Set true to further delay loading
three_waves: true
canvas_lines: true
canvas_sphere: true

## Canvas-nest
## Dependencies: https://github.com/theme-next/theme-next-canvas-nest
## For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: true
onmobile: true # Display on mobile or not
color: "0,0,255" # RGB values, use `,` to separate
opacity: 0.5 # The opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # The number of lines

## Canvas-ribbon
## Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
## For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
enable: false
size: 300 # The width of the ribbon
alpha: 0.6 # The transparency of the ribbon
zIndex: -1 # The display level of the ribbon


##! ---------------------------------------------------------------
##! DO NOT EDIT THE FOLLOWING SETTINGS
##! UNLESS YOU KNOW WHAT YOU ARE DOING
##! See: https://theme-next.org/docs/advanced-settings
##! ---------------------------------------------------------------

## Script Vendors. Set a CDN address for the vendor you want to customize.
## Be aware that you would better use the same version as internal ones to avoid potential problems.
## Please use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib

# Internal version: 3.4.1
# Example:
# jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
# jquery: //cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
jquery:

# Internal version: 4.7.0
# Example:
# fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
# fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
fontawesome:

# MathJax
# Example:
# mathjax: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# mathjax: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML
# mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
# mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0
mathjax:
mhchem:

# KaTeX
# Example:
# katex: //cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css
# katex: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css
# copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
# copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css
katex:
copy_tex_js:
copy_tex_css:

# Internal version: 0.2.8
# Example:
# pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
pjax:

# FancyBox
# Example:
# fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
# fancybox: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js
# fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
# fancybox_css: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css
fancybox:
fancybox_css:

# Medium-zoom
# Example:
# mediumzoom: //cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js
mediumzoom:

# Lazyload
# Example:
# lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
# lazyload: //cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js
lazyload:

# Pangu
# Example:
# pangu: //cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js
# pangu: //cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js
pangu:

# Quicklink
# Example:
# quicklink: //cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js
quicklink:

# Internal version: 1.0.0
# Example:
# bookmark: //cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@1/bookmark.min.js
bookmark:

# DisqusJS
# Example:
# disqusjs_js: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
# disqusjs_css: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
disqusjs_js:
disqusjs_css:

# Valine
# Example:
# valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
# valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.4/Valine.min.js
valine:

# Gitalk
# Example:
# gitalk_js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
# gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css
gitalk_js:
gitalk_css:

# likely
# Example:
# likely_js: //cdn.jsdelivr.net/npm/ilyabirman-likely@2/release/likely.js
# likely_css: //cdn.jsdelivr.net/npm/ilyabirman-likely@2/release/likely.css
likely_js:
likely_css:

# Internal version: 1.0.0
# Example:
# needmoreshare2_js: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.js
# needmoreshare2_css: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.css
needmoreshare2_js:
needmoreshare2_css:

# Algolia Search
# Example:
# algolia_instant_js: //cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.js
# algolia_instant_css: //cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.css
algolia_instant_js:
algolia_instant_css:

# PDF
# Example:
# pdfobject: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
# pdfobject: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js
pdfobject:

# Mermaid
# Example:
# mermaid: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
# mermaid: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js
mermaid:

# Internal version: 1.2.1
# Example:
# velocity: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.min.js
# velocity: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js
# velocity_ui: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.ui.min.js
# velocity_ui: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.ui.min.js
velocity:
velocity_ui:

# Internal version: 1.0.2
# Example:
# pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
# pace: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js
# pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
# pace_css: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-minimal.min.css
pace:
pace_css:

# Internal version: 1.0.0
# Example:
# three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
# three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
# canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
# canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js
three:
three_waves:
canvas_lines:
canvas_sphere:

# Internal version: 1.0.0
# Example:
# canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
# canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
canvas_nest:
canvas_nest_nomobile:

# Internal version: 1.0.0
# Example:
# canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js
canvas_ribbon:

## Assets
css: css
js: js
images: images

passage_end_tag:
enabled: true

站点配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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
## Hexo Configuration
### Docs: https://hexo.io/docs/configuration.html
### Source: https://github.com/hexojs/hexo/

## Site
title: Reverier 个人博客
subtitle: 记录, 分享, 实践
description: Hope, Marvel, Youth.
keywords: 算法, 程序开发, 生活, 操作系统, 信息安全
google-site-verification: uSLhm-2JUAoM7eOTok7L19IyTJqp7dgwYpDu8dthN5Y
author: Reverier Xu
language: zh-CN
timezone: Asia/Shanghai

chatra:
enable: true
async: true
id: MwHS8RYqLswW4Gep4
## URL
### If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.wootec.top
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

## Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

## Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:

## Home page setting
## path: Root path for your blogs index page. (default = '')
## per_page: Posts displayed per page. (0 = disable pagination)
## order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 7
order_by: -date

## Category & Tag
default_category: uncategorized
category_map:
tag_map:

## Date / Time format
### Hexo uses Moment.js to parse and display date
### You can customize the date format as defined in
### http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

## Pagination
### Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

## Extensions
### Plugins: https://hexo.io/plugins/
### Themes: https://hexo.io/themes/
theme: next
plugins: hexo-generate-feed



## Deployment
### Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:reverier-xu/reverier-xu.github.io.git
branch: master

可以看见, 文件中对于各项的设置介绍已经十分的清楚了.

开始配置

小红心

首先, 大家也看到了笔者的博客, 鼠标点击会出来小红心 ( 别抬杠说不是红的 ), 这个效果怎么设置呢?

/themes/next/source/js/src下新建文件 clicklove.js ,接着把下面的代码拷贝粘贴到 clicklove.js 文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
!function (e, t, a) {
function n() {
c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
} function r() {
for (var e = 0; e < d.length; e++)d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y-- , d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
requestAnimationFrame(r)
} function o() {
var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) }
} function i(e) {
var a = t.createElement("div");
a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a)
} function c(e) {
var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a)
} function s() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
} var d = [];
e.requestAnimationFrame = function () {
return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) }
}(), n()
}(window, document);

\themes\next\layout\_layout.swig文件末尾添加:

1
<script type="text/javascript" src="/js/src/clicklove.js"></script>

然后跑一下 :

1
$ hexo s

就能看见效果啦!

动态背景:变幻线
1
2
3
4
5
6
7
canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: '0,0,0' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 150 # the number of lines

在主题配置文件找到上面的配置, 然后把enable改成true就好啦!

其实NexT集成的特效有很多的,别的你可以去搜搜看,这里就只介绍博主的搭建过程啦.

但是你用hexo s跑了一下,发现并没有出现想要的效果欸, 骗人!

那当然不是啦,去下载一个资源包就好了:

1
2
3
$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

git clone git://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

这就OK啦!

现在打开博客看看, 是不是很有趣呢?

作者头像设置

如何设置头像呢?

你可以把头像文件放在博客主目录/themes/next/source/images目录下,然后在主题配置文件中:

1
2
3
4
5
6
7
8
9
10
11
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/author.jpg #在这里填写我们刚放的图片~
# If true, the avatar would be dispalyed in circle.
rounded: true #开启鼠标进入时的旋转特效~
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1 #这个是缩放,,可以不设置
# If true, the avatar would be rotated with the cursor.
rotated: true #这个用来设置头像是否为圆形显示,true为圆形哦

然后我们hexo s一下, 就能看见我们的头像出现啦! 现在把鼠标移上去, 是不是就能看见头像顺溜的转了一圈啦?

文章结束标志

在路径 \themes\next\layout\_macro 中新建一个叫 passage-end-tag.swig 文件, 注意后缀要正确哦, 然后把下面的代码复制进去:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">你想在文章末尾对读者说的话</div>
{% endif %}
</div>

接着我们打开\themes\next\layout\_macro\post.swig文件, 在post-body 之后你会看见一个END POST BODY, 然后继续往下翻, 最后在 post-footer 之前把这些代码粘贴进去:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

最后我们打开主题配置文件_config.yml,在末尾添加下面的代码:

1
2
passage_end_tag:
enabled: true

大功告成啦!!!

设置侧边栏

OK, 现在我们可以设置一下主题配置文件, 其中social表示社交信息, 我们可以填入我们相关的链接, 格式为链接名: 链接地址 || 链接图标, 其中链接图标必须是FontAwesome网站中存在的图标名哦, 否则在页面中是无法显示的!

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
## Posts / Categories / Tags in sidebar.
site_state: true

## Social Links
## Usage: `Key: permalink || icon`
## Key is the link label showing to end users.
## Value before `||` delimiter is the target permalink.
## Value after `||` delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/Reverier-Xu || github
E-Mail: mailto:reverier.xu@gmail.com || envelope
微博: https://weibo.com/dreamskytech || weibo
知乎: https://www.zhihu.com/people/reverier-78/activities || stack-overflow
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

social_icons:
enable: true
icons_only: false
transition: false

就像这样. 注意啊, 不要直接复制到你的博客里去! 否则你的名字下面就会挂上笔者的社交网站信息! 那就糗大咯!

添加文章版权信息

文章当然是要有自己的版权的咯! 我们在这里可以设置一下, 把自己的版权声明贴到博文下面去!

当然还是在主题配置文件里啦:

1
2
3
4
creative_commons:
license: by-nc-sa
sidebar: true
post: true

找到这一项,然后修改就可以啦!

不过个人建议放sidebar就可以了, 因为文章底部的好丑……

页面标签

标签页 Tags page
添加一个标签页面,里面包含您网站中的所有标签。

创建一个名为 tags 页面

hexo new page “tags”
1
编辑标签页, 设置页面类型为tags.

1
2
3
title: All tags
date: 2014-12-22 12:39:04
type: "tags"

添加 tags 到主题配置文件 _config.yml 里:

1
2
3
4
menu:
home: /
archives: /archives
tags: /tags

分类页 Categories page
添加一个分类页面,里面包含您网站中的所有分类。

创建一个名为 categories 页面

hexo new page “categories”
1
编辑分类页, 设置页面类型为 categories.

1
2
3
4
title: All categories
date: 2014-12-22 12:39:04
type: "categories"

添加 categories 到主题配置文件 _config.yml 里:

1
2
3
4
menu:
home: /
archives: /archives
categories: /categories

Hexo博客+Next主题鼠标点击特效

感觉鼠标点击出现效果也还不错哈,不妨在本站空白处点击一下看看效果~

效果

效果

配置

在主题 _config.yml 中添加动态配置项

1
2
3
cursor_effect:
enabled: true
type: love # fireworks:礼花 | explosion:爆炸 | love:浮出爱心 | text:浮出文字

代码

文件位置:/themes/next/layout/_custom/custom.swig ,添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if theme.cursor_effect %}
{% if theme.cursor_effect.type == "fireworks" %}
<script src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect.type == "explosion" %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect.type == "love" %}
<script src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect.type == "text" %}
<script src="/js/cursor/text.js"></script>
{% endif %}
{% endif %}

如果是第一次使用这个 custom.swig ,则需要在 /themes/next/layout/_layout.swig 中的 </body> 结束之前引入

1
{% include '_custom/custom.swig' %}

将以下4个 JS 文件复制到目录 /themes/next/source/js/cursor/ 下

fireworks.js
explosion.min.js
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
love.min.js
text.js

Hexo博客设置背景音乐

作者:神秘网友 发布时间:2020-11-01 09:15:24

Hexo博客设置背景音乐

Hexo博客设置背景音乐

本文讲解如何给HEXO的Next主题添加背景音乐,主要有以下应用场景:

  • 在单篇博文中添加音乐播放器
  • 在Next菜单栏添加一个全局的背景音乐播放器

下面详细展开……

  • HEXO支持Markdown语法下直接解析HTML代码,故我们可以考虑利用网易云Iframe插件生成播放器
  • 第一步,在网页版网易云找到你想要的音乐,这里我以《The Fight Song》举例

Hexo博客设置背景音乐

  • 第二步,点击《生成外链播放器》按钮并跳转,设置好高宽后复制粘贴HTML代码即可

Hexo博客设置背景音乐

注:网易云现在只支持一首歌的外链播放器,一键式的歌单外链播放器被禁用了。

  • 用Aplayer搭配Metingjs音乐插件生成歌单外链播放器
  • Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件
  • 直接复制以下代码,更改里面的servertypeid等个性化配置参数即可
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
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<!-- require MetingJS-->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
<!--网易云playlist外链地址-->

<!-- sercer= 音乐平台:`netease`,`tencent`,`kugou`,`xiami`,`baidu`-->
<meting-js
server="tencent"

type="playlist"
id="7936331352"
mini="false"
fixed="false"
list-folded="true"
autoplay="false"
volume="0.4"
theme="#FADFA3"
order="list"
loop="all"
preload="auto"
mutex="true">
</meting-js>

解析

server=“netease” —-> server指音乐平台,netease指网易云音乐
type=“playlist” —-> type类型,playlist列表
id=“813011828” —-> id指歌曲的外链id或者专辑或列表外链id

英文版参数设置

option default description
id require song id / playlist id / album id / search keyword
server require music platform: netease, tencent, kugou, xiami, baidu
type require song, playlist, album, search, artist
auto options music link, support: netease, tencent, xiami
fixed false enable fixed mode
mini false enable mini mode
autoplay false audio autoplay
theme #2980b9 main color
loop all player loop play, values: ‘all’, ‘one’, ‘none’
order list player play order, values: ‘list’, ‘random’
preload auto values: ‘none’, ‘metadata’, ‘auto’
volume 0.7 default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutex true prevent to play multiple player at the same time, pause other players when this player start play
lrc-type 0 lyric type
list-folded false indicate whether list should folded at first
list-max-height 340px list max height
storage-name metingjs localStorage key that store player setting

中文版参数设置

选项 默认 描述
id(编号) require 歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台) require 音乐平台:neteasetencentkugouxiamibaidu
type(类型) require songplaylistalbumsearchartist
auto(支持类种 类) options 音乐链接,支持:neteasetencentxiami
fixed(固定模式) false 启用固定模式,默认false
mini(迷你模式) false 启用迷你模式,默认false
autoplay(自动播放) false 音频自动播放,默认false
theme(主题颜色) #2980b9 默认#2980b9
loop(循环) all 播放器循环播放,值:“all”,one”,“none”
order(顺序) list 播放器播放顺序,值:“list”,“random”
preload(加载) auto 值:“none”,“metadata”,“’auto”
volume(声量) 0.7 默认音量,请注意播放器会记住用户设置,用户自己设置音量后默认音量将不起作用
mutex(限制) true 防止同时播放多个玩家,在该玩家开始播放时暂停其他玩家
lrc-type(歌词) 0 歌词显示
list-folded(列表折叠) false 指示列表是否应该首先折叠
list-max-height(最大高度) 340px 列出最大高度
storage-name(储存名称) metingjs 存储播放器设置的localStorage键

下面讲解如何获取歌单的外链?

  • 首先登陆网易云平台,找到自己想要链接的歌单,按F12,通过ELEMENT选取工具获取歌单的信息

Hexo博客设置背景音乐

  • 当然你也可以通过分享的方式获取歌单的外链id,这里我将QQ音乐的歌单分享到微博获得其id

Hexo博客设置背景音乐

我这里以Next主题举例

1
2
3
4
我是分享到qq的电脑端看见的。
https://i.y.qq.com/n2/m/share/details/taoge.html?platform=11&appshare=android_qq&appversion=10090506&hosteuin=NKvqowSz7KSP&id=7936331352&ADTAG=qfshare

所以猜测ID为 7936331352

3.1 将播放器嵌入到菜单

  • 找到主题文件:themes\next\layout\_macro\sidebar.swig找到sidebar-inner,复制之前的代码粘贴到<div>标签后

Hexo博客设置背景音乐

3.2 实现全局播放

  • 打开themes\next\layout文件夹找到_layout.swig,并复制以下代码到<head>标签后

    1
    2
    <!--pjax:防止跳转页面音乐暂停-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/pjax.js"></script>

Hexo博客设置背景音乐

  • themes\next\_config.yml中找到pajx(这里应该是pjax),将它设置为true,并保存
  • image-20210321111503703

Hexo博客设置背景音乐

  • 后依次执行hexo cleanhexo ghexo s,跳转页面时即看到全局播放效果,具体效果见本博客左侧菜单栏

注:网易云平台不支持全局跳转,最好使用QQ音乐

image-20210321112021046

网上查询后,又知道了一下。

Aplayer+MetingJS做音乐的外链

使用 hexo-tag-aplayer 插件

hexo-tag-aplayer 是Aplayer在hexo上的插件,这里的配置参考的是官方文档
,第一步安装 hexo-tag-aplayer:

1
2
npm install --save hexo-tag-aplayer

去MetingJS复制以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 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/dist/Meting.min.js"></script>

<meting-js
server="netease"
type="playlist"
id="60198">
</meting-js>

根据MetingJS文档修改
建议直接用auto这个参数,这样不用设置id

音乐布置总结

然后最后发现。。。还是网易云好用。。

image-20210321113835878

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=6671522046&auto=1&height=90"></iframe>

image-20210321122124005

做出来的就这样了,感觉还是太难了。已经重新搭过两次了。凑合着用吧。

参考文献:

链接:https://blog.csdn.net/qq_35859750/article/details/91452615

链接:https://www.tqwba.com/x_d/jishu/357465.html

链接: https://www.wootec.top/2019/08/19/%E7%94%A8Next%E7%BE%8E%E5%8C%96-HEXO-GitHub-%E5%8D%9A%E5%AE%A2/

-------- 春花秋月 夏荷冬雪 --------