-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsearch.xml
805 lines (805 loc) · 96.6 KB
/
search.xml
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>动态标题的设置</title>
<url>/2020/12/28/Blog/32645/</url>
<content><![CDATA[<h2 id="动态标题"><a class="markdownIt-Anchor" href="#动态标题"></a> 动态标题</h2>
<p style="text-indent:2em;">
效果图如下：
</p>
<img src= "/img/loading.gif" data-lazy-src="/img/blog/5/1.jpg" class="[motion]" title="离开当前页面时 " alt="离开当前页面时">
<img src= "/img/loading.gif" data-lazy-src="/img/blog/5/2.jpg" class="[motion]" title="返回当前页面时 " alt="返回当前页面时">
<p> 实现方法，引入 js 文件，在主题文件下的<code>/source/js/</code>下新建<code>FunnyTitle.js</code>，然后在添加到<code>themes/matery/layout/layout.ejs</code>或者添加到<code>themes/matery/layout/_partial/head.ejs</code>，其代码如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"><!--浏览器搞笑标题--></span><br><span class="line"> var OriginTitle = document.title;</span><br><span class="line"> var titleTime;</span><br><span class="line"> document.addEventListener('visibilitychange', function () {</span><br><span class="line"> if (document.hidden) {</span><br><span class="line"> $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/[email protected]/source/favicon.png");</span><br><span class="line"> document.title = 'ヽ(●-`Д´-)ノ你要玩捉迷藏嘛';</span><br><span class="line"> clearTimeout(titleTime);</span><br><span class="line"> }</span><br><span class="line"> else {</span><br><span class="line"> $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/[email protected]/source/favicon.png");</span><br><span class="line"> document.title = 'ヾ(Ő∀Ő3)ノ好哦！' + OriginTitle;</span><br><span class="line"> titleTime = setTimeout(function () {</span><br><span class="line"> document.title = OriginTitle;</span><br><span class="line"> }, 2000);</span><br><span class="line"> }</span><br><span class="line"> });</span><br></pre></td></tr></table></figure>
<p> 或者直接在<code>themes/matery/layout/layout.ejs</code>文件中添加如下代码：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"><script type="text/javascript"></span><br><span class="line"> var OriginTitile=document.title,st;</span><br><span class="line"> document.addEventListener("visibilitychange",function(){</span><br><span class="line"> document.hidden?(document.title="ヽ(●-`Д´-)ノ你要玩捉迷藏嘛",clearTimeout(st)):(document.title="(Ő∀Ő3)ノ好哦！",st=setTimeout(function(){document.title=OriginTitile},3e3))</span><br><span class="line"> })</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>Matery</tag>
<tag>美化与魔改</tag>
</tags>
</entry>
<entry>
<title>利用 Hexo 和 Github 搭建一个属于自己的个人博客(基础)</title>
<url>/2020/12/20/Blog/32921/</url>
<content><![CDATA[<h2 id="写在最前面"><a class="markdownIt-Anchor" href="#写在最前面"></a> 写在最前面</h2>
<P style="text-indent:2em;">
博客的搭建有很多种，可以利用第三方平台，也可以自建。比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、SegmentFault、简书、掘金、知乎专栏、Github Page 等等。
</p>
<P style="text-indent:2em;">
这次我要介绍的就是利用 Github Page 和 Hexo 搭建个人博客的方式。Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。下面就开始吧~
</p>
<h2 id="准备工作"><a class="markdownIt-Anchor" href="#准备工作"></a> 准备工作</h2>
<P style="text-indent:2em;">
Node.js 和 Git 的安装是搭建个人博客的第一步。下面我会详细的介绍如何安装 Node.js 和 Git。
</p>
<details>
<summary>点击查看</summary>
<div class="tabs" id="prepare"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#prepare-1">Node.js安装与配置</button></li><li class="tab"><button type="button" data-href="#prepare-2">Git安装与配置</button></li><li class="tab"><button type="button" data-href="#prepare-3">Github注册以及Github Pages创建</button></li><li class="tab"><button type="button" data-href="#prepare-4">配置Git用户名和邮箱</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="prepare-1"><p>首先去<a href="https://nodejs.org/en/download/">Node.js</a>官网，下载 node.js 的安装程序，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/1.jpg" class="[Node.js]" title="Node.js 的官网 " alt="Node.js 的官网"></p>
<p>下载好与电脑系统对应的安装程序后，开始安装流程：<br />
1.点击 Next<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/2.jpg" class="[Node.js]" title="安装步骤1 " alt="安装步骤1"></p>
<p>2.将"I accept the terms in the License Agreement"前面的复选框勾选，同意安装协议，再点 Next，进行下一步操作<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/3.jpg" class="[Node.js]" title="安装步骤2 " alt="安装步骤2"></p>
<p>3.选择 Node.js 安装程序的安装位置，在这里我以"C:\Program Files\nodejs"为例，点击 Next，进入下一步操作<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/4.jpg" class="[Node.js]" title="安装步骤3 " alt="安装步骤3"></p>
<p>4.选择安装的模块和功能，这里全部安装，并添加到系统环境变量 ，继续点击 Next，进入下一步操作<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/5.jpg" class="[Node.js]" title="安装步骤4 " alt="安装步骤4"></p>
<p>5.这一步可以跳过，这个选项的意思是安装一些编译本地模块的工具，比如 python，C/C++ 等，点击 Next，进入下一步<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/6.jpg" class="[Node.js]" title="安装步骤5 " alt="安装步骤5"></p>
<p>6.点击"Install"，等待 Node.js 安装完成<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/7.jpg" class="[Node.js]" title="安装步骤6 " alt="安装步骤6"></p>
<p>7.当看到下图所显示的情况，Node.js 就成功安装完毕<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/8.jpg" class="[Node.js]" title="安装步骤7 " alt="安装步骤7"></p>
<p>8.验证安装，并测试 Node.js 是否加入环境变量，当出现如下图的情况，Node.js 安装大功告成<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/9.jpg" class="[Node.js]" title="验证安装 " alt="验证安装是否成功"></p>
<p>如果执行<code>node -v</code>报错的话，那么手动将 Node.js 的安装路径添加到环境变量中，右击点击我的电脑 ——> 属性 ——> 高级系统设置 ——> 环境变量，在系统变量下找到名为 path 的变量名，如下图：<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/10.jpg" class="[Node.js]" title="添加系统环境变量 " alt="添加系统环境变量"></p>
<p>选中 path，或者双击，然后将你 node.js 的安装路径放在 path 变量值的最后面，如果添加之前 path 值最后有英文的分号，则直接将路径添加进去即可，如果没有，先添加分号，然后点击保存，回到桌面，打开cmd（Win+R），执行<code>node -v</code>，看是否成功。</p>
<p>9.设置 npm 的镜像源</p>
<figure class="highlight powershell"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 查看npm的配置</span></span><br><span class="line">npm config list</span><br><span class="line"><span class="comment"># 默认源</span></span><br><span class="line">npm config <span class="built_in">set</span> registry https://registry.npmjs.org</span><br><span class="line"><span class="comment"># 临时改变镜像源</span></span><br><span class="line">npm -<span class="literal">-registry</span>=https://registry.npm.taobao.org</span><br><span class="line"><span class="comment"># 永久设置为淘宝镜像源</span></span><br><span class="line">npm config <span class="built_in">set</span> registry https://registry.npm.taobao.org</span><br><span class="line"><span class="comment"># 另一种方式，编辑 ~/.npmrc 加入下面内容</span></span><br><span class="line">registry = https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure>
<p>10.设置 npm 的内置路径 ——> 全局模块路径和缓存路径<i><font color=LightCoral>（可选）</font></i><br />
如果不改变内置路径也可，除非你的 C 盘空间足够 bigger，这一步可以略过，不改变的话，它的路径在：</p>
<div class="note info flat"><p>此处参考：<a href="https://blog.csdn.net/jianleking/article/details/79130667">node 环境变量配置，npm 环境变量配置</a></p>
</div>
<p>● npm 包全局目录：<code>C:/Users/[username]/AppData/Roaming/npm/node_modules</code><br />
● npm 包全局命令目录：<code>C:/Users/[username]/AppData/Roaming/npm</code><br />
● npm 实际去找全局命令的目录：<code>C:/Users/[username]/.npmrc</code>文件内容的<code>prefix</code>值<br />
● npm 包全局cache目录：<code>C:/Users/[username]/.npmrc</code>文件内容的<code>cache</code>值<br />
首先在你 Node.js 的安装位置，新建两个文件夹，<code>node_global</code>和<code>node_cache</code>，我的路径是：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">D:\Learning\nodejs\node_global</span><br><span class="line">D:\Learning\nodejs\node_cache</span><br></pre></td></tr></table></figure>
<p>然后分别执行的命令就是：</p>
<figure class="highlight powershell"><table><tr><td class="code"><pre><span class="line">npm config <span class="built_in">set</span> prefix<span class="string">"D:\Learning\nodejs\node_global"</span></span><br><span class="line">npm config <span class="built_in">set</span> cache <span class="string">"D:\Learning\nodejs\node_cache"</span></span><br></pre></td></tr></table></figure>
<p>然后在配置环境变量，右击我的电脑 ——> 属性 ——> 高级系统设置 ——> 环境变量同样的位置，在用户变量的地方，找到 path 变量进行修改，修改值如下图。然后就大功告成了，Node.js 就安装完毕了。<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Nodejs/11.jpg" class="[Node.js]" title="添加用户环境变量 " alt="添加用户环境变量"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="prepare-2"><p>首先就是去<a href="https://git-scm.com/">Git官网</a>下载 Git，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/1.jpg" class="[Git]" title="Git官网 " alt="Git官网"></p>
<p>1.下载好 Git 的安装包，开始安装，打开安装包，出现如图的界面，点击 Next<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/2.jpg" class="[Git]" title="安装步骤1 " alt="安装步骤1"></p>
<p>2.选择你要安装的位置，我以 C 盘为例，路径为图中所示，安装到其他位置的话，点击 Browse，选择你要安装的位置，然后点击 Next，进入下一步<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/3.jpg" class="[Git]" title="安装步骤2 " alt="安装步骤2"></p>
<p>3.选择你是否创建桌面快捷放方式，其他默认即可，点击 Next，进入下一步<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/4.jpg" class="[Git]" title="安装步骤3 " alt="安装步骤3"></p>
<p>4.是否将 Git 快捷方式的目录加入开是菜单栏<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/5.jpg" class="[Git]" title="安装步骤4 " alt="安装步骤4"></p>
<p>5.这个是选择文本编辑器的方式，默认是 Vim，也可以选择其他的方式，自主选择，在这里我选择的 Vim 默认方式。选择好文本编辑器的方式后，点击 Next，进入下一个流程<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/6.jpg" class="[Git]" title="安装步骤5 " alt="安装步骤5"></p>
<p>6.选择安装 Git 时对环境变量 PATH 的影响，第一种影响较小，第三种会影响到 Windows 的自带工具，默认勾选中间项，建议不要修改，直接点击 Next 继续安装<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/7.jpg" class="[Git]" title="安装步骤6 " alt="安装步骤6"></p>
<p>7.选择 Git 在使用 HTTPS 时使用的库，若无特殊需求，可保持默认选项，点击 Next 继续安装<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/8.jpg" class="[Git]" title="安装步骤7 " alt="安装步骤7"></p>
<p>8.选择提交与拉取记录时，对换行符的处理方式，若无特殊需要，默认选择即可，点击 Next 继续安装<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/9.jpg" class="[Git]" title="安装步骤8 " alt="安装步骤8"></p>
<p>9.选择模拟终端软件（即命令行窗口软件），若无特殊需要，可默认选择，点击 Next 继续安装<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/10.jpg" class="[Git]" title="安装步骤9 " alt="安装步骤9"></p>
<p>10.最新功能的询问，若不想尝试尚未保证稳定性的新功能，默认不勾选，点击 Install 即可完成安装<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/11.jpg" class="[Git]" title="安装步骤10 " alt="安装步骤10"></p>
<p>11.安装完成<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/12.jpg" class="[Git]" title="安装步骤11 " alt="安装步骤11"></p>
<p>12.回到桌面，点击鼠标右键，会出现两个选项<code>Git GUI Here</code>和<code>Git Bash Here</code>，在打开 Cmd(Win+R)，分别输入<code>git</code>和<code>git --version</code>，如果出现如下图的情况，即安装成功<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/13.jpg" class="[Git]" title="Git " alt="Git 1-1"><br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Git/14.jpg" class="[Git]" title="Git " alt="Git 1-2"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="prepare-3"><p>1.打开<a href="https://github.com/">Github官网</a>首页，点击右上角的<strong>Sign Up</strong>，然后在出现的页面上填写你的相关信息，进行注册<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Github/1.jpg" class="[Github]" title="Github 的官网 " alt="Github 的官网"><br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Github/2.jpg" class="[Github]" title="进行注册 " alt="进行注册"><br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Github/3.jpg" class="[Github]" title="进行验证 " alt="进行验证"></p>
<p>2.验证完成后，点击 Next：Select a plan，会出现如上图的验证界面，同理，只需要将其中的动物调整为正向显示即可。接着会出现下图的界面，选择 Free，下方的两个选项可选可不选，点击 Continue 继续<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Github/4.jpg" class="[Github]" title="选择 Free " alt="选择 Free"></p>
<p>3.这时 Github 会给你发一封邮件，验证一下即可，验证过后才可以创建库</p>
<p>4.验证完成后，开始创建库，如下图所示，仓库名创建格式必须为：<code><用户名>.github.io</code>，<code>Description</code>为描述仓库，自定义写，填写必要的描述，也可不填。勾选<code>Initialize this repository with a README</code>点击<code>Creat repository</code>进行创建<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Github/5.jpg" class="[Github]" title="建立仓库 " alt="建立仓库"></p>
<p>然后就会出现如图所示的界面，即仓库创建成功！<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Github/6.jpg" class="[Github]" title="建立成功 " alt="建立成功"></p>
<p>5.我们来测试一下，点击<code>Create new file</code>，出现如下界面，然后命名文件名为<code>index.html</code>，在填写如图的内容，再点击<code>Commit new file</code>，即创建成功，然后打开一个新的网页，输入网址<code>https://<你的用户名>.github.io</code>，即可以看见一个新的网页，其中的内容就是你写的内容。至此，Github 的注册以及 Github Pages 已经创建完成了</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="prepare-4"><p>1.在桌面点击鼠标右键，点击<code>Git Bash Here</code>，会出现一个界面如下图所示<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Github/7.jpg" class="[Github]" title="Git界面 " alt="Git界面"></p>
<p>2.然后分别输入下面的两个命令，并回车</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ git config --global user.name <span class="string">"此处填写你注册时的用户名"</span></span><br><span class="line">$ git config --global user.email <span class="string">"此处填写你注册时的邮箱"</span></span><br><span class="line"><span class="comment"># 一般只要不报错，可以跳过下面寻找.gitconfig文件</span></span><br></pre></td></tr></table></figure>
<p>3.然后找到<code>.gitconfig</code>文件，文件存放位置在<code>C:/Users/[username]/.gitconfig</code>（未找到的话，请开启显示隐藏文件的功能），用编辑器打开，看到如下图所示的内容，即配置成功<br />
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Github/8.jpg" class="[Github]" title="配置信息 " alt="配置信息"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>
</details>
<h2 id="本地安装-hexo-静态博客框架以及发布到-github-pages"><a class="markdownIt-Anchor" href="#本地安装-hexo-静态博客框架以及发布到-github-pages"></a> 本地安装 hexo 静态博客框架以及发布到 Github Pages</h2>
<p>1.首先选择一个磁盘作为你博客文件的存放位置，然后新建一个文件夹，比如名为 MyBlog 的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择<code>Git Bash Here</code>，然后依次输入如下命令</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># hexo框架的安装</span></span><br><span class="line">$ npm install -g hexo-cli</span><br><span class="line"><span class="comment"># 等上一个命令完成后，在输入下面的命令</span></span><br><span class="line">$ hexo init <新建文件夹的名称> <span class="comment">#初始化文件夹</span></span><br><span class="line">$ <span class="built_in">cd</span> <新建文件夹的名称></span><br><span class="line">$ npm install <span class="comment"># 安装博客所需要的依赖文件</span></span><br></pre></td></tr></table></figure>
<p>2.等待运行完成，此时文件夹中多了许多文件</p>
<div class="note warning flat"><p>注意：后续的命令均需要在站点目录下（即文件夹内）使用 Git Bash 运行</p>
</div>
<p>此时 Hexo 框架的本地搭建已经完成了。我们来运行一下看看，命令行依次输入以下命令</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo g</span><br><span class="line">$ hexo s</span><br></pre></td></tr></table></figure>
<p>3.浏览器中打开<code>http://locakhost:4000</code>或者<code>127.0.0.1:4000</code>，可以看到一个网页，说明 Hexo 博客已经成功在本地运行</p>
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Hexo/1.jpg" class="[Hexo]" title="生成页面 " alt="生成页面">
<h2 id="本地博客发布到-github-pages"><a class="markdownIt-Anchor" href="#本地博客发布到-github-pages"></a> 本地博客发布到 Github Pages</h2>
<P style="text-indent:2em;">
之前的步骤中，我们已经完成了对 Github 账户的注册以及 Github Pages 的创建，接下来是将本地博客发布至 Github Pages。
</P>
1.首先需要安装发布的插件，在站点目录下执行下面的命令，也就是创建的博客目录下
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
<p>2.紧接着，将本地目录与 GitHub 关联起来，输入下面的命令行</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -C <span class="string">"你的邮箱地址"</span></span><br></pre></td></tr></table></figure>
<p>输入后一直回车，然后在<code>C:/Users/[username]</code>目录下找到名为<code>.ssh</code>的文件夹， 文件夹内会有两个文件，一个<code>id_rsa.pub</code>一个<code>id_rsa</code>，用文本编辑器打开<code>id_rsa.pub</code>，复制里面的的内容。 然后打开 Github，点击右上角的头像<strong>Settings</strong>选择<strong>SSH and GPG keys</strong></p>
<p>点击<strong>New SSH key</strong>将之前复制的内容粘帖到<strong>Key</strong>的框中。 上面的<strong>Title</strong>可以随意，点击<strong>Add SSH key</strong>完成添加。</p>
<p>然后回到 Git 的命令行界面，测试一下是否与 GitHub 连接成功。输入下面的命令行</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ ssh -T [email protected]</span><br></pre></td></tr></table></figure>
<p>点击回车，然后会出现一个询问内容，输入<code>yes</code>，回车，会出现一段内容<code>Hi <account name>! You've successfully authenticated, but GitHub doesnot provide shell access.</code>。 说明连接成功。此处这个<code><account name></code>应该是你 Github 的用户名。</p>
<p>3.进入博客站点目录，用文本编辑器打开<code>_config.yml</code>，这个<code>_config.yml</code>是博客的配置文件，在以后的博客修改，如个性化修改，博客SEO优化等都会使用到，修改如下几个地方</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">title: 你的博客名</span><br><span class="line">subtitle: 博客的副标题，有些主题支持</span><br><span class="line">description: 博客描述</span><br><span class="line">keywords: 博客关键词</span><br><span class="line">author: 作者，在文章中显示</span><br><span class="line">language: 博客语言语种 </span><br><span class="line">timezone: 时区</span><br></pre></td></tr></table></figure>
<img src= "/img/loading.gif" data-lazy-src="/img/blog/1/Hexo/2.jpg" class="[Hexo]" title="修改配置 " alt="修改配置">
<p>4.在该文件最底部，有一个 deploy，在 deploy 下面添加一个 repo 项 ，一个 branch 项，填入如下代码</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">deploy</span><br><span class="line"> type: git</span><br><span class="line"> repo: [email protected]:Github用户名/github用户名.github.io.git </span><br><span class="line"> //也可使用https地址，如：https://github.com/Github用户名/Github用户名.github.io.git </span><br><span class="line">branch: master</span><br></pre></td></tr></table></figure>
<p>5.最后就是生成页面，并发布至 Github Pages，执行如下命令</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Hexo会根据配置文件渲染出一套静态页面</span></span><br><span class="line">$ hexo g</span><br><span class="line"><span class="comment"># 将上一步渲染出的一系列文件上传至至Github Pages</span></span><br><span class="line">$ hexo d</span><br><span class="line"><span class="comment"># 也可以直接输入此命令，直接完成渲染和上传</span></span><br><span class="line">$ hexo g -d</span><br></pre></td></tr></table></figure>
<p>上传完成后，在浏览器中打开<strong>https://<用户名>.github.io</strong>，查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话清除一下浏览器缓存试试。</p>
<details>
<summary>网页部署阶段可能会出现的 bug</summary>
<p>报错<code>ERROR Deployer not found: git</code></p>
<p>1.git 用户名和邮箱配置错误</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ git config --global user.name%<span class="string">"username"</span></span><br><span class="line">$ git config --global user.email%<span class="string">"[email protected]"</span></span><br></pre></td></tr></table></figure>
<p>这里的<code>%</code>，在正确的格式中是一个<code>空格</code>，如果你之前没有打空格，那么邮箱和用户名根本就没有记录进去。回退到这一步重新进行。</p>
<p>2.<code>hexo-deployer-git</code>插件没有安装正确，重新在<code>[Blogroot]</code>路径下<code>右键 ——> Git Bash Here</code>，执行：</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install hexo-deployer-git –save</span><br><span class="line"><span class="comment"># 重新安装之后，再尝试提交</span></span><br><span class="line">$ hexo d</span><br></pre></td></tr></table></figure>
</details>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>Github</tag>
</tags>
</entry>
<entry>
<title>添加豆瓣书单电影页面</title>
<url>/2020/12/30/Blog/32894/</url>
<content><![CDATA[<h2 id="豆瓣书单电影页面"><a class="markdownIt-Anchor" href="#豆瓣书单电影页面"></a> 豆瓣书单电影页面</h2>
<div class="note warning flat"><p>首先需要检查 hexo 的版本，在博客的根目录下执行 hexo -v 命令就可以检查版本，这个豆瓣插件需要的版本 < 4.2.0，否则会出现 bug。解决办法为降低 hexo 的版本，先卸载当前 hexo 版本，再安装低于 4.2.0 的版本即可。</p>
</div>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm uninstall hexo</span><br><span class="line">$ npm install [email protected] -g</span><br></pre></td></tr></table></figure>
<ul>
<li>
<p>首先在博客站点目录执行下面的命令安装豆瓣插件：</p>
</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install hexo-douban --save</span><br></pre></td></tr></table></figure>
<ul>
<li>
<p>接着在博客根目录的配置文件<code>_config.yml</code>下，添加如下配置：</p>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">douban: </span><br><span class="line"> user: 252345665 #这个需要修改为你个人的id </span><br><span class="line"> builtin: false #如果想生成豆瓣页面，这个需要设置为true</span><br><span class="line"> book: </span><br><span class="line"> title: 'This is my book title' </span><br><span class="line"> quote: 'This is my book quote' </span><br><span class="line"> movie: </span><br><span class="line"> title: 'This is my movie title' </span><br><span class="line"> quote: 'This is my movie quote' </span><br><span class="line"> game: </span><br><span class="line"> title: 'This is my game title' </span><br><span class="line"> quote: 'This is my game quote' </span><br><span class="line"> timeout: 10000</span><br></pre></td></tr></table></figure>
<ul>
<li>
<p><code>user:</code>：你的豆瓣 ID。打开豆瓣，登入账户，然后在右上角点击 “ 个人主页 ”，这时候地址栏的 URL 大概是这样：<a href="https://www.douban.com/people/xxxxxx/">https://www.douban.com/people/xxxxxx/</a> ，其中的 “xxxxxx” 就是你的个人 ID 了。</p>
</li>
<li>
<p><code>builtin:</code>：是否将生成页面的功能嵌入<code>hexo s</code>和<code>hexo g</code>中，默认是<code>false</code>。</p>
</li>
<li>
<p><code>title:</code>：该标题的名字。</p>
</li>
<li>
<p><code>quote:</code>：写在开头的一段话，支持 html 语法。</p>
</li>
<li>
<p><code>timeout:</code>：爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错 (ETIMEOUT) 可以把这个数据设置的大一点。</p>
</li>
</ul>
如果只想显示某一个页面 (比如 movie)，那就把其他的配置项注释掉即可。
<ul>
<li>
<p>然后再主题配置文件<code>_config.yml</code>中添加关于此页面的菜单：</p>
</li>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">menu:</span><br><span class="line"> 媒体:</span><br><span class="line"> url: /</span><br><span class="line"> icon: fas fa-list</span><br><span class="line"> children:</span><br><span class="line"> - name: 电影</span><br><span class="line"> url: /movies</span><br><span class="line"> icon: fas fa-film</span><br><span class="line"> - name: 书单</span><br><span class="line"> url: /books</span><br><span class="line"> icon: fas fa-book</span><br><span class="line"> - name: 游戏</span><br><span class="line"> url: /games</span><br><span class="line"> icon: fas fa-gamepad</span><br></pre></td></tr></table></figure>
<li>
在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs 的文件，并将下面的内容复制进去：
</li>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"><%- partial('_partial/post-cover') %> </span><br><span class="line"><style> </span><br><span class="line"> .hexo-douban-picture img {</span><br><span class="line"> width: 100%; </span><br><span class="line"> } </span><br><span class="line"></style></span><br><span class="line"><main class="content"> </span><br><span class="line"> <div id="contact" class="container chip-container"> </span><br><span class="line"> <div class="card"> </span><br><span class="line"> <div class="card-content" style="padding: 30px"> </span><br><span class="line"> <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> </span><br><span class="line"> <%- page.content %> </span><br><span class="line"> </div> </span><br><span class="line"> </div> </span><br><span class="line"> <div class="card"> </span><br><span class="line"> <div class="card-content" style="text-align: center"> </span><br><span class="line"> <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3> </span><br><span class="line"> </div> </span><br><span class="line"> </div> </span><br><span class="line"> <div class="card"> </span><br><span class="line"> <% if (theme.gitalk && theme.gitalk.enable) { %></span><br><span class="line"> <%- partial('_partial/gitalk') %></span><br><span class="line"> <% } %> </span><br><span class="line"> <% if (theme.gitment.enable) { %> </span><br><span class="line"> <%- partial('_partial/gitment') %> </span><br><span class="line"> <% } %> </span><br><span class="line"> <% if (theme.disqus.enable) { %> </span><br><span class="line"> <%- partial('_partial/disqus') %> </span><br><span class="line"> <% } %> </span><br><span class="line"> <% if (theme.livere && theme.livere.enable) { %> </span><br><span class="line"> <%- partial('_partial/livere') %> </span><br><span class="line"> <% } %> </span><br><span class="line"> <% if (theme.valine && theme.valine.enable) { %> </span><br><span class="line"> <%- partial('_partial/valine') %> </span><br><span class="line"> <% } %> </span><br><span class="line"> </div> </span><br><span class="line"> </div> </span><br><span class="line"></main></span><br></pre></td></tr></table></figure>
<li>
<p>然后在博客站点目录下的<code>node_modules</code>文件夹下找到<code>hexo-douban/lib</code>，文件夹下有三个 js 文件，分别为：<code>books-generator.js</code>、<code>games-generator.js</code>、<code>movies-generator.js</code>，用文本编辑器打开这三个文件，并将其文件内容末尾的代码修改为一下内容：</p>
</li>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">/* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/</span><br><span class="line">layout: [`page`, `douban`]</span><br></pre></td></tr></table></figure>
<li>
最后就是使用并生成相应的页面，执行命令如下:
</li>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo douban</span><br></pre></td></tr></table></figure>
</ul>
<p> <strong>需要注意的是</strong>，当安装 douban 插件后，<code>hexo d</code>将不能使用，想到使用需要写成<code>hexo deploy</code>。以下是可选的命令参数：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">-h, --help # 帮助页面</span><br><span class="line">-b, --books # 只生成书单页面</span><br><span class="line">-g, --games # 只生成游戏页面</span><br><span class="line">-m, --movies # 只生成电影页面</span><br></pre></td></tr></table></figure>
<p><strong>当站点配置文件的 builtin 的值为 true 时，生成页面的功能会嵌入到 hexo g 和 hexo s 中，在进行部署生成操作，会自动生成相应的页面。</strong></p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>Matery</tag>
<tag>美化与魔改</tag>
</tags>
</entry>
<entry>
<title>使用 Matery 主题继续完成博客的搭建</title>
<url>/2020/12/24/Blog/50478/</url>
<content><![CDATA[<div class="note blue icon flat"><i class="note-icon fas fa-bullhorn"></i><p>本篇文章仅介绍简单的使用，详情请参照<a href="https://butterfly.js.org/">官方文档</a></p>
</div>
<h2 id="写在最前面"><a class="markdownIt-Anchor" href="#写在最前面"></a> 写在最前面</h2>
<p style="text-indent:2em;">
在利用 hexo 和 Github Page 搭建好博客后，会发现系统提供的主题都是一样的，看着感觉不太舒服，这时候我们可以选择自己利用 JavaScript、css 等对博客的板块进行设计（自己做别人眼中的大佬~），也可以在 Github上搜索一些大佬们设计的主题，然后 clone 下来进行使用。
</p>
<p style="text-indent:2em;">下面就来介绍一下利用 Matery 主题来继续完成博客的搭建。
</p>
<h2 id="安装"><a class="markdownIt-Anchor" href="#安装"></a> 安装</h2>
<p>点击<a href="https://github.com/blinkfox/hexo-theme-matery"> 传送门 </a>下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。</p>
<p>当然你也可以在你的站点目录文件夹下使用<code>git clone</code>命令来下载：直接在站点根目录下执行下面的命令，即可进行主题的下载，主题有两个版本，稳定版本和最新版本 (不定期更新优化)，自主选择版本。</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> https://github.com/blinkfox/hexo-theme-matery themes/matery <span class="comment"># 稳定版</span></span><br><span class="line">git <span class="built_in">clone</span> -b develop https://github.com/blinkfox/hexo-theme-matery themes/matery <span class="comment">#最新版(不定期进行优化更新)</span></span><br></pre></td></tr></table></figure>
<h2 id="主题配置"><a class="markdownIt-Anchor" href="#主题配置"></a> 主题配置</h2>
<p>主题下载完成后，将站点配置文件中的<code>theme</code>值修改为你下载主题的文件名，此处为<code>matery</code>，那么值就修改为<code>theme: matery</code>。</p>
<p>一些站点配置文件的其他地方的修改：</p>
<ul>
<li>
<p>语言选择：如果为中文用户，则在<code>language</code>: 后添加值<code>zh-CN</code>，如果不修改，默认为英语；</p>
</li>
<li>
<p>网址修改：<code>url:</code>的值为你的网址名，如<code>http://xxxx.github.io</code>，如果有域名，则修改为你的域名即可。</p>
</li>
<li>
<p>站点配置文件有个<code>per_page</code>属性，建议修改为 6 的倍数，这样网站在适应设备时，有较好的显示效果。</p>
</li>
</ul>
<h2 id="相关配置"><a class="markdownIt-Anchor" href="#相关配置"></a> 相关配置</h2>
<div class="note info flat"><p>请参照<a href="https://yafine-blog.cn/posts/4ab2.html">Hexo+github 搭建博客 (超级详细版，精细入微)</a>这篇博客的步骤。</p>
</div>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>Matery</tag>
</tags>
</entry>
<entry>
<title>修改导航栏颜色以及透明效果</title>
<url>/2020/12/28/Blog/56936/</url>
<content><![CDATA[<h2 id="修改导航栏颜色以及透明效果"><a class="markdownIt-Anchor" href="#修改导航栏颜色以及透明效果"></a> 修改导航栏颜色以及透明效果</h2>
<p> 打开<code>themes/matery/source/css/matery.css</code>文件，大约在 250 行，有一个<code>.bg-color</code>属性，修改其属性值即可，代码如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.bg-color {</span><br><span class="line"> background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值</span><br><span class="line"> opacity: 0.8; //透明效果 值范围 0~1，看情况自己修改</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>Matery</tag>
<tag>美化与魔改</tag>
</tags>
</entry>
<entry>
<title>鼠标点击文字特效</title>
<url>/2020/12/28/Blog/58148/</url>
<content><![CDATA[<h2 id="鼠标点击文字特效"><a class="markdownIt-Anchor" href="#鼠标点击文字特效"></a> 鼠标点击文字特效</h2>
<p> 实现方法，引入 js 文件，在主题文件下的<code>/source/js/</code>下新建<code>click_show_text.js</code>，其代码如下：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a_idx = 0;</span><br><span class="line">jQuery(document).ready(function ($) {</span><br><span class="line"> $("body").click(function (e) {</span><br><span class="line"> var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");</span><br><span class="line"> var $i = $("<span/>").text(a[a_idx]);</span><br><span class="line"> a_idx = (a_idx + 1) % a.length;</span><br><span class="line"> var x = e.pageX,</span><br><span class="line"> y = e.pageY;</span><br><span class="line"> $i.css({</span><br><span class="line"> "z-index": 5,</span><br><span class="line"> "top": y - 20,</span><br><span class="line"> "left": x,</span><br><span class="line"> "position": "absolute",</span><br><span class="line"> "font-weight": "bold",</span><br><span class="line"> "color": "#FF0000"</span><br><span class="line"> });</span><br><span class="line"> $("body").append($i);</span><br><span class="line"> $i.animate({</span><br><span class="line"> "top": y - 180,</span><br><span class="line"> "opacity": 0</span><br><span class="line"> },</span><br><span class="line"> 3000,</span><br><span class="line"> function () {</span><br><span class="line"> $i.remove();</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line"> setTimeout('delay()', 2000);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">function delay() {</span><br><span class="line"> $(".buryit").removeAttr("onclick");</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>Matery</tag>
<tag>美化与魔改</tag>
</tags>
</entry>
<entry>
<title>关于博客主题的一些美化与魔改</title>
<url>/2020/12/26/Blog/64697/</url>
<content><![CDATA[<h2 id="写在最前面"><a class="markdownIt-Anchor" href="#写在最前面"></a> 写在最前面</h2>
<p style="text-indent:2em;">
本帖的主要目的是用最简单的语言描述博客美化的进程，同时在每个章节为可能涉及的知识点提供相应的工具网站以供读者学习。当然，最重要的是给我自己留个魔改的日记。这样升级主题玩崩了也能找到回家的路。
</p>
<h2 id="matery-主题美化"><a class="markdownIt-Anchor" href="#matery-主题美化"></a> Matery 主题美化</h2>
<blockquote>
<p>主题美化会涉及到 js 文件和 css 文件等的修改，个人建议新增的 js 文件放在<code>themes/matery/layout/layout.ejs</code>这个文件下，这样会稍微加快博客访问的速度。不想花钱最好的方式是使用 cdn.jsdeliver。</p>
</blockquote>
<h3 id="动态标题"><a class="markdownIt-Anchor" href="#动态标题"></a> 动态标题</h3>
<div class="tag link"><a class="link-card" title="动态标题" href="https://lavender-z.github.io/2020/12/28/Blog/32645/"><div class="left"><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/beiyong/4.jpeg"/></div><div class="right"><p class="text">动态标题</p><p class="url">https://lavender-z.github.io/2020/12/28/Blog/32645/</p></div></a></div>
<h3 id="修改导航栏颜色以及透明效果"><a class="markdownIt-Anchor" href="#修改导航栏颜色以及透明效果"></a> 修改导航栏颜色以及透明效果</h3>
<div class="tag link"><a class="link-card" title="修改导航栏颜色以及透明效果" href="https://lavender-z.github.io/2020/12/28/Blog/56936/"><div class="left"><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/beiyong/4.jpeg"/></div><div class="right"><p class="text">修改导航栏颜色以及透明效果</p><p class="url">https://lavender-z.github.io/2020/12/28/Blog/56936/</p></div></a></div>
<h3 id="添加动态诗词"><a class="markdownIt-Anchor" href="#添加动态诗词"></a> 添加动态诗词</h3>
<div class="tag link"><a class="link-card" title="添加动态诗词" href="https://lavender-z.github.io/2020/12/28/Blog/7087/"><div class="left"><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/beiyong/4.jpeg"/></div><div class="right"><p class="text">添加动态诗词</p><p class="url">https://lavender-z.github.io/2020/12/28/Blog/7087/</p></div></a></div>
<h3 id="鼠标点击文字特效"><a class="markdownIt-Anchor" href="#鼠标点击文字特效"></a> 鼠标点击文字特效</h3>
<div class="tag link"><a class="link-card" title="添加动态诗词" href="https://lavender-z.github.io/2020/12/28/Blog/58148/"><div class="left"><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/beiyong/4.jpeg"/></div><div class="right"><p class="text">添加动态诗词</p><p class="url">https://lavender-z.github.io/2020/12/28/Blog/58148/</p></div></a></div>
<h3 id="添加天气小插件"><a class="markdownIt-Anchor" href="#添加天气小插件"></a> 添加天气小插件</h3>
<div class="tag link"><a class="link-card" title="添加天气小插件" href="https://lavender-z.github.io/2020/12/30/Blog/7086/"><div class="left"><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/beiyong/4.jpeg"/></div><div class="right"><p class="text">添加天气小插件</p><p class="url">https://lavender-z.github.io/2020/12/30/Blog/7086/</p></div></a></div>
<h3 id="添加豆瓣书单电影页面"><a class="markdownIt-Anchor" href="#添加豆瓣书单电影页面"></a> 添加豆瓣书单电影页面</h3>
<div class="tag link"><a class="link-card" title="添加天气小插件" href="https://lavender-z.github.io/2020/12/30/Blog/32894/"><div class="left"><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/beiyong/4.jpeg"/></div><div class="right"><p class="text">添加天气小插件</p><p class="url">https://lavender-z.github.io/2020/12/30/Blog/32894/</p></div></a></div>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>美化与魔改</tag>
</tags>
</entry>
<entry>
<title>添加动态诗词</title>
<url>/2020/12/28/Blog/7087/</url>
<content><![CDATA[<h2 id="添加动态诗词"><a class="markdownIt-Anchor" href="#添加动态诗词"></a> 添加动态诗词</h2>
<p> 采用的是<a href="https://www.jinrishici.com/">今日诗词</a>，每次返回一句诗词，根据时间、地点、天气、事件智能推荐。官网有<a href="https://www.jinrishici.com/doc/">API 文档</a>，可以去看一下，有多种安装方式，最简单的方式就是从官网获取代码，在<code>/themes/matery/layout/_partial/head.ejs</code>添加下面的一行代码：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"><script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script></span><br></pre></td></tr></table></figure>
<p> 然后再将<code>/themes/matery/layout/_partial/bg-cover-content.ejs</code>中的<code><%= config.description %></code>修改为<code><span id="jinrishici-sentence">正在加载今日诗词....</span>' %></code>，这个使用前提是将主题配置文件的<code>subtitle</code>的值改为<code>false</code>。</p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>Matery</tag>
<tag>美化与魔改</tag>
</tags>
</entry>
<entry>
<title>添加天气小插件</title>
<url>/2020/12/30/Blog/7086/</url>
<content><![CDATA[<h2 id="添加天气小插件"><a class="markdownIt-Anchor" href="#添加天气小插件"></a> 添加天气小插件</h2>
<p> 首先去<a href="https://dev.qweather.com/widget/">和风天气官网</a>，注册完成后，配置自己的插件，选择自定义插件 ——> 自定义样式 ——> 生成代码，然后会生成一段代码，复制粘贴到<code>themes/matery/layout/layout.ejs</code>即可。</p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>Matery</tag>
<tag>美化与魔改</tag>
</tags>
</entry>
<entry>
<title>使用 Butterfly 主题继续完成博客的搭建</title>
<url>/2020/12/22/Blog/56687/</url>
<content><![CDATA[<div class="note blue icon flat"><i class="note-icon fas fa-bullhorn"></i><p>本篇文章仅介绍简单的使用，详情请参照<a href="https://butterfly.js.org/">官方文档</a></p>
</div>
<h2 id="写在最前面"><a class="markdownIt-Anchor" href="#写在最前面"></a> 写在最前面</h2>
<p style="text-indent:2em;">
在利用 hexo 和 Github Page 搭建好博客后，会发现系统提供的主题都是一样的，看着感觉不太舒服，这时候我们可以选择自己利用 JavaScript、css 等对博客的板块进行设计（自己做别人眼中的大佬~），也可以在 Github上搜索一些大佬们设计的主题，然后 clone 下来进行使用。
</p>
<p style="text-indent:2em;">下面就来介绍一下利用 Butterfly 主题来继续完成博客的搭建。
</p>
<h2 id="安装"><a class="markdownIt-Anchor" href="#安装"></a> 安装</h2>
<div class="tabs" id="prepare"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#prepare-1">Github安装</button></li><li class="tab"><button type="button" data-href="#prepare-2">Gitee安装</button></li><li class="tab"><button type="button" data-href="#prepare-3">npm安装</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="prepare-1"><p><strong>稳定版【建议】</strong></p>
<p>在博客根目录里</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly</span><br></pre></td></tr></table></figure>
<p><strong>测试版</strong></p>
<blockquote>
<p>测试版可能存在 Bugs</p>
</blockquote>
<p>最新的内容可在这里下载</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly</span><br></pre></td></tr></table></figure>
<div class="note info flat"><p>升级方法：在主题目录下，运行<code>git pull</code></p>
</div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="prepare-2"><p><strong>稳定版【建议】</strong></p>
<p>在博客根目录里</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly</span><br></pre></td></tr></table></figure>
<p><strong>测试版</strong></p>
<blockquote>
<p>测试版可能存在 Bugs</p>
</blockquote>
<p>最新的内容可在这里下载</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b dev https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly</span><br></pre></td></tr></table></figure>
<div class="note info flat"><p>升级方法：在主题目录下，运行<code>git pull</code></p>
</div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="prepare-3"><blockquote>
<p>此方法只支持 Hexo 5.0.0以上版本</p>
</blockquote>
<p>在博客根目录里</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm i hexo-theme-butterfly</span><br></pre></td></tr></table></figure>
<div class="note info flat"><p>升级方法：在博客根目录下，运行<code>npm update hexo-theme-butterfly</code></p>
</div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>
<h2 id="应用主题"><a class="markdownIt-Anchor" href="#应用主题"></a> 应用主题</h2>
<p> 修改站点配置文件<code>_config.yml</code>，把主题改为<code>butterfly</code></p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">theme:</span> <span class="string">butterfly</span></span><br></pre></td></tr></table></figure>
<h2 id="插件安装"><a class="markdownIt-Anchor" href="#插件安装"></a> 插件安装</h2>
<p style="text-indent:2em;">
此时在设置完主题后还是会因为缺少插件而打不开，这时我们要进行下载。
</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure>
<h2 id="主题升级"><a class="markdownIt-Anchor" href="#主题升级"></a> 主题升级</h2>
<div class="note info flat"><p>请参照<a href="https://butterfly.js.org/">官方文档</a>中的做法</p>
</div>
<h2 id="相关配置"><a class="markdownIt-Anchor" href="#相关配置"></a> 相关配置</h2>
<div class="note info flat"><p>请参照<a href="https://butterfly.js.org/">官方文档</a>中的做法</p>
</div>
<h2 id="标签外挂tag-plugins"><a class="markdownIt-Anchor" href="#标签外挂tag-plugins"></a> 标签外挂（Tag Plugins）</h2>
<div class="note info flat"><p>标签外挂是 Hexo 独有的功能，并不是标准的 Markdown 格式。<br />
以下的写法，只适用于 Butterfly 主题，用在其它主题上不会有效果，甚至可能会报错。使用前请留意！</p>
</div>
<h3 id="note-bootstrap-callout"><a class="markdownIt-Anchor" href="#note-bootstrap-callout"></a> Note (Bootstrap Callout)</h3>
<div class="tabs" id="prepare"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#prepare-1">用法1</button></li><li class="tab"><button type="button" data-href="#prepare-2">用法2</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="prepare-1"><figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note [class] [no-icon] [style] %}</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th style="text-align:center">名称</th>
<th style="text-align:center">用法</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">class</td>
<td style="text-align:center">【可选】标识（default / primary / success / info / warning / danger）</td>
</tr>
<tr>
<td style="text-align:center">no-icon</td>
<td style="text-align:center">【可选】不显示 icon</td>
</tr>
<tr>
<td style="text-align:center">style</td>
<td style="text-align:center">【可选】可以覆盖配置中的 style（simple / modern / flat / disabled）</td>
</tr>
</tbody>
</table>
<blockquote>
<p>simple</p>
</blockquote>
<div class="note modern"><p>默认 提示块标签</p>
</div>
<div class="note default simple"><p>default 提示块标签</p>
</div>
<div class="note primary simple"><p>primary 提示块标签</p>
</div>
<div class="note success simple"><p>success 提示块标签</p>
</div>
<div class="note info simple"><p>info 提示块标签</p>
</div>
<div class="note warning simple"><p>warning 提示块标签</p>
</div>
<div class="note danger simple"><p>danger 提示块标签</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note modern %}</span><br><span class="line">默认 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default simple %}</span><br><span class="line">default 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary simple %}</span><br><span class="line">primary 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success simple %}</span><br><span class="line">success 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info simple %}</span><br><span class="line">info 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning simple %}</span><br><span class="line">warning 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger simple %}</span><br><span class="line">danger 提示块标签</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>modern</p>
</blockquote>
<div class="note modern"><p>默认 提示块标签</p>
</div>
<div class="note default modern"><p>default 提示块标签</p>
</div>
<div class="note primary modern"><p>primary 提示块标签</p>
</div>
<div class="note success modern"><p>success 提示块标签</p>
</div>
<div class="note info modern"><p>info 提示块标签</p>
</div>
<div class="note warning modern"><p>warning 提示块标签</p>
</div>
<div class="note danger modern"><p>danger 提示块标签</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note modern %}</span><br><span class="line">默认 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default modern %}</span><br><span class="line">default 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary modern %}</span><br><span class="line">primary 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success modern %}</span><br><span class="line">success 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info modern %}</span><br><span class="line">info 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning modern %}</span><br><span class="line">warning 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger modern %}</span><br><span class="line">danger 提示块标签</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>flat</p>
</blockquote>
<div class="note flat"><p>默认 提示块标签</p>
</div>
<div class="note default flat"><p>default 提示块标签</p>
</div>
<div class="note primary flat"><p>primary 提示块标签</p>
</div>
<div class="note success flat"><p>success 提示块标签</p>
</div>
<div class="note info flat"><p>info 提示块标签</p>
</div>
<div class="note warning flat"><p>warning 提示块标签</p>
</div>
<div class="note danger flat"><p>danger 提示块标签</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note flat %}</span><br><span class="line">默认 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default flat %}</span><br><span class="line">default 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary flat %}</span><br><span class="line">primary 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success flat %}</span><br><span class="line">success 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info flat %}</span><br><span class="line">info 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning flat %}</span><br><span class="line">warning 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger flat %}</span><br><span class="line">danger 提示块标签</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>disabled</p>
</blockquote>
<div class="note disabled"><p>默认 提示块标签</p>
</div>
<div class="note default disabled"><p>default 提示块标签</p>
</div>
<div class="note primary disabled"><p>primary 提示块标签</p>
</div>
<div class="note success disabled"><p>success 提示块标签</p>
</div>
<div class="note info disabled"><p>info 提示块标签</p>
</div>
<div class="note warning disabled"><p>warning 提示块标签</p>
</div>
<div class="note danger disabled"><p>danger 提示块标签</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note disabled %}</span><br><span class="line">默认 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default disabled %}</span><br><span class="line">default 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary disabled %}</span><br><span class="line">primary 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success disabled %}</span><br><span class="line">success 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info disabled %}</span><br><span class="line">info 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning disabled %}</span><br><span class="line">warning 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger disabled %}</span><br><span class="line">danger 提示块标签</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>no-icon</p>
</blockquote>
<div class="note no-icon flat"><p>默认 提示块标签</p>
</div>
<div class="note default no-icon flat"><p>default 提示块标签</p>
</div>
<div class="note primary no-icon flat"><p>primary 提示块标签</p>
</div>
<div class="note success no-icon flat"><p>success 提示块标签</p>
</div>
<div class="note info no-icon flat"><p>info 提示块标签</p>
</div>
<div class="note warning no-icon flat"><p>warning 提示块标签</p>
</div>
<div class="note danger no-icon flat"><p>danger 提示块标签</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note no-icon %}</span><br><span class="line">默认 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note default no-icon %}</span><br><span class="line">default 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary no-icon %}</span><br><span class="line">primary 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success no-icon %}</span><br><span class="line">success 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info no-icon %}</span><br><span class="line">info 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning no-icon %}</span><br><span class="line">warning 提示块标签</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger no-icon %}</span><br><span class="line">danger 提示块标签</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="prepare-2"><figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note [color] [icon] [style] %}</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th style="text-align:center">名称</th>
<th style="text-align:center">用法</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">color</td>
<td style="text-align:center">【可选】颜色(default / blue / pink / red / purple / orange / green)</td>
</tr>
<tr>
<td style="text-align:center">icon</td>
<td style="text-align:center">【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )</td>
</tr>
<tr>
<td style="text-align:center">style</td>
<td style="text-align:center">【可选】可以覆盖配置中的 style（simple / modern / flat / disabled）</td>
</tr>
</tbody>
</table>
<blockquote>
<p>simple</p>
</blockquote>
<div class="note icon simple"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note blue icon simple"><i class="note-icon fas fa-bullhorn"></i><p>新年快乐哦~</p>
</div>
<div class="note pink icon simple"><i class="note-icon fas fa-car-crash"></i><p>司机一滴酒，亲人两行泪</p>
</div>
<div class="note red icon simple"><i class="note-icon fas fa-fan"></i><p>大风车吱呀吱哟哟地转</p>
</div>
<div class="note orange icon simple"><i class="note-icon fas fa-battery-half"></i><p>电量低，请充电</p>
</div>
<div class="note purple icon simple"><i class="note-icon far fa-hand-scissors"></i><p>石头剪刀布</p>
</div>
<div class="note green icon simple"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note 'fab fa-cc-visa' simple %}</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note blue 'fas fa-bullhorn' simple %}</span><br><span class="line">新年快乐哦~</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note pink 'fas fa-car-crash' simple %}</span><br><span class="line">司机一滴酒，亲人两行泪</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note red 'fas fa-fan' simple%}</span><br><span class="line">大风车吱呀吱哟哟地转</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note orange 'fas fa-battery-half' simple %}</span><br><span class="line">电量低，请充电</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note purple 'far fa-hand-scissors' simple %}</span><br><span class="line">石头剪刀布</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note green 'fab fa-internet-explorer' simple %}</span><br><span class="line">前端最讨厌的浏览器</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>modern</p>
</blockquote>
<div class="note icon modern"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note blue icon modern"><i class="note-icon fas fa-bullhorn"></i><p>新年快乐哦~</p>
</div>
<div class="note pink icon modern"><i class="note-icon fas fa-car-crash"></i><p>司机一滴酒，亲人两行泪</p>
</div>
<div class="note red icon modern"><i class="note-icon fas fa-fan"></i><p>大风车吱呀吱哟哟地转</p>
</div>
<div class="note orange icon modern"><i class="note-icon fas fa-battery-half"></i><p>电量低，请充电</p>
</div>
<div class="note purple icon modern"><i class="note-icon far fa-hand-scissors"></i><p>石头剪刀布</p>
</div>
<div class="note green icon modern"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note 'fab fa-cc-visa' modern %}</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note blue 'fas fa-bullhorn' modern %}</span><br><span class="line">新年快乐哦~</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note pink 'fas fa-car-crash' modern %}</span><br><span class="line">司机一滴酒，亲人两行泪</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note red 'fas fa-fan' modern %}</span><br><span class="line">大风车吱呀吱哟哟地转</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note orange 'fas fa-battery-half' modern %}</span><br><span class="line">电量低，请充电</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note purple 'far fa-hand-scissors' modern %}</span><br><span class="line">石头剪刀布</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note green 'fab fa-internet-explorer' modern %}</span><br><span class="line">前端最讨厌的浏览器</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>flat</p>
</blockquote>
<div class="note icon flat"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note blue icon flat"><i class="note-icon fas fa-bullhorn"></i><p>新年快乐哦~</p>
</div>
<div class="note pink icon flat"><i class="note-icon fas fa-car-crash"></i><p>司机一滴酒，亲人两行泪</p>
</div>
<div class="note red icon flat"><i class="note-icon fas fa-fan"></i><p>大风车吱呀吱哟哟地转</p>
</div>
<div class="note orange icon flat"><i class="note-icon fas fa-battery-half"></i><p>电量低，请充电</p>
</div>
<div class="note purple icon flat"><i class="note-icon far fa-hand-scissors"></i><p>石头剪刀布</p>
</div>
<div class="note green icon flat"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note 'fab fa-cc-visa' flat %}</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note blue 'fas fa-bullhorn' flat %}</span><br><span class="line">新年快乐哦~</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note pink 'fas fa-car-crash' flat %}</span><br><span class="line">司机一滴酒，亲人两行泪</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note red 'fas fa-fan' flat %}</span><br><span class="line">大风车吱呀吱哟哟地转</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note orange 'fas fa-battery-half' flat %}</span><br><span class="line">电量低，请充电</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note purple 'far fa-hand-scissors' flat %}</span><br><span class="line">石头剪刀布</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note green 'fab fa-internet-explorer' flat %}</span><br><span class="line">前端最讨厌的浏览器</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>disabled</p>
</blockquote>
<div class="note icon disabled"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note blue icon disabled"><i class="note-icon fas fa-bullhorn"></i><p>新年快乐哦~</p>
</div>
<div class="note pink icon disabled"><i class="note-icon fas fa-car-crash"></i><p>司机一滴酒，亲人两行泪</p>
</div>
<div class="note red icon disabled"><i class="note-icon fas fa-fan"></i><p>大风车吱呀吱哟哟地转</p>
</div>
<div class="note orange icon disabled"><i class="note-icon fas fa-battery-half"></i><p>电量低，请充电</p>
</div>
<div class="note purple icon disabled"><i class="note-icon far fa-hand-scissors"></i><p>石头剪刀布</p>
</div>
<div class="note green icon disabled"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% note 'fab fa-cc-visa' disabled %}</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note blue 'fas fa-bullhorn' disabled %}</span><br><span class="line">新年快乐哦~</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note pink 'fas fa-car-crash' disabled %}</span><br><span class="line">司机一滴酒，亲人两行泪</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note red 'fas fa-fan' disabled %}</span><br><span class="line">大风车吱呀吱哟哟地转</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note orange 'fas fa-battery-half' disabled %}</span><br><span class="line">电量低，请充电</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note purple 'far fa-hand-scissors' disabled %}</span><br><span class="line">石头剪刀布</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note green 'fab fa-internet-explorer' disabled %}</span><br><span class="line">前端最讨厌的浏览器</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>
<h3 id="gallery相册图库"><a class="markdownIt-Anchor" href="#gallery相册图库"></a> Gallery相册图库</h3>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span></span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure>
<ul>
<li> name：相册图库名字</li>
<li> description：相册图库描述</li>
<li> link：链接到对应相册图库的地址</li>
<li> img-url：相册图库封面的地址</li>
</ul>
<h3 id="gallery相册"><a class="markdownIt-Anchor" href="#gallery相册"></a> Gallery相册</h3>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure>
<h3 id="tag-hide隐藏文字"><a class="markdownIt-Anchor" href="#tag-hide隐藏文字"></a> tag-hide(隐藏文字)</h3>
<div class="note warning flat"><p>tag-hide 内的标签外挂 content 内都不建议有 h1 - h6 等标题。因为 Toc 会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致 To 的滚动出现异常。</p>
</div>
<div class="tabs" id="prepare"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#prepare-1">Inline</button></li><li class="tab"><button type="button" data-href="#prepare-2">Inline</button></li><li class="tab"><button type="button" data-href="#prepare-3">Inline</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="prepare-1"><p><code>inline</code>在文本里面添加按钮隐藏内容，只限文字(content不能包含英文逗号，可用<code>&sbquo;</code>)</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% hideInline content,display,bg,color %}</span><br></pre></td></tr></table></figure>
<ul>
<li> content：文本内容</li>
<li> display：按钮显示的文字(可选)</li>
<li> bg：按钮的背景颜色(可选)</li>
<li> color：按钮文字的颜色(可选)</li>
</ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="prepare-2"><p><code>block</code>独立的 block 隐藏内容，可以隐藏很多内容，包括图片，代码块等等(display 不能包含英文逗号，可用<code>&sbquo;</code>)</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% hideBlock display,bg,color %}</span><br><span class="line">content</span><br><span class="line">{% endhideBlock %}</span><br></pre></td></tr></table></figure>
<ul>
<li> content：文本内容</li>
<li> display：按钮显示的文字(可选)</li>
<li> bg：按钮的背景颜色(可选)</li>
<li> color：按钮文字的颜色(可选)</li>
</ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="prepare-3"><p>如果需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。(display 不能包含英文逗号，可用<code>&sbquo;</code>)</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% hideToggle display,bg,color %}</span><br><span class="line">content</span><br><span class="line">{% endhideToggle %}</span><br></pre></td></tr></table></figure>
<ul>
<li> content：文本内容</li>
<li> display：按钮显示的文字(可选)</li>
<li> bg：按钮的背景颜色(可选)</li>
<li> color：按钮文字的颜色(可选)</li>
</ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>
<h3 id="mermaid"><a class="markdownIt-Anchor" href="#mermaid"></a> mermaid</h3>
<div class="note warning flat"><p>mermaid 标签不允许嵌套于 tag-hide 内的标签外挂和 tabs 标签外挂标签外挂，会影响显示。</p>
</div>
<p>使用 mermaid 标签可以绘制 Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看<a href="https://mermaid-js.github.io/mermaid/#/">mermaid文档</a></p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">mermaid:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># built-in themes: default/forest/dark/neutral</span></span><br><span class="line"> <span class="attr">theme:</span> <span class="string">default</span></span><br></pre></td></tr></table></figure>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">内容</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<h3 id="tabs"><a class="markdownIt-Anchor" href="#tabs"></a> Tabs</h3>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% tabs Unique name, [index] %}</span><br><span class="line"><!-- tab [Tab caption] [@icon] --></span><br><span class="line">Any content (support inline tags too).</span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br><span class="line"></span><br><span class="line">Unique name : Unique name of tabs block tag without comma.</span><br><span class="line"><span class="code"> Will be used in #id's as prefix for each tab with their index numbers.</span></span><br><span class="line"><span class="code"> If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.</span></span><br><span class="line"><span class="code"> Only for current url of post/page must be unique!</span></span><br><span class="line"><span class="code">[index] : Index number of active tab.</span></span><br><span class="line"><span class="code"> If not specified, first tab (1) will be selected.</span></span><br><span class="line"><span class="code"> If index is -1, no tab will be selected. It's will be something like spoiler.</span></span><br><span class="line"><span class="code"> Optional parameter.</span></span><br><span class="line"><span class="code">[Tab caption] : Caption of current tab.</span></span><br><span class="line"><span class="code"> If not caption specified, unique name with tab index suffix will be used as caption of tab.</span></span><br><span class="line"><span class="code"> If not caption specified, but specified icon, caption will empty.</span></span><br><span class="line"><span class="code"> Optional parameter.</span></span><br><span class="line"><span class="code">[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')</span></span><br><span class="line"><span class="code"> Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.</span></span><br><span class="line"><span class="code"> Optional parameter.</span></span><br></pre></td></tr></table></figure>
<h3 id="button"><a class="markdownIt-Anchor" href="#button"></a> Button</h3>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}</span><br><span class="line"></span><br><span class="line">[url] : 链接</span><br><span class="line">[text] : 按钮文字</span><br><span class="line">[icon] : [可选] 图标</span><br><span class="line">[color] : [可选] 按钮背景顔色(默认style时）</span><br><span class="line"><span class="code"> 按钮字体和边框顔色(outline时)</span></span><br><span class="line"><span class="code"> default/blue/pink/red/purple/orange/green</span></span><br><span class="line"><span class="code">[style] : [可选] 按钮样式 默认实心</span></span><br><span class="line"><span class="code"> outline/留空</span></span><br><span class="line"><span class="code">[layout] : [可选] 按钮佈局 默认为line</span></span><br><span class="line"><span class="code"> block/留空</span></span><br><span class="line"><span class="code">[position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边</span></span><br><span class="line"><span class="code"> center/right/留空</span></span><br><span class="line"><span class="code">[size] : [可选] 按钮大小</span></span><br><span class="line"><span class="code"> larger/留空</span></span><br></pre></td></tr></table></figure>
<h3 id="hexo的自带标签外挂"><a class="markdownIt-Anchor" href="#hexo的自带标签外挂"></a> hexo的自带标签外挂</h3>
<div class="note info flat"><p>请参照<a href="https://hexo.io/zh-cn/docs/tag-plugins.html">Hexo官方文档</a>中的做法</p>
</div>
<h3 id="动画图标"><a class="markdownIt-Anchor" href="#动画图标"></a> 动画图标</h3>
<div class="note info flat"><p>注意：如果使用 On parent hover 需要向父级元素添加 class 名 faa-parent animated-hover，其余两个不需要。另外可以通过添加faa-fast动画加速，faa-slow动画减速！！</p>
</div>
<p>添加方式很简单，引入一个 css 库：<br />
<a href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css">https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css</a><br />
然后在 DOM 元素的类名添加相应的动画即可。</p>
<table>
<thead>
<tr>
<th style="text-align:center">On DOM load</th>
<th style="text-align:center">On hover</th>
<th style="text-align:center">On parent hover</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-wrench faa-wrench animated" aria-hidden="true"></i> faa-wrench animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-wrench faa-wrench animated-hover" aria-hidden="true"></i> faa-wrench animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-wrench faa-wrench animated-hover" aria-hidden="true"></i> faa-wrench</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-bell faa-ring animated" aria-hidden="true"></i> faa-ring animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-bell faa-ring animated-hover" aria-hidden="true"></i> faa-ring animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-bell faa-ring animated-hover" aria-hidden="true"></i> faa-ring</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-envelope faa-horizontal animated" aria-hidden="true"></i> faa-horizontal animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-envelope faa-horizontal animated-hover" aria-hidden="true"></i> faa-horizontal animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-envelope faa-horizontal animated-hover" aria-hidden="true"></i> faa-horizontal</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-thumbs-up faa-vertical animated" aria-hidden="true"></i> faa-vertical animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-thumbs-up faa-vertical animated-hover" aria-hidden="true"></i> faa-vertical animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-thumbs-up faa-vertical animated-hover" aria-hidden="true"></i> faa-vertical</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-exclamation-circle faa-flash animated" aria-hidden="true"></i> faa-flash animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-exclamation-circle faa-flash animated-hover" aria-hidden="true"></i> faa-flash animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-exclamation-circle faa-flash animated-hover" aria-hidden="true"></i> faa-flash</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-thumbs-down faa-bounce animated" aria-hidden="true"></i> faa-bounce animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-thumbs-down faa-bounce animated-hover" aria-hidden="true"></i> faa-bounce animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-thumbs-down faa-bounce animated-hover" aria-hidden="true"></i> faa-bounce</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-spinner faa-spin animated" aria-hidden="true"></i> faa-spin animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-spinner faa-spin animated-hover" aria-hidden="true"></i> faa-spin animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-spinner faa-spin animated-hover" aria-hidden="true"></i> faa-spin</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-heart faa-float animated" aria-hidden="true"></i> faa-float animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-heart faa-float animated-hover" aria-hidden="true"></i> faa-float animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-heart faa-float animated-hover" aria-hidden="true"></i> faa-float</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-heartbeat faa-pulse animated" aria-hidden="true"></i> faa-pulse animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-heartbeat faa-pulse animated-hover" aria-hidden="true"></i> faa-pulse animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-heartbeat faa-pulse animated-hover" aria-hidden="true"></i> faa-pulse</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-gift faa-shake animated" aria-hidden="true"></i> faa-shake animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-gift faa-shake animated-hover" aria-hidden="true"></i> faa-shake animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-gift faa-shake animated-hover" aria-hidden="true"></i> faa-shake</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-trophy faa-tada animated" aria-hidden="true"></i> faa-tada animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-trophy faa-tada animated-hover" aria-hidden="true"></i> faa-tada animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-trophy faa-tada animated-hover" aria-hidden="true"></i> faa-tada</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-fighter-jet faa-passing animated" aria-hidden="true"></i> faa-passing animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-fighter-jet faa-passing animated-hover" aria-hidden="true"></i> faa-passing animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-fighter-jet faa-passing animated-hover" aria-hidden="true"></i> faa-passing</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-bicycle faa-passing-reverse animated" aria-hidden="true"></i> faa-passing-reverse animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-bicycle faa-passing-reverse animated-hover" aria-hidden="true"></i> faa-passing-reverse animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-bicycle faa-passing-reverse animated-hover" aria-hidden="true"></i> faa-passing-reverse</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-bomb faa-burst animated" aria-hidden="true"></i> faa-burst animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-bomb faa-burst animated-hover" aria-hidden="true"></i> faa-burst animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-bomb faa-burst animated-hover" aria-hidden="true"></i> faa-burst</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-star faa-falling animated" aria-hidden="true"></i> faa-falling animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-star faa-falling animated-hover" aria-hidden="true"></i> faa-falling animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-star faa-falling animated-hover" aria-hidden="true"></i> faa-falling</a></td>
</tr>
<tr>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-rocket faa-rising animated" aria-hidden="true"></i> faa-rising animated</a></td>
<td style="text-align:center"><a href="javascript:void(0)"><i class="fa fa-rocket faa-rising animated-hover" aria-hidden="true"></i> faa-rising animated-hover</a></td>
<td style="text-align:center"><a class="faa-parent animated-hover" href="javascript:void(0)"><i class="fa fa-rocket faa-rising animated-hover" aria-hidden="true"></i> faa-rising</a></td>
</tr>
</tbody>
</table>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>博客</tag>
<tag>Butterfly</tag>
</tags>
</entry>
</search>