-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
704 lines (687 loc) · 129 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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>testEmail</title>
<url>/20210203/04671ca0bf85.html</url>
<content><![CDATA[
]]></content>
</entry>
<entry>
<title>博客写作语法备忘</title>
<url>/20210201/7a023ac39f7f.html</url>
<content><![CDATA[<p>介绍编写博客文章的一下语法和设置。 <a id="more"></a></p>
<h1 id="创建文章">创建文章</h1>
<p>在博客工程目录下打开gitbash，使用命令行</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">hexo new [layout] <title> [-P Path]</span><br><span class="line"></span><br><span class="line">-p, --path Post path. Customize the path of the post.Related Path in data/_post.</span><br><span class="line">-r, --replace Replace the current post if existed.</span><br><span class="line">-s, --slug Post slug. Customize the URL of the post.</span><br></pre></td></tr></table></figure>
<p>再找到文件，使用顺手的编辑器打开，根据喜好进行配置然后开始编写吧~</p>
<h1 id="front-matter">Front-Matter</h1>
<p>这是每篇文章处于第一个---上方的设置项，一般采用代码生成Post文件时候会作为模板自带。</p>
<p>layout: 选择这个文章的类型渲染模板，默认为post title: 文章标题 description: 文章底下的文字说明 date: 文章创建时间 自动生成 updated: 文章更新时间，不需要手动设置 tags: 设置标签<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a> categories: 设置分类,写法与tags类似 abbrlink： 为了绝对链接生成的固定短码，在第一次发布文章的时候自动生成，一般不改动 comments: 评论是否开启 默认为true mathjax: 是否开启支持公式渲染 默认为true type: 设置page布局时候的类型,page/tags/404/categories等，一般不需要配置 reward_settings: enable: true comment: Donate comment here.</p>
<p>还有部分详细参考<a href="docs/theme-settings/front-matter.html">toc/reward/quicklink</a></p>
<p><code><!-- more --></code></p>
<p>在这个标识之上的将会显示在文章列表的文章标题下。可以插入图片。</p>
<h1 id="基本语法">基本语法</h1>
<h2 id="标题">标题</h2>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">This is an H1</span><br><span class="line">=============</span><br><span class="line"></span><br><span class="line">This is an H2</span><br><span class="line">-------------</span><br></pre></td></tr></table></figure>
<p>这种写法只支持2级标题。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"># 这是 H1 #</span><br><span class="line"></span><br><span class="line">## 这是 H2 ## </span><br><span class="line"></span><br><span class="line">## # 这是 H3 ## #</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"># 这是 H1</span><br><span class="line"></span><br><span class="line">## 这是 H2</span><br><span class="line"></span><br><span class="line">## ## ## 这是 H6</span><br></pre></td></tr></table></figure>
<p>一般推荐最后一种写法。</p>
<h2 id="引用">引用</h2>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">> 这是引用</span><br></pre></td></tr></table></figure>
<p>渲染结果：</p>
<blockquote>
<p>这是引用</p>
</blockquote>
<p>还可以嵌套(自身和其他语法标签)： <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">> Layer1</span><br><span class="line">>> Layer2 </span><br><span class="line">>>> layer3</span><br></pre></td></tr></table></figure> > Layer1 >> Layer2 >>> layer3</p>
<h2 id="列表">列表</h2>
<p><strong>无序列表</strong>,其中*,-,+是等效的：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">* Red</span><br><span class="line">+ Green</span><br><span class="line">- Blue</span><br></pre></td></tr></table></figure>
<p>渲染结果： > * Red > + Green > - Blue</p>
<p><strong>有序列表</strong>,使用数字加一个. 其中数字不需要严格排序，MD会自动排序（建议序号还是从1.开始）：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">1. Jax</span><br><span class="line">2. Wang</span><br><span class="line">3. Bird</span><br><span class="line">1. McHale</span><br><span class="line">8. Parish </span><br></pre></td></tr></table></figure>
<p>渲染结果： > 1. Jax > 2. Wang > 3. Bird > 1. McHale > 8. Parish</p>
<p>同样，排序也支持嵌套，需要缩进4个空格或者一个tab(同样能嵌套其他语法)： <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">1. ListLayer1</span><br><span class="line"> 1. Layer1_Sub1</span><br><span class="line"> 1. Layer1_Sub2</span><br><span class="line">1. ListLayer2 </span><br></pre></td></tr></table></figure> 渲染结果： > 1. ListLayer1 > 1. Layer1_Sub1 > 1. Layer1_Sub2 > 1. ListLayer2</p>
<h2 id="分割线">分割线</h2>
<p>你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线： <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">* * *</span><br><span class="line"></span><br><span class="line">***</span><br><span class="line"></span><br><span class="line">*****</span><br><span class="line"></span><br><span class="line">- - -</span><br><span class="line"></span><br><span class="line">---------------------------------------</span><br></pre></td></tr></table></figure> 渲染结果（去除最后一种，会导致和标题写法混淆）： * * <em> </em><strong> </strong>*** - - -</p>
<h2 id="斜体加粗和删除线">斜体、加粗和删除线</h2>
<p>用一个*和_包围的文字将会造成 <em>斜体</em> 效果,使用2个的时候造成 <strong>加粗</strong> 效果，如果想输出*和_,可以留空或者加: <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">_斜体_ __加粗__ 显示下划线 _ 显示星号\*</span><br></pre></td></tr></table></figure> 渲染结果： > <em>斜体</em> <strong>加粗</strong> 显示下划线 _ 显示星号*</p>
<p>使用2个~对文本进行包围可以实现删除线效果: <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">~~删掉了~~ 没有删掉</span><br></pre></td></tr></table></figure> 渲染效果: > <del>删掉了</del> 没有删掉</p>
<h2 id="反斜杠">反斜杠</h2>
<p>MD中很多符号被用于语法使用，如果我们只是想显示出这些符号，我们可以在符号前面加上。支持以下符号：</p>
<table>
<thead>
<tr class="header">
<th style="text-align: center;">符号</th>
<th style="text-align: center;">写法</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: center;"><strong>\</strong></td>
<td style="text-align: center;"></td>
</tr>
<tr class="even">
<td style="text-align: center;"><strong>`</strong></td>
<td style="text-align: center;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;"><strong>*</strong></td>
<td style="text-align: center;"></td>
</tr>
<tr class="even">
<td style="text-align: center;"><strong>_</strong></td>
<td style="text-align: center;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;"><strong>[]</strong></td>
<td style="text-align: center;">\ [ \ ]</td>
</tr>
<tr class="even">
<td style="text-align: center;"><strong>{}</strong></td>
<td style="text-align: center;">同上</td>
</tr>
<tr class="odd">
<td style="text-align: center;"><strong>()</strong></td>
<td style="text-align: center;">同上</td>
</tr>
<tr class="even">
<td style="text-align: center;"><strong>#</strong></td>
<td style="text-align: center;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;"><strong>+</strong></td>
<td style="text-align: center;"></td>
</tr>
<tr class="even">
<td style="text-align: center;"><strong>-</strong></td>
<td style="text-align: center;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;"><strong>.</strong></td>
<td style="text-align: center;"></td>
</tr>
<tr class="even">
<td style="text-align: center;"><strong>!</strong></td>
<td style="text-align: center;"></td>
</tr>
</tbody>
</table>
<h2 id="链接">链接</h2>
<ul>
<li><p><strong>行内式</strong>:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">[显示文本](网址 "放置显示文本") </span><br><span class="line"></span><br><span class="line">示例：</span><br><span class="line">显示链接[Google](http://google.com/ "谷歌") </span><br><span class="line"></span><br><span class="line"> </span><br></pre></td></tr></table></figure>
<p>示例渲染结果：</p>
<blockquote>
<p>显示链接<a href="http://google.com/" title="谷歌">Google</a></p>
</blockquote></li>
<li><p><strong>参考式</strong>:</p>
<p>参考式分两部分组成，一部分是写在文本行内，另一部分是在任意地方写好详细地址说明等。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">放在正文中：</span><br><span class="line">[显示文本][索引标签]</span><br><span class="line"></span><br><span class="line">放在任意处：</span><br><span class="line">[索引标签]: 网址 "Title"/(Title)</span><br><span class="line"></span><br><span class="line">索引标签如果为空,第二个[]不可省略，并且解释处索引标签使用显示文本的内容。</span><br><span class="line"></span><br><span class="line">示例：</span><br><span class="line">有3个搜索引擎，分别是[Google][1],[Bing][ms]和[百度][]。</span><br><span class="line"></span><br><span class="line">[microsoft]: http://bing.com/ "推荐"</span><br><span class="line">[1]: http://google.com/ "推荐"</span><br><span class="line">[百度]: http://baidu.com/ (不推荐)</span><br><span class="line"></span><br><span class="line"> </span><br></pre></td></tr></table></figure>
<p>渲染结果：</p>
<blockquote>
<p>有3个搜索引擎，分别是<a href="http://google.com/" title="推荐">Google</a>,<a href="http://bing.com/" title="推荐">Bing</a>和<a href="http://baidu.com/" title="不推荐">百度</a>。</p>
</blockquote>
<p>网址支持相对路径和本页索引：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[相对](/docs/) </span><br><span class="line">[跳转](#反斜杠)</span><br></pre></td></tr></table></figure>
<p>渲染结果： > <a href="/docs/">相对</a> > <a href="#反斜杠">跳转</a></p></li>
</ul>
<h2 id="图片">图片</h2>
<p>图片和链接格式类似,而且也有__行内式__和__参考式__两种:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"> </span><br><span class="line"></span><br><span class="line">![文本][索引标签]</span><br><span class="line">[索引标签]: 网址 "title"</span><br><span class="line"></span><br><span class="line">示例:</span><br><span class="line">这是一个网络图片 </span><br><span class="line"></span><br><span class="line">这是本网站图片 ![皮卡丘][PikaQ]</span><br><span class="line">[PiKaQ]: /assets/timg.jfif "皮卡丘Pika"</span><br></pre></td></tr></table></figure>
<p>渲染结果: > 这是一个网络图片 <img data-src="http://img02.tooopen.com/images/20160509/tooopen_sy_161967094653.jpg" title="AAA" alt="网络图片" /></p>
<blockquote>
<p>这是本网站图片 [皮卡丘][PikaQ] [PiKaQ]: /assets/timg.jfif</p>
</blockquote>
<p>目前这种方式不支持图片显示大小自定义.</p>
<p>点击图片跳转: <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[](#反斜杠)</span><br></pre></td></tr></table></figure> 渲染结果: > <a href="#反斜杠"><img data-src="/Site_Assets/favicon/favicon-32x32.png" alt="AAA" /></a></p>
<h2 id="自动链接">自动链接</h2>
<p>直接在网址/邮箱用<>包围,一般用于邮箱: <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"><http://Google.com/></span><br><span class="line"><address@example.com></span><br></pre></td></tr></table></figure> 渲染结果: > <a href="http://Google.com/" class="uri">http://Google.com/</a> > <a href="mailto:address@example.com" class="email">address@example.com</a></p>
<p>主要用于邮箱,因为上面这个邮箱地址在网页源码中会是</p>
<pre><code><a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a> </code></pre>
<p>一定程度上避免程序读取然后发垃圾邮件给你.</p>
<h2 id="代码块">代码块</h2>
<p>与当前块对齐后缩进4个空格或者一个Tab: <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">(Tab/blankSpace*4)CodeLine1</span><br><span class="line">(Tab/blankSpace*4)CodeLine2</span><br><span class="line"></span><br><span class="line">(Tab/blankSpace*4)CodeLine3</span><br></pre></td></tr></table></figure> 渲染结果: > CodeLine1 > CodeLine2 > > CodeLine3</p>
<p>前一种样式功能简单,所以一般采用```在前后包围的方式:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">单个词语时候比如: `__加粗`</span><br><span class="line"></span><br><span class="line">``单行`时候``</span><br><span class="line"></span><br><span class="line">```</span><br><span class="line">很多</span><br><span class="line">行的</span><br><span class="line">时候</span><br><span class="line">```</span><br></pre></td></tr></table></figure>
<p>渲染结果:</p>
<blockquote>
<p>单个词语时候比如: <code>__加粗</code></p>
</blockquote>
<blockquote>
<p><code>单行`时候</code></p>
</blockquote>
<blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">很多</span><br><span class="line">行的</span><br><span class="line">时候</span><br></pre></td></tr></table></figure>
<p>如果包围内容包含<code>`</code>时候,之后前后包围的连续<code>`</code>个数大于中间会出现的连续<code>`</code>个数即可.2个以上<code>`</code>包围的多行code才会显示代码框.</p>
</blockquote>
<p>在3个<code>`</code>的情况下,可以设置语言种类高亮等:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">``` [language] [title] [url] [link text] </span><br><span class="line">code snippet </span><br><span class="line">```</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">```json json http://Google.com/ Google</span><br><span class="line">{</span><br><span class="line"> "firstName": "John",</span><br><span class="line"> "lastName": "Smith",</span><br><span class="line"> "age": 25</span><br><span class="line">}</span><br><span class="line">```</span><br></pre></td></tr></table></figure>
<p>渲染结果: > <figure class="highlight json"><figcaption><span>json</span><a href="http://Google.com/">Google</a></figcaption><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"firstName"</span>: <span class="string">"John"</span>,</span><br><span class="line"> <span class="attr">"lastName"</span>: <span class="string">"Smith"</span>,</span><br><span class="line"> <span class="attr">"age"</span>: <span class="number">25</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure> ## 表格</p>
<p>可以通过制表符按一定格式编写数据,自动生成表格: <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">| Title0 | title1 |</span><br><span class="line">| 对齐设置 | 对齐设置 |</span><br><span class="line">| Data0 | Data1 |</span><br><span class="line">| Data0 | Data1 |</span><br><span class="line"></span><br><span class="line">示例:</span><br><span class="line"></span><br><span class="line">| Syntax | Description | SubDesc |</span><br><span class="line">| :---------- | :---------: | ---------: |</span><br><span class="line">| *Header* | _Title_ | `Title` |</span><br><span class="line">| [Google][1] | [Bing][ms] | [百度][] |</span><br><span class="line"></span><br><span class="line">[microsoft]: http://bing.com/ "推荐"</span><br><span class="line">[1]: http://google.com/ "推荐"</span><br><span class="line">[百度]: http://baidu.com/ (不推荐)</span><br></pre></td></tr></table></figure> 渲染结果:</p>
<blockquote>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">Syntax</th>
<th style="text-align: center;">Description</th>
<th style="text-align: right;">SubDesc</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;"><em>Header</em></td>
<td style="text-align: center;"><strong>Title</strong></td>
<td style="text-align: right;"><code>Title</code></td>
</tr>
<tr class="even">
<td style="text-align: left;"><a href="http://google.com/" title="推荐">Google</a></td>
<td style="text-align: center;"><a href="http://bing.com/" title="推荐">Bing</a></td>
<td style="text-align: right;"><a href="http://baidu.com/" title="不推荐">百度</a></td>
</tr>
</tbody>
</table>
</blockquote>
<p>嫌太麻烦?可以去<a href="https://www.tablesgenerator.com/markdown_tables">Markdown Tables Generator</a>生成然后复制进文章.</p>
<h2 id="角标">角标</h2>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[^标识]</span><br><span class="line"></span><br><span class="line">示例:</span><br><span class="line">角标示例,角标[^1]和角标[^aa]</span><br><span class="line">[^1]: 第一个</span><br><span class="line">[^aa]: 第二个</span><br></pre></td></tr></table></figure>
<p>渲染结果: > 角标示例,角标[^1]和角标[^aa] [^1]: 第一个 [^aa]: 第二个</p>
<h1 id="标签插件语法">标签插件语法</h1>
<p>标签插件是hexo或者next主题或者自己安装的标签插件所提供的,可能有些与基础md的功能重复,但是一般更强大.</p>
<h2 id="引用块">引用块</h2>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% blockquote [author[, source]] [link] [source_link_title] %}</span><br><span class="line"></span><br><span class="line">content</span><br><span class="line"></span><br><span class="line">{% endblockquote %}</span><br></pre></td></tr></table></figure>
<p>别名: <strong>quote</strong></p>
<p>示例: <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}</span><br><span class="line"></span><br><span class="line">Every interaction is both precious and an opportunity to delight.</span><br><span class="line"></span><br><span class="line">{% endblockquote %}</span><br></pre></td></tr></table></figure> <blockquote><p>Every interaction is both precious and an opportunity to delight.</p>
<footer><strong>Seth Godin</strong><cite><a href="http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html">Welcome to Island Marketing</a></cite></footer></blockquote></p>
<h2 id="代码块-1">代码块</h2>
<pre><code>{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}</code></pre>
<p>别名: <strong>code</strong></p>
<p>示例:</p>
<pre><code>{% codeblock _.compact lang:JavaScript http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}</code></pre>
<blockquote>
<figure class="highlight javascript"><figcaption><span>_.compact</span><a href="http://underscorejs.org/#compact">Underscore.js</a></figcaption><table><tr><td class="code"><pre><span class="line"> </span><br><span class="line">_.compact([<span class="number">0</span>, <span class="number">1</span>, <span class="literal">false</span>, <span class="number">2</span>, <span class="string">''</span>, <span class="number">3</span>]); </span><br><span class="line">=> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>] </span><br></pre></td></tr></table></figure>
</blockquote>
<p>对于额外选项,</p>
<table>
<thead>
<tr class="header">
<th>可选项</th>
<th>说明</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>line_number</td>
<td>显示行数</td>
<td>true</td>
</tr>
<tr class="even">
<td>highlight</td>
<td>显示高亮</td>
<td>true</td>
</tr>
<tr class="odd">
<td>first_line</td>
<td>行数起始</td>
<td>1</td>
</tr>
<tr class="even">
<td>mark</td>
<td>指定那几行特殊标识<br>比如 3,4-7,8 代表第3行,第4到7行和第八行</td>
<td>无</td>
</tr>
</tbody>
</table>
<h2 id="include-code">Include Code</h2>
<p>插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。</p>
<pre><code>{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}</code></pre>
<h2 id="链接-1">链接</h2>
<pre><code>{% link text url [external] [title] %}
示例:
{% link Google http://google.com %}</code></pre>
<a href="http://google.com/" title="" target="">Google</a>
<h2 id="图片-1">图片</h2>
<p>可以指定大小.</p>
<pre><code>{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}
示例:
{% img http://img02.tooopen.com/images/20160509/tooopen_sy_161967094653.jpg 50 80 '"title text" "alt text"' %}</code></pre>
<img data-src="http://img02.tooopen.com/images/20160509/tooopen_sy_161967094653.jpg" class="" width="50" height="80" title="title text" alt="alt text">
<h2 id="视频">视频</h2>
<p>插入 Youtube 视频</p>
<pre><code>{% youtube video_id %}</code></pre>
<p>常规视频插入</p>
<pre><code>{% video url %}</code></pre>
<p>acfun等:</p>
<pre><code>直接复制给的视频代码 粘贴即可.(iframe代码)</code></pre>
<h2 id="iframe">iframe</h2>
<pre><code>{% iframe url [width] [height] %}</code></pre>
<h2 id="pdf">PDF</h2>
<pre><code>% pdf url [height] %}
[height] : Optional. Height of the PDF display element, e.g. 800px.</code></pre>
<h2 id="引用文章">引用文章</h2>
<p>可以引用本博客的其他文章.</p>
<pre><code>{% post_path filename %}
{% post_link filename [title] [escape] %}
示例:
{% post_path 博客搭建记录 %}
{% post_link 博客搭建记录 '<b>博客搭建</b>' %}
{% post_link 博客搭建记录 '<b>博客搭建</b>' false %}</code></pre>
/20210201/85bc1840d3ea.html
<p><br> <a href="/20210201/85bc1840d3ea.html" title="<b>博客搭建</b>"><b>博客搭建</b></a> <br> <a href="/20210201/85bc1840d3ea.html" title="<b>博客搭建</b>"><b>博客搭建</b></a></p>
<h2 id="文字底色">文字底色</h2>
<pre><code>{% label [class]@Text %}
class可选:default | primary | success | info | warning | danger</code></pre>
<p>示例:</p>
<pre><code>{% label @none %} {% label default@default %} {% label primary@primary %} {% label success@success %} {% label info@info %} {% label warning@warning %} {% label danger@danger %}</code></pre>
<mark class="label ">none</mark>
<mark class="label default">default</mark>
<mark class="label primary">primary</mark>
<mark class="label success">success</mark>
<mark class="label info">info</mark>
<mark class="label warning">warning</mark>
<mark class="label danger">danger</mark>
<h2 id="提示框">提示框</h2>
<pre><code>{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}
class可选:default | primary | success | info | warning | danger
no-icon: 加了这个标识就不显示图标</code></pre>
<p>示例:</p>
<pre><code>{% note primary no-icon %}
**Welcome** to [Carrion\'s Hell](https://carrion.cc)
{% endnote %}</code></pre>
<div class="note primary no-icon"><p><strong>Welcome</strong> to <a href="https://carrion.cc">Carrion's Hell</a></p>
</div>
<h2 id="tabs">Tabs</h2>
<p>参考<a href="/docs/tag-plugins/tabs.html">Tabs</a></p>
<h2 id="按钮">按钮</h2>
<p>参考<a href="/docs/tag-plugins/button.html">Button</a></p>
<h2 id="图表">图表</h2>
<p>参考<a href="https://echarts.apache.org/examples/index.html">官方</a></p>
<h2 id="数学公式">数学公式</h2>
<p>使用的是Mathjax。 参考<a href="/docs/third-party-services/math-equations">标签用法</a>.参考<a href="https://www.zybuluo.com/knight/note/96093">公式写法</a> <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$$\begin{equation} \label{eq1}</span><br><span class="line">e=mc^2</span><br><span class="line">\end{equation}$$</span><br></pre></td></tr></table></figure> 渲染结果： > <span class="math display">\[\begin{equation} \label{eq1}
> e=mc^2
> \end{equation}\]</span></p>
<h2 id="emoji">Emoji</h2>
<p>在文章中::中间写入emoji名称,即可显示,同时也支持标签形式.<a href="https://www.webfx.com/tools/emoji-cheat-sheet/">Emojis列表参考</a></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">:heartpulse: :smile: :black_nib: </span><br><span class="line">{% github_emoji heartpulse %}{% github_emoji smile %}{% github_emoji black_nib %}</span><br></pre></td></tr></table></figure>
<p>渲染结果:</p>
<div class="note warning no-icon"><p>存在bug,等待解决.</p>
</div>
<p>后续将会继续更新...</p>
<section class="footnotes" role="doc-endnotes">
<hr />
<ol>
<li id="fn1" role="doc-endnote"><p>如下： <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">tags:</span><br><span class="line">- PS3</span><br><span class="line">- Games</span><br></pre></td></tr></table></figure> 此外还有：<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
</ol>
</section>
]]></content>
<categories>
<category>Blog</category>
</categories>
<tags>
<tag>博客</tag>
</tags>
</entry>
<entry>
<title>博客搭建记录</title>
<url>/20210201/85bc1840d3ea.html</url>
<content><![CDATA[<h1 id="前言">前言</h1>
<p>这篇文章是本人对搭建这个博客记录。 <a id="more"></a></p>
<h1 id="github-page-设置">Github Page 设置</h1>
<h2 id="创建github仓库">创建Github仓库</h2>
<p>在github上新建一个仓库，在 yourgithubname 下命名为 <code>yourgithubname.github.io</code>，比如我这个博客就设置为<code>CCCarrion.github.io</code>，我的github用户名就是<code>CCCarrion</code>，我的仓库地址 <a href="https://github.com/CCCarrion/CCCarrion.github.io" class="uri">https://github.com/CCCarrion/CCCarrion.github.io</a>。</p>
<p>此时你如果在仓库中上传了静态网页，通过<code>yourgithubname.github.io</code>就可以访问页面了。 理论上说，我们的博客已经搭建完成了！</p>
<h2 id="自定义域名">自定义域名</h2>
<p>如果想要更高点逼格，访问网址想要设置成自己的域名，也是可以的！</p>
<ul>
<li><p>首先，先申请一个自己的域名 比如本站就是<code>carrion.cc</code>.然后就是设置解析，将域名解析到博客服务器去。</p></li>
<li><p>在dns服务添加2个记录，一个是A记录，一个是CNAME记录。 A记录，记录值可以通过本地ping一下<code>yourgithubname.github.io</code>得到的ip地址。 CNAME记录，记录值就是<code>yourgithubname.github.io</code>。</p></li>
<li><p>在跳转后希望浏览器网址显示的也是自己的域名，在<code>yourgithubname.github.io</code>的github仓库页面，找到setting/option下面的custom domain栏填入你的域名即可。</p></li>
</ul>
<h1 id="hexonext-方案部署">Hexo+NexT 方案部署</h1>
<p>上一步，我们把基础设置解决了（服务器+网址解析），这一步我们需要填充博客框架了。 这里，我选择的是hexo。其原理是一套静态页面的编译系统，我们写好的文章，通过hexo编译生成静态页面部署到github page上，也就是我们 <code>yourgithubname.github.io</code>的仓库里，这样我们就可以通过访问之前绑定的域名看到我们的博客文章了。</p>
<h2 id="hexo">Hexo</h2>
<h3 id="准备步骤">准备步骤</h3>
<p>创建一个Private的代码仓库用于存放文章和hexo工程，为了和博客页面仓库区别，我称之为 <strong>BlogBackup</strong> 仓库。</p>
<p>安装<a href="https://git-scm.com/">Git</a>和<a href="https://nodejs.org/">node js</a></p>
<p>完成上述步骤，在任意地方右键打开gitbash，输入代码安装hexo环境</p>
<pre><code>npm install hexo-cli -g</code></pre>
<h3 id="部署hexo">部署hexo</h3>
<p>然后在其他地方创建一个空文件夹。 在这个目录下，打开gitbash,</p>
<pre><code>hexo init</code></pre>
<p>进行hexo工程的初始化。此时我们已经搭建好hexo的工程啦~</p>
<p>我们可以试试</p>
<pre><code>hexo s</code></pre>
<p>然后在浏览器里输入 <a href="http://localhost:4000/" class="uri">http://localhost:4000/</a> ,就能本地预览hexo生成的博客页面啦~</p>
<p>最后，将hexo工程关联上传到 <strong>BlogBackup</strong> 仓库。</p>
<pre><code>git init
git remote add origin [你的仓库地址]
git add .
git commit -m 'hexo init'
git push -u origin master</code></pre>
<p>Git相关的指令的话，可以下载安装 Sourcetree 界面操作，这里就不展开说了。</p>
<h2 id="next主题">NexT主题</h2>
<p>hexo的默认博客界面有点太丑了，但是没有关系，我们可以选择主题啊！</p>
<p>反复参考后，我选择了NexT主题，因为功能强大，更新及时，而且还应好看，还有一个重要的是，用的人多，改主题做美化教程多呀~</p>
<h3 id="准备步骤-1">准备步骤</h3>
<p>安装theme一般有两种方式：</p>
<div class="tabs" id="next-install-，2"><ul class="nav-tabs"><li class="tab active"><a href="#next-install-，2-1">插件形式</a></li><li class="tab"><a href="#next-install-，2-2">git模式</a></li></ul><div class="tab-content"><div class="tab-pane active" id="next-install-，2-1"><p>gitbash输入</p>
<pre><code>npm i hexo-theme-next</code></pre></div><div class="tab-pane" id="next-install-，2-2"><p>gitbash输入</p>
<pre><code>git clone https://gitlab.com/hexo-theme-next/hexo-theme-next themes/next</code></pre></div></div></div>
<p>因为git模式会将next的全部代码文件放置于themes/next下，方便我们后续的魔改，所以我选择了git模式。</p>
<p>因为我想跟着官方更新又想魔改的东西保留，所以这里我fork了NexT官方仓库作，将自己fork的仓库作为git地址。</p>
<ul>
<li><p><a href="https://github.com/next-theme/hexo-theme-next" class="uri">https://github.com/next-theme/hexo-theme-next</a> fork一下。</p></li>
<li><p>将fork的仓库设置成hexo工程git的submodule：</p>
<p>git submodule add -b [分支名称] --name [子模块名称] [子模块git地址] themes/next</p></li>
</ul>
<h3 id="设置使用next">设置使用NexT</h3>
<p>打开hexo工程下 _config.yml 文件 ，找到</p>
<pre><code>theme: landscape</code></pre>
<p>改成</p>
<pre><code>theme: next</code></pre>
<p>此时，我们就可以在预览一下网站，发现网页外观样式都大变样啦！ 至此，我们已经把hexo+NexT的工程环境搭建完毕了~虽然只是最基础默认的，剩下就是配置一下我们的个人信息和推送设置之类的了。</p>
<h2 id="基础设置">基础设置</h2>
<h3 id="deploy">Deploy</h3>
<h4 id="设置推送">设置推送</h4>
<p>刚才我们建立了博客页面的托管仓库和生成博客页面的hexo工程。那接下我们要做的就是把hexo生成的页面部署到仓库里。</p>
<p>一般来说，hexo 工程下执行</p>
<pre><code>hexo g</code></pre>
<p>就会在工程下生成 public 文件夹，把这个文件夹下的所有内容 覆盖 到 <code>yourgithubname.github.io</code> 仓库就行了。</p>
<p>每次手动操作好像比较麻烦，其实一个指令就可以代劳完成这个步骤。</p>
<ul>
<li><p>安装插件</p>
<pre><code> npm install hexo-deployer-git --save</code></pre></li>
<li><p>配置 _config.yml 文件</p>
<pre><code> deploy:
type: git
repo: https://github.com/<username>/<project> [ `yourgithubname.github.io` 仓库地址]
# example, https://github.com/CarrionBlog/CCCarrion.github.io.git
branch: master</code></pre></li>
<li><p>部署指令</p>
<pre><code> hexo clean && hexo deploy</code></pre></li>
</ul>
<p>此时可以登录<code>yourgithubname.github.io</code>域名查看页面部署结果了。</p>
<div class="note primary"><h4 id="自定义域名">自定义域名</h4>
<p>此时会发现之前设置的自定义域名失效了，之前在仓库也变空了，不要慌，现在我们就来解决这个问题。 在之前setting/option下面的custom domain设置时候，其实github会在仓库里添加一个CNAME的文件，文件其实就是一个写着你自定义域名的文本而已。 因为我们 hexo deploy 指令每次都是将生成的页面覆盖上传，所以这个文件就没了。解决办法就是让hexo生成的时候自带这个文件：</p>
<ul>
<li>在hexo/source目录下，新建一个文件，重命名为无拓展名的 CNAME</li>
<li>以记事本方式打开 CNAME 文件，写下你自定义的域名，保存关闭。</li>
</ul>
<p>source目录下的文件，除了几个特殊的目录外，其他都会在生成的时候直接拷贝进public，就正好达成了我们的目的。</p>
</div>
<h4 id="自动部署">自动部署</h4>
<p>还有一种更自动化生成推送的方法，就是 GitHub Action。 这种方法，不需要我们手动部署，只要我们提交更新hexo工程，就会自动部署。 如何配置，可以参看<a href="https://github.com/sma11black/hexo-action" class="uri">https://github.com/sma11black/hexo-action</a></p>
<h3 id="自定义配置">自定义配置</h3>
<p>Hexo和NexT均提供了很多配置选项供我们配置达到自定义外观和信息。</p>
<h4 id="hexo配置">Hexo配置</h4>
<p>在Hexo工程目录下，打开 _config.yml 可以提供配置的选项都在这里面。 Hexo中主要是对博客的个人信息和文章链接等进行设置，选项也比较少。这里我就不一一介绍了，详情可以看<a href="https://hexo.io/zh-cn/docs/">Hexo文档</a>.</p>
<h4 id="next配置">NexT配置</h4>
<p>本篇记录是基于Hexo 5.0进行的博客搭建，所以针对NexT的设置也是采用最新的方式。</p>
<p>在工程目录下，新建一个文件命名为_config.[name].yml,其中name是你所使用的theme的名字，这里我用的NexT主题，所以我命名为_config.next.yml. 然后打开themes/next/_config.yml,针对需要改动的配置，复制到新建的_config.next.yml. 在生成的时候，Hexo会将_config.next.yml中的配置覆盖主题源文件中的默认配置。 <div class="note primary"><p>这里我不建议直接全部复制再改，因为这样可以更方便看到自己做的哪些修改。</p>
</div></p>
<p>选择配置上还是基本参考官网给的描述进行设置，一般不会出错。这里我就基本列一下我所使用到的修改地方：</p>
<ul>
<li><p>主题设置为 Gemini</p>
<pre><code> scheme: Gemini</code></pre></li>
<li><p>打开黑暗模式</p>
<pre><code> darkmode: true</code></pre></li>
<li><p>设置网页标签小图标</p>
<p>在Hexo/Source目录里新建一个文件夹，起名Site_Assets.然后放入自己想要的图片（可以到<a href="https://realfavicongenerator.net/">Favicon Generator</a>预览生成适用格式）。 这里假设我的图片是mylogo.png</p>
<pre><code> favicon:
small: /Site_Assets/mylogo.png
medium: /Site_Assets/mylogo.png
apple_touch_icon: /Site_Assets/mylogo.png
safari_pinned_tab: /Site_Assets/mylogo.png</code></pre></li>
<li><p>头像同上</p>
<pre><code> custom_logo: /Site_Assets/head.png</code></pre></li>
<li><p>创作协议</p>
<p>在文章底部和侧边栏显示协议。</p>
<pre><code> creative_commons:
license: by-nc-sa
sidebar: true
post: true
language: deed.zh </code></pre></li>
<li><p>侧边栏菜单配置</p>
<p>home主页和archives文章归档是默认生成的，不需要自行制作页面（当然也可以设置为自定义页面）。其他需要自行生成页面配置。</p>
<ul>
<li><p>Tags</p>
<p>在Hexo目录下，执行代码</p>
<pre><code> hexo new page tags</code></pre>
<p>会生成hexo.md文件，打开文件将type改成 tags 。 使用NexT的Tagscloud，可以找到相关设置修改</p>
<pre><code> tagcloud:
min: 12 # Minimun font size in px
max: 30 # Maxium font size in px
amount: 200 # Total amount of tags
orderby: name # Order of tags
order: 1 # Sort order</code></pre></li>
<li><p>Categories</p>
<p>分类目录页面，生成方式同上。</p></li>
<li><p>404页面</p>
<p>顺便一提，可以自定义404页面，我这里改成公益页面。</p>
<pre><code> hexo new page 404</code></pre>
<p>打开source\404.md，改写成：</p>
<pre><code> ---
title: '404'
date: 2014-12-22 12:39:04
comments: false
---
<script src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
charset="utf-8" homePageUrl="/" homePageName="Back to home">
</script></code></pre></li>
</ul>
<p>最终Menu我设置如下</p>
<pre><code> menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat</code></pre></li>
<li><p>侧边栏外观设置</p>
<p>没什么好说的，按照文档自行设置。</p></li>
<li><p>底部信息</p>
<p>同上，根据文档说明设置即可。</p></li>
<li><p>文章相关设置</p>
<ul>
<li><p>摘要</p>
<p>在正文部分，写下 <code><!-- more --></code> ，在这个标记之前的文本将会作为摘要显示。</p></li>
<li><p>字数统计</p>
<p>安装插件</p>
<pre><code> npm install hexo-word-counter</code></pre>
<p>增加设置项：</p>
<pre><code> symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: false
awl: 4
wpm: 275
separated_meta: true
item_text_total: true </code></pre></li>
<li><p>相关文章推荐</p>
<p>安装插件</p>
<pre><code> npm install hexo-related-popular-posts</code></pre>
<p>添加设置（只设置了开启，其他自行设置）</p>
<pre><code> related_posts:
enable: true</code></pre></li>
<li><p>文章中代码显示设置</p>
<p>根据喜好设置显示代码外观，可以到<a href="https://theme-next.js.org/highlight/" class="uri">https://theme-next.js.org/highlight/</a>预览选择喜欢的样式</p>
<pre><code> codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
light: default
dark: tomorrow-night
prism:
light: prism
dark: prism-dark
# Add copy button on codeblock
copy_button:
enable: true
# Available values: default | flat | mac
style: mac</code></pre></li>
<li><p>回到顶部按钮和底部进度条</p>
<pre><code> back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true
# Reading progress bar
reading_progress:
enable: true
# Available values: top | bottom
position: bottom
color: "#37c6c0"
height: 3px </code></pre></li>
<li><p>自定义字体</p>
<p>根据文档选择喜欢的字体。<br />
</p></li>
</ul></li>
<li><p>SEO</p>
<p>这块部分用于优化搜索引擎，具体的完全参照文档操作，这里不重复说明了。</p></li>
<li><p>插件配置</p>
<ul>
<li><p>Math公式</p>
<p>选用MathJax。</p>
<pre><code> # Math Equation
math:
# Default (false) 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 true, it will load mathjax / katex srcipt EVERY PAGE.
every_page: false
mathjax:
enable: true
# Available values: none | ams | all
tags: none
katex:
enable: false
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false</code></pre></li>
</ul>
<p>因为hexo-renderer-marked实现的LaTex与MarkDown有语法冲突，这里改成用hexo-renderer-pandoc：</p>
<pre><code> $ npm un hexo-renderer-marked
$ npm i hexo-renderer-pandoc</code></pre>
<p>使用公式的语法，参考<a href="https://theme-next.js.org/docs/third-party-services/math-equations.html" class="uri">https://theme-next.js.org/docs/third-party-services/math-equations.html</a></p>
<p>使用公式的时候，不要忘记在文章front matter部分加上</p>
<pre><code> mathjax: true</code></pre>
<ul>
<li><p>评论系统</p>
<p>个人是希望可以自己持有留言数据和邮件通知。目前没有一个比较好的免费方案。这里我就使用了LiveRe和gitchat。</p>
<p>详情参考<a href="https://theme-next.js.org/docs/third-party-services/comments.html" class="uri">https://theme-next.js.org/docs/third-party-services/comments.html</a></p>
<p>增加waline。参考<a href="https://github.com/lizheming/waline/tree/master/packages/hexo-next">安装</a>和<a href="https://waline.js.org/">教程</a></p></li>
<li><p>访客计数</p>
<p><figure class="highlight yml"><figcaption><span>yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">busuanzi_count:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">total_visitors:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">total_visitors_icon:</span> <span class="string">fa</span> <span class="string">fa-user</span></span><br><span class="line"> <span class="attr">total_views:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">total_views_icon:</span> <span class="string">fa</span> <span class="string">fa-eye</span></span><br><span class="line"> <span class="attr">post_views:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">post_views_icon:</span> <span class="string">fa</span> <span class="string">fa-eye</span></span><br></pre></td></tr></table></figure></p></li>
<li><p>搜索</p></li>
</ul>
<p>采用Local Search 安装</p>
<pre><code> npm install hexo-generator-searchdb</code></pre>
<p>配置 <figure class="highlight yml"><figcaption><span>hexo/_config.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line"> <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line"> <span class="attr">content:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">format:</span> <span class="string">html</span></span><br></pre></td></tr></table></figure></p>
<p><figure class="highlight yml"><figcaption><span>hexo/_config.next.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment"># Local search</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/next-theme/hexo-generator-searchdb</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># If auto, trigger search by changing input.</span></span><br><span class="line"> <span class="comment"># If manual, trigger search by pressing enter key or search button.</span></span><br><span class="line"> <span class="attr">trigger:</span> <span class="string">auto</span></span><br><span class="line"> <span class="comment"># Show top n results per article, show all results by setting to -1</span></span><br><span class="line"> <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line"> <span class="comment"># Unescape html strings to the readable one.</span></span><br><span class="line"> <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line"> <span class="comment"># Preload the search data when the page loads.</span></span><br><span class="line"> <span class="attr">preload:</span> <span class="literal">false</span></span><br><span class="line"> </span><br></pre></td></tr></table></figure></p>
<ul>
<li><p>其他</p>
<p>我开启了 Pjax，lazyload，pangu 和 quicklink。</p></li>
</ul></li>
<li><p>Tag语法</p>
<p>相关的写法和设置参考<a href="https://theme-next.js.org/docs/tag-plugins/" class="uri">https://theme-next.js.org/docs/tag-plugins/</a></p></li>
</ul>
<h1 id="魔改美化">魔改美化</h1>
<p>对于Hexo和Next自带的设置暂告一段落了。我发现博客还是有点丑哎。所以这里我记录一下我在Next可提供的设置外做的一些改动。</p>
<h2 id="博客背景">博客背景</h2>
<p>打开自定义文件许可： <figure class="highlight yml"><figcaption><span>hexo/_config.next.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">custom_file_path:</span></span><br><span class="line"> <span class="attr">style:</span> <span class="string">source/_data/styles.styl</span></span><br></pre></td></tr></table></figure></p>
<p>在hexo/source/_data下创建打开 styles.styl，添加代码 <figure class="highlight styl"><figcaption><span>styles.styl</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">//背景图片</span></span><br><span class="line"><span class="selector-tag">body</span> {</span><br><span class="line"> background:url(/assets/bgp5.jpg); //这里输入背景图片地址</span><br><span class="line"> <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line"> <span class="attribute">background-attachment</span>:fixed; <span class="comment">//不重复</span></span><br><span class="line"> <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>; <span class="comment">//填充</span></span><br><span class="line"> <span class="attribute">background-position</span>:<span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line"> <span class="comment">//filter:blur(10px)</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<h2 id="评论区域加白色背景">评论区域加白色背景</h2>
<figure class="highlight styl"><figcaption><span>styles.styl</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">//评论</span></span><br><span class="line"><span class="selector-class">.comments</span> {</span><br><span class="line"> <span class="attribute">background</span>: rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.95</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="文字背景以及半透明设置">文字背景以及半透明设置</h2>
<p>在hexo/source/_data下创建打开 styles.styl，添加代码 <figure class="highlight styl"><figcaption><span>styles.styl</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">//背景半透明设置</span></span><br><span class="line"><span class="selector-class">.content</span> {</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">30px</span> <span class="number">5px</span> <span class="number">20px</span> <span class="number">0px</span>;</span><br><span class="line"> <span class="attribute">background</span>:rgba(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0</span>) none repeat scroll !important;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//菜单栏的透明度设置</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.header-inner</span> {</span><br><span class="line"> <span class="attribute">background</span>: rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0</span>);</span><br><span class="line"> <span class="attribute">border</span>: none; </span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="number">#888888</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.site-nav</span> {</span><br><span class="line"> <span class="attribute">background</span>: rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.9</span>);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">20px</span> <span class="number">20px</span> <span class="number">20px</span> <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">border</span>: none; </span><br><span class="line">}</span><br><span class="line"><span class="comment">//侧边栏圆角</span></span><br><span class="line"><span class="selector-class">.sidebar-inner</span> {</span><br><span class="line"> <span class="attribute">background</span>: rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.9</span>);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">20px</span> <span class="number">20px</span> <span class="number">20px</span> <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">border</span>: none; </span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//解决菜单选项bug</span></span><br><span class="line"><span class="selector-class">.menu-item</span> <span class="selector-tag">a</span>,<span class="selector-class">.menu-item-active</span> <span class="selector-tag">a</span>, <span class="selector-class">.menu</span> <span class="selector-class">.menu-item</span> <span class="selector-tag">a</span>:hover, <span class="selector-class">.menu</span> <span class="selector-class">.menu-item</span> <span class="selector-tag">span</span><span class="selector-class">.exturl</span>:hover,<span class="selector-class">.menu</span> <span class="selector-class">.menu-item</span> <span class="selector-tag">a</span><span class="selector-class">.popup-trigger</span>:hover{</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">20px</span> <span class="number">20px</span> <span class="number">20px</span> <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">border</span>: none; </span><br><span class="line"> <span class="attribute">background</span>: rgba(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.menu</span> <span class="selector-class">.menu-item</span> <span class="selector-tag">a</span>.popup-trigger{</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">20px</span> <span class="number">20px</span> <span class="number">20px</span> <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">border</span>: none; </span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.sidebar{</span><br><span class="line"> <span class="attribute">background</span>: rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0</span>);</span><br><span class="line"> <span class="attribute">border</span>: none; </span><br><span class="line">}</span><br><span class="line"><span class="comment">//搜索框（local-search）的透明度设置</span></span><br><span class="line"><span class="selector-class">.popup</span> {</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0.9</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//大头像无背景</span></span><br><span class="line">.site-brand-container{</span><br><span class="line"> <span class="attribute">background</span>: rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//头像无线框</span></span><br><span class="line">.site-author-image{ </span><br><span class="line"> <span class="attribute">border</span>: none;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//颜色相关</span></span><br><span class="line"><span class="selector-class">.footer-inner</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#ffe871</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.powered-by</span> <span class="selector-tag">a</span>, <span class="selector-tag">span</span><span class="selector-class">.exturl</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#ffb6c1</span>;</span><br><span class="line"> <span class="attribute">border-bottom-color</span>: <span class="number">#ffb6c1</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.powered-by</span> <span class="selector-tag">a</span>:hover, <span class="selector-tag">span</span><span class="selector-class">.exturl</span>:hover {</span><br><span class="line"> <span class="attribute">border-bottom-color</span>: <span class="number">#d0ea4a</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.sidebar-nav</span> li{</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.posts-expand><span class="selector-tag">ul</span>.breadcrumb{</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#d0ea4a</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.posts-expand><span class="selector-tag">ul</span><span class="selector-class">.breadcrumb</span> <span class="selector-tag">li</span> <span class="selector-tag">a</span>,.posts-expand><span class="selector-tag">ul</span><span class="selector-class">.breadcrumb</span> <span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.exturl</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#ffb6c1</span>;</span><br><span class="line"> <span class="attribute">border-bottom-color</span>: <span class="number">#ffb6c1</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.posts-expand><span class="selector-tag">ul</span><span class="selector-class">.breadcrumb</span> <span class="selector-tag">li</span> <span class="selector-tag">a</span>:hover,.posts-expand><span class="selector-tag">ul</span><span class="selector-class">.breadcrumb</span> <span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.exturl</span>:hover {</span><br><span class="line"> <span class="attribute">border-bottom-color</span>: <span class="number">#4fd4dc</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#4fd4dc</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//顶部菜单栏分割线</span></span><br><span class="line"><span class="selector-class">.sub-menu</span> {</span><br><span class="line"> <span class="attribute">border-top-width</span>: <span class="number">2px</span>;</span><br><span class="line"> <span class="attribute">border-top-style</span>: solid;</span><br><span class="line"> <span class="attribute">border-top-color</span>: rgba(<span class="number">28</span>, <span class="number">88</span>, <span class="number">128</span>, <span class="number">0.59</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<h2 id="sub-menu-使post也有效">sub-menu 使post也有效</h2>
<p>在next_partials-menu.njk中修改</p>
<figure class="highlight plain"><figcaption><span>sub-menu.njk</span></figcaption><table><tr><td class="code"><pre><span class="line">//{%- if theme.menu and is_page() %} //删去改成</span><br><span class="line">{%- if theme.menu and (is_page() or is_post()) %}</span><br></pre></td></tr></table></figure>
<h2 id="加入鼠标点击和输入特效">加入鼠标点击和输入特效</h2>
<p>打开自定义文件许可： <figure class="highlight yml"><figcaption><span>hexo/_config.next.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">custom_file_path:</span></span><br><span class="line"> <span class="attr">bodyEnd:</span> <span class="string">source/_data/body-end.njk</span></span><br></pre></td></tr></table></figure></p>
<p>在source4个js脚本， <details class="note primary"><summary><p>礼花特效代码</p>
</summary>
<figure class="highlight js"><figcaption><span>fireworks.js</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Circle</span> </span>{</span><br><span class="line"> <span class="function"><span class="title">constructor</span>(<span class="params">{ origin, speed, color, angle, context }</span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.origin = origin</span><br><span class="line"> <span class="built_in">this</span>.position = { ...this.origin }</span><br><span class="line"> <span class="built_in">this</span>.color = color</span><br><span class="line"> <span class="built_in">this</span>.speed = speed</span><br><span class="line"> <span class="built_in">this</span>.angle = angle</span><br><span class="line"> <span class="built_in">this</span>.context = context</span><br><span class="line"> <span class="built_in">this</span>.renderCount = <span class="number">0</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">draw</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.context.fillStyle = <span class="built_in">this</span>.color</span><br><span class="line"> <span class="built_in">this</span>.context.beginPath()</span><br><span class="line"> <span class="built_in">this</span>.context.arc(<span class="built_in">this</span>.position.x, <span class="built_in">this</span>.position.y, <span class="number">2</span>, <span class="number">0</span>, <span class="built_in">Math</span>.PI * <span class="number">2</span>)</span><br><span class="line"> <span class="built_in">this</span>.context.fill()</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">move</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.position.x = (<span class="built_in">Math</span>.sin(<span class="built_in">this</span>.angle) * <span class="built_in">this</span>.speed) + <span class="built_in">this</span>.position.x</span><br><span class="line"> <span class="built_in">this</span>.position.y = (<span class="built_in">Math</span>.cos(<span class="built_in">this</span>.angle) * <span class="built_in">this</span>.speed) + <span class="built_in">this</span>.position.y + (<span class="built_in">this</span>.renderCount * <span class="number">0.3</span>)</span><br><span class="line"> <span class="built_in">this</span>.renderCount++</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Boom</span> </span>{</span><br><span class="line"> <span class="title">constructor</span> (<span class="params">{ origin, context, circleCount = <span class="number">16</span>, area }</span>) {</span><br><span class="line"> <span class="built_in">this</span>.origin = origin</span><br><span class="line"> <span class="built_in">this</span>.context = context</span><br><span class="line"> <span class="built_in">this</span>.circleCount = circleCount</span><br><span class="line"> <span class="built_in">this</span>.area = area</span><br><span class="line"> <span class="built_in">this</span>.stop = <span class="literal">false</span></span><br><span class="line"> <span class="built_in">this</span>.circles = []</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">randomArray</span>(<span class="params">range</span>)</span> {</span><br><span class="line"> <span class="keyword">const</span> length = range.length</span><br><span class="line"> <span class="keyword">const</span> randomIndex = <span class="built_in">Math</span>.floor(length * <span class="built_in">Math</span>.random())</span><br><span class="line"> <span class="keyword">return</span> range[randomIndex]</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">randomColor</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="keyword">const</span> range = [<span class="string">'8'</span>, <span class="string">'9'</span>, <span class="string">'A'</span>, <span class="string">'B'</span>, <span class="string">'C'</span>, <span class="string">'D'</span>, <span class="string">'E'</span>, <span class="string">'F'</span>]</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'#'</span> + <span class="built_in">this</span>.randomArray(range) + <span class="built_in">this</span>.randomArray(range) + <span class="built_in">this</span>.randomArray(range) + <span class="built_in">this</span>.randomArray(range) + <span class="built_in">this</span>.randomArray(range) + <span class="built_in">this</span>.randomArray(range)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">randomRange</span>(<span class="params">start, end</span>)</span> {</span><br><span class="line"> <span class="keyword">return</span> (end - start) * <span class="built_in">Math</span>.random() + start</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">init</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="built_in">this</span>.circleCount; i++) {</span><br><span class="line"> <span class="keyword">const</span> circle = <span class="keyword">new</span> Circle({</span><br><span class="line"> context: <span class="built_in">this</span>.context,</span><br><span class="line"> origin: <span class="built_in">this</span>.origin,</span><br><span class="line"> color: <span class="built_in">this</span>.randomColor(),</span><br><span class="line"> angle: <span class="built_in">this</span>.randomRange(<span class="built_in">Math</span>.PI - <span class="number">1</span>, <span class="built_in">Math</span>.PI + <span class="number">1</span>),</span><br><span class="line"> speed: <span class="built_in">this</span>.randomRange(<span class="number">1</span>, <span class="number">6</span>)</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">this</span>.circles.push(circle)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">move</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.circles.forEach(<span class="function">(<span class="params">circle, index</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (circle.position.x > <span class="built_in">this</span>.area.width || circle.position.y > <span class="built_in">this</span>.area.height) {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>.circles.splice(index, <span class="number">1</span>)</span><br><span class="line"> }</span><br><span class="line"> circle.move()</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">this</span>.circles.length == <span class="number">0</span>) {</span><br><span class="line"> <span class="built_in">this</span>.stop = <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">draw</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.circles.forEach(<span class="function"><span class="params">circle</span> =></span> circle.draw())</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">CursorSpecialEffects</span> </span>{</span><br><span class="line"> <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.computerCanvas = <span class="built_in">document</span>.createElement(<span class="string">'canvas'</span>)</span><br><span class="line"> <span class="built_in">this</span>.renderCanvas = <span class="built_in">document</span>.createElement(<span class="string">'canvas'</span>)</span><br><span class="line"></span><br><span class="line"> <span class="built_in">this</span>.computerContext = <span class="built_in">this</span>.computerCanvas.getContext(<span class="string">'2d'</span>)</span><br><span class="line"> <span class="built_in">this</span>.renderContext = <span class="built_in">this</span>.renderCanvas.getContext(<span class="string">'2d'</span>)</span><br><span class="line"></span><br><span class="line"> <span class="built_in">this</span>.globalWidth = <span class="built_in">window</span>.innerWidth</span><br><span class="line"> <span class="built_in">this</span>.globalHeight = <span class="built_in">window</span>.innerHeight</span><br><span class="line"></span><br><span class="line"> <span class="built_in">this</span>.booms = []</span><br><span class="line"> <span class="built_in">this</span>.running = <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">handleMouseDown</span>(<span class="params">e</span>)</span> {</span><br><span class="line"> <span class="keyword">const</span> boom = <span class="keyword">new</span> Boom({</span><br><span class="line"> origin: { <span class="attr">x</span>: e.clientX, <span class="attr">y</span>: e.clientY },</span><br><span class="line"> context: <span class="built_in">this</span>.computerContext,</span><br><span class="line"> area: {</span><br><span class="line"> width: <span class="built_in">this</span>.globalWidth,</span><br><span class="line"> height: <span class="built_in">this</span>.globalHeight</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> boom.init()</span><br><span class="line"> <span class="built_in">this</span>.booms.push(boom)</span><br><span class="line"> <span class="built_in">this</span>.running || <span class="built_in">this</span>.run()</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">handlePageHide</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.booms = []</span><br><span class="line"> <span class="built_in">this</span>.running = <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">init</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="keyword">const</span> style = <span class="built_in">this</span>.renderCanvas.style</span><br><span class="line"> style.position = <span class="string">'fixed'</span></span><br><span class="line"> style.top = style.left = <span class="number">0</span></span><br><span class="line"> style.zIndex = <span class="string">'999999999999999999999999999999999999999999'</span></span><br><span class="line"> style.pointerEvents = <span class="string">'none'</span></span><br><span class="line"></span><br><span class="line"> style.width = <span class="built_in">this</span>.renderCanvas.width = <span class="built_in">this</span>.computerCanvas.width = <span class="built_in">this</span>.globalWidth</span><br><span class="line"> style.height = <span class="built_in">this</span>.renderCanvas.height = <span class="built_in">this</span>.computerCanvas.height = <span class="built_in">this</span>.globalHeight</span><br><span class="line"></span><br><span class="line"> <span class="built_in">document</span>.body.append(<span class="built_in">this</span>.renderCanvas)</span><br><span class="line"></span><br><span class="line"> <span class="built_in">window</span>.addEventListener(<span class="string">'mousedown'</span>, <span class="built_in">this</span>.handleMouseDown.bind(<span class="built_in">this</span>))</span><br><span class="line"> <span class="built_in">window</span>.addEventListener(<span class="string">'pagehide'</span>, <span class="built_in">this</span>.handlePageHide.bind(<span class="built_in">this</span>))</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="title">run</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.running = <span class="literal">true</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">this</span>.booms.length == <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>.running = <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> requestAnimationFrame(<span class="built_in">this</span>.run.bind(<span class="built_in">this</span>))</span><br><span class="line"></span><br><span class="line"> <span class="built_in">this</span>.computerContext.clearRect(<span class="number">0</span>, <span class="number">0</span>, <span class="built_in">this</span>.globalWidth, <span class="built_in">this</span>.globalHeight)</span><br><span class="line"> <span class="built_in">this</span>.renderContext.clearRect(<span class="number">0</span>, <span class="number">0</span>, <span class="built_in">this</span>.globalWidth, <span class="built_in">this</span>.globalHeight)</span><br><span class="line"></span><br><span class="line"> <span class="built_in">this</span>.booms.forEach(<span class="function">(<span class="params">boom, index</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (boom.stop) {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>.booms.splice(index, <span class="number">1</span>)</span><br><span class="line"> }</span><br><span class="line"> boom.move()</span><br><span class="line"> boom.draw()</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">this</span>.renderContext.drawImage(<span class="built_in">this</span>.computerCanvas, <span class="number">0</span>, <span class="number">0</span>, <span class="built_in">this</span>.globalWidth, <span class="built_in">this</span>.globalHeight)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> cursorSpecialEffects = <span class="keyword">new</span> CursorSpecialEffects()</span><br><span class="line">cursorSpecialEffects.init()</span><br></pre></td></tr></table></figure>
</details></p>
<details class="note primary"><summary><p>爆炸特效代码</p>
</summary>
<figure class="highlight js"><figcaption><span>explosion.min.js</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="meta">"use strict"</span>;<span class="function"><span class="keyword">function</span> <span class="title">updateCoords</span>(<span class="params">e</span>)</span>{pointerX=(e.clientX||e.touches[<span class="number">0</span>].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[<span class="number">0</span>].clientY-canvasEl.getBoundingClientRect().top}<span class="function"><span class="keyword">function</span> <span class="title">setParticuleDirection</span>(<span class="params">e</span>)</span>{<span class="keyword">var</span> t=anime.random(<span class="number">0</span>,<span class="number">360</span>)*<span class="built_in">Math</span>.PI/<span class="number">180</span>,a=anime.random(<span class="number">50</span>,<span class="number">180</span>),n=[-<span class="number">1</span>,<span class="number">1</span>][anime.random(<span class="number">0</span>,<span class="number">1</span>)]*a;<span class="keyword">return</span>{<span class="attr">x</span>:e.x+n*<span class="built_in">Math</span>.cos(t),<span class="attr">y</span>:e.y+n*<span class="built_in">Math</span>.sin(t)}}<span class="function"><span class="keyword">function</span> <span class="title">createParticule</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a={};<span class="keyword">return</span> a.x=e,a.y=t,a.color=colors[anime.random(<span class="number">0</span>,colors.length-<span class="number">1</span>)],a.radius=anime.random(<span class="number">16</span>,<span class="number">32</span>),a.endPos=setParticuleDirection(a),a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),ctx.fillStyle=a.color,ctx.fill()},a}<span class="function"><span class="keyword">function</span> <span class="title">createCircle</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a={};<span class="keyword">return</span> a.x=e,a.y=t,a.color=<span class="string">"#F00"</span>,a.radius=<span class="number">.1</span>,a.alpha=<span class="number">.5</span>,a.lineWidth=<span class="number">6</span>,a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=<span class="number">1</span>},a}<span class="function"><span class="keyword">function</span> <span class="title">renderParticule</span>(<span class="params">e</span>)</span>{<span class="keyword">for</span>(<span class="keyword">var</span> t=<span class="number">0</span>;t<e.animatables.length;t++)e.animatables[t].target.draw()}<span class="function"><span class="keyword">function</span> <span class="title">animateParticules</span>(<span class="params">e,t</span>)</span>{<span class="keyword">for</span>(<span class="keyword">var</span> a=createCircle(e,t),n=[],i=<span class="number">0</span>;i<numberOfParticules;i++)n.push(createParticule(e,t));anime.timeline().add({<span class="attr">targets</span>:n,<span class="attr">x</span>:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="keyword">return</span> e.endPos.x},<span class="attr">y</span>:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="keyword">return</span> e.endPos.y},<span class="attr">radius</span>:<span class="number">.1</span>,<span class="attr">duration</span>:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),<span class="attr">easing</span>:<span class="string">"easeOutExpo"</span>,<span class="attr">update</span>:renderParticule}).add({<span class="attr">targets</span>:a,<span class="attr">radius</span>:anime.random(<span class="number">80</span>,<span class="number">160</span>),<span class="attr">lineWidth</span>:<span class="number">0</span>,<span class="attr">alpha</span>:{<span class="attr">value</span>:<span class="number">0</span>,<span class="attr">easing</span>:<span class="string">"linear"</span>,<span class="attr">duration</span>:anime.random(<span class="number">600</span>,<span class="number">800</span>)},<span class="attr">duration</span>:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),<span class="attr">easing</span>:<span class="string">"easeOutExpo"</span>,<span class="attr">update</span>:renderParticule,<span class="attr">offset</span>:<span class="number">0</span>})}<span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a;<span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">var</span> n=<span class="built_in">this</span>,i=<span class="built_in">arguments</span>;<span class="built_in">clearTimeout</span>(a),a=<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{e.apply(n,i)},t)}}<span class="keyword">var</span> canvasEl=<span class="built_in">document</span>.querySelector(<span class="string">".fireworks"</span>);<span class="keyword">if</span>(canvasEl){<span class="keyword">var</span> ctx=canvasEl.getContext(<span class="string">"2d"</span>),numberOfParticules=<span class="number">30</span>,pointerX=<span class="number">0</span>,pointerY=<span class="number">0</span>,tap=<span class="string">"mousedown"</span>,colors=[<span class="string">"#FF1461"</span>,<span class="string">"#18FF92"</span>,<span class="string">"#5A87FF"</span>,<span class="string">"#FBF38C"</span>],setCanvasSize=debounce(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{canvasEl.width=<span class="number">2</span>*<span class="built_in">window</span>.innerWidth,canvasEl.height=<span class="number">2</span>*<span class="built_in">window</span>.innerHeight,canvasEl.style.width=<span class="built_in">window</span>.innerWidth+<span class="string">"px"</span>,canvasEl.style.height=<span class="built_in">window</span>.innerHeight+<span class="string">"px"</span>,canvasEl.getContext(<span class="string">"2d"</span>).scale(<span class="number">2</span>,<span class="number">2</span>)},<span class="number">500</span>),render=anime({<span class="attr">duration</span>:<span class="number">1</span>/<span class="number">0</span>,<span class="attr">update</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.clearRect(<span class="number">0</span>,<span class="number">0</span>,canvasEl.width,canvasEl.height)}});<span class="built_in">document</span>.addEventListener(tap,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="string">"sidebar"</span>!==e.target.id&&<span class="string">"toggle-sidebar"</span>!==e.target.id&&<span class="string">"A"</span>!==e.target.nodeName&&<span class="string">"IMG"</span>!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!<span class="number">1</span>),setCanvasSize(),<span class="built_in">window</span>.addEventListener(<span class="string">"resize"</span>,setCanvasSize,!<span class="number">1</span>)}</span><br></pre></td></tr></table></figure>
</details>
<details class="note primary"><summary><p>浮出爱心特效代码</p>
</summary>
<figure class="highlight js"><figcaption><span>love.min.js</span></figcaption><table><tr><td class="code"><pre><span class="line">!<span class="function"><span class="keyword">function</span>(<span class="params">e,t,a</span>)</span>{<span class="function"><span class="keyword">function</span> <span class="title">n</span>(<span class="params"></span>)</span>{c(<span class="string">".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;}"</span>),o(),r()}<span class="function"><span class="keyword">function</span> <span class="title">r</span>(<span class="params"></span>)</span>{<span class="keyword">for</span>(<span class="keyword">var</span> e=<span class="number">0</span>;e<d.length;e++)d[e].alpha<=<span class="number">0</span>?(t.body.removeChild(d[e].el),d.splice(e,<span class="number">1</span>)):(d[e].y--,d[e].scale+=<span class="number">.004</span>,d[e].alpha-=<span class="number">.013</span>,d[e].el.style.cssText=<span class="string">"left:"</span>+d[e].x+<span class="string">"px;top:"</span>+d[e].y+<span class="string">"px;opacity:"</span>+d[e].alpha+<span class="string">";transform:scale("</span>+d[e].scale+<span class="string">","</span>+d[e].scale+<span class="string">") rotate(45deg);background:"</span>+d[e].color+<span class="string">";z-index:99999"</span>);requestAnimationFrame(r)}<span class="function"><span class="keyword">function</span> <span class="title">o</span>(<span class="params"></span>)</span>{<span class="keyword">var</span> t=<span class="string">"function"</span>==<span class="keyword">typeof</span> e.onclick&&e.onclick;e.onclick=<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{t&&t(),i(e)}}<span class="function"><span class="keyword">function</span> <span class="title">i</span>(<span class="params">e</span>)</span>{<span class="keyword">var</span> a=t.createElement(<span class="string">"div"</span>);a.className=<span class="string">"heart"</span>,d.push({<span class="attr">el</span>:a,<span class="attr">x</span>:e.clientX-<span class="number">5</span>,<span class="attr">y</span>:e.clientY-<span class="number">5</span>,<span class="attr">scale</span>:<span class="number">1</span>,<span class="attr">alpha</span>:<span class="number">1</span>,<span class="attr">color</span>:s()}),t.body.appendChild(a)}<span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params">e</span>)</span>{<span class="keyword">var</span> a=t.createElement(<span class="string">"style"</span>);a.type=<span class="string">"text/css"</span>;<span class="keyword">try</span>{a.appendChild(t.createTextNode(e))}<span class="keyword">catch</span>(t){a.styleSheet.cssText=e}t.getElementsByTagName(<span class="string">"head"</span>)[<span class="number">0</span>].appendChild(a)}<span class="function"><span class="keyword">function</span> <span class="title">s</span>(<span class="params"></span>)</span>{<span class="keyword">return</span><span class="string">"rgb("</span>+~~(<span class="number">255</span>*<span class="built_in">Math</span>.random())+<span class="string">","</span>+~~(<span class="number">255</span>*<span class="built_in">Math</span>.random())+<span class="string">","</span>+~~(<span class="number">255</span>*<span class="built_in">Math</span>.random())+<span class="string">")"</span>}<span class="keyword">var</span> d=[];e.requestAnimationFrame=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">return</span> e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="built_in">setTimeout</span>(e,<span class="number">1e3</span>/<span class="number">60</span>)}}(),n()}(<span class="built_in">window</span>,<span class="built_in">document</span>);</span><br></pre></td></tr></table></figure>
</details>
<details class="note primary"><summary><p>浮出文字特效代码</p>
</summary>
<figure class="highlight js"><figcaption><span>text.js</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a_idx = <span class="number">0</span>;</span><br><span class="line">jQuery(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>) </span>{</span><br><span class="line"> $(<span class="string">"body"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"喜欢我"</span>, <span class="string">"不喜欢我"</span>);</span><br><span class="line"> <span class="keyword">var</span> $i = $(<span class="string">"<span/>"</span>).text(a[a_idx]);</span><br><span class="line"> <span class="keyword">var</span> x = e.pageX,</span><br><span class="line"> y = e.pageY;</span><br><span class="line"> $i.css({</span><br><span class="line"> <span class="string">"z-index"</span>: <span class="number">99999</span>,</span><br><span class="line"> <span class="string">"top"</span>: y - <span class="number">28</span>,</span><br><span class="line"> <span class="string">"left"</span>: x - a[a_idx].length * <span class="number">8</span>,</span><br><span class="line"> <span class="string">"position"</span>: <span class="string">"absolute"</span>,</span><br><span class="line"> <span class="string">"color"</span>: <span class="string">"#ff7a45"</span></span><br><span class="line"> });</span><br><span class="line"> $(<span class="string">"body"</span>).append($i);</span><br><span class="line"> $i.animate({</span><br><span class="line"> <span class="string">"top"</span>: y - <span class="number">180</span>,</span><br><span class="line"> <span class="string">"opacity"</span>: <span class="number">0</span></span><br><span class="line"> }, <span class="number">1500</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $i.remove();</span><br><span class="line"> });</span><br><span class="line"> a_idx = (a_idx + <span class="number">1</span>) % a.length;</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
</details>
<p>在source <details class="note primary"><summary><p>打字特效代码</p>
</summary>
<figure class="highlight js"><figcaption><span>activate-power-mode.min.js</span></figcaption><table><tr><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">webpackUniversalModuleDefinition</span>(<span class="params">root,factory</span>)</span>{<span class="keyword">if</span>(<span class="keyword">typeof</span> <span class="built_in">exports</span>===<span class="string">'object'</span>&&<span class="keyword">typeof</span> <span class="built_in">module</span>===<span class="string">'object'</span>)<span class="built_in">module</span>.exports=factory();<span class="keyword">else</span> <span class="keyword">if</span>(<span class="keyword">typeof</span> define===<span class="string">'function'</span>&&define.amd)define([],factory);<span class="keyword">else</span> <span class="keyword">if</span>(<span class="keyword">typeof</span> <span class="built_in">exports</span>===<span class="string">'object'</span>)<span class="built_in">exports</span>[<span class="string">"POWERMODE"</span>]=factory();<span class="keyword">else</span> root[<span class="string">"POWERMODE"</span>]=factory()})(<span class="built_in">this</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">return</span>(<span class="function"><span class="keyword">function</span>(<span class="params">modules</span>)</span>{<span class="keyword">var</span> installedModules={};<span class="function"><span class="keyword">function</span> <span class="title">__webpack_require__</span>(<span class="params">moduleId</span>)</span>{<span class="keyword">if</span>(installedModules[moduleId])<span class="keyword">return</span> installedModules[moduleId].exports;<span class="keyword">var</span> <span class="built_in">module</span>=installedModules[moduleId]={<span class="attr">exports</span>:{},<span class="attr">id</span>:moduleId,<span class="attr">loaded</span>:<span class="literal">false</span>};modules[moduleId].call(<span class="built_in">module</span>.exports,<span class="built_in">module</span>,<span class="built_in">module</span>.exports,__webpack_require__);<span class="built_in">module</span>.loaded=<span class="literal">true</span>;<span class="keyword">return</span> <span class="built_in">module</span>.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.p=<span class="string">""</span>;<span class="keyword">return</span> __webpack_require__(<span class="number">0</span>)})([<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>,<span class="built_in">exports</span>,__webpack_require__</span>)</span>{<span class="string">'use strict'</span>;<span class="keyword">var</span> canvas=<span class="built_in">document</span>.createElement(<span class="string">'canvas'</span>);canvas.width=<span class="built_in">window</span>.innerWidth;canvas.height=<span class="built_in">window</span>.innerHeight;canvas.style.cssText=<span class="string">'position:fixed;top:0;left:0;pointer-events:none;z-index:999999'</span>;<span class="built_in">window</span>.addEventListener(<span class="string">'resize'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{canvas.width=<span class="built_in">window</span>.innerWidth;canvas.height=<span class="built_in">window</span>.innerHeight});<span class="built_in">document</span>.body.appendChild(canvas);<span class="keyword">var</span> context=canvas.getContext(<span class="string">'2d'</span>);<span class="keyword">var</span> particles=[];<span class="keyword">var</span> particlePointer=<span class="number">0</span>;POWERMODE.shake=<span class="literal">true</span>;<span class="function"><span class="keyword">function</span> <span class="title">getRandom</span>(<span class="params">min,max</span>)</span>{<span class="keyword">return</span> <span class="built_in">Math</span>.random()*(max-min)+min}<span class="function"><span class="keyword">function</span> <span class="title">getColor</span>(<span class="params">el</span>)</span>{<span class="keyword">if</span>(POWERMODE.colorful){<span class="keyword">var</span> u=getRandom(<span class="number">0</span>,<span class="number">360</span>);<span class="keyword">return</span><span class="string">'hsla('</span>+getRandom(u-<span class="number">10</span>,u+<span class="number">10</span>)+<span class="string">', 100%, '</span>+getRandom(<span class="number">50</span>,<span class="number">80</span>)+<span class="string">'%, '</span>+<span class="number">1</span>+<span class="string">')'</span>}<span class="keyword">else</span>{<span class="keyword">return</span> <span class="built_in">window</span>.getComputedStyle(el).color}}<span class="function"><span class="keyword">function</span> <span class="title">getCaret</span>(<span class="params"></span>)</span>{<span class="keyword">var</span> el=<span class="built_in">document</span>.activeElement;<span class="keyword">var</span> bcr;<span class="keyword">if</span>(el.tagName===<span class="string">'TEXTAREA'</span>||(el.tagName===<span class="string">'INPUT'</span>&&el.getAttribute(<span class="string">'type'</span>)===<span class="string">'text'</span>)){<span class="keyword">var</span> offset=__webpack_require__(<span class="number">1</span>)(el,el.selectionStart);bcr=el.getBoundingClientRect();<span class="keyword">return</span>{<span class="attr">x</span>:offset.left+bcr.left,<span class="attr">y</span>:offset.top+bcr.top,<span class="attr">color</span>:getColor(el)}}<span class="keyword">var</span> selection=<span class="built_in">window</span>.getSelection();<span class="keyword">if</span>(selection.rangeCount){<span class="keyword">var</span> range=selection.getRangeAt(<span class="number">0</span>);<span class="keyword">var</span> startNode=range.startContainer;<span class="keyword">if</span>(startNode.nodeType===<span class="built_in">document</span>.TEXT_NODE){startNode=startNode.parentNode}bcr=range.getBoundingClientRect();<span class="keyword">return</span>{<span class="attr">x</span>:bcr.left,<span class="attr">y</span>:bcr.top,<span class="attr">color</span>:getColor(startNode)}}<span class="keyword">return</span>{<span class="attr">x</span>:<span class="number">0</span>,<span class="attr">y</span>:<span class="number">0</span>,<span class="attr">color</span>:<span class="string">'transparent'</span>}}<span class="function"><span class="keyword">function</span> <span class="title">createParticle</span>(<span class="params">x,y,color</span>)</span>{<span class="keyword">return</span>{<span class="attr">x</span>:x,<span class="attr">y</span>:y,<span class="attr">alpha</span>:<span class="number">1</span>,<span class="attr">color</span>:color,<span class="attr">velocity</span>:{<span class="attr">x</span>:-<span class="number">1</span>+<span class="built_in">Math</span>.random()*<span class="number">2</span>,<span class="attr">y</span>:-<span class="number">3.5</span>+<span class="built_in">Math</span>.random()*<span class="number">2</span>}}}<span class="function"><span class="keyword">function</span> <span class="title">POWERMODE</span>(<span class="params"></span>)</span>{{<span class="keyword">var</span> caret=getCaret();<span class="keyword">var</span> numParticles=<span class="number">5</span>+<span class="built_in">Math</span>.round(<span class="built_in">Math</span>.random()*<span class="number">10</span>);<span class="keyword">while</span>(numParticles--){particles[particlePointer]=createParticle(caret.x,caret.y,caret.color);particlePointer=(particlePointer+<span class="number">1</span>)%<span class="number">500</span>}}{<span class="keyword">if</span>(POWERMODE.shake){<span class="keyword">var</span> intensity=<span class="number">1</span>+<span class="number">2</span>*<span class="built_in">Math</span>.random();<span class="keyword">var</span> x=intensity*(<span class="built_in">Math</span>.random()><span class="number">0.5</span>?-<span class="number">1</span>:<span class="number">1</span>);<span class="keyword">var</span> y=intensity*(<span class="built_in">Math</span>.random()><span class="number">0.5</span>?-<span class="number">1</span>:<span class="number">1</span>);<span class="built_in">document</span>.body.style.marginLeft=x+<span class="string">'px'</span>;<span class="built_in">document</span>.body.style.marginTop=y+<span class="string">'px'</span>;<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="built_in">document</span>.body.style.marginLeft=<span class="string">''</span>;<span class="built_in">document</span>.body.style.marginTop=<span class="string">''</span>},<span class="number">75</span>)}}};POWERMODE.colorful=<span class="literal">false</span>;<span class="function"><span class="keyword">function</span> <span class="title">loop</span>(<span class="params"></span>)</span>{requestAnimationFrame(loop);context.clearRect(<span class="number">0</span>,<span class="number">0</span>,canvas.width,canvas.height);<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<particles.length;++i){<span class="keyword">var</span> particle=particles[i];<span class="keyword">if</span>(particle.alpha<=<span class="number">0.1</span>)<span class="keyword">continue</span>;particle.velocity.y+=<span class="number">0.075</span>;particle.x+=particle.velocity.x;particle.y+=particle.velocity.y;particle.alpha*=<span class="number">0.96</span>;context.globalAlpha=particle.alpha;context.fillStyle=particle.color;context.fillRect(<span class="built_in">Math</span>.round(particle.x-<span class="number">1.5</span>),<span class="built_in">Math</span>.round(particle.y-<span class="number">1.5</span>),<span class="number">3</span>,<span class="number">3</span>)}}requestAnimationFrame(loop);<span class="built_in">module</span>.exports=POWERMODE},<span class="function"><span class="keyword">function</span>(<span class="params"><span class="built_in">module</span>,<span class="built_in">exports</span></span>)</span>{(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">var</span> properties=[<span class="string">'direction'</span>,<span class="string">'boxSizing'</span>,<span class="string">'width'</span>,<span class="string">'height'</span>,<span class="string">'overflowX'</span>,<span class="string">'overflowY'</span>,<span class="string">'borderTopWidth'</span>,<span class="string">'borderRightWidth'</span>,<span class="string">'borderBottomWidth'</span>,<span class="string">'borderLeftWidth'</span>,<span class="string">'borderStyle'</span>,<span class="string">'paddingTop'</span>,<span class="string">'paddingRight'</span>,<span class="string">'paddingBottom'</span>,<span class="string">'paddingLeft'</span>,<span class="string">'fontStyle'</span>,<span class="string">'fontVariant'</span>,<span class="string">'fontWeight'</span>,<span class="string">'fontStretch'</span>,<span class="string">'fontSize'</span>,<span class="string">'fontSizeAdjust'</span>,<span class="string">'lineHeight'</span>,<span class="string">'fontFamily'</span>,<span class="string">'textAlign'</span>,<span class="string">'textTransform'</span>,<span class="string">'textIndent'</span>,<span class="string">'textDecoration'</span>,<span class="string">'letterSpacing'</span>,<span class="string">'wordSpacing'</span>,<span class="string">'tabSize'</span>,<span class="string">'MozTabSize'</span>];<span class="keyword">var</span> isFirefox=<span class="built_in">window</span>.mozInnerScreenX!=<span class="literal">null</span>;<span class="function"><span class="keyword">function</span> <span class="title">getCaretCoordinates</span>(<span class="params">element,position,options</span>)</span>{<span class="keyword">var</span> debug=options&&options.debug||<span class="literal">false</span>;<span class="keyword">if</span>(debug){<span class="keyword">var</span> el=<span class="built_in">document</span>.querySelector(<span class="string">'#input-textarea-caret-position-mirror-div'</span>);<span class="keyword">if</span>(el){el.parentNode.removeChild(el)}}<span class="keyword">var</span> div=<span class="built_in">document</span>.createElement(<span class="string">'div'</span>);div.id=<span class="string">'input-textarea-caret-position-mirror-div'</span>;<span class="built_in">document</span>.body.appendChild(div);<span class="keyword">var</span> style=div.style;<span class="keyword">var</span> computed=<span class="built_in">window</span>.getComputedStyle?getComputedStyle(element):element.currentStyle;style.whiteSpace=<span class="string">'pre-wrap'</span>;<span class="keyword">if</span>(element.nodeName!==<span class="string">'INPUT'</span>)style.wordWrap=<span class="string">'break-word'</span>;style.position=<span class="string">'absolute'</span>;<span class="keyword">if</span>(!debug)style.visibility=<span class="string">'hidden'</span>;properties.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">prop</span>)</span>{style[prop]=computed[prop]});<span class="keyword">if</span>(isFirefox){<span class="keyword">if</span>(element.scrollHeight><span class="built_in">parseInt</span>(computed.height))style.overflowY=<span class="string">'scroll'</span>}<span class="keyword">else</span>{style.overflow=<span class="string">'hidden'</span>}div.textContent=element.value.substring(<span class="number">0</span>,position);<span class="keyword">if</span>(element.nodeName===<span class="string">'INPUT'</span>)div.textContent=div.textContent.replace(<span class="regexp">/\s/g</span>,<span class="string">"\u00a0"</span>);<span class="keyword">var</span> span=<span class="built_in">document</span>.createElement(<span class="string">'span'</span>);span.textContent=element.value.substring(position)||<span class="string">'.'</span>;div.appendChild(span);<span class="keyword">var</span> coordinates={<span class="attr">top</span>:span.offsetTop+<span class="built_in">parseInt</span>(computed[<span class="string">'borderTopWidth'</span>]),<span class="attr">left</span>:span.offsetLeft+<span class="built_in">parseInt</span>(computed[<span class="string">'borderLeftWidth'</span>])};<span class="keyword">if</span>(debug){span.style.backgroundColor=<span class="string">'#aaa'</span>}<span class="keyword">else</span>{<span class="built_in">document</span>.body.removeChild(div)}<span class="keyword">return</span> coordinates}<span class="keyword">if</span>(<span class="keyword">typeof</span> <span class="built_in">module</span>!=<span class="string">"undefined"</span>&&<span class="keyword">typeof</span> <span class="built_in">module</span>.exports!=<span class="string">"undefined"</span>){<span class="built_in">module</span>.exports=getCaretCoordinates}<span class="keyword">else</span>{<span class="built_in">window</span>.getCaretCoordinates=getCaretCoordinates}}())}])});</span><br></pre></td></tr></table></figure>
</details></p>
<p>在hexo/source/_data下创建打开 body-end.njk，添加代码 <figure class="highlight plain"><figcaption><span>lang:njk</span></figcaption><table><tr><td class="code"><pre><span class="line">{# 鼠标点击特效 #}</span><br><span class="line"> {% if theme.cursor_effect == "fireworks" %}</span><br><span class="line"> <script async src="/js/cursor/fireworks.js"></script></span><br><span class="line"> {% elseif theme.cursor_effect == "explosion" %}</span><br><span class="line"> <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas></span><br><span class="line"> <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script></span><br><span class="line"> <script async src="/js/cursor/explosion.min.js"></script></span><br><span class="line"> {% elseif theme.cursor_effect == "love" %}</span><br><span class="line"> <script async src="/js/cursor/love.min.js"></script></span><br><span class="line"> {% elseif theme.cursor_effect == "text" %}</span><br><span class="line"> <script async src="/js/cursor/text.js"></script></span><br><span class="line"> {% endif %}</span><br><span class="line"></span><br><span class="line">{# 打字特效 #}</span><br><span class="line">{% if theme.typing_effect %}</span><br><span class="line"> <script src="/js/activate-power-mode.min.js"></script></span><br><span class="line"> <script></span><br><span class="line"> POWERMODE.colorful = {{ theme.typing_effect.colorful }};</span><br><span class="line"> POWERMODE.shake = {{ theme.typing_effect.shake }};</span><br><span class="line"> document.body.addEventListener('input', POWERMODE);</span><br><span class="line"> </script></span><br><span class="line">{% en主题dif %}</span><br></pre></td></tr></table></figure> 在主题配置文件加入配置项</p>
<figure class="highlight yml"><figcaption><span>hexo/_config.next.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment">#点击和打字特效</span></span><br><span class="line"><span class="comment"># mouse click effect: fireworks | explosion | love | text</span></span><br><span class="line"><span class="attr">cursor_effect:</span> <span class="string">fireworks</span></span><br><span class="line"><span class="comment"># typing effect</span></span><br><span class="line"><span class="attr">typing_effect:</span></span><br><span class="line"> <span class="attr">colorful:</span> <span class="literal">true</span> <span class="comment"># 礼花特效</span></span><br><span class="line"> <span class="attr">shake:</span> <span class="literal">false</span> <span class="comment"># 震动特效</span></span><br></pre></td></tr></table></figure>
<h2 id="tagcloud">TagCloud</h2>
<p>安装插件</p>
<pre><code>npm install hexo-tag-cloud --save</code></pre>
<p>在 next_partials.njk 中内容替换成</p>
<figure class="highlight plain"><figcaption><span>tags.njk</span></figcaption><table><tr><td class="code"><pre><span class="line"><div class="tag-cloud"></span><br><span class="line"> <div class="tag-cloud-title"></span><br><span class="line"> {{ _p('counter.tag_cloud', site.tags.length) }}</span><br><span class="line"> </div></span><br><span class="line"> </span><br><span class="line"> {% if site.tags.length > 1 %}</span><br><span class="line"> <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script></span><br><span class="line"> <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script></span><br><span class="line"> <div class="widget-wrap"></span><br><span class="line"> <h3 class="widget-title">Tag Cloud</h3></span><br><span class="line"> <div id="myCanvasContainer" class="widget tagcloud"></span><br><span class="line"> <canvas width="250" height="250" id="resCanvas" style="width=100%"></span><br><span class="line"> {{ list_tags() }}</span><br><span class="line"> </canvas></span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"> {% endif %}</span><br><span class="line"></span><br><span class="line"> <div class="tag-cloud-tags"></span><br><span class="line"> {{ tagcloud({</span><br><span class="line"> min_font: theme.tagcloud.min,</span><br><span class="line"> max_font: theme.tagcloud.max,</span><br><span class="line"> amount : theme.tagcloud.amount,</span><br><span class="line"> orderby : theme.tagcloud.orderby,</span><br><span class="line"> order : theme.tagcloud.order,</span><br><span class="line"> class : 'tag-cloud'</span><br><span class="line"> })</span><br><span class="line"> }}</span><br><span class="line"> </div></span><br><span class="line"></div></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>在配置文件加入配置项 <figure class="highlight yml"><figcaption><span>hexo/_config.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="comment"># hexo-tag-cloud</span></span><br><span class="line"> <span class="attr">tag_cloud:</span></span><br><span class="line"> <span class="attr">textFont:</span> <span class="string">Trebuchet</span> <span class="string">MS,</span> <span class="string">Helvetica</span></span><br><span class="line"> <span class="attr">textColor:</span> <span class="string">'#333'</span></span><br><span class="line"> <span class="attr">textHeight:</span> <span class="number">100</span></span><br><span class="line"> <span class="attr">outlineColor:</span> <span class="string">'#E2E1D1'</span></span><br><span class="line"> <span class="attr">maxSpeed:</span> <span class="number">0.5</span></span><br></pre></td></tr></table></figure></p>
<h2 id="live2d">live2D</h2>
<p>安装插件</p>
<pre><code>npm install --save hexo-helper-live2d</code></pre>
<p>在主题配置文件加入 <figure class="highlight yml"><figcaption><span>hexo/_config.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">live2d:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">scriptFrom:</span> <span class="string">local</span></span><br><span class="line"> <span class="attr">pluginRootPath:</span> <span class="string">live2dw/</span></span><br><span class="line"> <span class="attr">pluginJsPath:</span> <span class="string">lib/</span></span><br><span class="line"> <span class="attr">pluginModelPath:</span> <span class="string">assets/</span></span><br><span class="line"> <span class="attr">tagMode:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">debug:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">model:</span></span><br><span class="line"> <span class="attr">use:</span> <span class="string">live2d-widget-model-hijiki</span></span><br><span class="line"> <span class="attr">scale:</span> <span class="number">1</span></span><br><span class="line"> <span class="attr">hHeadPos:</span> <span class="number">0.5</span></span><br><span class="line"> <span class="attr">vHeadPos:</span> <span class="number">0.5</span></span><br><span class="line"> <span class="attr">display:</span></span><br><span class="line"> <span class="attr">superSample:</span> <span class="number">2</span></span><br><span class="line"> <span class="attr">width:</span> <span class="number">200</span></span><br><span class="line"> <span class="attr">height:</span> <span class="number">500</span></span><br><span class="line"> <span class="attr">position:</span> <span class="string">left</span></span><br><span class="line"> <span class="attr">hOffset:</span> <span class="number">40</span></span><br><span class="line"> <span class="attr">vOffset:</span> <span class="number">-150</span></span><br><span class="line"> <span class="attr">mobile:</span></span><br><span class="line"> <span class="attr">show:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">scale:</span> <span class="number">0.5</span></span><br><span class="line"> <span class="attr">react:</span></span><br><span class="line"> <span class="attr">opacity:</span> <span class="number">0.9</span></span><br><span class="line"> <span class="attr">opacityDefault:</span> <span class="number">0.7</span></span><br><span class="line"> <span class="attr">opacityOnHover:</span> <span class="number">0.7</span></span><br><span class="line"> <span class="attr">dialog:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">hitokoto:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure></p>
<p>还可以百度找找其他模型的配置。</p>
<h2 id="底部彩色滚动字样">底部彩色滚动字样</h2>
<p>打开自定义文件许可： <figure class="highlight yml"><figcaption><span>hexo/_config.next.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">custom_file_path:</span></span><br><span class="line"> <span class="attr">footer:</span> <span class="string">source/_data/footer.njk</span></span><br></pre></td></tr></table></figure></p>
<p>在hexo/source/_data下创建打开 footer.njk，添加代码 <details class="note primary"><summary><p>代码</p>
</summary>
<figure class="highlight plain"><figcaption><span>footer.njk</span></figcaption><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><div id="binft"></div></span><br><span class="line"> <script></span><br><span class="line"> var binft = function (r) {</span><br><span class="line"> function t() {</span><br><span class="line"> return b[Math.floor(Math.random() * b.length)]</span><br><span class="line"> } </span><br><span class="line"> function e() {</span><br><span class="line"> return String.fromCharCode(94 * Math.random() + 33)</span><br><span class="line"> }</span><br><span class="line"> function n(r) {</span><br><span class="line"> for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {</span><br><span class="line"> var l = document.createElement("span");</span><br><span class="line"> l.textContent = e(), l.style.color = t(), n.appendChild(l)</span><br><span class="line"> }</span><br><span class="line"> return n</span><br><span class="line"> }</span><br><span class="line"> function i() {</span><br><span class="line"> var t = o[c.skillI];</span><br><span class="line"> c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)</span><br><span class="line"> }</span><br><span class="line"> var l = "",</span><br><span class="line"> o = ["青青陵上柏，磊磊涧中石。", "人生天地间，忽如远行客。","斗酒相娱乐，聊厚不为薄。", "驱车策驽马，游戏宛与洛。","洛中何郁郁，冠带自相索。","长衢罗夹巷，王侯多第宅。","两宫遥相望，双阙百余尺。","极宴娱心意，戚戚何所迫？"].map(function (r) {</span><br><span class="line"> return r + ""</span><br><span class="line"> }),</span><br><span class="line"> a = 2,</span><br><span class="line"> g = 1,</span><br><span class="line"> s = 5,</span><br><span class="line"> d = 75,</span><br><span class="line"> b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],</span><br><span class="line"> c = {</span><br><span class="line"> text: "",</span><br><span class="line"> prefixP: -s,</span><br><span class="line"> skillI: 0,</span><br><span class="line"> skillP: 0,</span><br><span class="line"> direction: "forward",</span><br><span class="line"> delay: a,</span><br><span class="line"> step: g</span><br><span class="line"> };</span><br><span class="line"> i()</span><br><span class="line"> };</span><br><span class="line"> binft(document.getElementById('binft'));</span><br><span class="line"> </script></span><br></pre></td></tr></table></figure>
</details> ## 文末结束语 打开自定义文件许可： <figure class="highlight yml"><figcaption><span>hexo/_config.next.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">custom_file_path:</span></span><br><span class="line"> <span class="attr">postBodyEnd:</span> <span class="string">source/_data/post-body-end.njk</span></span><br></pre></td></tr></table></figure></p>
<p>在hexo/source/_data下创建打开 post-body-end.njk，添加代码 <details class="note primary"><summary><p>代码</p>
</summary>
<figure class="highlight plain"><figcaption><span>post-body-end.njk</span></figcaption><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><div></span><br><span class="line"> {% if not is_index %}</span><br><span class="line"> <div class="end-slogan" style="text-align:center;font-size:13px;letter-spacing:10px;user-select:none;color:#bbb;"><br/>本文结束啦<i class="fa fa-star"></i>感谢您阅读<br/><br/></div></span><br><span class="line"> {% endif %}</span><br><span class="line"></div> </span><br></pre></td></tr></table></figure>
</details></p>
<p>在主题配置文件加入 <figure class="highlight yml"><figcaption><span>hexo/_config.next.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">passage_end_tag:</span></span><br><span class="line"> <span class="attr">enabled:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure></p>
<h2 id="文末名言">文末名言</h2>
<p>在hexo/source/_data下打开 post-body-end.njk 加入</p>
<details class="note primary"><summary><p>代码</p>
</summary>
<figure class="highlight plain"><figcaption><span>post-body-end.njk</span></figcaption><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><!-- 文件位置：~/source/_data/post-body-end.swig --></span><br><span class="line"> <div style="text-align: center"><span id="jrsc" >正在加载今日诗词....</span></div></span><br></pre></td></tr></table></figure>
</details>
<p>在hexo/source/_data下打开body-end.njk 加入</p>
<details class="note primary"><summary><p>代码</p>
</summary>
<figure class="highlight plain"><figcaption><span>body-end.njk</span></figcaption><table><tr><td class="code"><pre><span class="line"><script src="//sdk.jinrishici.com/v2/browser/jinrishici.js"></script></span><br><span class="line"><script></span><br><span class="line"> console.log('今日诗词 - 开始加载...');</span><br><span class="line"> jinrishici.load((result) => {</span><br><span class="line"> let jrsc = document.getElementById('jrsc');</span><br><span class="line"> if (jrsc) {</span><br><span class="line"> console.log('今日诗词 - 标签获取成功.');</span><br><span class="line"> } else {</span><br><span class="line"> console.log('今日诗词 - 标签获取失败!');</span><br><span class="line"> return;</span><br><span class="line"> }</span><br><span class="line"> const data = result.data;</span><br><span class="line"> let author = data.origin.author;</span><br><span class="line"> let title = '《' + data.origin.title + '》';</span><br><span class="line"> let content = data.content.substr(0, data.content.length - 1);</span><br><span class="line"> let dynasty = data.origin.dynasty.substr(0, data.origin.dynasty.length - 1);</span><br><span class="line"> jrsc.innerText = content + ' @ ' + dynasty + '·' + author + title;</span><br><span class="line"> console.log('今日诗词 - 载入完毕.');</span><br><span class="line"> if (data.origin.author == '李白') {</span><br><span class="line"> let audio = document.createElement("audio");</span><br><span class="line"> audio.src = "/ding.mp3";</span><br><span class="line"> audio.play();</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
</details>
<h2 id="addthis-分享设置文章底部">Addthis 分享设置文章底部</h2>
<p>在主题配置文件设置 <figure class="highlight yml"><figcaption><span>hexo/_config.next.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">add_this_id:</span> <span class="string">（空置）</span></span><br><span class="line"><span class="attr">add_this_id_PostEnd:</span> <span class="string">xxxx</span></span><br></pre></td></tr></table></figure></p>
<details class="note primary"><summary><p>代码</p>
</summary>
<figure class="highlight plain"><figcaption><span>post-body-end.njk</span></figcaption><table><tr><td class="code"><pre><span class="line">{%- if theme.add_this_id_PostEnd %}</span><br><span class="line"> <div class="addthis_inline_share_toolbox" style="text-align: right;"></span><br><span class="line"> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ theme.add_this_id_PostEnd }}" async="async"></script></span><br><span class="line"> </div></span><br><span class="line">{%- endif %} </span><br></pre></td></tr></table></figure>
</details>
<h2 id="豆瓣书页">豆瓣书页</h2>
<p>安装插件</p>
<pre><code>npm install hexo-douban --save</code></pre>
<p>在主题配置文件设置 <figure class="highlight yml"><figcaption><span>hexo/_config.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">douban:</span></span><br><span class="line"> <span class="attr">user:</span> <span class="string">mythsman</span></span><br><span class="line"> <span class="attr">builtin:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">book:</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">'This is my book title'</span></span><br><span class="line"> <span class="attr">quote:</span> <span class="string">'This is my book quote'</span></span><br><span class="line"> <span class="attr">movie:</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">'This is my movie title'</span></span><br><span class="line"> <span class="attr">quote:</span> <span class="string">'This is my movie quote'</span></span><br><span class="line"> <span class="attr">game:</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">'This is my game title'</span></span><br><span class="line"> <span class="attr">quote:</span> <span class="string">'This is my game quote'</span></span><br><span class="line"> <span class="attr">timeout:</span> <span class="number">10000</span></span><br></pre></td></tr></table></figure></p>
<p><a href="https://github.com/mythsman/hexo-douban">详查</a></p>
]]></content>
<categories>
<category>Blog</category>
</categories>
<tags>
<tag>博客</tag>
</tags>
</entry>
</search>