-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
940 lines (452 loc) · 301 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>流量池：低成本获取有效流量</title>
<link href="/9787508686769/"/>
<url>/9787508686769/</url>
<content type="html"><![CDATA[<p><img src="../images/9787508686769/book.png" alt="书籍简介"></p><p>移动互联网时代，信息日益冗余，新闻速朽；</p><p>整体流量增长速度放缓，而竞争者数量高速增加；</p><p>流量呈现变少、变贵、欺诈频繁的现状；</p><p>品效合一的营销策略成为共识，而实现路径成为痛点；</p><p>多次开创各营销渠道效果之最的营销人、各种刷屏级营销事件操盘手、神州专车 CMO 杨飞，这一次倾囊相授，诚恳讲述如何实现流量获取、营销转化以及流量的运营和再挖掘。</p><p><img src="../images/9787508686769/outline.png" alt="outline"></p><h2 id="流量之困">流量之困</h2><p><img src="../images/9787508686769/part01.png" alt="part01"></p><h2 id="获取流量">获取流量</h2><p><img src="../images/9787508686769/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>如何利用金字塔原理做好文件管理？只需三步！</title>
<link href="/knowledge-pyramid/"/>
<url>/knowledge-pyramid/</url>
<content type="html"><![CDATA[<p><img src="../images/knowledge-pyramid/pic01.gif" alt="情境对话"></p><p>无论是桌面文件，还是浏览器收藏夹，我们总是或多或少会遇到这样的情形：文件或网页收藏随意放置，需要的时候总是要找不到，不需要的时候总是在 “ 扎眼 ” ；又或者做了分类，但要点击一个又一个文件夹去找，加重了查找的负担。长久下来，这会大大降低和浪费了我们的效率和时间。</p><p>电脑文件太多太乱，如何快速整理，有什么好方法呢？芭芭拉·明托的《金字塔原理》为你提供了高效整理的新思路。金字塔原理是一种重点突出、逻辑清晰、主次分明的思考方式、表达方式和规范动作，其核心结构可以总结为十六个字：结论先行，以上统下，归类分组，逻辑递进。</p><h2 id="横向分类">横向分类</h2><p>MECE 原则是麦肯锡公司的咨询顾问巴巴拉·明托在《金字塔原理》一书中提出的一个很重要的原则，要求我们在划分结构时尽量做到不重复、不遗漏。这是思考横向逻辑时必须符合的结构分类原则。</p><p>比如对这个世界上的人进行分类：</p><p><img src="../images/knowledge-pyramid/pic02.png" alt="MECE原则"></p><p>在信息分类时，MECE 就好像一把尺子，可以判断你脑海中无序的信息是否已经分类清楚了。同理，要使用好这把尺子，你需要找到度量标准，也就是切入点（分类标准）。由于每个人的生活背景不同，分类切入点也有一定的差异，但最终都要遵循相互独立、完全穷尽的 MECE 原则。</p><p>以我为例，我按照信息的使用场景将资料分类为工作、学习、生活、程序四个板块，这一套分类既可以用于桌面文件资料分类，还用于浏览器收藏夹分类，甚至是笔记分类。下面是电脑资料分类的一个简单示意图，以程序中的软件为例，根据电脑系统角度，软件可以分为系统软件和应用软件两大类；根据应用场景，软件可以分为电脑软件和手机软件，由于手机软件这一分类相对较少，所以我将它单独分类管理。</p><p><img src="../images/knowledge-pyramid/pic03.png" alt="电脑资料分类示例"></p><p>在资料分类中，规范化命名也是很重要的工作，能够帮助你快速查找到所需要的文件和文件夹，减少时间的浪费，提高效率。<a href="https://baike.baidu.com/item/%E6%9D%9C%E5%A8%81%E5%8D%81%E8%BF%9B%E5%88%B6%E5%9B%BE%E4%B9%A6%E5%88%86%E7%B1%BB%E6%B3%95/6273918">杜威十进制图书分类法</a>是一种图书馆按照题材来把非小说刊物分成组的数字方法，我们可以借助这一分类思想做文件夹的规范化命名，但要注意层级不要过多，一般三层为最佳。该分类法以三位数字代表分类码，共可分为 10 个大分类、100 个中分类及 1000 个小分类，示例如下。</p><p><img src="../images/knowledge-pyramid/pic04.png" alt="分类码示例"></p><p>再细化到具体某一文件的命名，不同的场景有不同的命名规范，但要做到尽可能详细具体地描述资料的属性，合理利用各种符号，如 <code>_</code>、<code>－</code>。比如我对于《金字塔原理》这本书的命名是「 <code>金字塔原理_明托_逻辑思维_9787544294829</code> 」，里面包含了这本书的书名、作者、关键词和 ISBN 号；再比如我对于某一张拍摄的照片的命名是「 <code>20200610－今天佳人有约</code> 」，里面描述了我在拍摄当天的心情。</p><p>同理，浏览器收藏的标签也可以这样操作，我们可以利用分割线、符号 <code>|</code> 和表情包对标签进行属性划分，一般可以命名为「 用途 | 网页名称 」。比如「 Sat | 名侦探柯南1117 」，表达了名侦探柯南这部片子更新的时间是每周六，我已经看到了 1117 集；再比如「 网盘 | 奈斯搜索👍🔑 」，里面描述了关于奈斯搜索这个网页的用途以及我的使用体验。</p><p><img src="../images/knowledge-pyramid/pic05.png" alt="浏览器收藏"></p><p>命名说到底是为了让你的使用更加方便，更加便于搜索，所以一定要结合自己对于资料的使用需求命名，避免无意义的命名，就比如我之前收藏了很多在线影视网站，命名为「 动漫 | xxx 」、「 美剧 | xxx 」，还不如一个「 Sun | Movie001 」来得实际，如果网站失效，我只需要更换网址即可。</p><h2 id="纵向搜索">纵向搜索</h2><p>当你搜索你的电脑以获取文件和其他内容时，为你的电脑内容建立索引，可帮助你获得更快的搜索结果。建立索引是在你的电脑上查看文件和其他的内容并分类它们的信息的过程，就好比你小时候查字典时，根据拼音或偏旁找字的这个过程。</p><p>Windows 系统虽然有索引搜索功能，但是当你的文件资料过多时，你会发现搜索变得很吃力，这与它本身的算法有关，在这里不展开讨论，好在我们可以利用 <a href="https://www.voidtools.com/zh-cn/">Everything</a> 这款免费搜索利器来改善 Windows 文件搜索体验。Everything 能够基于文件名快速定文件和文件夹位置，索引 1,000,000 个文件只需要大约 1 分钟，占用内存小，搜索迅捷，支持集成到右键菜单实现快速搜索。</p><p><img src="../images/knowledge-pyramid/pic06.png" alt="Everything"></p><p>需要注意的是，Everything 只支持文件名快速搜索，如果要对文件内容进行全文检索，目前市面上的产品不是很多，而且各有各的优劣，但是我发现微软旗下的 <a href="https://code.visualstudio.com/">VSCode</a> 代码编辑器在一定程度上可以用作全文搜索，具体请阅读「 <a href="https://zyuyu.top/vscode">好用到飞起！搭建博客效率翻倍的 VSCode 软件</a> 」或者 VSCode 的官方文档。</p><h2 id="行动导向">行动导向</h2><p>GTD 是 Getting Things Done 的缩写，意思是 “ 把需要做的事情处理好 ”，是由 David Allen 提出管理时间的一种方法，高效 TODO、待办事项、日程提醒都是它的相关体现。GTD 的核心原则是：收集、整理、组织、回顾、执行。电脑桌面是天然的工作台，按照 GTD 工作流思路，你可以在文件管理中引入 Inbox 和 Archive 两个概念。Inbox 原意为 “ 收件箱 ”，简单来说就是文件被分门别类前的暂留之所；Archive 译为归档，用于存放处理完成的文件。</p><p><img src="../images/knowledge-pyramid/pic07.png" alt="GTD 工作流"></p><p>具体到实际中，就是在桌面新建三个文件夹：</p><ul><li><input type="checkbox" id="checkbox2" checked="true"><label for="checkbox2">Inbox：临时文件或者需要处理还未处理的文件，每日定时清理，一旦开始着手项目，就挪到 </label><code>Doing</code> 文件夹。</li><li><input type="checkbox" id="checkbox3" checked="true"><label for="checkbox3">Doing：正在修改、正在回复、等待别人反馈结果的文件夹，一旦处理完成，就纳入 </label><code>Archive</code> 文件夹。</li><li><input type="checkbox" id="checkbox4" checked="true"><label for="checkbox4">Archive：这是一个快捷方式，点击即可跳到你的主体文件夹，用于收纳已经处理完成的文件。</label></li></ul><p><img src="../images/knowledge-pyramid/pic08.png" alt="文档处理"></p><p><img src="../images/knowledge-pyramid/pic09.png" alt="文件处理"></p><p>如此一来，基于金字塔原理的横向分类、纵向搜索、行动导向就串成了你在资料管理上的全流程，再也不用担心文件混乱找不到了，同时还提高了文件管理效率。</p>]]></content>
<categories>
<category> Work </category>
</categories>
<tags>
<tag> 思维 </tag>
<tag> 知识运用 </tag>
<tag> 效率 </tag>
</tags>
</entry>
<entry>
<title>超实用！写文章必备的 Markdown 速查手册</title>
<link href="/markdown/"/>
<url>/markdown/</url>
<content type="html"><![CDATA[<blockquote><p>Markdown 格式的首要设计目标是更具可读性，最初的想法是 Markdown 格式的文档应当以纯文本形式发布，而不会看起来像被标签或格式说明所标记。虽然 Markdown 的语法受到几种现有的文本到 HTML 转换工具的影响，但 Markdown 语法的最大灵感来源是纯文本电子邮件的格式。</p><p>—— John Gruber</p></blockquote><p>Markdown 是一种轻量级标记语言，创始人为约翰 · 格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML 或者 HTML 文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。</p><p>由于 Markdown 的轻量化、易读易写特性，并且对于图片、图表、数学公式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或用于论坛上发表消息。</p><p>通俗来讲，Markdown 是一种文本书写方式，通过编辑器将文本生成网页，就好比 Office，你可以通过 Word 将文本排版成文，通过 Excel 将文本构图成表，通过 PPT 将文本演示表达。</p><p><img src="../images/markdown/pic01.png" alt="Markdown"></p><h2 id="编辑工具">编辑工具</h2><table><thead><tr><th style="text-align:center">类型</th><th>工具</th></tr></thead><tbody><tr><td style="text-align:center">编辑器</td><td>1️⃣ OSX：<a href="https://www.typora.io/">Typora</a>；<a href="http://bywordapp.com/">Byword</a>；<a href="http://ia.net/writer/">iA Writer</a>；<a href="http://mouapp.com/">Mouapp</a>；<a href="http://www.texts.io/">TEXTS</a>；<a href="http://kobito.qiita.com/">Kobito</a><br>2️⃣ Windows：<a href="https://www.typora.io/">Typora</a>；<a href="http://markdownpad.com/">MarkdownPad</a>；<a href="http://www.texts.io/">TEXTS</a><br>3️⃣ iOS：<a href="http://bywordapp.com/">Byword</a>；<a href="http://ia.net/writer/">iA Writer</a><br>4️⃣ 通用文字编辑器：<a href="http://www.sublimetext.com/">Sublime Text</a>；<a href="plasticboy/vim-markdown">plasticboy/vim-markdown</a>；<a href="tpope/vim-markdown">tpope/vim-markdown</a><br>5️⃣ 在线编辑器：<a href="https://markdown.com.cn/editor/">markdown</a>；<a href="http://codemirror.net/">CodeMirror</a>；<a href="http://dillinger.io/">Dillinger</a>；<a href="https://github.com/bianchimro/markgiu">Markgiu</a><br>6️⃣ 浏览器拓展：<a href="https://github.com/adam-p/markdown-here/">Markdown Here</a></td></tr><tr><td style="text-align:center">扩展</td><td><a href="https://help.github.com/articles/github-flavored-markdown">GitHub Flavored Markdown</a>；<a href="http://fletcherpenney.net/multimarkdown/">MultiMarkdown</a>；<a href="http://johnmacfarlane.net/pandoc/README.html#pandocs-markdown">Pandoc’s markdown</a>；<a href="http://michelf.ca/projects/php-markdown/extra/">PHP Markdown Extra</a></td></tr><tr><td style="text-align:center">引擎</td><td>1️⃣ C：<a href="https://github.com/vmg/sundown">Sundown</a><br>2️⃣ JavaScript：<a href="https://github.com/cky/wmd">showdown</a>；<a href="https://code.google.com/p/pagedown/">pagedown</a>；<a href="coreyti/showdown">coreyti/showdown</a>；<a href="https://github.com/chjj/marked">marked</a><br>3️⃣ PHP：<a href="http://michelf.ca/projects/php-markdown/">PHP Markdown</a><br>4️⃣ Ruby：<a href="https://github.com/vmg/redcarpet">Redcarpet</a>；<a href="https://github.com/bhollis/maruku">Maruku</a></td></tr></tbody></table><h2 id="学习资源">学习资源</h2><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">介绍</th></tr></thead><tbody><tr><td style="text-align:center"><a href="https://daringfireball.net/projects/markdown/">John Gruber’s Markdown documentation</a></td><td style="text-align:center">Markdown 的创建者编写的原始指南</td></tr><tr><td style="text-align:center"><a href="https://www.markdowntutorial.com/">Markdown Tutorial</a></td><td style="text-align:center">在线使用 Markdown 的开源网站</td></tr><tr><td style="text-align:center"><a href="https://github.com/mundimark/awesome-markdown">Awesome Markdown</a></td><td style="text-align:center">Markdown 工具和学习资源列表</td></tr><tr><td style="text-align:center"><a href="https://dave.autonoma.ca/blog/2019/05/22/typesetting-markdown-part-1">Typesetting Markdown</a></td><td style="text-align:center"><a href="https://pandoc.org/">pandoc</a> 和 <a href="https://www.contextgarden.net/">ConTeXt</a> 对 Markdown 排版的系列教程</td></tr></tbody></table><h2 id="常用语法">常用语法</h2><p>以下列举了 Markdown 文件格式的常用语法，但并非所有的 Markdown 编辑器都支持下面的语法，使用的时候请注意。你可以无需记忆这些 Markdown 语法，现在的 Markdown 编辑器可以做到像 Word 一样，点击功能区或者按击快捷键即可生成效果。</p><table><thead><tr><th style="text-align:center">作用</th><th>语法</th></tr></thead><tbody><tr><td style="text-align:center">标题</td><td>在文本前添加一个 <code>#</code> 和<code>空格</code>，<code>#</code> 表示标题的级别，如 <code># H1</code>、<code>## H2</code>、<code>### H3</code>。</td></tr><tr><td style="text-align:center">段落</td><td>按照纯文本的方式书写段落即可。</td></tr><tr><td style="text-align:center">换行</td><td>行末添加两个或多个空格，然后按回车键即可，或者直接键入 HTML 语法 <code><br></code>。</td></tr><tr><td style="text-align:center">强调</td><td>1️⃣ 粗体：在文本前后各添加两个 <code>*</code>，如 <code>**加粗**</code>。<br>2️⃣ 斜体：在文本前后各添加一个 <code>*</code>，如 <code>*倾斜*</code>。<br>3️⃣ 粗斜体：在文本前后各添加三个 <code>*</code>，如 <code>***加粗和倾斜***</code>。<br>4️⃣ 删除线：在文本前后各添加两个 <code>~</code>，如 <code>~~删除文本~~</code>。</td></tr><tr><td style="text-align:center">引用</td><td>1️⃣ 块引用：在段落前添加一个 <code>></code> 符号和<code>空格</code>，如 <code>> 块引用</code>。<br>2️⃣ 嵌套引用：在要嵌套的段落前添加两个 <code>></code> 符号和<code>空格</code>，示例如下。<br><code>> 块引用</code><br><code>></code><br><code>>> 嵌套引用</code><br>⚡⚡⚡ 注意：块引用可以包含 Markdown 格式的其他元素，如标题、强调、列表等，但并非所有元素都可以使用，使用时请注意。</td></tr><tr><td style="text-align:center">列表</td><td>1️⃣ 有序列表：在文本前添加数字并紧跟一个英文句点，注意英语句点和文本之间要有一个空格，若要创建二级有序列表，则在数字前面添加两个空格即可，示例如下。<br><code>1. 第一项</code><br><code>2. 第二项</code><br><code>3. 第三项</code><br>2️⃣ 无序列表：在文本前添加一个 <code>-</code>和空格，若要创建二级无序列表，则在<code>-</code>前面添加两个空格即可，示例如下。<br><code>- 第一项</code><br><code>- 第二项</code><br><code>- 第三项</code><br>3️⃣ 任务列表：在文本前添加 <code>-</code> + 空格 + <code>[ ]</code>，注意方括号和文本之间也要有一个空格，若方括号内不是空格，而是 <code>x</code>，则表示已勾选的任务，示例如下。<br><input type="checkbox" id="checkbox7" checked="true"><label for="checkbox7">第一项任务</label><br><input type="checkbox" id="checkbox6"><label for="checkbox6">第二项任务</label><br><input type="checkbox" id="checkbox5"><label for="checkbox5">第三项任务</label></td></tr><tr><td style="text-align:center">表格</td><td>1️⃣ 基本方法：使用三个或多个 <code>---</code> 创建每列的标题，并使用 <code>|</code> 分隔每列，示例如下。<br><code> | 姓名 | 成绩 |</code><br><code> | :-------- | :---------: |</code><br><code> | 小明 | 88 |</code><br><code> | 小红 | 99 |</code><br>2️⃣ 文本对齐：在<code>---</code>的左侧，右侧或两侧添加<code>:</code>，即可实现单列左对齐、右对齐或居中。<br>3️⃣ 文本格式：表格内支持超链接、行内代码、强调等语法，不支持添加标题、块引用、列表等语法。</td></tr><tr><td style="text-align:center">代码</td><td>1️⃣ 行内代码：在文本前后各添加一个反引号( <code>`</code>)，如 <code>`code`</code>。<br>2️⃣ 代码块：文本的每一行缩进至少四个空格或一个制表符。<br>3️⃣ 围栏式代码块：无需缩进的代码块，在段落前后各添加三个反引号( <code>`</code>)，若在第一组的三个反引号后面有标注代码语言，渲染时则会高亮文本，突出显示，示例如下。<br><code>```json</code><br><code>{</code><br> <code> "firstName": "John",</code><br> <code> "lastName": "Smith",</code><br> <code> "age": 25</code><br><code>}</code><br><code>```</code></td></tr><tr><td style="text-align:center">分割线</td><td>在单独的一行内使用是三个或多个 <code>---</code>，并且不能包含其它内容。</td></tr><tr><td style="text-align:center">链接</td><td>1️⃣ 链接文本：<code>[超链接显示名](超链接地址 "超链接标题")</code>，超链接标题可有可无，如<code>[title](https://www.example.com)</code>。<br>2️⃣ 可点击的链接：<code><超链接地址></code>，如 <code><[email protected]></code>。<br>3️⃣ 强调链接：在基本链接语法前后增加 <code>*</code> 来加粗或倾斜。<br>4️⃣ 引用样式链接：可作为尾注或脚注，由两部分组成：<br>第一部分：<code>[超链接显示名][超链接标签]</code>，超链接标签不区分大小写，可以包含字母、数字、空格或标点符号，如 <code>[hobbit-hole][1]</code>。<br>第二部分：<code>[超链接标签]: 超链接的地址 "超链接标题"</code>，超链接标题可有可无，如 <code>[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle</code>。</td></tr><tr><td style="text-align:center">脚注</td><td>脚注的作用在于添加注释和参考，由两部分组成：<br>第一部分：<code>文本内容[^标识符]</code>，标识符支持数字和单词，不支持空格或制表符，如 <code>文本内容[^1]</code>。<br>第二部分：<code>[^标识符]: 脚注内容 </code>，如 <code>[^1]: My footnote. </code>。</td></tr><tr><td style="text-align:center">图片</td><td>1️⃣ 普通图片：<code></code>，图片标题可有可无，如 <code></code>。<br>2️⃣ 图片超链接：<code>[](超链接地址)</code>，图片标题可有可无，如 <code>[](https://www.example.com)</code>。<br/>⚡⚡⚡ 注意：如果网站存在 <a href="https://github.com/aFarkas/lazysizes">lazysizes</a> 和 <a href="https://github.com/sachinchoolur/lightgallery.js">lightgallery.js</a> 两个依赖库，图片超链接可能不会生效。</td></tr><tr><td style="text-align:center">转义字符</td><td>在具有特殊含义的字符前加上 <code>\</code> 后，Markdown 编辑器在渲染排版效果时将展现其原始的含义，主要目的是避免语法冲突。</td></tr><tr><td style="text-align:center">内嵌 HTML 标签</td><td>1️⃣ 行内标签：直接在 Markdown 文件中使用 HTML 行内语法，如 <code><span></code>、<code><cite></code>、<code><del></code> 、<code><em></code>等。<br>2️⃣ 区块标签：直接在 Markdown 文件中使用 HTML 区块语法，如 <code><div></code>、<code><table></code>、<code><pre></code>、<code><p></code> 等，必须在前后加上空行，以便于内容区分，但注意Markdown 语法在 HTML 区块标签中将不会被进行处理。</td></tr><tr><td style="text-align:center">Emoji</td><td>从 <a href="https://emojipedia.org/">Emojipedia</a> 等来源复制并粘贴表情符号到 Markdown 格式的文本中，或者键入 emoji 简码，如 <code>:joy:</code>。Windows 系统用户可以按住 <code>win+.</code> 获取微软的 emoji 表情。</td></tr></tbody></table><h2 id="参考内容">参考内容</h2><p><a href="https://markdown.com.cn/">Markdown 官方教程</a></p>]]></content>
<categories>
<category> Program </category>
</categories>
<tags>
<tag> 博客 </tag>
</tags>
</entry>
<entry>
<title>好用到飞起！搭建博客效率翻倍的 VSCode 软件</title>
<link href="/vscode/"/>
<url>/vscode/</url>
<content type="html"><![CDATA[<p>不知道你搭建静态博客时有没有遇到这些情况：</p><ul><li>一个接一个打开文件，多窗口作业。</li><li>因为改错文件，反反复复重来了好几遍。</li><li>打开多个窗口，电脑总是卡顿难以操作。</li><li>代码总是出错，却不知道问题在哪。</li></ul><p><img src="../images/vscode/pic01.png" alt="多窗口"></p><p>这不仅影响了我们的操作效率，还影响了我们的心情，试想一下，电脑卡顿的时候，再加上一堆未整理的东西，谁的心情能够平静？有没有一个东西，能够集代码编辑 + 命令行 + 写作 + 代码字段检索 + 多窗口作业于一体，提高开发效率，减少不必要的出错呢？</p><p><a href="https://code.visualstudio.com/">Visual Studio Code</a>（简称 VSCode）是由微软开发的一款源代码编辑器，支持 IntelliSense、调试、Git 和代码片断，可在 Windows、Linux 和 macOS 上下载使用，支持常见的脚本和编程语言，还可以通过安装扩展来获得更多语言和功能的支持。</p><p><img src="../images/vscode/pic02.png" alt="VSCODE"></p><p>只需要一个软件，你就可以完成搭建静态博客的全流程，从安装到主题配置，从写作到本地预览，从生成静态文件到部署到 GitHub 仓库，相当于 “ 一键 ” 操作！下面将介绍我在 VSCode 搭建静态博客的一些使用场景，以及当中使用的拓展。</p><h2 id="语言环境">语言环境</h2><p>安装好 VSCode 后，如果你已经拥有了代码项目，你可以在项目所在的根目录，右键单击选择 <code>通过code打开</code>或者在 VSCode 点击「 菜单栏 -> 文件(F) -> 打开文件夹 」，即可用 VSCode 打开整个项目文档。</p><p><img src="../images/vscode/pic03.png" alt="通过Code打开"></p><p><img src="../images/vscode/pic04.png" alt="操作面板示例"></p><p>原生的 VSCode 界面是纯英文的，如果你想要切换成中文界面，就按住 <code>Ctrl+Shift+X</code>或者点击「 菜单栏 -> 查看(V) -> 扩展 」，调出扩展界面，在应用商店搜索 <code>Chinese</code>，找到下列显示的中文语言包，安装后重启即可显示中文界面。</p><p><img src="../images/vscode/pic05.png" alt="中文语言包"></p><p>另外，如果你想实现多窗口作业，只需要从活动侧边面板将对应的文档按住鼠标左键拖动到右边编辑区域即可。</p><h2 id="命令终端">命令终端</h2><p>无论是搭建静态博客，还是托管代码到 GitHub 仓库，<a href="https://git-scm.com/">Git</a> 已经成为了必不可少的工具，那又该如何在 VSCode 中调用 Git 呢？</p><p>在 VSCode 界面按住 <code>Ctrl+Shift+P</code> 或者点击「 菜单栏 -> 查看(V) -> 命令面板 」，调出命令界面，在窗口内键入 <code>open settings</code>，选择<code>首选项：打开用户设置（JSON）</code>，进入 <code>settings.json</code> 编辑界面，找到对应参数，并添加如下内容。</p><figure class="highlight json"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 请填入你的Git安装位置，注意是bin的位置 */</span></span><br><span class="line"><span class="attr">"git.path"</span><span class="punctuation">:</span> <span class="string">"D:\\Program Files (x86)\\Git\\bin\\git.exe"</span><span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line"><span class="attr">"terminal.integrated.profiles.windows"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> ……</span><br><span class="line"> <span class="attr">"Git Bash"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"source"</span><span class="punctuation">:</span> <span class="string">"Git Bash"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="comment">/* 在这里新增一个git调用git bash，同样是bin的位置 */</span></span><br><span class="line"> <span class="attr">"git"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"path"</span><span class="punctuation">:</span> <span class="string">"D:\\Program Files (x86)\\Git\\bin\\bash.exe"</span></span><br><span class="line"> <span class="punctuation">}</span> </span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><p>接着，你就可以按住 <code>Ctrl+` </code>或者 <code>Ctrl+J</code> 或者点击「 菜单栏 -> 终端(T) -> 新建终端 」，调出终端界面，选择 <code>+</code> 下拉菜单，选择 <code>git</code>，即可在 VSCode 使用 Git Bash 了。</p><p><img src="../images/vscode/pic06.png" alt="Bash"></p><h2 id="代码编辑">代码编辑</h2><p>静态博客最基本的代码语言有 HTML、CSS、JavaScript、JSON、Markdown 等，VSCode 不仅支持多种语言，还支持语法高亮显示和代码匹配等功能。</p><p><img src="../images/vscode/pic07.png" alt="示例"></p><p><img src="../images/vscode/pic08.png" alt="示例"></p><p>你可以通过按住 <code>Ctrl+Shift+X</code> 或者点击「 菜单栏 -> 查看(V) -> 扩展 」，调出扩展界面，在应用商店搜索相应的语言名称，如 <code>html</code> ，然后下载相应语言的扩展即可。你还可以通过浏览器打开 <a href="https://marketplace.visualstudio.com/VSCode">VSCode 扩展市场</a>，如此你可以借用浏览器的翻译功能，更加详细地了解扩展。</p><p>同时，你还可以通过 <a href="https://code.visualstudio.com/docs/languages/overview">VSCode Language 文档</a>获取每种代码语言推荐的扩展。我之所以不具体推荐某个扩展，是因为每个人的使用情况不一样，你最好结合自己的需求选择适合自己的扩展，安装了过多无用的拓展，对 VSCode 的使用也是一种负担。</p><p>另外，如果你想要搜索某个代码在整个项目中的其他位置，你可以按住 <code>Ctrl+Shift+F</code> 或者点击「 菜单栏 -> 查看(V) -> 搜索 」，调出搜索界面，复制粘贴代码搜索即可。VSCode 既支持侧边栏代码的全项目搜索，也支持单个文件的 <code>Ctrl+F</code> 搜索。</p><h2 id="写作预览">写作预览</h2><p>如果你熟悉一些 Markdown 语法，你就能够很好地将 VSCode 打造成一个很好的写作环境，它不仅有对 Markdown 语法的键入提示，还提供实时动态同步预览功能。</p><p><img src="../images/vscode/pic09.gif" alt="示例"></p><p>在扩展应用商店搜索 <code>Markdown</code>，你将获得许多对它支持的扩展。比如，你可以通过 <a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one">Markdown All in One</a> 很好地实现 Markdown 的快捷输入；你可以通过 <a href="https://marketplace.visualstudio.com/items?itemName=telesoho.vscode-markdown-paste-image">Markdown Paste</a> 很方便地粘贴图片资源；你还可以通过 <a href="https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint">Markdownlint</a> 实现对 Markdown 语法的检查。</p><p>即使你使用 <a href="https://marketplace.visualstudio.com/VSCode">Typora</a> 编辑 Markdown，它也能同步操作，即你在 Typora 编辑的一切内容，VSCode 也会同步显示，前提是你已经开启 Typora 自动保存或者在 Typora 已经保存内容，反之亦然。</p><h2 id="托管代码">托管代码</h2><p>无论如何，我都建议你在 VSCode 登录你的 GitHub 账户，方便同步信息，点击左侧活动侧边栏的账户按步骤操作即可。使用 VSCode，你可以很方便地将代码推送到 GitHub 仓库，只需要首次使用 Git 命令连接仓库即可，往后只需在源代码管理面板提交即可。</p><p><img src="../images/vscode/pic10.png" alt="源代码管理"></p><p>按住 <code>Ctrl+` </code>或者 <code>Ctrl+J</code> 或者点击「 菜单栏 -> 终端(T) -> 新建终端 」，调出终端界面，选择 <code>+</code> 下拉菜单，如果你已配置 Git Bash，则选择 <code>git</code>；如果你尚未配置，则需要选择 <code>Command Prompt</code>（即 <code>cmd</code>），具体操作请阅读「 <a href="https://zyuyu.top/github-actions./">只专注写作！GitHub Actions 自动部署博客</a> 」，以下是初次连接 GitHub 仓库的执行命令。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># cd命令仅限于已生成静态文件的情况</span></span><br><span class="line"><span class="built_in">cd</span> public</span><br><span class="line"></span><br><span class="line">git init</span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">"first commit"</span></span><br><span class="line">git branch -M main </span><br><span class="line"></span><br><span class="line"><span class="comment"># 若是HTTPS地址，则执行这部分</span></span><br><span class="line">git remote add origin https://github.com/owner/repo.git</span><br><span class="line">git push -u origin main</span><br><span class="line"></span><br><span class="line"><span class="comment"># 若是SSH地址，则执行这部分</span></span><br><span class="line">git remote add origin [email protected]:owner/repo.git</span><br><span class="line">git push -u origin main</span><br></pre></td></tr></table></figure><p>一旦你已经连接 GitHub 仓库的某一分支，源代码管理处就会显示你每次的变更，你只需要按下图操作即可实现一键推送至 GitHub 仓库的分支。</p><p><img src="../images/vscode/pic11.png" alt="源代码管理"></p><h2 id="参考内容">参考内容</h2><ul><li><a href="https://code.visualstudio.com/docs/">VSCode 使用文档</a></li><li><a href="https://marketplace.visualstudio.com/VSCode">VSCode 扩展市场</a></li></ul>]]></content>
<categories>
<category> Program </category>
</categories>
<tags>
<tag> 博客 </tag>
<tag> 软件 </tag>
</tags>
</entry>
<entry>
<title>评论系统怎么选？这几个好看轻量易上手！</title>
<link href="/comments/"/>
<url>/comments/</url>
<content type="html"><![CDATA[<p>不知道你有没有遇到这样的情况：</p><ul><li>评论系统需要爬墙才能访问。</li><li>评论系统不支持在 GitHub 使用。</li><li>评论系统采取收费模式。</li><li>评论系统的使用需要购买服务器。</li></ul><p>评论系统对于博客的重要性不言而喻，动态博客通常都有配置好的评论区，而静态博客是纯前端的界面，没有登录功能和后端管理，大多需要依赖第三方评论系统。虽然很多博客生成器的主题都集成了评论区系统，但都要你自己去获取评论区 <code>id</code> 才能使用，这就有可能会遇到以上提到的情况之一。</p><p><img src="../images/comments/pic01.gif" alt="我太难了"></p><p>评论区系统该怎么选择？在回答这个问题之前，你应该思考一下你为什么需要评论区？评论区最大的作用是沟通与交流，你要和谁沟通交流？读者！所以，选择评论区系统，要看看你的用户群体主要是国内用户还是国外用户，同时还要看看每个评论区系统配置的难易程度。下文我将介绍几个我在使用过程中配置比较容易的评论系统，你可以根据你的需求有选择地使用。</p><h2 id="Twikoo">Twikoo</h2><p><a href="https://twikoo.js.org/">Twikoo</a> 是一个简洁、安全、免费的静态网站评论系统，它支持一键部署、手动部署、命令行部署、Vercel 部署。下面以 <a href="https://twikoo.js.org/quick-start.html#vercel-%E9%83%A8%E7%BD%B2">Vercel 免费部署方式</a>说明。</p><p><img src="../images/comments/pic02.png" alt="操作步骤"></p><p>Twikoo 提供的步骤非常明细，这里不细说，主要说说环境 ID（<code>https://xxx.vercel.app</code>）访问的问题。由于 Vercel 官方域名的 DNS 被污染，如果环境 ID 使用了 <code>vercel</code> 自带的域名，将无法正常获取数据，解决方案是用自定义的域名去代替 Vercel 的域名，来自 <a href="https://tzy1997.com/articles/hexo1614/">@唐志远</a>。</p><p>以阿里云为例，阅读「 <a href="https://zyuyu.top/domain-name/">域名太长？三步搞定 GitHub Pages 自定义域名</a> 」这篇文章完成购买域名和解析域名这两步。接着，登录进入<a href="https://homenew.console.aliyun.com/home/dashboard/ProductAndService">阿里云服务器工作台</a>，搜索域名。</p><p><img src="../images/comments/pic03.png" alt="域名"></p><p>点击左侧的「 域名列表 」，点击目标域名操作中的 <code>解析</code>，进入「 解析设置 」页面。</p><p><img src="../images/comments/pic04.png" alt="解析域名"></p><p>进入「 解析设置 」页面后，点击左侧的「 域名解析 」，进入「 域名解析 」界面，然后点击 <code>添加域名</code>。其中， <code>example</code> 可以根据你的想法修改，如 <code>twikoo</code>，但后面域名必须为你自己的域名。</p><p><img src="../images/comments/pic05.png" alt="添加域名"></p><p>点击 <code>TXT授权校验</code>，出现以下信息，记得保存好该信息。</p><p><img src="../images/comments/pic06.png" alt="授权校验"></p><p>进入「 解析设置 」页面，点击 <code>添加记录</code>，将上一步的信息填入对应信息即可。</p><p><img src="../images/comments/pic07.png" alt="添加记录"></p><p>添加好记录之后，再次回到「 域名解析 」界面，点击 <code>添加域名</code>，点击验证过后，会出现「 已验证成功，确认添加域名 」，接着点击确认，二级域名就创建好了。</p><p>接着将二级域名解析到 Vercel，如下添加两条记录。</p><p><img src="../images/comments/pic08.png" alt="域名解析"></p><p>然后进入 <a href="https://vercel.com/">Vercel</a> 的「 Project Settings -> Domains 」添加域名即可。</p><p><img src="../images/comments/pic09.png" alt="添加域名"></p><p>最后替换 Hexo 或 Hugo 主题配置文件的 <code>envId</code> 即可。注意，二级域名一定要 <code>https</code>，填入 <code>http</code> 将无法进入评论区设置。</p><figure class="highlight toml"><table><tr><td class="code"><pre><span class="line"><span class="section">[params.page.comment.twikoo]</span></span><br><span class="line"> <span class="attr">enable</span> = <span class="literal">true</span></span><br><span class="line"> <span class="attr">envId</span> = <span class="string">"此处填入你的二级域名"</span></span><br><span class="line"> <span class="attr">region</span> = <span class="string">""</span></span><br><span class="line"> <span class="attr">path</span> = <span class="string">""</span></span><br><span class="line"> <span class="attr">visitor</span> = <span class="literal">true</span></span><br><span class="line"> <span class="attr">commentCount</span> = <span class="literal">true</span></span><br></pre></td></tr></table></figure><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Hexo 示例</span></span><br><span class="line"><span class="attr">twikoo:</span></span><br><span class="line"> <span class="attr">envId:</span> <span class="string">此处填入你的二级域名</span></span><br><span class="line"> <span class="attr">region:</span></span><br><span class="line"> <span class="attr">visitor:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">option:</span></span><br></pre></td></tr></table></figure><p>最后你就可以执行本地预览命令打开本地服务器查看评论区了。注意的是，Hugo 需要执行 <code>hugo server -e production</code> 才能看到评论区。</p><p><img src="../images/comments/pic10.png" alt="twikoo"></p><h2 id="Utterances">Utterances</h2><p><a href="https://utteranc.es/">Utterances</a> 是基于 Github Issue 构建的轻量级评论小部件。需要注意的是，它只有拥有 GitHub 账户的用户才能评论，而且它目前只支持英语界面，评论界面是先出现用户评论，再出现评论框。</p><p>它的使用非常简单，你只需要拥有一个 GitHub 的公开仓库，然后在这个仓库中安装 Utterances 就可以了。</p><p><img src="../images/comments/pic11.png" alt="2022-10-06_220214"></p><p>按照步骤完成后，你将获得一个脚本，示例如下。</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://utteranc.es/client.js"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">repo</span>=<span class="string">"[ENTER REPO HERE]"</span> # <span class="attr">仓库的名称</span></span></span><br><span class="line"><span class="tag"> <span class="attr">issue-term</span>=<span class="string">"pathname"</span> # <span class="attr">评论区映射位置</span></span></span><br><span class="line"><span class="tag"> <span class="attr">theme</span>=<span class="string">"github-light"</span> # <span class="attr">评论区的样式</span></span></span><br><span class="line"><span class="tag"> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span> # <span class="attr">评论区跨域注解</span></span></span><br><span class="line"><span class="tag"> <span class="attr">async</span>></span></span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>接着打开 Hexo 或 Hugo 主题配置文件，填入对应的参数即可，示例如下。</p><figure class="highlight toml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Hugo 示例</span></span><br><span class="line"><span class="section">[params.page.comment.utterances]</span></span><br><span class="line"> <span class="attr">enable</span> = <span class="literal">true</span></span><br><span class="line"> <span class="attr">repo</span> = <span class="string">"在此输入仓库"</span></span><br><span class="line"> <span class="attr">issueTerm</span> = <span class="string">"pathname"</span></span><br><span class="line"> <span class="attr">label</span> = <span class="string">""</span></span><br><span class="line"> <span class="attr">lightTheme</span> = <span class="string">"github-light"</span></span><br><span class="line"> <span class="attr">darkTheme</span> = <span class="string">"github-dark"</span></span><br></pre></td></tr></table></figure><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Hexo 示例</span></span><br><span class="line"><span class="attr">utterances:</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">在此输入仓库</span></span><br><span class="line"> <span class="attr">issue_term:</span> <span class="string">pathname</span></span><br><span class="line"> <span class="attr">light_theme:</span> <span class="string">github-light</span></span><br><span class="line"> <span class="attr">dark_theme:</span> <span class="string">photon-dark</span></span><br></pre></td></tr></table></figure><p>最后你就可以执行本地预览命令打开本地服务器查看评论区了。注意的是，Hugo 需要执行 <code>hugo server -e production</code> 才能看到评论区。</p><p><img src="../images/comments/pic12.png" alt="utterances"></p><h2 id="Giscus">Giscus</h2><p><a href="https://giscus.app/zh-CN">Giscus</a> 是基于 GitHub Discussions 驱动的轻量级评论小部件。与 Utterances 相比，它所获取的权限更少，使用更加安全，并且也有中文界面，可调整评论框的位置，但同样只有拥有 GitHub 账户的用户才能评论。</p><p>它的使用非常简单，你只需要拥有一个 GitHub 的公开仓库，然后在这个仓库中安装 Giscus，并开启这个仓库的 Discussions 功能就可以了。Discussions 功能位于仓库的「 Settings -> General -> Features -> Discussions 」。</p><p><img src="../images/comments/pic13.png" alt="Giscus"></p><p><img src="../images/comments/pic14.png" alt="Discussions"></p><p>按照步骤完成后，你将获得一个脚本，示例如下。</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://giscus.app/client.js"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-repo</span>=<span class="string">"[在此输入仓库]"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-repo-id</span>=<span class="string">"[在此输入仓库 ID]"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-category</span>=<span class="string">"[在此输入分类名]"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-category-id</span>=<span class="string">"[在此输入分类 ID]"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-mapping</span>=<span class="string">"pathname"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-strict</span>=<span class="string">"0"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-reactions-enabled</span>=<span class="string">"1"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-emit-metadata</span>=<span class="string">"0"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-input-position</span>=<span class="string">"bottom"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-theme</span>=<span class="string">"preferred_color_scheme"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-lang</span>=<span class="string">"zh-CN"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">crossorigin</span>=<span class="string">"anonymous"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">async</span>></span></span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>接着打开 Hexo 或 Hugo 主题配置文件，填入对应的参数即可，示例如下。</p><figure class="highlight toml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Hugo 示例</span></span><br><span class="line"><span class="section">[params.page.comment.giscus]</span></span><br><span class="line"> <span class="attr">enable</span> = <span class="literal">true</span></span><br><span class="line"> <span class="attr">dataRepo</span> = <span class="string">"在此输入仓库"</span></span><br><span class="line"> <span class="attr">dataRepoId</span> = <span class="string">"在此输入仓库 ID"</span></span><br><span class="line"> <span class="attr">dataCategory</span> = <span class="string">"在此输入分类名"</span></span><br><span class="line"> <span class="attr">dataCategoryId</span> = <span class="string">"在此输入分类 ID"</span></span><br><span class="line"> <span class="attr">dataMapping</span> = <span class="string">"pathname"</span></span><br><span class="line"> <span class="attr">dataStrict</span> = <span class="string">"0"</span></span><br><span class="line"> <span class="attr">dataReactionsEnabled</span> = <span class="string">"1"</span></span><br><span class="line"> <span class="attr">dataEmitMetadata</span> = <span class="string">"0"</span></span><br><span class="line"> <span class="attr">dataInputPosition</span> = <span class="string">"top"</span></span><br><span class="line"> <span class="attr">lightTheme</span> = <span class="string">"light"</span></span><br><span class="line"> <span class="attr">darkTheme</span> = <span class="string">"dark"</span></span><br><span class="line"> <span class="attr">dataLang</span> = <span class="string">"zh-CN"</span></span><br><span class="line"> <span class="attr">lazyLoad</span> = <span class="literal">true</span></span><br></pre></td></tr></table></figure><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Hexo 示例</span></span><br><span class="line"><span class="attr">giscus:</span> </span><br><span class="line"> <span class="attr">repo:</span> <span class="string">在此输入仓库</span></span><br><span class="line"> <span class="attr">repo_id:</span> <span class="string">在此输入仓库</span> <span class="string">ID</span></span><br><span class="line"> <span class="attr">category_id:</span> <span class="string">在此输入分类</span> <span class="string">ID</span></span><br><span class="line"> <span class="attr">theme:</span></span><br><span class="line"> <span class="attr">light:</span> <span class="string">light</span></span><br><span class="line"> <span class="attr">dark:</span> <span class="string">dark</span></span><br><span class="line"> <span class="attr">option:</span></span><br></pre></td></tr></table></figure><p>最后你就可以执行本地预览命令打开本地服务器查看评论区了。注意的是，Hugo 需要执行 <code>hugo server -e production</code> 才能看到评论区。</p><p><img src="../images/comments/pic15.png" alt="Giscus"></p><h2 id="Livere">Livere</h2><p><a href="https://livere.com/">Livere</a> 是韩国的一家第三方评论系统，支持新浪微博、QQ、微信、豆瓣、Facebook、Twitter 等国内外多家社交网站用户登录评论。由于它已经在国内备案，所以你只需要进入官网注册一个账号，就可以很容易地安装一个评论系统。</p><p>进入<a href="https://livere.com/">官网</a>注册登陆后，点击网页上方的「 安装 」，选择免费的「 City 」版本。</p><p><img src="../images/comments/pic16.png" alt="City免费版"></p><p>并点击现在安装，会出现来必力的安装代码。示例如下：</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment"><!-- 来必力City版安装代码 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"lv-container"</span> <span class="attr">data-id</span>=<span class="string">"city"</span> <span class="attr">data-uid</span>=<span class="string">"XXXXXXXXXXXXXXXX"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> (<span class="keyword">function</span>(<span class="params">d, s</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> j, e = d.<span class="title function_">getElementsByTagName</span>(s)[<span class="number">0</span>];</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="title class_">LivereTower</span> === <span class="string">'function'</span>) { <span class="keyword">return</span>; }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> j = d.<span class="title function_">createElement</span>(s);</span></span><br><span class="line"><span class="language-javascript"> j.<span class="property">src</span> = <span class="string">'https://cdn-city.livere.com/js/embed.dist.js'</span>;</span></span><br><span class="line"><span class="language-javascript"> j.<span class="property">async</span> = <span class="literal">true</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> e.<span class="property">parentNode</span>.<span class="title function_">insertBefore</span>(j, e);</span></span><br><span class="line"><span class="language-javascript"> })(<span class="variable language_">document</span>, <span class="string">'script'</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">noscript</span>></span>为正常使用来必力评论功能请激活JavaScript<span class="tag"></<span class="name">noscript</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="comment"><!-- City版安装代码已完成 --></span></span><br></pre></td></tr></table></figure><p>如果你使用的是 Hexo + Butterfly，只需要将上面的 <code>data-uid</code> 复制到主题配置文件即可。</p><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Hexo 示例</span></span><br><span class="line"><span class="attr">livere:</span> </span><br><span class="line"> <span class="attr">uid:</span> <span class="string">在此填入data-uid</span></span><br></pre></td></tr></table></figure><p>如果你使用的是 Hugo + DoIt，由于 DoIt 主题没有集成该评论系统，所以要自己添加，也很容易，只要将主题文件夹中的「 layouts -> partials -> comment.html 」复制到 Hugo 根目录同样的位置，然后在该文件中添加如下内容，注意替换 <code>data-uid</code> 的值。</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line">{{- if $comment.enable -}}</span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"comments"</span>></span></span><br><span class="line"> {{- /* livere Comment System */ -}}</span><br><span class="line"> {{- $livere := $comment.livere | default dict -}}</span><br><span class="line"> {{- if $livere.enable -}}</span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"lv-container"</span> <span class="attr">data-id</span>=<span class="string">"city"</span> <span class="attr">data-uid</span>=<span class="string">"XXXXXXXXXXXXXXXX"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> (<span class="keyword">function</span>(<span class="params">d, s</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> j, e = d.<span class="title function_">getElementsByTagName</span>(s)[<span class="number">0</span>];</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="title class_">LivereTower</span> === <span class="string">'function'</span>) { <span class="keyword">return</span>; }</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"> j = d.<span class="title function_">createElement</span>(s);</span></span><br><span class="line"><span class="language-javascript"> j.<span class="property">src</span> = <span class="string">'https://cdn-city.livere.com/js/embed.dist.js'</span>;</span></span><br><span class="line"><span class="language-javascript"> j.<span class="property">async</span> = <span class="literal">true</span>;</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"> e.<span class="property">parentNode</span>.<span class="title function_">insertBefore</span>(j, e);</span></span><br><span class="line"><span class="language-javascript"> })(<span class="variable language_">document</span>, <span class="string">'script'</span>);</span></span><br><span class="line"><span class="language-javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">noscript</span>></span>为正常使用来必力评论功能请激活JavaScript<span class="tag"></<span class="name">noscript</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> {{- end -}}</span><br><span class="line"> ……</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line">{{- end -}}</span><br></pre></td></tr></table></figure><p>接着打开配置文件，在评论配置添加上 Livere 即可。<code>uid</code> 就是你的来必力 City 版安装代码中的 <code>data-uid</code>，将引号内的内容复制过来即可。</p><figure class="highlight toml"><table><tr><td class="code"><pre><span class="line"><span class="section">[params.page.comment]</span></span><br><span class="line"> <span class="attr">enable</span> = <span class="literal">true</span></span><br><span class="line"> ……</span><br><span class="line"> <span class="section">[params.page.comment.livere]</span></span><br><span class="line"> <span class="attr">enable</span> = <span class="literal">true</span></span><br><span class="line"> <span class="attr">uid</span> = <span class="string">"XXXXXXXXXXXXXXXX"</span></span><br></pre></td></tr></table></figure><p>最后，你就可以执行本地预览命令打开本地服务器查看评论系统了。</p><p><img src="../images/comments/pic17.png" alt="来必力"></p><p>虽然来必力不支持 Markdown，且加载缓慢，但是不失为一个少数部署简单的第三方评论系统，如果你想要一个部署简单的评论系统，来必力是一个不错的选择。</p><h2 id="参考内容">参考内容</h2><ul><li><a href="https://twikoo.js.org/">Twikoo 操作文档</a></li><li><a href="https://utteranc.es/">Utterances 操作文档</a></li><li><a href="https://giscus.app/zh-CN">Giscus 操作文档</a></li><li><a href="https://livere.com/">Livere 操作文档</a></li><li><a href="https://tzy1997.com/articles/hexo1614/">关于Vercel被墙导致获取Twikoo评论失败的解决方案</a></li></ul>]]></content>
<categories>
<category> Program </category>
</categories>
<tags>
<tag> 博客 </tag>
</tags>
</entry>
<entry>
<title>域名太长？三步搞定 GitHub Pages 自定义域名</title>
<link href="/domain-name/"/>
<url>/domain-name/</url>
<content type="html"><![CDATA[<p>GitHub Pages 是直接从 GitHub 存储库托管的静态站点。 当你使用 Hexo 或 Hugo 等静态博客生成器生成静态网站文件，并部署到 GitHub 仓库时，你将获得域名后缀为 <code>.github.io</code> 的网址。</p><p>GitHub 支持自定义域名，你可以设置一个具有自己风格的域名，让你的网站更有辨识度。域名是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，如我们常见的 <code>.com</code>、<code>.cn</code> 等。简单来说，域名就好像门牌号码一样，具有唯一性，可以在纷繁芜杂的网络世界里准确无误地把我们指引到我们要访问的站点。</p><p><img src="../images/domain-name/pic01.png" alt="域名"></p><p>根据国家工信部信息服务管理规定，在国内服务器上放置的所有网站都必须备案才能正常访问，但是对于国外的服务器或者港澳台的服务器，如本文提到的 GitHub 服务器，就不需要备案。下面的操作以 GitHub 服务器为例。</p><h2 id="购买域名">购买域名</h2><p>域名是由域名管理局统一管理的，管理是需要成本的，如技术成本、人力成本等，所以你想拥有一个具有自己风格的域名，就需要前往<a href="https://www.aliyun.com/">阿里云</a>或<a href="https://buy.cloud.tencent.com/domain?from=console">腾讯云</a>等服务商购买。下面的操作以阿里云为例。</p><p>如果你有支付宝账号，注册账号的时候直接用支付宝扫描登录，还可以顺带连着实名注册一起弄了。如果你没有支付宝账号，就按照账号注册流程一步步操作即可。</p><p>首次购买域名有优惠活动，1 元就能购买一个为期一年的域名。注册前先去阿里云旗下的<a href="https://wanwang.aliyun.com/?spm=5176.21213303.1158081.3.4f4553c927XLDo&scm=20140722.S_card@@%E5%95%86%E5%93%81@@212429.S_card0.ID_card@@%E5%95%86%E5%93%81@@212429-RL_%E5%9F%9F%E5%90%8D-OR_ser-V_2-P0_0">万网</a>查询域名，看看想要注册的域名有没有被注册，根据自己的需求选择自己喜欢的后缀，点击购买。如果你的域名要长期使用，建议可以先看看<a href="https://wanwang.aliyun.com/help/price.html?spm=5176.22941859.J_9989412330.9.10ee1838DLcc7f">不同域名的续费价格</a>再选择。</p><p>需要注意的是，阿里云从 2022 年 2 月 15 日起域名注册必须使用已完成实名认证信息模板，点击 <code>创建信息模板</code> 完成操作，其实就是域名的实名认证，实名审核由域名注册局完成，非阿里云进行审核，一般 1 天内可完成审核，部分可能需要 3 至 5 个工作日。</p><p><img src="../images/domain-name/pic02.png" alt="创建信息模板"></p><p>完成审核并购买域名后，进入域名控制台。等待几分钟后刷新，当看到状态变成正常，就可以开始域名解析了，这中间域名注册局会对域名持有者进行实名认证，一般几分钟就可以了。</p><p><img src="../images/domain-name/pic03.png" alt="购买域名"></p><h2 id="解析域名">解析域名</h2><p>域名解析是将域指向网站空间 IP，让人们通过注册的域名可以方便地访问到网站的一种服务。简单来说，这是一个将你的网站服务器（GitHub）与域名连接起来的过程。</p><p>打开阿里云的域名控制台，点击「 解析 」，进入云解析 DNS 页面，点击「 添加记录 」，如下图添加两条记录，其中 <code>CNAME</code> 为了是将 <code>github.io</code> 重定向到你的自定义域名，添加 <code>@</code> 和 <code>www</code> 主机记录是为了让你的域名有没有 <code>www</code> 都可以访问，记录值为 <code>用户名.github.io</code>。</p><p><img src="../images/domain-name/pic04.png" alt="域名解析"></p><p>此时，还不能使用自定义域名访问网站，还需要将它与 GitHub 仓库连接。</p><h2 id="配置仓库">配置仓库</h2><p>GitHub 自定义域名需要在仓库内创建「 CNAME 」，你既可以在仓库直接创建，也可以在本地 Hexo 或 Hugo 根目录中创建。无论是哪种方式，在「 CNAME 」中的域名都不要添加 <code>www</code>。</p><p>如果你直接在仓库内创建，要注意同步本地和远程仓库。前往仓库的「 Settings -> Pages 」，拉到「 Custom domain 」，在这里输入你的自定义域名，或者在仓库的「 Code 」处点击 <code>Add file</code> 创建「 CNAME 」，并在里面输入你的自定义域名。</p><p><img src="../images/domain-name/pic05.png" alt="创建CNAME"></p><p>等待几分钟之后，刷新页面，出现 <code>DNS check successful</code> 则表示域名解析成功，同时勾选下面的 <code>Enforce HTTPS</code>，这是因为 HTTPS 提供了一层加密，以防止别人窥探或篡改到你的网站流量。您可对 GitHub Pages 站点强制实施 HTTPS，从而将所有 HTTP 请求透明地重定向到 HTTPS。</p><p><img src="../images/domain-name/pic06.png" alt="DNS"></p><p>如果你在本地创建，也有两种情况。如果你只将「 Public 」的静态网站文件托管到 GitHub 仓库，那么你只需要将「 CNAME 」放在 Hexo 或 Hugo 根目录，每次执行部署命令之前，将该文件复制到「 Public 」中，然后托管到仓库即可。</p><p>如果你按照 <a href="https://zyuyu.top/github-actions">只专注写作！GitHub Actions 自动部署博客</a>的步骤将整个网站源代码都托管到了 GitHub 仓库，就需要将「 CNAME 」放到 Hexo 或 Hugo 的资源文件夹中，Hexo 对应的是 <code>/source/CNAME</code>，Hugo 对应的是 <code>/content/CNAME</code>，托管到仓库之后 GitHub Actions 就会自动完成 DNS 的过程。</p><p>最后，你就可以使用自定义域名访问你的博客啦！撒花撒花 ✿✿ヽ(°▽°)ノ✿~~</p><p>💡 TIP：记得同步修改 Hexo 或 Hugo 配置文件的 <code>url</code> 或 <code>baseURL</code>。</p><h2 id="参考内容">参考内容</h2><ul><li><a href="https://wanwang.aliyun.com/help/price.html?spm=5176.22941859.J_9989412330.9.10ee1838DLcc7f">万网域名价格总览</a></li><li><a href="https://docs.github.com/cn/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site">GitHub Pages 文档</a></li></ul>]]></content>
<categories>
<category> Program </category>
</categories>
<tags>
<tag> 博客 </tag>
</tags>
</entry>
<entry>
<title>适合小白！基于 Hexo + Butterfly 搭建个人博客</title>
<link href="/hexo-build/"/>
<url>/hexo-build/</url>
<content type="html"><![CDATA[<blockquote><p><a href="https://hexo.io/zh-cn/">Hexo</a> 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p></blockquote><p>在开始之前，你可以阅读「 <a href="http://zyuyu.top/blog-build/">非程序猿的我，为什么要搭建自己的个人博客？</a> 」了解静态博客与动态博客、Hexo 与 Hugo 的区别。下面说明一下我的构建环境：</p><table><thead><tr><th style="text-align:center"></th><th style="text-align:center">构建环境</th></tr></thead><tbody><tr><td style="text-align:center">操作系统</td><td style="text-align:center">Windows10 64bit</td></tr><tr><td style="text-align:center">Git 版本</td><td style="text-align:center">2.37.2</td></tr><tr><td style="text-align:center">Node 版本</td><td style="text-align:center">16.17.0</td></tr><tr><td style="text-align:center">Hexo 版本</td><td style="text-align:center">6.3.0</td></tr><tr><td style="text-align:center">Butterfly 版本</td><td style="text-align:center">4.5.1</td></tr></tbody></table><p>如果你在下面的操作过程中遇到困难，欢迎在评论区留言交流！</p><h2 id="Step1-安装工具">Step1 安装工具</h2><p>安装 Hexo 相当简单，只需要先安装下列应用程序即可：</p><ul><li><input type="checkbox" id="checkbox0" checked="true"><label for="checkbox0"> Git：</label><a href="https://git-scm.com/">官网</a>，<a href="https://npm.taobao.org/mirrors/git-for-windows/v2.22.0.windows.1/Git-2.22.0-64-bit.exe">国内镜像</a>，<a href="https://npm.taobao.org/mirrors/git-for-windows/">其他版本</a></li><li><input type="checkbox" id="checkbox1" checked="true"><label for="checkbox1"> Node.js：</label><a href="http://nodejs.cn/download/">官网</a></li></ul><p>简单来说，Git 是一个版本管理控制系统，可以记录代码修改的每一个环节，就好比我们玩游戏存档。Node.js 是一种以 JavaScript 语言为核心开发的服务器技术，就好像我们的大脑一样，接收、处理并传递网页信息。</p><p>所有必备的应用程序安装完成后，即可使用 <code>npm</code> 安装 Hexo，在桌面右键单击 <code>Git Bash Here</code>，并在 <code>Bash</code> 页面内执行以下命令：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure><h2 id="Step2-创建网站">Step2 创建网站</h2><p>安装 Hexo 完成后，请在 <code>Bash</code> 页面内继续执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo init blog</span><br><span class="line"><span class="built_in">cd</span> blog</span><br><span class="line">npm install</span><br><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><p>新建完成后，指定文件夹的目录如下：</p><p><img src="../images/hexo-build/pic01.png" alt="hexo"></p><p>由于 Hexo 安装的时候，默认配有一个 <code>landscape</code> 主题，所以此时你就可以执行以下命令，通过 <a href="http://localhost:4000">http://localhost:4000</a> 访问你的网站了，当然此时你只能在你的电脑访问，别人是看不见的。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo s</span><br></pre></td></tr></table></figure><h2 id="Step3-更换主题">Step3 更换主题</h2><p>主题是网页的设计，就像我们穿衣服一样，你也可以前往 <a href="https://hexo.io/themes/">Hexo 主题网站</a>选择你喜欢的主题，为你的网站打扮打扮。下面以 <a href="https://butterfly.js.org/">Butterfly</a> 主题进行操作，在 <code>Bash</code> 页面继续执行以下命令，Hexo 将会在 <code>themes</code> 文件夹中新建 <code>butterfly</code> 文件夹。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly</span><br><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure><p>新建完成后，<code>Butterfly</code> 文件夹的目录如下：</p><p><img src="../images/hexo-build/pic02.png" alt="butterfly"></p><p>由于 Hexo 的特性，配置网站需要同时修改 Hexo 根目录和主题目录中的 <code>_config.yml</code> 文件，所以为了进行区分，你可以将主题目录的配置文件复制并重命名为 <code>_config.butterfly.yml</code> ，然后粘贴到 Hexo 根目录中，注意不要覆盖或删掉原来的 Hexo 配置文件。如此一来，既方便管理配置文件，也便于主题的更新。</p><p><img src="../images/hexo-build/pic03.png" alt="配置文件"></p><p>配置网站相当于开启和关闭功能，就好像我们平时使用的 APP，里面有很多功能，但并不是所有的功能你都需要，你可以结合自己的需求有选择地在主页面开启和隐藏某些功能。</p><p>关于 Hexo 配置文件 <code>_config.yml</code>，你可以阅读 <a href="https://hexo.io/zh-cn/docs/configuration">Hexo 配置文档</a>设置自己的网站参数（功能），同时要记得设置 <code>theme: butterfly</code>，否则 Butterfly 的主题将不会得到应用。</p><p>关于主题配置文件 <code>_config.butterfly.yml</code>，你可以阅读 <a href="https://butterfly.js.org/">Butterfly 配置文档</a>设置自己的网站参数（功能）。</p><p>☕☕☕ 修改配置文件后，你就可以执行以下命令，通过 <a href="http://localhost:4000">http://localhost:4000</a> 访问你的网站了，当然此时你只能在你的电脑访问，别人是看不见的。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo s</span><br></pre></td></tr></table></figure><p>如果你想要对 Butterfly “ 魔改 ”，推荐阅读由 <a href="https://blog.zhheo.com/">@张洪HEO</a> 建立的 <a href="https://butterfly.zhheo.com/">Butterfly 主题美化教程</a>，里面收录了很多大神魔改 Butterfly 主题的教程。</p><h2 id="Step4-发表文章">Step4 发表文章</h2><p>在发表文章之前，我们需要了解一下<code>Front matter</code> ，它最直观的体现为 Markdown 文件最上方以 <code>---</code> 分隔的区域，用于指定网页页面的属性（变量），如标题、发布时间、分类、标签等。</p><p>你可以选取所需要的参数，对 <code>Front matter</code>进行修改，这样当我们创建页面的时候，就不需要逐一增设参数，而只需填写变量内容即可。</p><p><img src="../images/hexo-build/pic04.png" alt="前置参数"></p><p>打开 Hugo 根目录下的 <code>...\archetypes\post.md</code>，结合自己的需求修改内容，以下是 Butterfly 主题的 <code>Front Matter</code>，提供给大家参考：</p><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span></span><br><span class="line"><span class="attr">date:</span></span><br><span class="line"><span class="attr">updated:</span></span><br><span class="line"><span class="attr">tags:</span></span><br><span class="line"><span class="attr">categories:</span></span><br><span class="line"><span class="attr">keywords:</span></span><br><span class="line"><span class="attr">description:</span></span><br><span class="line"><span class="attr">top_img:</span></span><br><span class="line"><span class="attr">comments:</span></span><br><span class="line"><span class="attr">cover:</span></span><br><span class="line"><span class="attr">toc:</span></span><br><span class="line"><span class="attr">toc_number:</span></span><br><span class="line"><span class="attr">toc_style_simple:</span></span><br><span class="line"><span class="attr">copyright:</span></span><br><span class="line"><span class="attr">copyright_author:</span></span><br><span class="line"><span class="attr">copyright_author_href:</span></span><br><span class="line"><span class="attr">copyright_url:</span></span><br><span class="line"><span class="attr">copyright_info:</span></span><br><span class="line"><span class="attr">mathjax:</span></span><br><span class="line"><span class="attr">katex:</span></span><br><span class="line"><span class="attr">aplayer:</span></span><br><span class="line"><span class="attr">highlight_shrink:</span></span><br><span class="line"><span class="attr">aside:</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure><p>然后就可以开始发布文章啦，在 Hugo 根目录右键单击 <code>Git Bash Here</code> ，依次执行以下命令，请注意将 <code>title</code> 修改为你的标题，最好是英文。</p><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">hexo new post "title"</span><br></pre></td></tr></table></figure><p>关于文章的图片，请自行阅读 <a href="https://hexo.io/zh-cn/docs/asset-folders">Hexo 资源文件夹文档</a>，选择适合自己的存储方式，引用图片的相对路径，或者利用 <a href="https://typoraio.cn/">Typora</a> + <a href="https://github.com/Molunerfinn/PicGo">PicGo</a> + 图床实现自动上传，并在文章内引用图片的绝对路径。</p><h2 id="Step5-生成网页">Step5 生成网页</h2><p>静态网站是指全部由 HTML（标准通用标记语言的子集）代码格式页面组成的网站，所有的内容包含在网页文件中，一般文件名均以 htm、html、shtml 等为后缀。</p><p>所以在部署网站之前，我们需要生成 HTML 静态文件，然后再将生成的「 Public 」静态文件上传到服务器，这样网页才能被别人访问。</p><p>在 Hexo 根目录，右键单击 <code>Git Bash Here</code> ，依次执行以下命令构建网站。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br></pre></td></tr></table></figure><p><code>hexo clean</code> 用于清除缓存文件 (<code>db.json</code>) 和已生成的静态文件 (<code>public</code>)。在某些情况（尤其是更换主题后），如果发现你对站点的更改无论如何也不生效，你可能需要运行该命令。</p><h2 id="Step6-部署博客">Step6 部署博客</h2><p>搭建网站往往需要服务器，服务器相当于网站的家，网站一般都需要服务器来运行，阿里云、腾讯云、华为云等是国内比较知名的服务器提供商。</p><p>但是，购买一台服务器，不仅涉及到服务器本身的价格，还涉及到流量费用（类似手机流量），这对于初建站且不知道是否长期使用的人来说，无疑是一笔比较昂贵的支出。</p><p><a href="https://github.com/">GitHub</a> 是一个免费托管开源代码的 Git 服务器，如果你不想付费购买服务器，可以将你的网站托管到 GitHub 代码托管平台。</p><p>此部分请阅读「 <a href="http://zyuyu.top/github/">只专注写作！GitHub Actions 自动部署博客</a> 」进行操作。</p><h2 id="标签插件">标签插件</h2><p>Markdown 的内容格式虽然简单，但是有时它也不尽如人意，在很多方面都无法很好地支持，这时内容编辑者就需要使用纯 HTML 来扩展可能性，这与 Markdown 语法的优美简洁相矛盾。</p><p>为了尽可能避免使用 HTML 以保持内容简洁，Hexo 创建了 Tag Plugins 来规避这些限制。标签插件（Tag Plugins）是 Hexo 独有的插件，用于在文章中快速插入特定的内容，一般呈现为以下三种样式：</p><ul><li><code>{% 标签名称 标签参数 %}</code></li><li><code>{% 标签名称 标签参数 %}</code>content<code>{% end标签名称 %}</code></li><li><code>{% 标签名称 标签参数 %}</code>／<code><!-- 标签名称 标签参数 --></code>content<code><!-- end标签名称 --></code>／<code>{% end标签名称 %}</code></li></ul><p>通常无需记忆具体的语法，只要知道每个参数所代表的意义即可，你可以借助<a href="https://shurufa.sogou.com/?r=mac&t=pinyin">搜狗拼音输入法</a>的自定义短语功能，将预设好参数的标签插件添加新短语，从而通过缩写实现快捷输入。</p><p><img src="../images/hexo-build/pic05.png" alt="自定义短语"></p><p><img src="../images/hexo-build/pic06.png" alt="添加新短语"></p><h3 id="内置标签">内置标签</h3><p>下面是 Hexo 支持使用的 Tag Plugins，<code>[ ]</code>内的参数为该标签可以自定义的参数。下表是我为了方便使用而整理的简表，更加详细具体的使用方法请阅读 <a href="https://hexo.io/zh-cn/docs/tag-plugins.html">Hexo 标签外挂文档</a>。</p><table><thead><tr><th style="text-align:center">作用</th><th>语法</th></tr></thead><tbody><tr><td style="text-align:center">引用</td><td>1️⃣ 引言：<br><code>{% blockquote [author[, source]] [link] [source_link_title] %}</code><br><code>{% endblockquote %}</code><br>2️⃣ 引文：<br><code>{% pullquote [class] %}</code> <br/><code>{% endpullquote %}</code><br/>3️⃣ 引用文章：<br><code>{% post_path filename %}</code> <br><code>{% post_link filename [title] [escape] %}</code><br>4️⃣ 引用文章资源：<br><code>{% asset_path filename %}</code> <br><code>{% asset_img [class names] slug [width] [height] [title text [alt text]] %}</code> <br><code>{% asset_link filename [title] [escape] %}</code></td></tr><tr><td style="text-align:center">代码</td><td>1️⃣ 代码块：<br><code>{% codeblock [title] [lang:language] [url] [link text] [additional options] %}</code> <br><code>{% endcodeblock %}</code><br>2️⃣ 反引号代码块：在文本前后添加三个反引号（<code>`</code>）<br>3️⃣ 代码文件：<code>{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}</code></td></tr><tr><td style="text-align:center">图片</td><td><code>{% link text url [external] [title] %}</code></td></tr><tr><td style="text-align:center">链接</td><td>指定大小：<code>{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}</code></td></tr><tr><td style="text-align:center">视频</td><td>1️⃣ YouTube：<code>{% youtube video_id [type] [cookie] %}</code><br>2️⃣ Vimeo：<code>{% vimeo video_id %}</code></td></tr><tr><td style="text-align:center">框架</td><td><code>{% iframe url [width] [height] %}</code></td></tr><tr><td style="text-align:center">jsFiddle</td><td><code>{% jsfiddle shorttag [tabs] [skin] [width] [height] %}</code></td></tr><tr><td style="text-align:center">Gist</td><td><code>{% gist gist_id [filename] %}</code></td></tr><tr><td style="text-align:center">Swig 标签</td><td><code>{% raw %}</code><br><code>{% endraw %}</code></td></tr><tr><td style="text-align:center">文章摘要和截断</td><td><code><!-- more --></code>之前的文字将会被视为摘要，首页和文章内均可看到这段文字。</td></tr></tbody></table><h3 id="主题标签">主题标签</h3><p>下面是 Butterfly 主题支持使用的 Tag Plugins，部分标签插件使用前需要在主题配置文件开启功能，<code>[ ]</code>内的参数为该标签可以自定义的参数。下表是我为了方便使用而整理的简表，更加详细具体的使用方法请阅读 <a href="https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89">Hexo－Butterfly 标签外挂文档</a>。</p><table><thead><tr><th style="text-align:center">作用</th><th>语法</th></tr></thead><tbody><tr><td style="text-align:center">提示横幅</td><td>使用前需在主题配置文件开启功能，默认以主题配置为准。<br><code>{% note [class] [no-icon] [style] %}</code><br/><code>{% endnote %}</code></td></tr><tr><td style="text-align:center">相册图库</td><td>1️⃣ 图库组合：<br><code><div class="gallery-group-main"></code><br/><code>{% galleryGroup [name] [description] [link] [img-url] %}</code><br/><code>{% galleryGroup [name] [description] [link] [img-url] %}</code><br/><code></div></code><br>2️⃣ 单页多图：<br><code>{% gallery %}</code><br/><code></code><br/><code></code><br/><code>{% endgallery %}</code></td></tr><tr><td style="text-align:center">隐藏内容</td><td>1️⃣ 行内隐藏：<br><code>{% hideInline [content],[display],[bg],[color] %}</code><br>2️⃣ 段落隐藏：<br><code>{% hideBlock [display],[bg],[color] %}</code><br/><code>{% endhideBlock %}</code><br>3️⃣ 折叠隐藏：<br><code>{% hideToggle [display],[bg],[color] %}</code><br/><code>{% endhideToggle %}</code></td></tr><tr><td style="text-align:center">图表标签</td><td>使用前需在主题配置文件开启功能，具体内容参考<a href="https://mermaid-js.github.io/mermaid/#/">mermaid</a>。<br><code>{% mermaid %}</code><br/><code>{% endmermaid %}</code></td></tr><tr><td style="text-align:center">索引菜单</td><td><code>{% tabs [Unique-name], [index] %}</code><br/><code><!-- tab [Tab caption] [icon] --></code><br/><code><!-- endtab --></code><br/><code>{% endtabs %}</code></td></tr><tr><td style="text-align:center">按钮链接</td><td><code>{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}</code></td></tr><tr><td style="text-align:center">行内图片</td><td><code>{% inlineImg [src] [height] %}</code></td></tr><tr><td style="text-align:center">文本高亮</td><td><code>{% label [text] [color] %}</code></td></tr><tr><td style="text-align:center">时间线</td><td><code>{% timeline [title],[color] %}</code><br/><code><!-- timeline [title] --></code><br/><code><!-- endtimeline --></code><br/><code><!-- timeline [title] --></code><br/><code><!-- endtimeline --></code><br/><code>{% endtimeline %}</code></td></tr><tr><td style="text-align:center">友情链接</td><td><code>{% flink %}</code><br/>与友链页面一样，支持 <code>yml</code> 格式<br><code>{% endflink %}</code></td></tr></tbody></table><h2 id="参考内容">参考内容</h2><ul><li><a href="https://hexo.io/zh-cn/docs/">Hexo 使用文档</a></li><li><a href="https://butterfly.js.org/">Hexo-Butterfly 使用文档</a></li><li><a href="https://hexo.io/zh-cn/docs/tag-plugins.html">Hexo 标签插件（Tag Plugins）</a></li><li><a href="https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89">Hexo－Butterfly 标签外挂文档</a></li></ul>]]></content>
<categories>
<category> Program </category>
</categories>
<tags>
<tag> 博客 </tag>
</tags>
</entry>
<entry>
<title>简单易上手！基于 Hugo + DoIt 搭建个人博客</title>
<link href="/hugo-build/"/>
<url>/hugo-build/</url>
<content type="html"><![CDATA[<blockquote><p><a href="https://gohugo.io/">Hugo</a> 是 Go 编写的静态网站生成器，速度快，易用，可配置，只需要几分之一秒就可以渲染一个经典的中型网站，非常适合博客，文档等网站的生成。</p></blockquote><p>在开始之前，你可以阅读「 <a href="http://zyuyu.top/blog-build/">非程序猿的我，为什么要搭建自己的个人博客？</a> 」了解静态博客与动态博客、Hexo 与 Hugo 的区别。下面说明一下我的构建环境：</p><table><thead><tr><th style="text-align:center"></th><th style="text-align:center">构建环境</th></tr></thead><tbody><tr><td style="text-align:center">操作系统</td><td style="text-align:center">Windows10 64bit</td></tr><tr><td style="text-align:center">Git 版本</td><td style="text-align:center">2.37.2</td></tr><tr><td style="text-align:center">Hugo extended 版本</td><td style="text-align:center">104.3.0</td></tr><tr><td style="text-align:center">DoIt 版本</td><td style="text-align:center">0.2.13</td></tr></tbody></table><p>最终的效果：<a href="https://zyuyu.top/blog/">张小鱼的储物间</a>（仅做展示使用）</p><h2 id="Step1-安装工具">Step1 安装工具</h2><p>在开始搭建网站之前，建议安装 <a href="https://git-scm.com/">Git 工具</a>，它是一个版本管理控制系统软件，可以记录代码修改的每一个环节，就好比我们玩游戏存档。如果你打不开前面的链接，你还可以下载<a href="https://npm.taobao.org/mirrors/git-for-windows/v2.22.0.windows.1/Git-2.22.0-64-bit.exe">国内镜像</a>版本。</p><p>Hugo 的安装非常简单，只需要前往 <a href="https://github.com/gohugoio/hugo/releases">Hugo Releases</a> 下载你所使用的操作系统的最新版本的二进制文件即可，推荐下载 <code>Hugo Extended</code> 版本，因为部分主题的一些特性需要将 SCSS 转换为 CSS，使用该版本将获得更好的体验。下面的操作步骤以 Windows 10 64bit 为例。</p><p><img src="../images/hugo-build/pic01.png" alt="下载hugo"></p><p>接着新建一个「 hugo 」文件夹，在它下面再新建「 bin 」文件夹，然后将下载的文件解压到新建的「 bin 」文件夹中。</p><p><img src="../images/hugo-build/pic02.png" alt="新建bin文件夹"></p><p>同时还要将 Hugo 添加到环境变量中，如果缺少这一步，Hugo 将无法运行。</p><p><img src="../images/hugo-build/pic03.png" alt="环境变量"></p><p><img src="../images/hugo-build/pic04.png" alt="编辑环境变量"></p><blockquote><p>环境变量位于右键单击「 我的电脑 -> 属性 -> 高级 -> 环境变量 」，或者按住 <code>win+R</code> 进入设置，选择「 系统 -> 关于 -> 高级系统设置 -> 高级 -> 环境变量 」。</p></blockquote><p>最后，你可以按住 <code>win+R</code>，输入 <code>cmd</code> ，进入命令提示符页面，执行 <code>hugo version</code> 即可验证是否成功。如果出现版本号，说明环境变量配置成功。</p><h2 id="Step2-创建网站">Step2 创建网站</h2><p>前一步完成后，我们打开刚刚新建的「 Hugo 」文件夹，然后在空白处右键单击 <code>Git Bash Here</code> ，并执行以下命令：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hugo new site blog</span><br></pre></td></tr></table></figure><p><img src="../images/hugo-build/pic05.png" alt="new"></p><p>以上命令将会创建一个名为「 blog 」的文件夹，该文件夹存储着你的博客站点数据，你可以将 blog 改为其它单词，创建属于自己的站点，这也是 Hugo 的根目录。</p><h2 id="Step3-配置主题">Step3 配置主题</h2><p>主题是网页的设计，就像我们穿衣服一样，你需要给你的博客打扮打扮，你可以前往 <a href="https://themes.gohugo.io/">Hugo 主题网站</a>选择你喜欢的主题。下面以 <a href="https://hugodoit.pages.dev/zh-cn/">DoIt</a> 主题进行说明。</p><p>在 Hugo 根目录，右键单击 <code>Git Bash Here</code> ，依次执行以下命令：</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git init</span><br><span class="line">git submodule add https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt</span><br></pre></td></tr></table></figure><p>☕☕☕ 等待几分钟，主题就安装完成啦~ (～￣▽￣)～</p><p>接着将 <code>...\themes\DoIt\exampleSite</code>内的 <code>config.toml</code> 复制到 Hugo 根目录，覆盖掉原先的 <code>config.toml</code>，并打开复制后的文件，将 <code>themesDir = "../.."</code> 更改为 <code>themesDir = "themes"</code>。</p><p>然后在 Hugo 根目录，右键单击 <code>Git Bash Here</code> ，执行以下任一命令，就可以进入<a href="http://localhost:1313">本地服务器</a>预览你的网页了，当然此时你只能在你的电脑访问，别人是看不见的。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hugo server <span class="comment"># 本地预览命令</span></span><br><span class="line">hugo server -D <span class="comment"># 支持预览草稿的本地预览命令</span></span><br><span class="line">hugo serve -e production <span class="comment"># 支持启用评论系统和CDN等的本地预览命令</span></span><br></pre></td></tr></table></figure><p>由于 Hugo 支持实时预览修改，即可以一边主题配置文件，一边在网页预览效果，所以你可以开启本地预览命令，参照 <a href="https://hugodoit.pages.dev/zh-cn/theme-documentation-basics/">DoIt 主题使用文档</a>配置你自己的网页。</p><p>配置主题相当于开启和关闭功能，就好像我们日常使用的 APP，里面有很多功能，但并不是所有的功能你都需要，你可以结合自己的需求有选择地在主页面开启和隐藏某些功能，你只要打开刚刚复制的 <code>config.toml</code>修改即可。</p><h2 id="Step4-发表文章">Step4 发表文章</h2><p>在发表文章之前，我们需要了解一下<code>Front matter</code> ，它最直观的体现为 Markdown 文件最上方以 <code>---</code> 分隔的区域，用于指定网页页面的属性（变量），如标题、发布时间、分类、标签等。</p><p>你可以选取所需要的参数，对 <code>Front matter</code>进行修改，这样当我们创建页面的时候，就不需要逐一增设参数，而只需填写变量内容即可。</p><p><img src="../images/hugo-build/pic06.png" alt="前置参数"></p><p>打开 Hugo 根目录下的 <code>...\archetypes\default.md</code>，结合自己的需求修改内容，以下是 DoIt 主题的 <code>Front Matter</code>，提供给大家参考：</p><figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: "我的第一篇文章"</span><br><span class="line">subtitle: ""</span><br><span class="line">date: 2020-03-04T15:58:26+08:00</span><br><span class="line">lastmod: 2020-03-04T15:58:26+08:00</span><br><span class="line">draft: true</span><br><span class="line">authors: []</span><br><span class="line">description: ""</span><br><span class="line">license: ""</span><br><span class="line">images: []</span><br><span class="line"></span><br><span class="line">tags: []</span><br><span class="line">categories: []</span><br><span class="line">series: []</span><br><span class="line">series<span class="emphasis">_weight: 1</span></span><br><span class="line"><span class="emphasis">seriesNavigation: true</span></span><br><span class="line"><span class="emphasis">featuredImage: ""</span></span><br><span class="line"><span class="emphasis">featuredImagePreview: ""</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">hiddenFromHomePage: false</span></span><br><span class="line"><span class="emphasis">hiddenFromSearch: false</span></span><br><span class="line"><span class="emphasis">twemoji: false</span></span><br><span class="line"><span class="emphasis">lightgallery: true</span></span><br><span class="line"><span class="emphasis">ruby: true</span></span><br><span class="line"><span class="emphasis">fraction: true</span></span><br><span class="line"><span class="emphasis">fontawesome: true</span></span><br><span class="line"><span class="emphasis">linkToMarkdown: true</span></span><br><span class="line"><span class="emphasis">linkToSource: false</span></span><br><span class="line"><span class="emphasis">linkToEdit: false</span></span><br><span class="line"><span class="emphasis">linkToReport: false</span></span><br><span class="line"><span class="emphasis">rssFullText: false</span></span><br><span class="line"><span class="emphasis">license: ''</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">toc:</span></span><br><span class="line"><span class="emphasis"> enable: true</span></span><br><span class="line"><span class="emphasis"> auto: true</span></span><br><span class="line"><span class="emphasis">code:</span></span><br><span class="line"><span class="emphasis"> copy: true</span></span><br><span class="line"><span class="emphasis"> # ...</span></span><br><span class="line"><span class="emphasis">table:</span></span><br><span class="line"><span class="emphasis"> sort: true</span></span><br><span class="line"><span class="emphasis"> # ...</span></span><br><span class="line"><span class="emphasis">math:</span></span><br><span class="line"><span class="emphasis"> enable: true</span></span><br><span class="line"><span class="emphasis"> # ...</span></span><br><span class="line"><span class="emphasis">mapbox:</span></span><br><span class="line"><span class="emphasis"> accessToken: ""</span></span><br><span class="line"><span class="emphasis"> # ...</span></span><br><span class="line"><span class="emphasis">share:</span></span><br><span class="line"><span class="emphasis"> enable: true</span></span><br><span class="line"><span class="emphasis"> # ...</span></span><br><span class="line"><span class="emphasis">comment:</span></span><br><span class="line"><span class="emphasis"> enable: true</span></span><br><span class="line"><span class="emphasis"> # ...</span></span><br><span class="line"><span class="emphasis">library:</span></span><br><span class="line"><span class="emphasis"> css:</span></span><br><span class="line"><span class="emphasis"> # someCSS = "some.css"</span></span><br><span class="line"><span class="emphasis"> # 位于 "assets/"</span></span><br><span class="line"><span class="emphasis"> # 或者</span></span><br><span class="line"><span class="emphasis"> # someCSS = "https://cdn.example.com/some.css"</span></span><br><span class="line"><span class="emphasis"> js:</span></span><br><span class="line"><span class="emphasis"> # someJS = "some.js"</span></span><br><span class="line"><span class="emphasis"> # 位于 "assets/"</span></span><br><span class="line"><span class="emphasis"> # 或者</span></span><br><span class="line"><span class="emphasis"> # someJS = "https://cdn.example.com/some.js"</span></span><br><span class="line"><span class="emphasis">seo:</span></span><br><span class="line"><span class="emphasis"> images: []</span></span><br><span class="line"><span class="emphasis"> # ...</span></span><br><span class="line"><span class="emphasis">outdatedArticleReminder:</span></span><br><span class="line"><span class="emphasis"> enable: false</span></span><br><span class="line"><span class="emphasis"> # ...</span></span><br><span class="line"><span class="emphasis">sponsor:</span></span><br><span class="line"><span class="emphasis"> enable: false</span></span><br><span class="line"><span class="emphasis"> # ...</span></span><br><span class="line"><span class="emphasis">related:</span></span><br><span class="line"><span class="emphasis"> enable: false</span></span><br><span class="line"><span class="emphasis"> count: 5</span></span><br><span class="line"><span class="emphasis">---</span></span><br></pre></td></tr></table></figure><p>然后就可以开始发布文章啦，在 Hugo 根目录右键单击 <code>Git Bash Here</code> ，依次执行以下任一命令，请注意将 <code>first</code> 修改为你的标题，最好是英文。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hugo new posts/first/index.md</span><br><span class="line">hugo new posts/first.md</span><br></pre></td></tr></table></figure><p><code>hugo new posts/first/index.md</code> 用于创建页面资源包，你可以将图片直接放在里面，然后在文章内引用图片的相对路径即可，如 <code></code>。</p><p><code>hugo new posts/first.md</code> 是创建文章页面的普通命令，你可以在「 assets 」或「 static 」文件夹创建一个专门用于存储图片的「 image 」文件夹，引用其相对路径，如 <code></code>。</p><p>关于图片资源，你还可以利用 <a href="https://typoraio.cn/">Typora</a> + <a href="https://github.com/Molunerfinn/PicGo">PicGo</a> + 图床实现自动上传，或者利用 <a href="https://typoraio.cn/">Typora</a> 自动复制图片到 Hugo 站点指定位置，然后在文章内会自动引用图片的绝对路径或相对路径。</p><p>需要注意的是，Hugo 中使用图片的命名必须取英文字符，如 <code>pic.png</code>，如果命名为中文字符或有空格，图片将无法正常显示，如<code>图片.png</code>。</p><h2 id="Step5-生成网页">Step5 生成网页</h2><p>静态网站是指全部由 HTML（标准通用标记语言的子集）代码格式页面组成的网站，所有的内容包含在网页文件中，一般文件名均以 htm、html、shtml 等为后缀。</p><p>所以在部署网站之前，我们需要生成 HTML 静态文件，然后再将生成的「 Public 」静态文件上传到服务器，这样网页才能被别人访问。</p><p>在 Hugo 根目录，右键单击 <code>Git bash here</code>，执行以下任一命令构建网站。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hugo </span><br><span class="line">hugo -F --cleanDestinationDir</span><br></pre></td></tr></table></figure><p><code>hugo</code> 会在 「 public 」文件夹生成静态网站资源，如果下次网站有修改，需要删除该文件夹，再重新执行该命令，因为该命令只会往里面添加内容，不会删除外部已删除而「 public 」仍存在的文件。</p><p><code>hugo -F --cleanDestinationDir</code> 则会从静态目录中找不到的目标中删除文件，表示每次生成的「 public 」都是全新的，会覆盖原来的。</p><h2 id="Step6-部署博客">Step6 部署博客</h2><p>搭建网站往往需要服务器，服务器相当于网站的家，网站一般都需要服务器来运行，阿里云、腾讯云、华为云等是国内比较知名的服务器提供商。</p><p>但是，购买一台服务器，不仅涉及到服务器本身的价格，还涉及到流量费用（类似手机流量），这对于初建站且不知道是否长期使用的人来说，无疑是一笔比较昂贵的支出。</p><p><a href="https://github.com/">GitHub</a> 是一个免费托管开源代码的 Git 服务器，如果你不想付费购买服务器，可以将你的网站托管到 GitHub 代码托管平台。</p><p>此部分请阅读「 <a href="http://zyuyu.top/github/">只专注写作！GitHub Actions 自动部署博客</a> 」进行操作。</p><h2 id="美化主题">美化主题</h2><p>你可以无需阅读此部分内容，这部分记录了我修改 DoIt 主题布局排版和增加网站背景的过程，如果你有同样的需求，可以复制使用。</p><h3 id="布局排版">布局排版</h3><p>Hugo 对主题自定义的程度很高，你可以直接在根目录创建与主题相同的文件目录，生成网页时，会直接覆盖主题原来的布局文件。</p><p>布局排版的修改主要利用到 <code>_custom.scss</code> 和 <code>_override.scss</code>，它们位于主题目录中的「 …／assets／css／… 」，你可以直接复制到博客根目录的相同位置，也可以直接在博客根目录所在位置新建文件。</p><p><code>_custom.scss</code> 是关于 <code>css</code> 样式的修改，以下是我目前正在使用的 <code>_custom.scss</code>，请注意，它只适用于 DoIt 主题。</p><figure class="highlight css"><table><tr><td class="code"><pre><span class="line">// ==============================</span><br><span class="line">// Custom style</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 class="comment">/* 头部 */</span></span><br><span class="line"><span class="selector-class">.header-wrapper</span> {</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">238</span>, <span class="number">238</span>, <span class="number">238</span>);</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.backstretch</span> { </span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">50%</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">50%</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.search</span> <span class="selector-tag">input</span> {</span><br><span class="line"> <span class="attribute">background-color</span>: white;</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#000000</span>;</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 class="comment">/* 首页 */</span></span><br><span class="line"><span class="selector-class">.page</span> {</span><br><span class="line"> <span class="selector-attr">[header-desktop]</span> & {</span><br><span class="line"> <span class="attribute">padding-top</span>: <span class="number">3rem</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[header-mobile]</span> & {</span><br><span class="line"> <span class="attribute">padding-top</span>: <span class="number">3rem</span>;</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 class="comment">/* 首页文章头像 */</span></span><br><span class="line"><span class="selector-class">.single</span> <span class="selector-class">.post-meta</span> <span class="selector-class">.author</span> <span class="selector-tag">img</span><span class="selector-class">.avatar</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">1.3rem</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1.3rem</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">vertical-align</span>: text-bottom;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">0.25px</span> solid <span class="number">#f0f0f0</span>;</span><br><span class="line"> <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line"> <span class="attribute">object-position</span>: center;</span><br><span class="line"> -o-<span class="attribute">object-fit</span>: cover;</span><br><span class="line"> <span class="attribute">object-fit</span>: cover;</span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">"object-fit: cover;"</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 首页头像旋转360度动画 */</span></span><br><span class="line"><span class="keyword">@-webkit-keyframes</span> play {</span><br><span class="line"> <span class="number">0%</span> {</span><br><span class="line"> -webkit-<span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(<span class="number">0deg</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="number">100%</span> {</span><br><span class="line"> -webkit-<span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(-<span class="number">360deg</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">@-moz-keyframes</span> play {</span><br><span class="line"> <span class="number">0%</span> {</span><br><span class="line"> -moz-<span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(<span class="number">0deg</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="number">100%</span> {</span><br><span class="line"> -moz-<span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(-<span class="number">360deg</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">@keyframes</span> play {</span><br><span class="line"> <span class="number">0%</span> {</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(<span class="number">0deg</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="number">100%</span> {</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(-<span class="number">360deg</span>);</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 class="comment">/* 首页 */</span></span><br><span class="line"><span class="selector-class">.home</span> {</span><br><span class="line"> <span class="selector-class">.home-profile</span> {</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">238</span>, <span class="number">238</span>, <span class="number">238</span>);</span><br><span class="line"> <span class="attribute">padding-bottom</span>: <span class="number">3rem</span>;</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.home-avatar</span> {</span><br><span class="line"> <span class="selector-tag">img</span> {</span><br><span class="line"> <span class="comment">/* 设置循环动画</span></span><br><span class="line"><span class="comment"> [animation: </span></span><br><span class="line"><span class="comment"> (play)动画名称</span></span><br><span class="line"><span class="comment"> (2s)动画播放时长单位秒或微秒</span></span><br><span class="line"><span class="comment"> (ease-out)动画播放的速度曲线为以低速结束 </span></span><br><span class="line"><span class="comment"> (1s)等待1秒然后开始动画</span></span><br><span class="line"><span class="comment"> (1)动画播放次数(infinite为循环播放) ]*/</span></span><br><span class="line"></span><br><span class="line"> -webkit-<span class="attribute">transition</span>: -webkit-transform <span class="number">1.0s</span> ease-out; <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> -moz-<span class="attribute">transition</span>: -moz-transform <span class="number">1.0s</span> ease-out; <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="number">1.0s</span> ease-out; <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> </span><br><span class="line"> &<span class="selector-pseudo">:hover</span> {</span><br><span class="line"> -webkit-<span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(<span class="number">360deg</span>); <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> -moz-<span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(<span class="number">360deg</span>); <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(<span class="number">360deg</span>); <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">/* 鼠标经过停止头像旋转 </span></span><br><span class="line"><span class="comment"> -webkit-animation-play-state:paused;</span></span><br><span class="line"><span class="comment"> animation-play-state:paused;*/</span></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 class="selector-class">.home</span><span class="selector-attr">[posts]</span> {</span><br><span class="line"> <span class="selector-class">.home-profile</span> {</span><br><span class="line"> <span class="attribute">padding-top</span>: <span class="number">4rem</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.summary</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: .<span class="number">5rem</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">24px</span>;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: <span class="number">1.5rem</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">0px</span> dashed <span class="number">#f0f0f0</span>;</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">238</span>, <span class="number">238</span>, <span class="number">238</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">0px</span> dashed white;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">0px</span> dashed white;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.single-title</span> {</span><br><span class="line"> <span class="attribute">padding</span>: .<span class="number">5rem</span> <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.content</span> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.post-meta</span> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.post-footer</span> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"> <span class="selector-tag">a</span><span class="selector-pseudo">:first</span>-child {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"> &<span class="selector-pseudo">::before</span> {</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">z-index</span>: -<span class="number">1</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: -<span class="number">0.25em</span>;</span><br><span class="line"> <span class="attribute">right</span>: -<span class="number">0.25em</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="built_in">hsla</span>(<span class="number">341</span>, <span class="number">97%</span>, <span class="number">59%</span>, <span class="number">0.75</span>);</span><br><span class="line"> <span class="attribute">transform-origin</span>: center right;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scaleX</span>(<span class="number">0</span>);</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="number">0.2s</span> ease-in-out;</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 class="comment">/* 页码 */</span></span><br><span class="line"><span class="selector-class">.pagination</span> {</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">24px</span>;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">238</span>, <span class="number">238</span>, <span class="number">238</span>);</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</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 class="comment">/* 脚部 */</span></span><br><span class="line"><span class="selector-tag">footer</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</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>: <span class="number">#a166ab</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.5rem</span>;</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1440px</span>) {</span><br><span class="line"> <span class="selector-tag">footer</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">56%</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1200px</span>) {</span><br><span class="line"> <span class="selector-tag">footer</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">52%</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1000px</span>) {</span><br><span class="line"> <span class="selector-tag">footer</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">80%</span> <span class="meta">!important</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">680px</span>) {</span><br><span class="line"> <span class="selector-tag">footer</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span> <span class="meta">!important</span>;</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 class="comment">/* 归档、标签、分类页 */</span></span><br><span class="line"><span class="selector-class">.archive</span> {</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">238</span>, <span class="number">238</span>, <span class="number">238</span>);</span><br><span class="line"> <span class="attribute">border-bottom-width</span>: <span class="number">0px</span>;</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.single-title</span> {</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">2rem</span> <span class="number">1rem</span> <span class="number">0.5rem</span> <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.single-subtitle</span> {</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1rem</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.group-title</span> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">1rem</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.archive-item</span> {</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1.8rem</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.tag-cloud-tags</span> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0.8rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0.8rem</span>;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: <span class="number">5rem</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.categories-card</span> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0.5rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">0.5rem</span>;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: <span class="number">5rem</span>;</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 class="comment">/* 文章页 */</span></span><br><span class="line"><span class="selector-class">.single</span> {</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.single-title</span> {</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">1.5rem</span> <span class="number">0</span> <span class="number">0.5rem</span>;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1rem</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.post-meta</span> {</span><br><span class="line"> <span class="attribute">padding</span>: .<span class="number">2rem</span> <span class="number">0</span> .<span class="number">2rem</span>;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#b1b1ba</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.content</span> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1rem</span>;</span><br><span class="line"></span><br><span class="line"> > <span class="selector-tag">h2</span> {</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="built_in">rgb</span>(<span class="number">95</span>, <span class="number">90</span>, <span class="number">75</span>) <span class="number">0px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="number">1px</span>, <span class="built_in">rgba</span>(<span class="number">10</span>, <span class="number">10</span>, <span class="number">0</span>, <span class="number">0.5</span>) <span class="number">1px</span> <span class="number">1px</span> <span class="number">6px</span> <span class="number">1px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">rgb</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>);</span><br><span class="line"> <span class="attribute">font-family</span>: 微软雅黑, 宋体, 黑体, Arial;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.3</span>;</span><br><span class="line"> <span class="attribute">text-shadow</span>: <span class="built_in">rgb</span>(<span class="number">34</span>, <span class="number">34</span>, <span class="number">34</span>) <span class="number">2px</span> <span class="number">2px</span> <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgb</span>(<span class="number">43</span>, <span class="number">102</span>, <span class="number">149</span>);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line"> <span class="attribute">border-width</span>: initial;</span><br><span class="line"> <span class="attribute">border-style</span>: none;</span><br><span class="line"> <span class="attribute">border-color</span>: initial;</span><br><span class="line"> <span class="attribute">border-image</span>: initial;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">7px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">30px</span> <span class="number">0px</span> <span class="number">30px</span> -<span class="number">5px</span> <span class="meta">!important</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> > <span class="selector-tag">h2</span>,</span><br><span class="line"> > <span class="selector-tag">h3</span>,</span><br><span class="line"> > <span class="selector-tag">h4</span>,</span><br><span class="line"> > <span class="selector-tag">h5</span>,</span><br><span class="line"> > <span class="selector-tag">h6</span> {</span><br><span class="line"> > <span class="selector-class">.header-mark</span><span class="selector-pseudo">::before</span> {</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">"| "</span>;</span><br><span class="line"> <span class="attribute">margin-right</span>: .<span class="number">3125rem</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> > <span class="selector-tag">h2</span> > <span class="selector-class">.header-mark</span><span class="selector-pseudo">::before</span> {</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">"# "</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-tag">p</span> {</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">1rem</span> <span class="number">0</span> <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.7rem</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="selector-tag">ul</span>,</span><br><span class="line"> <span class="selector-tag">ol</span> {</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0.5rem</span> <span class="number">0</span> <span class="number">0.5rem</span>;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">2rem</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.7rem</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-tag">img</span> {</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">height</span>: auto;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="attribute">padding-top</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: <span class="number">1rem</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-tag">blockquote</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">border-left</span>: <span class="number">0.25em</span> solid <span class="number">#f0f0f0</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#697681</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">1em</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">1rem</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">border-left</span>: <span class="number">0.25em</span> solid <span class="number">#363636</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">border-left</span>: <span class="number">0.25em</span> solid <span class="number">#363636</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-tag">ul</span>,</span><br><span class="line"> <span class="selector-tag">ol</span> {</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">2rem</span>;</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 class="selector-class">.post-footer</span> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1rem</span>;</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.related-container</span> {</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">width</span>: auto;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-id">#comments</span> {</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">5rem</span> <span class="number">0</span> <span class="number">4rem</span>;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1rem</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.el-textarea__inner</span> {</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.twikoo</span> <span class="selector-class">.el-textarea__inner</span> {</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">"https://npm.elemecdn.com/akilar-candyassets/image/zhifeiji.gif"</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"><span class="selector-class">.page</span> > <span class="selector-tag">h2</span><span class="selector-pseudo">:nth-child</span>(<span class="number">5</span>) {</span><br><span class="line"> <span class="attribute">padding-top</span>: <span class="number">2rem</span>;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1rem</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"><span class="selector-class">.toc</span> {</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(<span class="number">238</span>, <span class="number">238</span>, <span class="number">238</span>);</span><br><span class="line"></span><br><span class="line"> <span class="selector-attr">[theme=dark]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#292a2d</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="selector-attr">[theme=black]</span> & {</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#000000</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#37393e</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.toc-content</span> {</span><br><span class="line"> <span class="attribute">font-size</span>: .<span class="number">9rem</span>;</span><br><span class="line"> <span class="selector-tag">ul</span> {</span><br><span class="line"> <span class="selector-tag">a</span><span class="selector-pseudo">:first</span>-child<span class="selector-pseudo">::before</span> {</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">""</span>;</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 class="selector-id">#toc-auto</span> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">1.5rem</span>;</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">0.5rem</span>;</span><br><span class="line"> <span class="attribute">border-left</span>: <span class="number">2px</span> solid <span class="number">#f0f0f0</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1440px</span>) {</span><br><span class="line"> <span class="selector-id">#toc-auto</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">21%</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>_override.scss</code> 是关于 <code>_variables.scss</code> 颜色文件的修改，你可以将需要修改的内容复制到博客根目录中的相同文件中，但要注意，请删除 <code>!default</code>，否则将不会生效！示例如下：</p><figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">// ========== Code ========== //</span></span><br><span class="line"><span class="comment">// Color of the code</span></span><br><span class="line"><span class="variable">$code-color</span>: <span class="number">#E74C3C</span>;</span><br><span class="line"><span class="variable">$code-color-dark</span>: <span class="number">#fff</span>;</span><br></pre></td></tr></table></figure><h3 id="网站背景">网站背景</h3><p>背景图的美化需要利用 <code>assets.html</code> 和 <code>custom.js</code> ，所以在开始下面的操作之前，你需要将主题目录中的「 …／layouts／partials／assets.html 」复制到博客根目录的相同位置，并且在根目录创建「 …/static／js／custom.js 」文件。</p><p>需要提前说明的是，如果你的 <code>baseURL</code> 是子域名，如 <code>https://owner.github.io/blog</code>，你需要在本地引用的自定义的 JS 文件的 <code>src</code> 前面添加子域名，如 <code>src="/blog/js/ribbons.js"</code>，否则效果将无法生效。</p><h4 id="彩带动画">彩带动画</h4><p><a href="http://www.bootstrapmb.com/item/4514/preview">彩色动画</a>是基于 <code>ribbons.js</code> 生成的动态特效，<a href="https://github.com/hustcc/ribbon.js">ribbons.js</a> 是使用 HTML5 Canvas 生成色带 JS 库，只有 1kb，使用非常容易和简单。</p><p>打开复制后的「 assets.html 」文件，在最后面插入以下代码：</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line">{{- /* 自定义的js文件 */ -}}</span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/ribbons.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>然后新建 <code>ribbons.js</code>，并复制下面的代码到博客根目录中的「 …static／js／ribbons.js 」。</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Ribbons Class File.</span></span><br><span class="line"><span class="comment"> * Creates low-poly ribbons background effect inside a target container.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line">(<span class="keyword">function</span> (<span class="params">name, factory</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="variable language_">window</span> === <span class="string">"object"</span>) {</span><br><span class="line"> <span class="variable language_">window</span>[name] = <span class="title function_">factory</span>();</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"> (<span class="string">"Ribbons"</span>, <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> _w = <span class="variable language_">window</span>, _b = <span class="variable language_">document</span>.<span class="property">body</span>, _d = <span class="variable language_">document</span>.<span class="property">documentElement</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">//随机函数</span></span><br><span class="line"> <span class="keyword">var</span> random = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">arguments</span>.<span class="property">length</span> === <span class="number">1</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(<span class="variable language_">arguments</span>[<span class="number">0</span>])) {</span><br><span class="line"> <span class="keyword">var</span> index = <span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="title function_">random</span>(<span class="number">0</span>, <span class="variable language_">arguments</span>[<span class="number">0</span>].<span class="property">length</span> - <span class="number">1</span>));</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">arguments</span>[<span class="number">0</span>][index];</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">random</span>(<span class="number">0</span>, <span class="variable language_">arguments</span>[<span class="number">0</span>]);</span><br><span class="line"> } <span class="keyword">else</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">arguments</span>.<span class="property">length</span> === <span class="number">2</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">random</span>() * (<span class="variable language_">arguments</span>[<span class="number">1</span>] - <span class="variable language_">arguments</span>[<span class="number">0</span>]) + <span class="variable language_">arguments</span>[<span class="number">0</span>];</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</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"> <span class="keyword">var</span> screenInfo = <span class="keyword">function</span> (<span class="params">e</span>) {</span><br><span class="line"> <span class="keyword">var</span> width = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, _w.<span class="property">innerWidth</span> || _d.<span class="property">clientWidth</span> || _b.<span class="property">clientWidth</span> || <span class="number">0</span>),</span><br><span class="line"> height = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, _w.<span class="property">innerHeight</span> || _d.<span class="property">clientHeight</span> || _b.<span class="property">clientHeight</span> || <span class="number">0</span>),</span><br><span class="line"> scrollx = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, _w.<span class="property">pageXOffset</span> || _d.<span class="property">scrollLeft</span> || _b.<span class="property">scrollLeft</span> || <span class="number">0</span>) - (_d.<span class="property">clientLeft</span> || <span class="number">0</span>),</span><br><span class="line"> scrolly = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, _w.<span class="property">pageYOffset</span> || _d.<span class="property">scrollTop</span> || _b.<span class="property">scrollTop</span> || <span class="number">0</span>) - (_d.<span class="property">clientTop</span> || <span class="number">0</span>);</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">width</span>: width,</span><br><span class="line"> <span class="attr">height</span>: height,</span><br><span class="line"> <span class="attr">ratio</span>: width / height,</span><br><span class="line"> <span class="attr">centerx</span>: width / <span class="number">2</span>,</span><br><span class="line"> <span class="attr">centery</span>: height / <span class="number">2</span>,</span><br><span class="line"> <span class="attr">scrollx</span>: scrollx,</span><br><span class="line"> <span class="attr">scrolly</span>: scrolly</span><br><span class="line"> };</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> mouseInfo = <span class="keyword">function</span> (<span class="params">e</span>) {</span><br><span class="line"> <span class="keyword">var</span> screen = <span class="title function_">screenInfo</span>(e),</span><br><span class="line"> mousex = e ? <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, e.<span class="property">pageX</span> || e.<span class="property">clientX</span> || <span class="number">0</span>) : <span class="number">0</span>,</span><br><span class="line"> mousey = e ? <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, e.<span class="property">pageY</span> || e.<span class="property">clientY</span> || <span class="number">0</span>) : <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">mousex</span>: mousex,</span><br><span class="line"> <span class="attr">mousey</span>: mousey,</span><br><span class="line"> <span class="attr">centerx</span>: mousex - screen.<span class="property">width</span> / <span class="number">2</span>,</span><br><span class="line"> <span class="attr">centery</span>: mousey - screen.<span class="property">height</span> / <span class="number">2</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="keyword">var</span> <span class="title class_">Point</span> = <span class="keyword">function</span> (<span class="params">x, y</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">x</span> = <span class="number">0</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">y</span> = <span class="number">0</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">set</span>(x, y);</span><br><span class="line"> };</span><br><span class="line"> <span class="comment">//点运算</span></span><br><span class="line"> <span class="title class_">Point</span>.<span class="property"><span class="keyword">prototype</span></span> = {</span><br><span class="line"> <span class="attr">constructor</span>: <span class="title class_">Point</span>,</span><br><span class="line"> <span class="attr">set</span>: <span class="keyword">function</span> (<span class="params">x, y</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">x</span> = x || <span class="number">0</span>; <span class="variable language_">this</span>.<span class="property">y</span> = y || <span class="number">0</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">copy</span>: <span class="keyword">function</span> (<span class="params">point</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">x</span> = point.<span class="property">x</span> || <span class="number">0</span>; <span class="variable language_">this</span>.<span class="property">y</span> = point.<span class="property">y</span> || <span class="number">0</span>; <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">multiply</span>: <span class="keyword">function</span> (<span class="params">x, y</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">x</span> *= x || <span class="number">1</span>; <span class="variable language_">this</span>.<span class="property">y</span> *= y || <span class="number">1</span>; <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">divide</span>: <span class="keyword">function</span> (<span class="params">x, y</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">x</span> /= x || <span class="number">1</span>; <span class="variable language_">this</span>.<span class="property">y</span> /= y || <span class="number">1</span>; <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">add</span>: <span class="keyword">function</span> (<span class="params">x, y</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">x</span> += x || <span class="number">0</span>; <span class="variable language_">this</span>.<span class="property">y</span> += y || <span class="number">0</span>; <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">subtract</span>: <span class="keyword">function</span> (<span class="params">x, y</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">x</span> -= x || <span class="number">0</span>; <span class="variable language_">this</span>.<span class="property">y</span> -= y || <span class="number">0</span>; <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">clampX</span>: <span class="keyword">function</span> (<span class="params">min, max</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">x</span> = <span class="title class_">Math</span>.<span class="title function_">max</span>(min, <span class="title class_">Math</span>.<span class="title function_">min</span>(<span class="variable language_">this</span>.<span class="property">x</span>, max)); <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">clampY</span>: <span class="keyword">function</span> (<span class="params">min, max</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">y</span> = <span class="title class_">Math</span>.<span class="title function_">max</span>(min, <span class="title class_">Math</span>.<span class="title function_">min</span>(<span class="variable language_">this</span>.<span class="property">y</span>, max)); <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">flipX</span>: <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">x</span> *= -<span class="number">1</span>; <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">flipY</span>: <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">y</span> *= -<span class="number">1</span>; <span class="keyword">return</span> <span class="variable language_">this</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="keyword">var</span> <span class="title class_">Factory</span> = <span class="keyword">function</span> (<span class="params">options</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span> = <span class="literal">null</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span> = <span class="literal">null</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_sto</span> = <span class="literal">null</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_width</span> = <span class="number">0</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_height</span> = <span class="number">0</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_scroll</span> = <span class="number">0</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_ribbons</span> = [];</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_options</span> = {</span><br><span class="line"> <span class="attr">id</span>: <span class="string">"bgCanvas"</span>,<span class="comment">//画板Id</span></span><br><span class="line"> <span class="comment">// backgroundColor: "#1f1f1f",//画板背景</span></span><br><span class="line"> <span class="attr">colorSaturation</span>: <span class="string">"80%"</span>,<span class="comment">//纯度</span></span><br><span class="line"> <span class="attr">colorBrightness</span>: <span class="string">"60%"</span>,<span class="comment">//亮度</span></span><br><span class="line"> <span class="attr">colorAlpha</span>: <span class="number">0.65</span>,<span class="comment">//透明度</span></span><br><span class="line"> <span class="attr">colorCycleSpeed</span>: <span class="number">6</span>,<span class="comment">//丝带不同块之间的色彩变化量</span></span><br><span class="line"> <span class="attr">verticalPosition</span>: <span class="string">"center"</span>,<span class="comment">//丝带相对于屏幕的初始位置：top/min 屏幕最上方，middle|center 中间，bottom|max 屏幕最下面</span></span><br><span class="line"> <span class="attr">horizontalSpeed</span>: <span class="number">200</span>,<span class="comment">//丝带水平方向移动速度参数（会乘以一个随机值）</span></span><br><span class="line"> <span class="attr">ribbonCount</span>: <span class="number">3</span>,<span class="comment">//同一时间丝带总条数</span></span><br><span class="line"> <span class="attr">strokeSize</span>: <span class="number">0</span>,<span class="comment">//公共边路径样式</span></span><br><span class="line"> <span class="attr">parallaxAmount</span>: -<span class="number">0.5</span>,<span class="comment">//滚动偏移参数，-1表示不偏移，0表示基于丝带只出现在页面最上面</span></span><br><span class="line"> <span class="attr">animateSections</span>: <span class="literal">true</span><span class="comment">//丝带块是否偏移，显得有动感</span></span><br><span class="line"> };</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_onDraw</span> = <span class="variable language_">this</span>.<span class="property">_onDraw</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_onResize</span> = <span class="variable language_">this</span>.<span class="property">_onResize</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_onScroll</span> = <span class="variable language_">this</span>.<span class="property">_onScroll</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">setOptions</span>(options);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">init</span>();</span><br><span class="line"> };</span><br><span class="line"> <span class="title class_">Factory</span>.<span class="property"><span class="keyword">prototype</span></span> = {</span><br><span class="line"> <span class="attr">constructor</span>: <span class="title class_">Factory</span>,</span><br><span class="line"> <span class="attr">setOptions</span>: <span class="keyword">function</span> (<span class="params">options</span>) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> options === <span class="string">"object"</span>) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> options) {</span><br><span class="line"> <span class="keyword">if</span> (options.<span class="title function_">hasOwnProperty</span>(key)) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_options</span>[key] = options[key];</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 class="comment">//初始化</span></span><br><span class="line"> <span class="attr">init</span>: <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="comment">//初始化画板</span></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span> = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">"canvas"</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"display"</span>] = <span class="string">"block"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"position"</span>] = <span class="string">"fixed"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"margin"</span>] = <span class="string">"0"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"padding"</span>] = <span class="string">"0"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"border"</span>] = <span class="string">"0"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"outline"</span>] = <span class="string">"0"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"left"</span>] = <span class="string">"0"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"top"</span>] = <span class="string">"0"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"width"</span>] = <span class="string">"100%"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"height"</span>] = <span class="string">"100%"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"z-index"</span>] = <span class="string">"-1"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">style</span>[<span class="string">"background-color"</span>] = <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">backgroundColor</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">id</span> = <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">id</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">_onResize</span>();</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span> = <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="title function_">getContext</span>(<span class="string">"2d"</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">clearRect</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="variable language_">this</span>.<span class="property">_width</span>, <span class="variable language_">this</span>.<span class="property">_height</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="property">globalAlpha</span> = <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">colorAlpha</span>;</span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">"resize"</span>, <span class="variable language_">this</span>.<span class="property">_onResize</span>);</span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">"scroll"</span>, <span class="variable language_">this</span>.<span class="property">_onScroll</span>);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(<span class="variable language_">this</span>.<span class="property">_canvas</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">catch</span> (e) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">"Canvas Context Error: "</span> + e.<span class="title function_">toString</span>());</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//开始绘画</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">_onDraw</span>();</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//生成一条丝带</span></span><br><span class="line"> <span class="attr">addRibbon</span>: <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">var</span> dir = <span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="title function_">random</span>(<span class="number">1</span>, <span class="number">9</span>)) > <span class="number">5</span> ? <span class="string">"right"</span> : <span class="string">"left"</span>,<span class="comment">//丝带延伸方向</span></span><br><span class="line"> stop = <span class="number">1000</span>,</span><br><span class="line"> hide = <span class="number">200</span>,</span><br><span class="line"> min = <span class="number">0</span> - hide,</span><br><span class="line"> max = <span class="variable language_">this</span>.<span class="property">_width</span> + hide,</span><br><span class="line"> movex = <span class="number">0</span>,</span><br><span class="line"> movey = <span class="number">0</span>,</span><br><span class="line"> startx = dir === <span class="string">"right"</span> ? min : max,<span class="comment">//起始点x左边</span></span><br><span class="line"> starty = <span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="title function_">random</span>(<span class="number">0</span>, <span class="variable language_">this</span>.<span class="property">_height</span>));<span class="comment">//起始点y左边</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//丝带生成的位置</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="regexp">/^(top|min)$/i</span>.<span class="title function_">test</span>(<span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">verticalPosition</span>)) {<span class="comment">//最上方</span></span><br><span class="line"> starty = <span class="number">0</span> + hide;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="regexp">/^(middle|center)$/i</span>.<span class="title function_">test</span>(<span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">verticalPosition</span>)) {<span class="comment">//中间</span></span><br><span class="line"> starty = <span class="variable language_">this</span>.<span class="property">_height</span> / <span class="number">2</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="regexp">/^(bottom|max)$/i</span>.<span class="title function_">test</span>(<span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">verticalPosition</span>)) {<span class="comment">//最下方</span></span><br><span class="line"> starty = <span class="variable language_">this</span>.<span class="property">_height</span> - hide;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">parallaxAmount</span> !== <span class="number">0</span>) {</span><br><span class="line"> starty += <span class="variable language_">this</span>.<span class="property">_scroll</span>;<span class="comment">//加上滚动</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> ribbon = [],</span><br><span class="line"> point1 = <span class="keyword">new</span> <span class="title class_">Point</span>(startx, starty),</span><br><span class="line"> point2 = <span class="keyword">new</span> <span class="title class_">Point</span>(startx, starty),</span><br><span class="line"> point3 = <span class="literal">null</span>,</span><br><span class="line"> color = <span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="title function_">random</span>(<span class="number">0</span>, <span class="number">360</span>)),</span><br><span class="line"> delay = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">//从起始位置开始生成一条丝带</span></span><br><span class="line"> <span class="comment">//丝带每个分部都是一个三角形，三点确定一个三角形，相邻三角形有一条公共边</span></span><br><span class="line"> <span class="keyword">while</span> (<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">if</span> (stop <= <span class="number">0</span>) <span class="keyword">break</span>;</span><br><span class="line"> stop--;</span><br><span class="line"> movex = <span class="title class_">Math</span>.<span class="title function_">round</span>((<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">1</span> - <span class="number">0.2</span>) * <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">horizontalSpeed</span>);</span><br><span class="line"> movey = <span class="title class_">Math</span>.<span class="title function_">round</span>((<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">1</span> - <span class="number">0.5</span>) * (<span class="variable language_">this</span>.<span class="property">_height</span> * <span class="number">0.25</span>));</span><br><span class="line"> point3 = <span class="keyword">new</span> <span class="title class_">Point</span>();</span><br><span class="line"> point3.<span class="title function_">copy</span>(point2);</span><br><span class="line"> <span class="keyword">if</span> (dir === <span class="string">"right"</span>) {</span><br><span class="line"> point3.<span class="title function_">add</span>(movex, movey);</span><br><span class="line"> <span class="keyword">if</span> (point2.<span class="property">x</span> >= max) <span class="keyword">break</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (dir === <span class="string">"left"</span>) {</span><br><span class="line"> point3.<span class="title function_">subtract</span>(movex, movey);</span><br><span class="line"> <span class="keyword">if</span> (point2.<span class="property">x</span> <= min) <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line"> ribbon.<span class="title function_">push</span>({</span><br><span class="line"> <span class="comment">//三点</span></span><br><span class="line"> <span class="attr">point1</span>: <span class="keyword">new</span> <span class="title class_">Point</span>(point1.<span class="property">x</span>, point1.<span class="property">y</span>),</span><br><span class="line"> <span class="attr">point2</span>: <span class="keyword">new</span> <span class="title class_">Point</span>(point2.<span class="property">x</span>, point2.<span class="property">y</span>),</span><br><span class="line"> <span class="attr">point3</span>: point3,</span><br><span class="line"> <span class="attr">color</span>: color,<span class="comment">//丝带颜色</span></span><br><span class="line"> <span class="attr">delay</span>: delay,<span class="comment">//延迟消失</span></span><br><span class="line"> <span class="attr">dir</span>: dir,<span class="comment">//方向</span></span><br><span class="line"> <span class="attr">alpha</span>: <span class="number">0</span>,<span class="comment">//透明度</span></span><br><span class="line"> <span class="attr">phase</span>: <span class="number">0</span> <span class="comment">//随机位移有关参数</span></span><br><span class="line"> });</span><br><span class="line"> <span class="comment">//公共边</span></span><br><span class="line"> point1.<span class="title function_">copy</span>(point2);</span><br><span class="line"> point2.<span class="title function_">copy</span>(point3);</span><br><span class="line"> delay += <span class="number">4</span>;</span><br><span class="line"> color += <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">colorCycleSpeed</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_ribbons</span>.<span class="title function_">push</span>(ribbon);</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//绘制一个三角形方块</span></span><br><span class="line"> <span class="attr">_drawRibbonSection</span>: <span class="keyword">function</span> (<span class="params">section</span>) {</span><br><span class="line"> <span class="keyword">if</span> (section) {</span><br><span class="line"> <span class="keyword">if</span> (section.<span class="property">phase</span> >= <span class="number">1</span> && section.<span class="property">alpha</span> <= <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (section.<span class="property">delay</span> <= <span class="number">0</span>) {</span><br><span class="line"> section.<span class="property">phase</span> += <span class="number">0.02</span>;</span><br><span class="line"> section.<span class="property">alpha</span> = <span class="title class_">Math</span>.<span class="title function_">sin</span>(section.<span class="property">phase</span>) * <span class="number">1</span>;</span><br><span class="line"> section.<span class="property">alpha</span> = section.<span class="property">alpha</span> <= <span class="number">0</span> ? <span class="number">0</span> : section.<span class="property">alpha</span>;</span><br><span class="line"> section.<span class="property">alpha</span> = section.<span class="property">alpha</span> >= <span class="number">1</span> ? <span class="number">1</span> : section.<span class="property">alpha</span>;</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">animateSections</span>) {</span><br><span class="line"> <span class="keyword">var</span> mod = <span class="title class_">Math</span>.<span class="title function_">sin</span>(<span class="number">1</span> + section.<span class="property">phase</span> * <span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">2</span>) * <span class="number">0.1</span>;</span><br><span class="line"> <span class="keyword">if</span> (section.<span class="property">dir</span> === <span class="string">"right"</span>) {</span><br><span class="line"> section.<span class="property">point1</span>.<span class="title function_">add</span>(mod, <span class="number">0</span>);</span><br><span class="line"> section.<span class="property">point2</span>.<span class="title function_">add</span>(mod, <span class="number">0</span>);</span><br><span class="line"> section.<span class="property">point3</span>.<span class="title function_">add</span>(mod, <span class="number">0</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> section.<span class="property">point1</span>.<span class="title function_">subtract</span>(mod, <span class="number">0</span>);</span><br><span class="line"> section.<span class="property">point2</span>.<span class="title function_">subtract</span>(mod, <span class="number">0</span>);</span><br><span class="line"> section.<span class="property">point3</span>.<span class="title function_">subtract</span>(mod, <span class="number">0</span>);</span><br><span class="line"> }</span><br><span class="line"> section.<span class="property">point1</span>.<span class="title function_">add</span>(<span class="number">0</span>, mod);</span><br><span class="line"> section.<span class="property">point2</span>.<span class="title function_">add</span>(<span class="number">0</span>, mod);</span><br><span class="line"> section.<span class="property">point3</span>.<span class="title function_">add</span>(<span class="number">0</span>, mod);</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> section.<span class="property">delay</span> -= <span class="number">0.5</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> s = <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">colorSaturation</span>,</span><br><span class="line"> l = <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">colorBrightness</span>,</span><br><span class="line"> c = <span class="string">"hsla("</span> + section.<span class="property">color</span> + <span class="string">", "</span> + s + <span class="string">", "</span> + l + <span class="string">", "</span> + section.<span class="property">alpha</span> + <span class="string">" )"</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">//绘制一个方块</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">save</span>();</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">parallaxAmount</span> !== <span class="number">0</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">translate</span>(<span class="number">0</span>, <span class="variable language_">this</span>.<span class="property">_scroll</span> * <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">parallaxAmount</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">beginPath</span>();</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">moveTo</span>(section.<span class="property">point1</span>.<span class="property">x</span>, section.<span class="property">point1</span>.<span class="property">y</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">lineTo</span>(section.<span class="property">point2</span>.<span class="property">x</span>, section.<span class="property">point2</span>.<span class="property">y</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">lineTo</span>(section.<span class="property">point3</span>.<span class="property">x</span>, section.<span class="property">point3</span>.<span class="property">y</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="property">fillStyle</span> = c;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">fill</span>();</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">strokeSize</span> > <span class="number">0</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="property">lineWidth</span> = <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">strokeSize</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="property">strokeStyle</span> = c;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="property">lineCap</span> = <span class="string">"round"</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">stroke</span>();</span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">restore</span>();</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//绘制丝带</span></span><br><span class="line"> <span class="attr">_onDraw</span>: <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="comment">//清空已经绘制过的丝带</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, t = <span class="variable language_">this</span>.<span class="property">_ribbons</span>.<span class="property">length</span>; i < t; ++i) {</span><br><span class="line"> <span class="keyword">if</span> (!<span class="variable language_">this</span>.<span class="property">_ribbons</span>[i]) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_ribbons</span>.<span class="title function_">splice</span>(i, <span class="number">1</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="title function_">clearRect</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="variable language_">this</span>.<span class="property">_width</span>, <span class="variable language_">this</span>.<span class="property">_height</span>);<span class="comment">//清空画板</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> a = <span class="number">0</span>; a < <span class="variable language_">this</span>.<span class="property">_ribbons</span>.<span class="property">length</span>; ++a) {</span><br><span class="line"> <span class="keyword">var</span> ribbon = <span class="variable language_">this</span>.<span class="property">_ribbons</span>[a],</span><br><span class="line"> numSections = ribbon ? ribbon.<span class="property">length</span> : <span class="number">0</span>,</span><br><span class="line"> numDone = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">//绘制整条丝带</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> b = <span class="number">0</span>; b < numSections; ++b) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="title function_">_drawRibbonSection</span>(ribbon[b])) {</span><br><span class="line"> numDone++;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//丝带已经全部飘过屏幕，设置为null,函数前面会自动清理</span></span><br><span class="line"> <span class="keyword">if</span> (numDone >= numSections) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_ribbons</span>[a] = <span class="literal">null</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"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">_ribbons</span>.<span class="property">length</span> < <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">ribbonCount</span> && <span class="title class_">Math</span>.<span class="title function_">random</span>() > <span class="number">0.99</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">addRibbon</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"> <span class="title function_">requestAnimationFrame</span>(<span class="variable language_">this</span>.<span class="property">_onDraw</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//重新设置窗体大小时需要获取窗体大小</span></span><br><span class="line"> <span class="attr">_onResize</span>: <span class="keyword">function</span> (<span class="params">e</span>) {</span><br><span class="line"> <span class="keyword">var</span> screen = <span class="title function_">screenInfo</span>(e);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_width</span> = screen.<span class="property">width</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_height</span> = screen.<span class="property">height</span>;</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">_canvas</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">width</span> = <span class="variable language_">this</span>.<span class="property">_width</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_canvas</span>.<span class="property">height</span> = <span class="variable language_">this</span>.<span class="property">_height</span>;</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">_context</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_context</span>.<span class="property">globalAlpha</span> = <span class="variable language_">this</span>.<span class="property">_options</span>.<span class="property">colorAlpha</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="attr">_onScroll</span>: <span class="keyword">function</span> (<span class="params">e</span>) {</span><br><span class="line"> <span class="keyword">var</span> screen = <span class="title function_">screenInfo</span>(e);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_scroll</span> = screen.<span class="property">scrolly</span>;</span><br><span class="line"> }</span><br><span class="line"> }; <span class="keyword">return</span> <span class="title class_">Factory</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"><span class="keyword">new</span> <span class="title class_">Ribbons</span>({</span><br><span class="line"> <span class="attr">ribbonCount</span>: <span class="number">5</span>,</span><br><span class="line"> <span class="attr">parallaxAmount</span>: -<span class="number">0.99</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>效果示例：</p><p><img src="../images/hugo-build/pic07.gif" alt="效果图"></p><h4 id="蜂窝粒子">蜂窝粒子</h4><p><a href="https://git.hust.cc/canvas-nest.js/">蜂窝粒子动画</a>是基于 <code>canvas-nest.min.js</code> 生成的动态特效，<a href="https://github.com/hustcc/canvas-nest.js">canvas-nest.min.js</a> 是使用 HTML5 Canvas 生成色带 JS 库，不依赖 jQuery，使用原生的 JavaScript，使用非常容易和简单。</p><p>打开复制后的「 assets.html 」文件，在最后面插入以下代码：</p><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"><script type="text/javascript" color="122,103,238" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script></span><br></pre></td></tr></table></figure><p>效果示例：</p><p><img src="../images/hugo-build/pic08.gif" alt="效果图"></p><p>如果需要更改粒子颜色，只需修改 <code>color</code> 的 RGB 即可。</p><h4 id="轮播背景">轮播背景</h4><p>此部分内容来自 <a href="https://lewky.cn/posts/hugo-3.html/">@雨临Lewis</a>。轮播图效果的生成依赖于 jQuery，使用非常简单。打开复制后的「 assets.html 」文件，在最后面插入以下代码。</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/[email protected]/jquery.backstretch.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line">{{- /* 自定义的js文件 */ -}}</span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/custom.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>然后在新建的「 custom.js 」文件中插入以下代码：</p><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 轮播背景图片 */</span></span><br><span class="line">$(<span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line">$.<span class="title function_">backstretch</span>([</span><br><span class="line"><span class="string">"/images/1.jpg"</span>,</span><br><span class="line"><span class="string">"/images/2.jpg"</span>,</span><br><span class="line"><span class="string">"/images/3.jpg"</span></span><br><span class="line">], { <span class="attr">duration</span>: <span class="number">60000</span>, <span class="attr">fade</span>: <span class="number">1500</span> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>效果示例：</p><p><img src="../images/hugo-build/pic09.gif" alt="效果图"></p><p>由于使用的是动态资源，所以图片一定要存放在「 static 」文件夹中，否则效果无法生效，或者你也可以将图片存放在图床中，使用图片的 URL 链接。</p><h2 id="简码速查">简码速查</h2><p>Markdown 的内容格式虽然简单，但是有时它也不尽如人意，在很多方面都无法很好地支持，这时内容编辑者就需要使用纯 HTML 来扩展可能性，这与 Markdown 语法的优美简洁相矛盾。</p><p>为了尽可能避免使用 HTML 以保持内容简洁，Hugo 创建了 Shortcodes 来规避这些限制。<code>Shortcodes</code> 是内容文件中的一个简单片段，可以生成合理的 HTML 代码，并且符合 Markdown 的设计哲学。在站点生成时，Hugo Shortcodes 将轻松合并到更改中，避免了可能复杂的搜索和替换操作。</p><p>通常无需记忆具体的语法，只要知道每个参数所代表的意义即可，你可以借助<a href="https://shurufa.sogou.com/?r=mac&t=pinyin">搜狗拼音输入法</a>的自定义短语功能，将预设好参数的标签插件添加新短语，从而通过缩写实现快捷输入。</p><p><img src="../images/hugo-build/pic10.png" alt="自定义短语"></p><p><img src="../images/hugo-build/pic11.png" alt="添加新短语"></p><h3 id="内置简码">内置简码</h3><p>Hugo 附带了一组预定义的 Shortcodes，实现了一些常见的用法，以保持 Markdown 内容简洁。更具体的内容参数请阅读 <a href="https://gohugo.io/content-management/shortcodes/">Hugo Shortcodes 文档</a>，下表仅为简单使用的短代码简表。</p><table><thead><tr><th style="text-align:center">作用</th><th>语法</th></tr></thead><tbody><tr><td style="text-align:center">图片</td><td><code>{{*figure src="图片地址" title="图片标题"*>}}</code></td></tr><tr><td style="text-align:center">gist</td><td><code>{{*gist 用户名 gist-id*>}}</code></td></tr><tr><td style="text-align:center">语法高亮</td><td><code>{{*highlight html*>}}</code>……<code>{{*/highlight*>}}</code></td></tr><tr><td style="text-align:center">前置参数</td><td><code>{{*param Front-matter参数名称*>}}</code></td></tr><tr><td style="text-align:center">页面链接</td><td>用法1：<code>[文章标题]({{*ref "文章文件的相对路径地址"*>}})</code><br>用法2：<code>[文章标题]({{*relref "文章标题的碎片链接地址"*>}})</code></td></tr><tr><td style="text-align:center">推特</td><td><code>{{*tweet user="用户名" id="文章ID"*>}}</code></td></tr><tr><td style="text-align:center">YouTube</td><td>用法1：<code>{{*vimeo 视频ID*>}}</code><br>用法2：<code>{{*youtube 视频ID*>}}</code></td></tr></tbody></table><h3 id="扩展简码">扩展简码</h3><p><a href="https://hugodoit.pages.dev/zh-cn/theme-documentation-extended-shortcodes/">DoIt</a> 主题在 Hugo 内置的 Shortcodes 的基础上提供多个扩展的 Shortcodes，支持 Markdown 或 HTML 格式。更具体的内容参数请阅读 <a href="https://hugodoit.pages.dev/zh-cn/theme-documentation-extended-shortcodes/">DoIt 扩展 Shortcodes 使用文档</a>，下表仅为简单使用的短代码简表。由于找不到合适的转义字符，使用时请记得将 <code>*</code> 替换为空格。</p><table><thead><tr><th style="text-align:center">作用</th><th>语法</th></tr></thead><tbody><tr><td style="text-align:center">自定义样式</td><td><code>{{*style "CSS样式"*>}}</code> ……<code>{{*/style*>}}</code></td></tr><tr><td style="text-align:center">链接</td><td><code>{{*link "链接地址" 链接的标题 "悬停在链接上显示的提示"*>}}</code></td></tr><tr><td style="text-align:center">图片</td><td><code>{{*image src="图片地址" caption="图片的标题" title="悬停在图片上显示的提示"*>}}</code></td></tr><tr><td style="text-align:center">提示横幅</td><td><code>{{*admonition 横幅类型 "标题" true或false*>}}</code>……<code>{{*/admonition*>}}</code><br>其中横幅类型可选：note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote</td></tr><tr><td style="text-align:center">数据图表</td><td>用法1：<code>{{*mermaid*>}}</code>……<code>{{*/mermaid*>}}</code><br>用法2：<code>{{*echarts*>}}</code>……<code>{{*/echarts*>}}</code><br>具体请参考 <a href="https://mermaidjs.github.io/">mermaid</a> 和 <a href="https://echarts.apache.org/zh/index.html">Echarts</a></td></tr><tr><td style="text-align:center">地图</td><td><code>{{*mapbox 经度值 纬度值 缩放比例*>}}</code></td></tr><tr><td style="text-align:center">音乐</td><td>用法1：<code>{{*music url="本地音乐链接" name=音乐名字 artist=歌手 cover="音乐封面"*>}}</code><br>用法2：<code>{{*music "第三方音乐链接"*>}}</code><br>用法3：<code>{{*music 音乐平台 音乐类型 音乐ID*>}}</code><br>其中音乐平台可选：netease、tecent、kugou、xiami、baidu；音乐类型可选：song、playlist、album、search、artist</td></tr><tr><td style="text-align:center">bilibili</td><td><code>{{*bilibili BVid 分P数*>}}</code></td></tr><tr><td style="text-align:center">打字动画</td><td>简单打字动画：<code>{{*typeit*>}}</code>……<code>{{*/typeit*>}}</code><br><br>代码打字动画：<code>{{*typeit code=代码语言名称*>}}</code>…… <code>{{*/typeit*>}}</code><br>段落打字动画：<code>{{*typeit group=paragraph*>}}</code>…… <code>{{*/typeit*>}}</code></td></tr><tr><td style="text-align:center">Javascript</td><td><code>{{*script*>}}</code>……<code>{{*/script*>}}</code></td></tr><tr><td style="text-align:center">友链</td><td><code>{{*friend "名字" "友链" "头像" "简介"*>}}</code></td></tr><tr><td style="text-align:center">项目展示</td><td><code>{{*showcase "项目标题" "项目简介" "项目封面图" "项目链接"*>}}</code></td></tr><tr><td style="text-align:center">数学公式</td><td><code>{{*math*>}}</code>……<code>{{*/math*>}}</code></td></tr></tbody></table><h2 id="参考内容">参考内容</h2><ul><li><a href="https://gohugo.io/">Hugo 文档</a></li><li><a href="https://hugodoit.pages.dev/zh-cn/theme-documentation-basics/">DoIt 主题文档</a></li><li><a href="https://gohugo.io/content-management/shortcodes/">Hugo Shortcodes 文档</a></li><li><a href="https://hugodoit.pages.dev/zh-cn/theme-documentation-extended-shortcodes/">DoIt 扩展 Shortcodes 文档</a></li><li><a href="https://guanqr.com/tech/website/hugo-shortcodes-customization/">自定义 Hugo Shortcodes 简码</a></li><li><a href="https://lewky.cn/posts/hugo-3.html/">LoveIt 主题美化与博客功能增强</a></li></ul>]]></content>
<categories>
<category> Program </category>
</categories>
<tags>
<tag> 博客 </tag>
</tags>
</entry>
<entry>
<title>只专注写作！GitHub Actions 自动部署博客</title>
<link href="/github-actions/"/>
<url>/github-actions/</url>
<content type="html"><![CDATA[<p><a href="https://github.com/">GitHub</a> 是一个面向开源及私有软件项目的托管平台，只支持 <a href="https://git-scm.com/">Git</a> 作为唯一的版本库格式进行托管。如果你要将基于 <a href="https://zyuyu.top/hexo-build/">Hexo</a> 或 <a href="https://zyuyu.top/hugo-build/">Hugo</a> 生成的网站代码推送到 GitHub，一般要通过命令行或者 GitHub Desktop 客户端将源代码推送到 GitHub 仓库。</p><p>但是，由于没有数据库，静态博客往往需要生成静态文件才能部署到 GitHub 仓库，并通过 <a href="https://docs.github.com/cn/actions">GitHub Actions</a> 生成网页供他人浏览。这就意味着你在推送代码之前，还需要执行 Hexo 或 Hugo 静态文件生成的命令，不仅耗费时间和精力，还加大了我们的写作负担。有没有一种方法能够简化代码推送的流程，让我们能够专注于写作，并且像其他自媒体平台那样，写完文章上传就行了呢？</p><p>当然可以！你可以通过在 GitHub Actions 中创建 Workflows，由 GitHub Actions 自动帮你完成生成静态文件的过程，你只需要写作 + 上传即可，大大地节省了你的时间和精力。</p><p><img src="../images/github-actions/pic01.png" alt="nice"></p><p>下面我将介绍基于 Hexo 或 Hugo 生成的网站代码推送到 GitHub 的一般部署和自动部署两种方式，你可以根据自己的需求选择其中一种方式即可。</p><h2 id="一般部署">一般部署</h2><p>静态博客没有数据库，所以要通过执行 Hexo 或 Hugo 的页面生成命令渲染得到 HTML 标准的文件（即 <code>Public</code> 文件夹的内容），然后通过 Git 命令行或 GitHub Desktop 客户端推送到 GitHub 平台，再经由 GitHub Actions 完成页面的建立和部署，最终由 GitHub Pages 生成你的网页域名以供他人访问浏览。</p><p><img src="../images/github-actions/pic02.jpg" alt="操作流程"></p><h3 id="创建仓库">创建仓库</h3><p>存储库用于存储各种项目的源代码，按人群可分为个人仓库和组织仓库，按可见性可分为公开仓库和私有仓库。在创建仓库之前，需要前往 <a href="https://github.com/">GitHub 官网</a>，点击 <code>Sign up</code>，根据提示操作，创建你的个人账户。</p><p>注册并完成邮件验证后，在任何页面的右上角，点击 <code>+</code> 下拉菜单选择 <code>New repository</code> 新建存储库。</p><p><img src="../images/github-actions/pic03.png" alt="新建存储库"></p><p>进入页面，填写仓库的名称，仓库可见性默认选择 <code>Public</code> 即可。关于仓库的名称，GitHub 为用户提供域名后缀为 <code>.github.io</code> 的 GitHub Pages 公共网页服务，如果你想要生成 <code>http://owner.github.io/</code> 的网址，则需要填写 <code>owner.github.io</code>。如果你填入除此之外的任意字眼，如 <code>blog</code>，将会生成<code>http://owner.github.io/blog/</code> 的网址。</p><p><img src="../images/github-actions/pic04.png" alt="填写仓库名称"></p><p><img src="../images/github-actions/pic05.png" alt="仓库可见性"></p><p>如果你想要修改仓库的名称，可进入仓库的「 Setting -> General -> Repository name -> Rename 」修改。</p><p>接着打开本地 Hexo 或 Hugo 的配置文件 <code>_config.yml</code> 或 <code>config.toml</code>，修改你的网站网址 <code>url</code> 或 <code>baseURL</code>。</p><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Hexo</span></span><br><span class="line"><span class="attr">url:</span> <span class="string">https://owner.github.io/</span> <span class="comment"># 网址，如为子域名，需设置root</span></span><br><span class="line"><span class="attr">root:</span> <span class="comment"># 子域名时设置，如/blog/，此时url为https://owner.github.io/blog</span></span><br></pre></td></tr></table></figure><figure class="highlight toml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># hugo</span></span><br><span class="line"><span class="attr">baseURL</span> = <span class="string">"https://owner.github.io/"</span> <span class="comment"># 子域名则填写https://owner.github.io/blog</span></span><br></pre></td></tr></table></figure><h3 id="托管代码">托管代码</h3><p>GitHub 是一个免费托管开源代码的 Git 服务器，Git 负责在你计算上本地发生的、与 GitHub 有关的所有内容。如果想要在命令行中使用 Git，就需要下载、安装和配置 <a href="https://git-scm.com/downloads">Git</a>，此部分请阅读「 命令行 」进行操作；如果想要在本地使用 Git，但不想使用命令行，可以下载并安装 <a href="https://desktop.github.com/">GitHub Desktop</a> 客户端，此部分请阅读「 Desktop 」进行操作。</p><p>需要提前说明的是，网址位于仓库的「 Setting -> Pages 」，如果推送代码之后，你没有看到 GitHub Pages 有网址，你需要在 Branch 选择 main ，然后点保存，稍等片刻后刷新就会出现。</p><h4 id="命令行">命令行</h4><p>下载并安装最新版本的 <a href="https://git-scm.com/downloads">Git</a> 后，你需要使用 <code>git config</code> 关联 GitHub，在桌面右键单击 <code>Git Bash Here</code>，依次执行以下命令，记得修改引号内的内容。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git config --global user.name <span class="string">"注册时的用户名"</span></span><br><span class="line">git config --global user.email <span class="string">"注册时的用户邮箱"</span></span><br></pre></td></tr></table></figure><p>从 Git 连接到 GitHub 存储库时，需要使用 HTTPS 或 SSH 向 GitHub 进行身份验证。如果你使用 HTTPS 连接，每次通过 Git 推送代码都需要输入用户名和用户密码；如果你使用 SSH 连接，就必须在每台计算机上生成用于从 GitHub 进行推送或拉取的 SSH 密钥，推送代码时就无需输入用户名和用户密码。你可以在仓库的「 Code 」页面，选择 <code>< > Code</code> 下拉菜单来获取 HTTPS 或 SSH 地址。</p><p>下面的执行命令用于生成 SSH 密钥，如果你使用 HTTPS 连接，则无需阅读此部分。请注意，请在私人电脑使用 SSH密钥。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">ssh-keygen -t rsa -C <span class="string">"注册时的用户邮箱"</span></span><br></pre></td></tr></table></figure><p>此时会询问是否需要密码，不需要直接继续按三次回车即可，然后执行以下命令，获取你生成的密钥。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">cd</span> ~/.ssh</span><br><span class="line"><span class="built_in">cat</span> id_rsa.pub</span><br></pre></td></tr></table></figure><p>鼠标选中后右键选择 <code>Copy</code> ，回到 GitHub 的页面，点击「 头像 -> Settings -> SSH and GPG keys -> New SSH key 」，将复制的内容粘贴到 Key 位置。配置完成后，你可以通过执行 <code>ssh -T [email protected]</code> 命令测试是否成功配置 SSH Key。</p><p><img src="../images/github-actions/pic07.png" alt="SSH keys"></p><p>如果你使用 Hexo 生成网页，在托管之前，要先打开配置文件 <code>_config.yml</code>，拉到最后面，填入如下内容，前提是你已经安装 <a href="https://github.com/hexojs/hexo-deployer-git">hexo-deployer-git</a> 插件。</p><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">https://github.com/owner/repo.git</span> <span class="string">或</span> <span class="string">[email protected]:owner/repo.git</span> <span class="comment"># HTTPS和SSH地址二选一</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">main</span></span><br></pre></td></tr></table></figure><p>然后在 Hexo 根目录，右键单击 <code>Git Bash Here</code> ，依次执行以下命令即可托管到 GitHub 仓库。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure><p>如果你使用 Hugo 生成网页，则在生成静态文件（<code>Public</code>）之后，在 Hugo 根目录，右键单击 <code>Git bash here</code>，执行以下命令托管到 GitHub 仓库。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">cd</span> public</span><br><span class="line">git init</span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">"first commit"</span></span><br><span class="line">git branch -M main </span><br><span class="line"></span><br><span class="line"><span class="comment"># 若是HTTPS地址，则执行这部分</span></span><br><span class="line">git remote add origin https://github.com/owner/repo.git</span><br><span class="line">git push -u origin main</span><br><span class="line"></span><br><span class="line"><span class="comment"># 若是SSH地址，则执行这部分</span></span><br><span class="line">git remote add origin [email protected]:owner/repo.git</span><br><span class="line">git push -u origin main</span><br></pre></td></tr></table></figure><h4 id="Desktop">Desktop</h4><p><a href="https://desktop.github.com/">GitHub 桌面版</a>的操作很傻瓜式，直接复制粘贴替换即可，不需要记很多命令，也不需要申请 SSH 密钥等一系列操作，缺点就是会占用本地空间。</p><p>下载安装后，进入页面登录后选择 <code>Clone a repository</code>，选择刚刚新建的仓库，选择 <code>Local Path</code> 用于放置博客 <code>public</code> 的内容。</p><p><img src="../images/github-actions/pic08.png" alt="clone"></p><p>执行 Hexo 或 Hugo 静态文件生成命令后，将位于「 Public 」中的所有内容复制到 <code>Local Path</code> 中，它就会自动出现在 GitHub 桌面版的界面中，然后按照下图指示操作就会自动部署到 GitHub 仓库中。</p><p><img src="../images/github-actions/pic09.png" alt="fetch"></p><h2 id="自动部署">自动部署</h2><p>GitHub Actions 本质就是 GitHub 推出的持续集成工具，旨在为开发人员提供一种围绕持续集成自动化其工作流程的方法，帮助开发人员完成构建、部署、安排重复性任务等。通过设置工作流，你只需要将代码推送到 GitHub 仓库，而无需在本地执行 Hexo 或 Hugo 生成静态文件的命令，GitHub Actions 会自动帮你完成。</p><p><img src="../images/github-actions/pic10.jpg" alt="操作流程"></p><h3 id="创建仓库-2">创建仓库</h3><p>存储库用于存储各种项目的源代码，按人群可分为个人仓库和组织仓库，按可见性可分为公开仓库和私有仓库。在创建仓库之前，需要前往 <a href="https://github.com/">GitHub 官网</a>，点击 <code>Sign up</code>，根据提示操作，创建你的个人账户。</p><p>注册并完成邮件验证后，在任何页面的右上角，点击 <code>+</code> 下拉菜单选择 <code>New repository</code> 新建存储库。</p><p><img src="../images/github-actions/pic03.png" alt="新建存储库"></p><p>根据可见性，GitHub 仓库可分为公有仓库（Public）和私有仓库（Private）。如果你要创建可以被访问的网页，即 <code>GitHub Pages</code>，就需要将源代码放在公有仓库。而私有仓库可以进行权限控制，只有拥有权限的人才能访问并修改它，也就是说，别人是看不到的你的私有仓库的。</p><p>利用 GitHub 仓库的特点，你可以在 GitHub 创建两个空仓库，一个私有仓库存放博客源码，如<code>owner/blog</code> ，下面简称私库，一个公开仓库存放生成的 <code>public</code> 文件，如<code>owner/owner.github.io</code> ，下面简称公库。</p><p><img src="../images/github-actions/pic11.png" alt="私库和公库"></p><p>如此一来，你上传的文章的源文件既不会被人看到，还能够根据设置密钥对连接私库和公库，当私库中有内容更新的时候，GitHub Actions 将自动生成文件到公库，公库也会自动生成页面。</p><h3 id="生成密钥">生成密钥</h3><p>GitHub 是一个免费托管开源代码的 Git 服务器，Git 负责在你计算上本地发生的、与 GitHub 有关的所有内容。下载并安装最新版本的 <a href="https://git-scm.com/downloads">Git</a> 后，你需要使用 <code>git config</code> 关联 GitHub，在桌面右键单击 <code>Git Bash Here</code>，依次执行以下命令，记得修改引号内的内容。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git config --global user.name <span class="string">"注册时的用户名"</span></span><br><span class="line">git config --global user.email <span class="string">"注册时的用户邮箱"</span></span><br></pre></td></tr></table></figure><p>然后继续执行以下命令，获取公库和私库的 SSH 密钥对。</p><figure class="highlight cmd"><table><tr><td class="code"><pre><span class="line">ssh-keygen -f github-deploy-key</span><br></pre></td></tr></table></figure><p>此命令会生成 <code>github-deploy-key</code> 和 <code>github-deploy-key.pub</code>两个文件，一般位于 <code>C:\Users\用户名</code> 中。注意，如果你要创建多对密钥对，记得要将 <code>github-deploy-key</code> 更改为其他单词，如 <code>hugo-deploy-key</code>，否则它会覆盖掉之前的密钥对。</p><p>如果你不想它们存放于 C 盘的用户文件夹中，也可以在指定位置，右键单击 <code>Git Bash Here</code>，执行上述命令，获取 SSH 密钥对。但注意，请不要将密钥对存放于本地 Hexo 或 Hugo 的仓库中。</p><p>接下来，在建立的私库中，打开「 Settings -> Secrets -> Actions -> Actions secrets 」，点击 <code>New repository secret</code>，将 <code>github-deploy-key</code> 中的所有内容复制到 <code>Secret</code>中，<code>Name</code>填写 <code>DEPLOY_KEY</code>。</p><p><img src="../images/github-actions/pic12.png" alt="actions secrets"></p><p>在建立的公库中，打开「 Settings -> Secrets -> Deploy keys 」，点击 <code>Add deploy key</code>，将 <code>github-deploy-key.pub</code> 中的所有内容复制到 <code>Secret</code>中，<code>Name</code>填写 <code>DEPLOY_KEY</code>。</p><p><img src="../images/github-actions/pic06.png" alt="deploy keys"></p><h3 id="工作流程">工作流程</h3><p>SSH 密钥对配置好后，在 Hexo 或 Hugo 根目录中创建 <code>.github\workflows\deploy.yml</code>，将下面的内容复制到里面，并根据自己的情况修改其中的内容。</p><p>Hexo 请复制这个 👇：</p><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">name:</span> <span class="string">自动部署</span></span><br><span class="line"></span><br><span class="line"><span class="attr">env:</span></span><br><span class="line"> <span class="attr">GIT_USER:</span> <span class="string">owner</span> <span class="comment"># 请修改为你的用户名</span></span><br><span class="line"> <span class="attr">GIT_EMAIL:</span> <span class="string">[email protected]</span> <span class="comment"># 请修改为你的用户邮箱</span></span><br><span class="line"> <span class="attr">THEME_REPO:</span> <span class="string">jerryc127/hexo-theme-butterfly</span> <span class="comment"># 请修改为你的主题仓库</span></span><br><span class="line"> <span class="attr">THEME_BRANCH:</span> <span class="string">master</span> <span class="comment"># 请修改为你的主题分支</span></span><br><span class="line"> <span class="attr">DEPLOY_REPO:</span> <span class="string">owner/blog</span> <span class="comment"># 请修改为你的公库</span></span><br><span class="line"> <span class="attr">DEPLOY_BRANCH:</span> <span class="string">main</span> <span class="comment"># 请修改为你的公库分支</span></span><br><span class="line"></span><br><span class="line"><span class="attr">on:</span></span><br><span class="line"> <span class="attr">push:</span></span><br><span class="line"> <span class="attr">branches:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">main</span> <span class="comment"># 请修改为你的私库分支</span></span><br><span class="line"> <span class="attr">paths-ignore:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">README.md</span></span><br><span class="line"></span><br><span class="line"><span class="attr">jobs:</span></span><br><span class="line"> <span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">自动部署</span></span><br><span class="line"> <span class="attr">runs-on:</span> <span class="string">ubuntu-latest</span></span><br><span class="line"> <span class="attr">steps:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">检查仓库分支</span> <span class="comment"># 如果使用git clone下载主题请使用这个</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/checkout@v2</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">ref:</span> <span class="string">main</span> <span class="comment"># 请修改为你的私库分支</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">检查主题仓库分支</span> <span class="comment"># 如果使用git clone下载主题请使用这个</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/checkout@v2</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">repository:</span> <span class="string">${{</span> <span class="string">env.THEME_REPO</span> <span class="string">}}</span> </span><br><span class="line"> <span class="attr">ref:</span> <span class="string">${{</span> <span class="string">env.THEME_BRANCH</span> <span class="string">}}</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">themes/butterfly</span> <span class="comment"># 请修改为你的主题名称</span></span><br><span class="line"> </span><br><span class="line"> <span class="comment"># - name: 检查仓库 # 如果使用git submodule下载主题请使用这个即可，并删掉前面两个步骤</span></span><br><span class="line"> <span class="comment"># uses: actions/checkout@v3</span></span><br><span class="line"> <span class="comment"># with:</span></span><br><span class="line"> <span class="comment"># submodules: true</span></span><br><span class="line"> <span class="comment"># fetch-depth: 0</span></span><br><span class="line"> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Node</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/setup-node@v1</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">node-version:</span> <span class="string">'16.x'</span> <span class="comment">#请修改为你所用的node版本，如12.X、16.X</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Hexo</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> export TZ='Asia/Shanghai'</span></span><br><span class="line"><span class="string"> npm install hexo-cli -g</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">缓存</span> <span class="string">Hexo</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/cache@v1</span></span><br><span class="line"> <span class="attr">id:</span> <span class="string">cache</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">node_modules</span></span><br><span class="line"> <span class="attr">key:</span> <span class="string">${{runner.OS}}-${{hashFiles('**/package-lock.json')}}</span></span><br><span class="line"> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装依赖</span></span><br><span class="line"> <span class="attr">if:</span> <span class="string">steps.cache.outputs.cache-hit</span> <span class="type">!=</span> <span class="string">'true'</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span> <span class="comment"># 请填写你安装的所有依赖的执行命令</span></span><br><span class="line"> <span class="string">npm</span> <span class="string">install</span> <span class="string">--save</span></span><br><span class="line"> <span class="string">npm</span> <span class="string">install</span> <span class="string">hexo-renderer-pug</span> <span class="string">hexo-renderer-stylus</span> <span class="string">--save</span></span><br><span class="line"> <span class="string">npm</span> <span class="string">install</span> <span class="string">hexo-deployer-git</span> <span class="string">--save</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">生成静态文件</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> hexo clean</span></span><br><span class="line"><span class="string"> hexo generate</span></span><br><span class="line"><span class="string"></span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">部署到Github</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">peaceiris/actions-gh-pages@v3</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">deploy_key:</span> <span class="string">${{</span> <span class="string">secrets.DEPLOY_KEY</span> <span class="string">}}</span> <span class="comment"># DEPLOY_KEY要与前面的secrets名称一致</span></span><br><span class="line"> <span class="attr">external_repository:</span> <span class="string">${{</span> <span class="string">env.DEPLOY_REPO</span> <span class="string">}}</span></span><br><span class="line"> <span class="attr">publish_branch:</span> <span class="string">${{</span> <span class="string">env.DEPLOY_BRANCH</span> <span class="string">}}</span></span><br><span class="line"> <span class="attr">publish_dir:</span> <span class="string">./public</span></span><br><span class="line"> <span class="attr">user_name:</span> <span class="string">${{</span> <span class="string">env.GIT_USER</span> <span class="string">}}</span></span><br><span class="line"> <span class="attr">user_email:</span> <span class="string">${{</span> <span class="string">env.GIT_EMAIL</span> <span class="string">}}</span></span><br></pre></td></tr></table></figure><p>Hugo 请复制这个 👇：</p><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">name:</span> <span class="string">自动部署</span></span><br><span class="line"></span><br><span class="line"><span class="attr">env:</span></span><br><span class="line"> <span class="attr">GIT_USER:</span> <span class="string">owner</span> <span class="comment"># 请修改为你的用户名</span></span><br><span class="line"> <span class="attr">GIT_EMAIL:</span> <span class="string">[email protected]</span> <span class="comment"># 请修改为你的用户邮箱</span></span><br><span class="line"> <span class="attr">THEME_REPO:</span> <span class="string">HEIGE-PCloud/DoIt</span> <span class="comment"># 请修改为你的主题仓库</span></span><br><span class="line"> <span class="attr">THEME_BRANCH:</span> <span class="string">main</span> <span class="comment"># 请修改为你的主题分支</span></span><br><span class="line"> <span class="attr">DEPLOY_REPO:</span> <span class="string">owner/blog</span> <span class="comment"># 请修改为你的公库</span></span><br><span class="line"> <span class="attr">DEPLOY_BRANCH:</span> <span class="string">main</span> <span class="comment"># 请修改为你的公库分支</span></span><br><span class="line"></span><br><span class="line"><span class="attr">on:</span></span><br><span class="line"> <span class="attr">push:</span></span><br><span class="line"> <span class="attr">branches:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">main</span> <span class="comment"># 请修改为你的私库分支</span></span><br><span class="line"> <span class="attr">paths-ignore:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">README.md</span></span><br><span class="line"></span><br><span class="line"><span class="attr">jobs:</span></span><br><span class="line"> <span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">自动部署</span></span><br><span class="line"> <span class="attr">runs-on:</span> <span class="string">ubuntu-latest</span></span><br><span class="line"> <span class="attr">steps:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">检查仓库分支</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/checkout@v3</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">ref:</span> <span class="string">main</span> <span class="comment"># 请修改为你的私库分支</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">检查主题仓库分支</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/checkout@v3</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">repository:</span> <span class="string">${{</span> <span class="string">env.THEME_REPO</span> <span class="string">}}</span> </span><br><span class="line"> <span class="attr">ref:</span> <span class="string">${{</span> <span class="string">env.THEME_BRANCH</span> <span class="string">}}</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">themes/DoIt</span> <span class="comment"># 请修改为你的主题名称</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Hugo</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">peaceiris/actions-hugo@v2</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">hugo-version:</span> <span class="string">'latest'</span></span><br><span class="line"> <span class="attr">extended:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">生成静态文件</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">hugo</span> <span class="string">--minify</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">部署到Github</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">peaceiris/actions-gh-pages@v3</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">deploy_key:</span> <span class="string">${{</span> <span class="string">secrets.ACTIONS_DEPLOY_KEY</span> <span class="string">}}</span> <span class="comment"># ACTIONS_DEPLOY_KEY要与前面的secrets名称一致</span></span><br><span class="line"> <span class="attr">external_repository:</span> <span class="string">${{</span> <span class="string">env.DEPLOY_REPO</span> <span class="string">}}</span></span><br><span class="line"> <span class="attr">publish_branch:</span> <span class="string">${{</span> <span class="string">env.DEPLOY_BRANCH</span> <span class="string">}}</span></span><br><span class="line"> <span class="attr">publish_dir:</span> <span class="string">./public</span></span><br><span class="line"> <span class="attr">user_name:</span> <span class="string">${{</span> <span class="string">env.GIT_USER</span> <span class="string">}}</span></span><br><span class="line"> <span class="attr">user_email:</span> <span class="string">${{</span> <span class="string">env.GIT_EMAIL</span> <span class="string">}}</span></span><br></pre></td></tr></table></figure><p>需要说明的是，由于 Hexo 需要安装依赖，但 <code>node_modules</code> 依赖包过大，一般不会上传到 GitHub 仓库中，所以创建工作流时要加入「 安装依赖 」这一步骤，这里要将你安装的依赖（插件）的所有命令都写上去。</p><p>简单来说，创建工作流其实就是将你在本地的所有操作命令都放到了 GitHub Actions，让 GitHub 帮你完成，包括 Hexo 或 Hugo 的相关命令，但这不意味着你本地仓库就可以删掉了，为了避免风险，建议你还是要保留本地仓库。工作流创建的语法也比较好理解，你还可以自行阅读 <a href="https://docs.github.com/cn/actions">GitHub Actions 官方文档</a> 创建自己的工作流。</p><p>工作流创建完成后，你只需要将 Hexo 或 Hugo 根目录所有的内容 <code>Push</code> 到私库即可。当你在异地时，只需要直接在私库中 <code>Add File</code> 上传写好的文章就行了，GitHub Actions 会自动帮你完成之后的操作流程。至于怎么推送内容到仓库，你可以阅读下文「 托管代码 」进行操作。</p><p>需要注意的是，这个 <code>deploy.yml</code> 并不是长期有效的，我曾在搜索引擎中搜索到了不少的 <code>workflows</code>，尝试失败了很多次，目前这份来自 <a href="https://www.gagahappy.com/github-actions-workflows-hexo/">@睡月花儿</a>。我觉得关键在于 <code>uses</code> 这个参数所使用的 <code>Actions</code> 操作，所以当你收到来自 GitHub 的失败邮件时，请自行前往 <a href="https://hexo.io/zh-cn/docs/github-pages">Hexo</a> 或 <a href="https://gohugo.io/hosting-and-deployment/hosting-on-github/">Hugo</a> 以及 <a href="https://github.com/marketplace">GitHub Actions Marketplace</a> 替换最新的 <code>uses</code>。</p><h3 id="托管代码-2">托管代码</h3><p>GitHub 是一个免费托管开源代码的 Git 服务器，Git 负责在你计算上本地发生的、与 GitHub 有关的所有内容。如果想要在命令行中使用 Git，就需要下载、安装和配置 <a href="https://git-scm.com/downloads">Git</a>，此部分请阅读「 命令行 」进行操作；如果想要在本地使用 Git，但不想使用命令行，可以下载并安装 <a href="https://desktop.github.com/">GitHub Desktop</a> 客户端，此部分请阅读「 Desktop 」进行操作。</p><p>需要提前说明的是，网址位于仓库的「 Setting -> Pages 」，如果推送代码之后，你没有看到 GitHub Pages 有网址，你需要在 Branch 选择 main ，然后点保存，稍等片刻后刷新就会出现。</p><h4 id="命令行-2">命令行</h4><p>下载并安装最新版本的 <a href="https://git-scm.com/downloads">Git</a> 后，你需要使用 <code>git config</code> 关联 GitHub，在桌面右键单击 <code>Git Bash Here</code>，依次执行以下命令，记得修改引号内的内容。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git config --global user.name <span class="string">"注册时的用户名"</span></span><br><span class="line">git config --global user.email <span class="string">"注册时的用户邮箱"</span></span><br></pre></td></tr></table></figure><p>从 Git 连接到 GitHub 存储库时，需要使用 HTTPS 或 SSH 向 GitHub 进行身份验证。如果你使用 HTTPS 连接，每次通过 Git 推送代码都需要输入用户名和用户密码；如果你使用 SSH 连接，就必须在每台计算机上生成用于从 GitHub 进行推送或拉取的 SSH 密钥，推送代码时就无需输入用户名和用户密码。你可以在仓库的「 Code 」页面，选择 <code>< > Code</code> 下拉菜单来获取 HTTPS 或 SSH 地址。</p><p>下面的执行命令用于生成 SSH 密钥，如果你使用 HTTPS 连接，则无需阅读此部分。请注意，请在私人电脑使用 SSH密钥。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">ssh-keygen -t rsa -C <span class="string">"注册时的用户邮箱"</span></span><br></pre></td></tr></table></figure><p>此时会询问是否需要密码，不需要直接继续按三次回车即可，然后执行以下命令，获取你生成的密钥。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">cd</span> ~/.ssh</span><br><span class="line"><span class="built_in">cat</span> id_rsa.pub</span><br></pre></td></tr></table></figure><p>鼠标选中后右键选择 <code>Copy</code> ，回到 GitHub 的页面，点击「 头像 -> Settings -> SSH and GPG keys -> New SSH key 」，将复制的内容粘贴到 Key 位置。配置完成后，你可以通过执行 <code>ssh -T [email protected]</code> 命令测试是否成功配置 SSH Key。</p><p><img src="../images/github-actions/SSH-keys.png" alt="SSH keys"></p><p>接着打开 Hexo 或 Hugo 根目录，右键单击 <code>Git Bash Here</code> ，依次执行以下命令即可托管到 GitHub 仓库。</p><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git init</span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">"first commit"</span></span><br><span class="line">git branch -M main </span><br><span class="line"></span><br><span class="line"><span class="comment"># 若是HTTPS地址，则执行这部分</span></span><br><span class="line">git remote add origin https://github.com/owner/repo.git</span><br><span class="line">git push -u origin main</span><br><span class="line"></span><br><span class="line"><span class="comment"># 若是SSH地址，则执行这部分</span></span><br><span class="line">git remote add origin [email protected]:owner/repo.git</span><br><span class="line">git push -u origin main</span><br></pre></td></tr></table></figure><p>注意的是，如果你使用 Hexo 生成网页，并且在工作流中设置了 <a href="https://github.com/hexojs/hexo-deployer-git">hexo-deployer-git</a> 插件的安装命令，在托管之前，需要修改配置文件 <code>_config.yml</code>，在 <code>repo</code> 处填入你的公库地址。</p><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">https://github.com/owner/repo.git</span> <span class="string">或</span> <span class="string">[email protected]:owner/repo.git</span> <span class="comment"># HTTPS和SSH地址二选一</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">main</span></span><br></pre></td></tr></table></figure><h4 id="Desktop-2">Desktop</h4><p><a href="https://desktop.github.com/">GitHub 桌面版</a>的操作很傻瓜式，直接复制粘贴替换即可，不需要记很多命令，也不需要申请 SSH 密钥等一系列操作，缺点就是会占用本地空间。下载安装后，进入页面登录后选择 <code>Clone a repository</code>，选择刚刚新建的私库，选择 <code>Local Path</code> 用于放置博客源代码。注意的是，为避免出错，建议不要将 Hexo 或 Hugo 根目录作为 <code>Local Path</code>。</p><p><img src="../images/github-actions/pic08.png" alt="clone"></p><p>然后将 Hexo 或 Hugo 根目录中的所有内容复制到 <code>Local Path</code> 中，它就会自动出现在 GitHub 桌面版的界面中，然后按照下图指示操作就会自动部署到 GitHub 仓库中。</p><p><img src="../images/github-actions/pic09.png" alt="fetch"></p><h2 id="参考内容">参考内容</h2><ul><li><a href="https://docs.github.com/cn">GitHub 官方文档</a></li><li><a href="https://gohugo.io/hosting-and-deployment/hosting-on-github/">Hugo Host on GitHub</a></li><li><a href="https://hexo.io/zh-cn/docs/github-pages">Hexo Host on GitHub</a></li><li><a href="https://www.gagahappy.com/github-actions-workflows-hexo/">GitHub Actions Workflows 部署 Hexo</a></li></ul>]]></content>
<categories>
<category> Program </category>
</categories>
<tags>
<tag> 博客 </tag>
</tags>
</entry>
<entry>
<title>非程序员的我，为什么要搭建自己的个人博客？</title>
<link href="/blog-build/"/>
<url>/blog-build/</url>
<content type="html"><![CDATA[<p>有人可能会问，你为什么要自己搭建博客？明明有公众号、简书、知乎那么多平台，何必折腾呢？</p><p>在回答这个问题之前，我希望你可以回想一下当遇到一些问题时，是不是会下意识地打开搜索引擎？然后过了很长一段时间，当你再碰到类似的问题，你是不是又打开搜索引擎再搜索？如此循环往复，时间和精力都被浪费掉了，而且还不一定能找到之前看到的答案。</p><p>但是，如果我拥有自己的知识库，将遇到过的问题记录下来，那么下次再遇到的时候，我只要在里面搜索一下，不就能立刻得到我想要的答案了嘛！😋😋😋 而搜索引擎应该在知识发现上发光发热！</p><p>所以，我希望的是能够建立自己个人的知识库，它具有我想要的功能，可以最大限度地自定义我的内容，而自建博客网站恰好是实现这一目的的方式。</p><p>搭建博客难吗？说难也难，因为你正在接触一件新事物，人们容易对新事物产生不适感。说容易也很容易，不会代码，不是程序员，只要会下载软件和打字，你就能自己搭建一个静态博客。</p><p><img src="../images/blog-build/pic01.gif" alt="表情包"></p><h2 id="静态博客">静态博客</h2><p>一个网站最基础的部分就是网页，如果要从 HTML 页面写起，显然成本太高，而博客生成器就很好地解决了网页编写的问题。一般来说，博客生成器分为静态和动态两种，目前比较流行的静态博客生成器有 <a href="https://hexo.io/zh-cn/">Hexo</a>、<a href="https://www.gohugo.cn/">Hugo</a>、<a href="https://www.vuepress.cn/">Vuepress</a>、<a href="https://www.jekyll.com.cn/">Jekyll</a> 等，动态博客生成器有 <a href="https://wordpress.org/">WordPress</a>、<a href="https://typecho.org/">Typecho</a>、<a href="https://halo.run/">Halo</a>、<a href="https://b3log.org/solo/">Solo</a> 等。</p><p>动态博客以数据库技术为基础，有前端和后端，后端可以用各种技术实现各种交互，功能更强，但是开发复杂。静态博客是纯前端的界面，没有登录功能和后端管理，功能更简单，比较好上手，比如本博客就是一个静态博客。</p><p>静态博客非常适合专注于内容的网站，通过静态网站生成器，你可以很简单地构建一个静态博客。由于目前我只使用过 <a href="https://hexo.io/zh-cn/">Hexo</a> 和 <a href="https://www.gohugo.cn/">Hugo</a> ，所以主要讲讲它们的使用体验。</p><p><img src="../images/blog-build/pic02.png" alt="Hugo和Hexo"></p><table><thead><tr><th style="text-align:center"></th><th style="text-align:center">Hexo</th><th style="text-align:center">Hugo</th></tr></thead><tbody><tr><td style="text-align:center">开发语言</td><td style="text-align:center">Node.js</td><td style="text-align:center">Go</td></tr><tr><td style="text-align:center">编译速度</td><td style="text-align:center">快</td><td style="text-align:center">很快</td></tr><tr><td style="text-align:center">主题丰富度</td><td style="text-align:center">很多</td><td style="text-align:center">多</td></tr><tr><td style="text-align:center">中文社区支持</td><td style="text-align:center">很好</td><td style="text-align:center">好</td></tr><tr><td style="text-align:center">自定义程度</td><td style="text-align:center">灵活</td><td style="text-align:center">更灵活</td></tr></tbody></table><p>在编译 🌍 方面，<code>Hugo</code> 是基于 <a href="https://baike.baidu.com/item/go/953521?fromtitle=Go%E8%AF%AD%E8%A8%80&fromid=3246011&fr=aladdin">Go</a> 语言编写的静态博客生成器，页面编译（生成）速度非常快，只需要几分之一秒就可以渲染一个经典的中型网站。<code>Hexo</code> 是基于 <a href="https://baike.baidu.com/item/node.js/7567977?fr=aladdin">Node.js</a> 语言编写的静态博客生成器，页面编译（生成）速度也快，但是没有 Hugo 快。在这一点上，你可以将页面编译的过程交给 GitHub Actions 自动完成，在一定程度上可以避免因速度产生的体验差异。</p><p>在主题 🎨 方面，<code>Hexo</code> 是由国人开发的，具有丰富的<a href="https://hexo.io/themes/">主题</a>，如果你在配置主题时遇到困难，在百度搜索 <code>Hexo+主题名称</code> 就能获得解决方法。<code>Hugo</code> 是由外国人开发的，大多数的<a href="https://themes.gohugo.io/">主题</a>也是由外国人提供的，页面设计更为简洁大方，目前国内使用人群比 Hexo 少，所以遇到问题很难在百度上找到解决方案。现在也有很多主题从 Hexo 迁移到 Hugo，你有时能在两边看到相同的主题样式。</p><p>在配置 🚩 方面，<code>Hexo</code> 需要单独配置 Hexo 和主题，由于具有丰富的<a href="https://hexo.io/plugins/">插件</a>系统，如果想要添加新功能，前往插件市场下载安装即可，因而对插件依赖性很强。<code>Hugo</code> 可以在一份文档中合并配置 Hexo 和主题，没有插件系统，更加简洁，如果想要自定义，需要熟悉一些 CSS 和 JS 语法。</p><p>在灵活性 🙆♀️ 方面，Hugo 具有和主题同样的目录，如果你对主题某些页面不满意，可以在 Hugo 根目录创建相同的文件，修改覆盖即可，这对主题更新十分友好，同时它还支持本地实时预览，即一边修改配置文件，一边预览修改效果。Hexo 目前不支持实时预览，需要刷新或者重新执行本地预览命令才能看到修改后的效果，如果你想要修改主题的某些页面，也不支持覆盖（除了 CSS 和 JS），需要进入主题目录进行修改，这就会对主题更新有一定程度的影响。</p><p>在迁移 🤝 方面，<code>Hugo</code> 配置文件有 TOML（主要）、YAML、JSON 三种格式，<code>Hexo </code>配置文件有 YAML（主要）、JSON 两种格式。不仅如此，两者文章的 <code>Front Matter </code>参数也存在差异，如果你要互相迁移，就需要使用脚本或者手动修改相应的格式和 Front Matter 参数，主要花费的是时间成本。但我更建议的是，单独建立两个站点，因为我也曾经在他们之间反复横跳，浪费了不少时间和精力，倒不如利用子域名的特性，将其中一个变为子站点，更为省功夫。</p><h2 id="搭建教程">搭建教程</h2><p>博客是个人表达的方式之一，搭建博客是实现这种目的路径之一。每个人都有自己独特的表达方式，我选用博客，是因为我更喜欢文字的表达，我选用自建博客，是因为我好奇我能不能做得到，在此之前我从未学习过 WEB 语言。</p><p>总的来说，静态博客操作起来还是比较繁琐的，一旦失败有可能要重头再来，但是当网页成功搭建的时候又是满满的成就感。所以，我建议你在操作之前能找到适合自己的表达方式，适合自己的才是最好的。</p><p>如果是新手的话，我更推荐先使用 Hugo，再使用 Hexo。我最初使用的是 Hexo，但是因为要同时配置 Hexo 和主题，配置完成后我都累了，而且经常飘红，搜索网页打开一个又一个才能解决。后来才发现了 Hugo，它建站很容易上手，当然这只是指使用 <a href="https://hugoloveit.com/zh-cn/">LoveIt</a>、<a href="https://hugodoit.pages.dev/zh-cn/">DoIt</a>、<a href="https://fixit.lruihao.cn/zh-cn/">FixIt</a> 这几个同源主题，它们有中文用户操作文档，而且配置文件只有一个 <code>config.toml</code>，只需要对照着主题文档修改就可以了。</p><p>需要注意的是，并不是所有 Hugo 主题都只有一个配置文件，有的主题是从别的生成器迁移过来的，尚未稳定，有的主题有好几个配置文件，操作比较繁琐，同样也并不是所有主题都有中文用户操作文档（<s>小声哔哔：感觉用完 Hugo，我需要报个英语班</s>）。</p><p>至于为什么现在用的是 Hexo，是因为我更喜欢左右布局的网页样式，Hugo 虽然也有，但是感觉离我的理想还差一点味道，当我从 Hugo 再回到 Hexo，我感觉操作轻松了不少，对静态博客的操作更熟悉了些。至于以后会不会再跳，我前文也已经说了，我更倾向于建立两个站点，新旧交接也算是一种历史的变迁嘛。</p><p>如果你使用 <a href="https://hexo.io/zh-cn/">Hexo</a> 搭建博客，推荐阅读「 <a href="https://zyuyu.top/hexo-build/">适合小白！基于 Hexo + Butterfly 搭建个人博客</a> 」这篇文章。</p><p>如果你使用 <a href="https://www.gohugo.cn/">Hugo</a> 搭建博客，推荐阅读「 <a href="https://zyuyu.top/hugo-build/">简单易上手！基于 Hugo + DoIt 搭建个人博客</a> 」这篇文章。</p><p>In the end，I wish you everything goes well ！💖💖💖</p><h2 id="参考内容">参考内容</h2><ul><li><a href="https://hexo.io/zh-cn/">Hexo 官方网站</a></li><li><a href="https://www.gohugo.cn/">Hugo 官方网站</a></li></ul>]]></content>
<categories>
<category> Program </category>
</categories>
<tags>
<tag> 博客 </tag>
</tags>
</entry>
<entry>
<title>谁说菜鸟不会数据分析：适合新手的入门书</title>
<link href="/9787121187803/"/>
<url>/9787121187803/</url>
<content type="html"><![CDATA[<p><img src="../images/9787121187803/book.png" alt="书籍简介"></p><p>很多人看到数据分析就望而却步，担心门槛高，无法迈入数据分析的门槛。</p><p>本书在降低学习难度方面做了大量尝试：基于通用的 Excel 工具，加上必知必会的数据分析概念，并且采用通俗易懂的讲解方式，努力将数据分析写成像小说一样通俗易懂，使读者可以在无形之中学会数据分析。</p><p>本书适合需要提升自身竞争力的职场新人；在市场营销、金融、财务、人力资源管理中需要作数据分析的人士；经常阅读经营分析、市场研究报告的各级管理人员；从事咨询、研究、分析等专业人士。</p><p><img src="../images/9787121187803/outline.png" alt="核心要点"></p><h2 id="分析入门">分析入门</h2><p><img src="../images/9787121187803/part01.png" alt="part01"></p><h2 id="分析流程">分析流程</h2><p><img src="../images/9787121187803/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>数据化管理：洞悉零售及电子商务运营</title>
<link href="/9787121234064/"/>
<url>/9787121234064/</url>
<content type="html"><![CDATA[<p><img src="../images/9787121234064/book.png" alt="书籍简介"></p><p>本书讲述两个年轻人在大公司销售、商品、电商、数据等部门工作的故事，通过大量案例深入浅出地讲解数据意识和零售思维。作者将各种数据分析方法融入到具体的业务场景中，最终形成数据化管理模型，从而帮助企业提高运营管理能力。本书全部案例均基于Excel，每个人都能快速上手应用并落地。</p><p><img src="../images/9787121234064/outline.png" alt="核心要点"></p><h2 id="数据与零售">数据与零售</h2><p><img src="../images/9787121234064/part01.png" alt="part01"></p><h2 id="销售与商品">销售与商品</h2><p><img src="../images/9787121234064/part02.png" alt="part02"></p><h2 id="电商与策略">电商与策略</h2><p><img src="../images/9787121234064/part03.png" alt="part03"></p><h2 id="方法与模板">方法与模板</h2><p><img src="../images/9787121234064/part04.png" alt="part04"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>游戏运营：高手进阶之路</title>
<link href="/9787121328480/"/>
<url>/9787121328480/</url>
<content type="html"><![CDATA[<p><img src="../images/9787121328480/book.png" alt="书籍简介"></p><p>本书是一本系统的、成体系的、注重运营效能、强化系统思维、提升专业认知的书籍。本书几乎完整覆盖了一个游戏运营人员日常工作中的方方面面，并从工作中具体的业务场景出发，归纳整理出各种解决问题的方法论。</p><p>本书为广大游戏从业者建立了完整的知识技能成长体系，包含两大岗位基本功—内容输出和协作推进，四大职业技能—活动策划、版本管理、用户运营、数据分析，三大通用能力—学习、管理、沟通能力。各个章节均独立成文，每篇内容至少深入解决一个问题。</p><p><img src="../images/9787121328480/outline.png" alt="核心要点"></p><h2 id="基本功">基本功</h2><p><img src="../images/9787121328480/part01.png" alt="part01"></p><h2 id="岗位技能">岗位技能</h2><p><img src="../images/9787121328480/part02.png" alt="part02"></p><h2 id="自我成长">自我成长</h2><p><img src="../images/9787121328480/part03.png" alt="part03"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>小群效应：席卷海量用户的隐性力量</title>
<link href="/9787508681467/"/>
<url>/9787508681467/</url>
<content type="html"><![CDATA[<p><img src="../images/9787508681467/book.png" alt="书籍简介"></p><p>互联网经济时代，新零售、网红经济、知识经济多受益于社群。用户的获取、留存及订单转化直接决定了一个社群的存亡。无论是 “ 做 ” 群还是 “ 用 ” 群，每个人都需要迭代常识：了解用户行为习惯，了解社群运行规律。</p><p>《社交红利》《即时引爆》的作者徐志斌历时两年，挖掘腾讯、百度、豆瓣的一手后台数据，从上百个产品中深度解读社群行为，通过大量生动案例总结出利用社交网络和海量用户进行沟通的方法论。</p><p><img src="../images/9787508681467/outline.png" alt="核心要点"></p><h2 id="主线">主线</h2><p><img src="../images/9787508681467/part01.png" alt="part01"></p><h2 id="辅线">辅线</h2><p><img src="../images/9787508681467/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>精益数据分析：通过数据分析驱动用户增长</title>
<link href="/9787115374769/"/>
<url>/9787115374769/</url>
<content type="html"><![CDATA[<p><img src="../images/9787115374769/book.png" alt="书籍简介"></p><p>本书展示了如何验证自己的设想、找到真正的客户、打造能赚钱的产品，以及提升企业知名度。30 多个案例分析，全球 100 多位知名企业家的真知灼见，为你呈现来之不易、经过实践检验的创业心得和宝贵经验，值得每位创业家和企业家一读。</p><p><img src="../images/9787115374769/outline.png" alt="核心要点"></p><h2 id="精益创业分析">精益创业分析</h2><p><img src="../images/9787115374769/part01.png" alt="part01"></p><h2 id="精益分析应用">精益分析应用</h2><p><img src="../images/9787115374769/part02.png" alt="part02"></p><h2 id="指标正常范围">指标正常范围</h2><p><img src="../images/9787115374769/part03.png" alt="part03"></p><h2 id="精益创业组织">精益创业组织</h2><p><img src="../images/9787115374769/part04.png" alt="part04"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>硅谷增长黑客实战笔记：每个人都需要的增长黑客思维</title>
<link href="/9787111588702/"/>
<url>/9787111588702/</url>
<content type="html"><![CDATA[<p><img src="../images/9787111588702/book.png" alt="书籍简介"></p><p>增长黑客这个词源于硅谷，简单说，这是一群以数据驱动营销、以迭代验证策略，通过技术手段实现爆发式增长的新型人才。近年来，互联网公司意识到这一角色可以发挥四两拨千斤的作用，因此对该职位的需求也如井喷式增长。</p><p>本书作者曾在增长黑客之父肖恩•埃利斯麾下担任增长负责人，用亲身经历为你总结出增长黑客必备的套路、内力和兵法。本书不仅有逻辑清晰的理论体系、干货满满的实践心得，还有 Pinterest､SoFi､探探､Keep 等中美知名互联网公司增长专家倾囊相授的一线实战经验。</p><p><img src="../images/9787111588702/outline.png" alt="核心要点"></p><h2 id="增长黑客概述">增长黑客概述</h2><p><img src="../images/9787111588702/part01.png" alt="part01"></p><h2 id="增长作战计划">增长作战计划</h2><p><img src="../images/9787111588702/part02.png" alt="part02"></p><h2 id="用户生命周期">用户生命周期</h2><p><img src="../images/9787111588702/part03.png" alt="part03"></p><h2 id="团队增长引擎">团队增长引擎</h2><p><img src="../images/9787111588702/part04.png" alt="part04"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>进化式运营：从互联网菜鸟到绝顶高手</title>
<link href="/9787121301780/"/>
<url>/9787121301780/</url>
<content type="html"><![CDATA[<p><img src="../images/9787121301780/book.png" alt="书籍简介"></p><p>互联网运营作为一个新兴的岗位，一方面它是企业的核心岗职，身负重任，另一方面，又由于其短暂的历史，缺乏成熟体系的工作方法论，而目前业界主流的运营方法却是从企业视角出发，存在极大的改进空间。</p><p>本书作者基于自身十年的互联网洞察、实践经验，并融合了信息论、心理学、经济学、管理学、甚至包括生态学、进化论等跨学科跨学业的知识，从无到有地构建了一套全新的互联网运营体系：基于用户视角的用户养成运营框架，并从产品运营过程中的四大生命周期入手，阐述如何灵活地将该运营框架运用于产品的各个生命周期，从而彻底地使所有运营从业者能够从各种运营困惑中解脱出来，由内而外地激发运营思路，从根本上提升运营工作成效，进而打造个人的核心运营竞争力。</p><p><img src="../images/9787121301780/outline.png" alt="核心要点"></p><h2 id="运营的概念">运营的概念</h2><p><img src="../images/9787121301780/part01.png" alt="part01"></p><h2 id="运营的框架">运营的框架</h2><p><img src="../images/9787121301780/part02.png" alt="part02"></p><h2 id="运营的周期">运营的周期</h2><p><img src="../images/9787121301780/part03.png" alt="part03"></p><h2 id="运营的实战">运营的实战</h2><p><img src="../images/9787121301780/part04.png" alt="part04"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>从零开始做运营：互联网运营人的入门书</title>
<link href="/9787508655659/"/>
<url>/9787508655659/</url>
<content type="html"><![CDATA[<p><img src="../images/9787508655659/book.png" alt="书籍简介"></p><p>在一个网站、产品从策划、上线、发展、成熟到衰落的过程中，除了产品设计与之休戚相关之外，与网站、产品的生命周期相适应的持续运营也至关重要，直接关系到网站、产品的发展与前景。</p><p>本书从运营是什么讲起，涉及内容运营、用户运营、活动运营、数据分析等多个方面，涵盖互联网运营的全部流程，从零开始讲述互联网运营工作，书中还结合自身经验，讨论了大量经典运营案例，以帮助读者更好地掌握运营的精髓与核心。</p><p><img src="../images/9787508655659/outline.png" alt="核心要点"></p><h2 id="运营概念">运营概念</h2><p><img src="../images/9787508655659/part01.png" alt="part01"></p><h2 id="运营工作">运营工作</h2><p><img src="../images/9787508655659/part02.png" alt="part02"></p><h2 id="运营思维">运营思维</h2><p><img src="../images/9787508655659/part03.png" alt="part03"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>运营之光2.0：我的互联网运营方法论与自白</title>
<link href="/9787121311543/"/>
<url>/9787121311543/</url>
<content type="html"><![CDATA[<p><img src="../images/9787121311543/book.png" alt="书籍简介"></p><p>在互联网行业内，“ 运营 ” 这个职能发展到一定阶段后，往往更需要有成熟的知识体系和工作方法来给予行业从业者以指引。</p><p>本书尤其难得之处在于：它既对 “ 什么是运营 ” 这样的概念认知类问题进行了解读，又带有大量实际的工作技巧、工作思维和工作方法，还包含很多对于运营的思考、宏观分析和建议，可谓内容完整而全面，同时书中加入作者亲历的大量真实案例，让全书读起来深入浅出、耐人寻味。</p><p>从内容的受众来说，它既有面向初入互联网行业的运营从业者的具体工作方法的讲解和建议，又有适合 3～5 年运营从业者阅读的一些案例解析、思考方法分享，也有适合创业者、互联网公司高管阅读的对一些运营体系搭建、不同类型产品所适合的运营方法等更为宏观的问题的解读。</p><p><img src="../images/9787121311543/outline.png" alt="核心要点"></p><h2 id="运营的认知">运营的认知</h2><p><img src="../images/9787121311543/part01.png" alt="part01"></p><h2 id="思维与技能">思维与技能</h2><p><img src="../images/9787121311543/part02.png" alt="part02"></p><h2 id="规律与逻辑">规律与逻辑</h2><p><img src="../images/9787121311543/part03.png" alt="part03"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>互联网思维独孤九剑：移动互联时代的思维革命</title>
<link href="/9787111460022/"/>
<url>/9787111460022/</url>
<content type="html"><![CDATA[<p><img src="../images/9787111460022/book.png" alt="书籍简介"></p><p>本书是国内第一部系统阐述互联网思维的著作，用 9 大互联网思维：用户思维、简约思维、极致思维、迭代思维、流量思维、社会化思维、大数据思维、平台思维、跨界思维，以专业的视角全方位解读移动互联网给传统产业带来的变革，涉及战略规划、商业模式设计、品牌建设、产品研发、营销推广、组织转型、文化变革等企业经营价值链条的各个方面。这是一部传统企业互联网转型必读的 “ 孙子兵法 ”，帮助我们开启对新商业文明时代的系统思考。</p><p><img src="../images/9787111460022/outline.png" alt="核心要点"></p><h2 id="传统企业触网">传统企业触网</h2><p><img src="../images/9787111460022/part01.png" alt="part01"></p><h2 id="互联网思维">互联网思维</h2><p><img src="../images/9787111460022/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 思维 </tag>
</tags>
</entry>
<entry>
<title>定位：有史以来对美国营销影响最大的观念</title>
<link href="/9787111326403/"/>
<url>/9787111326403/</url>
<content type="html"><![CDATA[<p><img src="../images/9787111326403/book.png" alt="书籍简介"></p><p>如果只看一本营销书籍，首选《定位》。</p><p>本书提出了被称为 “ 有史以来对美国营销影响最大的观念 ”——定位，改观了人类 “ 满足需求 ” 的旧有营销认识，开创了 “ 胜出竞争 ” 的营销之道。</p><p>在竞争日益激烈的今天，它揭示了现代企业经营的本质（争夺顾客），为企业阐明了获胜的要诀（赢得心智之战），是商业人士的必读之作。</p><p><img src="../images/9787111326403/outline.png" alt="核心要点"></p><h2 id="定位思想">定位思想</h2><p><img src="../images/9787111326403/part01.png" alt="part01"></p><h2 id="思想应用">思想应用</h2><p><img src="../images/9787111326403/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 营销 </tag>
</tags>
</entry>
<entry>
<title>疯传：让你的产品、思想、行为像病毒一样入侵</title>
<link href="/9787121275982/"/>
<url>/9787121275982/</url>
<content type="html"><![CDATA[<p><img src="../images/9787121275982/book.png" alt="书籍简介"></p><p>是什么让事物变得流行？</p><p>从买轿车、买衣服、吃三明治，到给孩子取名字，你是否知道为什么某些产品会大卖，某些故事被人们口口相传，某些电子邮件更易被转发，或者某些视频链接被疯狂地点击，某些谣言更具传播力，某些思想和行为像病毒一样入侵你的大脑……</p><p>这本书将为你揭示这些口口相传和社会传播背后的科学秘密，并且告诉你如何将产品、思想、行为设计成具有感染力和传播力的内容。</p><p><img src="../images/9787121275982/outline.png" alt="核心要点"></p><h2 id="STEPPS">STEPPS</h2><p><img src="../images/9787121275982/part01.png" alt="part01"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>增长黑客：如何低成本实现爆发式成长</title>
<link href="/9787508678535/"/>
<url>/9787508678535/</url>
<content type="html"><![CDATA[<p><img src="../images/9787508678535/book.png" alt="书籍简介"></p><p>脸谱网如何从默默无闻到坐拥二十几亿用户？爱彼迎、优步何以在短短时间估值超过百亿美元？领英怎样跨步成为全球领先的职业社交平台？这些初创公司实现爆发式成长的共同奥秘就是增长黑客。增长黑客是硅谷当下热门的新商业方法论，其精髓在于通过快节奏测试和迭代，以极低甚至零成本获取并留存用户。</p><p>作为最早提出 “ 增长黑客 ” 概念的理论先驱、带领 Dropbox 实现 500% 增长的实战领军人物，作者在书中分享了如何跨部门搭建增长黑客团队，以及实现用户和利润双增长的具体行动指南。</p><p><img src="../images/9787508678535/outline.png" alt="核心要点"></p><h2 id="内法">内法</h2><p><img src="../images/9787508678535/part01.png" alt="part01"></p><h2 id="外战">外战</h2><p><img src="../images/9787508678535/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>超级转化率：如何让客户快速下单</title>
<link href="/9787521710656/"/>
<url>/9787521710656/</url>
<content type="html"><![CDATA[<p><img src="../images/9787521710656/book.png" alt="书籍简介"></p><p>数百万的营销从业者每天都在想着卖货，找产品卖点、修改文案、买流量，但是只有很少一部分人在思考：一个消费者看到商品到下单会经历哪几步，在这些步骤中消费者在思考哪些问题。</p><p>本书运用超级转化率漏斗模型、下单三步法、陈勇转化六要素建立系统超级转化率思维，涵盖微信营销、搜索营销、信息流营销、电商营销、裂变营销、销售话术、App 优化、自我营销、创业到规模商业的四级良性增长引擎等运营全方位内容，揭秘 39 个线上线下营销转化案例。</p><p><img src="../images/9787521710656/outline.png" alt="核心要点"></p><h2 id="转化模型">转化模型</h2><p><img src="../images/9787521710656/part01.png" alt="part01"></p><h2 id="增长引擎">增长引擎</h2><p><img src="../images/9787521710656/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>超级运营术：运营人值得一读的好书</title>
<link href="/9787508670461/"/>
<url>/9787508670461/</url>
<content type="html"><![CDATA[<p><img src="../images/9787508670461/book.png" alt="书籍简介"></p><p>新产品上线，为什么仅仅 500 次转发能带来 300 个内测用户？</p><p>为什么每一次内容推送，都带来 APP 的一次卸载高峰？</p><p>同类活动那么多，怎样做才能超越竞品，占据头条？</p><p>为什么有的文案像 “ 小广告 ” ，有的文案像贴心老友？</p><p>创业公司与大平台的玩法有何不同？</p><p>……</p><p>如何从 “ 了解运营 ” 到 “ 精通运营 ”，可能是运营人的困惑。本书正是对这个问题的全面解答，作者总结 10 年运营经验，提出一套完整的运营方法论，并运用大量典型案例进行深入细致的阐述。</p><p>书中既有一以贯之的运营思维，也有拿来即用的运营执行细节；既有基本运营概念梳理，也有同一领域的案例对比；既有团队组建方案，也有个体成长计划。</p><p><img src="../images/9787508670461/outline.png" alt="outline"></p><h2 id="运营概念">运营概念</h2><p><img src="../images/9787508670461/part01.png" alt="part01"></p><h2 id="运营方法">运营方法</h2><p><img src="../images/9787508670461/part02.png" alt="part02"></p><h2 id="运营进阶">运营进阶</h2><p><img src="../images/9787508670461/part03.png" alt="part03"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>文案的基本修养：让你的广告更具影响力</title>
<link href="/9787521710342/"/>
<url>/9787521710342/</url>
<content type="html"><![CDATA[<p><img src="../images/9787521710342/book.png" alt="书籍简介"></p><p>这本书撰写时预设的读者是那些刚刚入行，或从事文案、创意工作时间不长，对于很多业务问题及相关名词、知识还心存困惑的初级创意从业人员。</p><p>书中所谈的，是那些可能会构成一个广告创意人员基本修养的认识。是 “ 认识 ”，所以更偏重道理，而非技巧。是 “ 道 ”，而非 “ 术 ”。有了这些基本的认识，才有可能把事情做对，才知道什么是对，什么是错，什么是好，什么是坏。这些，就是所谓 “ 基本修养 ”。</p><p><img src="../images/9787521710342/outline.png" alt="核心要点"></p><h2 id="广告产出">广告产出</h2><p><img src="../images/9787521710342/part01.png" alt="part01"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 文案 </tag>
</tags>
</entry>
<entry>
<title>麦肯锡教我的写作武器：从逻辑思考到文案写作</title>
<link href="/9787550215528/"/>
<url>/9787550215528/</url>
<content type="html"><![CDATA[<p><img src="../images/9787550215528/book.png" alt="书籍简介"></p><p>为什么麦肯锡的文案最具说服力？看问题永远能直击要害？</p><p>本书归纳麦肯锡公司盛行数十年的经典写作方法，结合作者自创极具实用价值的思考表达技巧，一次性帮你完成商务文案写作的四大关键目标，即逻辑思考、流畅写作、解决问题、超级说服力。</p><p><img src="../images/9787550215528/outline.png" alt="核心要点"></p><h2 id="基础篇">基础篇</h2><p><img src="../images/9787550215528/part01.png" alt="part01"></p><h2 id="应用篇">应用篇</h2><p><img src="../images/9787550215528/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 文案 </tag>
</tags>
</entry>
<entry>
<title>爆款文案：把文案变成“印钞机”</title>
<link href="/9787559611352/"/>
<url>/9787559611352/</url>
<content type="html"><![CDATA[<p><img src="../images/9787559611352/book.png" alt="书籍简介"></p><p>爆款 10W+ 文案是怎么写出来的？本书只聚焦一个点：文案如何卖掉产品，赚到钱。</p><p>本书介绍了 18 种文案方法，将文案拆解成标题抓人眼球—激发购买欲望—赢得读者信任—引导马上下单 4 个步骤，并展示了大量微信推文、电商详情页案例，图文结合，通俗易懂。</p><p><img src="../images/9787559611352/outline.png" alt="核心要点"></p><h2 id="激发购买欲望">激发购买欲望</h2><p><img src="../images/9787559611352/part01.png" alt="part01"></p><h2 id="赢得读者信任">赢得读者信任</h2><p><img src="../images/9787559611352/part02.png" alt="part02"></p><h2 id="引导马上下单">引导马上下单</h2><p><img src="../images/9787559611352/part03.png" alt="part03"></p><h2 id="标题抓人眼球">标题抓人眼球</h2><p><img src="../images/9787559611352/part04.png" alt="part04"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 文案 </tag>
</tags>
</entry>
<entry>
<title>电商数据分析与数据化运营：数据分析与决策技术丛书</title>
<link href="/9787111598190/"/>
<url>/9787111598190/</url>
<content type="html"><![CDATA[<p><img src="../images/9787111598190/book.png" alt="书籍简介"></p><p>本书对服饰行业的宏观而重要的业务体系、多维而立体的数据化运营指标，以及被行业所证明的数据化运营实例进行了全面、详细、深刻且独特的解析。书中涵盖了业务、数据、运营三大模块，并且三大模块并不是各自为营的，而是采取了 “ 业务中有数据，数据中有运营 ” 的表达思路——这才是 “ 数据化运营 ” 的真正实践。</p><p><img src="../images/9787111598190/outline.png" alt="outline"></p><h2 id="业务必知">业务必知</h2><p><img src="../images/9787111598190/part01.png" alt="part01"></p><h2 id="分析入门">分析入门</h2><p><img src="../images/9787111598190/part02.png" alt="part02"></p><h2 id="实战演练">实战演练</h2><p><img src="../images/9787111598190/part03.png" alt="part03"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 运营 </tag>
</tags>
</entry>
<entry>
<title>写给大家看的设计书：简单易懂的设计四原则</title>
<link href="/9787115404404/"/>
<url>/9787115404404/</url>
<content type="html"><![CDATA[<p><img src="../images/9787115404404/book.png" alt="书籍简介"></p><p>在这个创意无处不在的时代，越来越多的人成为设计师。简历、论文、PPT、个人主页、博客、活动海报、给客人的邮件、名片……，处处都在考验你的设计能力。</p><p>Robin Williams 将优秀设计的秘诀归纳为对比、重复、对齐和亲密性四条基本原则，并用简洁通俗、幽默生动的文笔，同时配以大量经过修改进行前后对比的实例图解和设计练习（并提供解答），直观清晰地传授给读者。通过本书，普通读者很快就能够自信地设计出专业级别的作品，而专业设计师也将从中获得灵感和解决问题的途径。</p><p><img src="../images/9787115404404/outline.png" alt="核心要点"></p><h2 id="设计原则">设计原则</h2><p><img src="../images/9787115404404/part01.png" alt="part01"></p><h2 id="字体设计">字体设计</h2><p><img src="../images/9787115404404/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 设计 </tag>
</tags>
</entry>
<entry>
<title>让创意更有黏性：创意直抵人心的六条路径</title>
<link href="/9787508642796/"/>
<url>/9787508642796/</url>
<content type="html"><![CDATA[<p><img src="../images/9787508642796/book.png" alt="书籍简介"></p><p>什么样的观点或创意具有强有力的黏性，能被他人牢牢记住？</p><p>本书根据大量的社会心理学研究案例，揭示让创意直抵人心的六条路径，即简单（精炼核心信息）、意外（吸引维持注意）、具体（帮人理解记忆）、可信（让人愿意相信）、情感（使人关心在乎）和故事（促人起而行动）。</p><p><img src="../images/9787508642796/outline.png" alt="核心要点"></p><h2 id="创意黏性">创意黏性</h2><p><img src="../images/9787508642796/part01.png" alt="part01"></p><h2 id="创意路径">创意路径</h2><p><img src="../images/9787508642796/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 思维 </tag>
</tags>
</entry>
<entry>
<title>逻辑思维，只要五步：适合逻辑小白的入门书</title>
<link href="/9787516409329/"/>
<url>/9787516409329/</url>
<content type="html"><![CDATA[<p><img src="../images/9787516409329/book.png" alt="书籍简介"></p><p>本书用最简洁易懂的方式教读者迅速成为有逻辑思维的人，短时间内让你解决问题、效率翻倍！工作中, 我们会看到这样的两种人：有的人还没有了解情况就马上开始工作，结果很快出现进退两难的情况；有的人就非常有逻辑和条理，能很好地带着其他同事顺利地完成工作。</p><p>不懂逻辑思维， 就会出现沟通不畅、越干活越多、效率低下、事情无法推进等等情况。本书将逻辑思考的方法总结金字塔图、并列型和串联型思考、MECE、树状图、矩形图五步，简洁易懂，帮助摆脱沟通不畅、效率低下、事情无法推进等情况。</p><p><img src="../images/9787516409329/outline.jpg" alt="核心要点"></p><h2 id="逻辑交流">逻辑交流</h2><p><img src="../images/9787516409329/part01.png" alt="part01"></p><h2 id="解决问题">解决问题</h2><p><img src="../images/9787516409329/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 思维 </tag>
</tags>
</entry>
<entry>
<title>金字塔原理：思考、表达和解决问题的逻辑</title>
<link href="/9787544294829/"/>
<url>/9787544294829/</url>
<content type="html"><![CDATA[<p><img src="../images/9787544294829/book.png" alt="书籍简介"></p><p>本书分为表达的逻辑、思考的逻辑、解决问题的逻辑和演示的逻辑 4 篇，结合案例说明金字塔结构的作用、基本形式、构造方法，位于金字塔各层级思想的逻辑关系，以及金字塔原理在写作、PPT 演示文稿制作、实际解决问题等各方面的应用。</p><p><img src="../images/9787544294829/outline.png" alt="核心要点"></p><h2 id="表达的逻辑">表达的逻辑</h2><p><img src="../images/9787544294829/part01.png" alt="part01"></p><h2 id="思考的逻辑">思考的逻辑</h2><p><img src="../images/9787544294829/part02.png" alt="part02"></p><h2 id="解决问题的逻辑">解决问题的逻辑</h2><p><img src="../images/9787544294829/part03.png" alt="part03"></p><h2 id="演示的逻辑">演示的逻辑</h2><p><img src="../images/9787544294829/part04.png" alt="part04"></p><h2 id="无结构推理">无结构推理</h2><p><img src="../images/9787544294829/part05.png" alt="part05"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 思维 </tag>
</tags>
</entry>
<entry>
<title>乌合之众：大众心理研究</title>
<link href="/9787511720870/"/>
<url>/9787511720870/</url>
<content type="html"><![CDATA[<p><img src="../images/9787511720870/book.png" alt="书籍简介"></p><p>本书指出，个人一旦进入群体中，他的个性便湮没，群体的思想占据统治地位；而群体的行为表现为无异议、情绪化和低智商。</p><p><img src="../images/9787511720870/outline.png" alt="核心要点"></p><h2 id="群体心理">群体心理</h2><p><img src="../images/9787511720870/part01.png" alt="part01"></p><h2 id="群体的意见和信念">群体的意见和信念</h2><p><img src="../images/9787511720870/part02.png" alt="part02"></p><h2 id="群体分类">群体分类</h2><p><img src="../images/9787511720870/part03.png" alt="part03"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 心理 </tag>
</tags>
</entry>
<entry>
<title>影响力：营销制胜的七大心理学武器</title>
<link href="/9787559656438/"/>
<url>/9787559656438/</url>
<content type="html"><![CDATA[<p><img src="../images/9787559656438/book.png" alt="书籍简介"></p><p>无论你是普通人还是为某一产品或事业观点游说的人，这都是一本基本的必读书，是你理解他人心理的基石。心理学家罗伯特·西奥迪尼为我们解释了为什么有些人具有说服力，而我们总是容易上当受骗。隐藏在冲动地顺从他人行为背后的 7 大心理武器，正是这一切的根源。</p><p>本书阐释顺从行为背后的互惠、承诺与一致、社会认同、喜好、权威、稀缺和联盟 7 大基本原则。动机不同，使用的武器也不同——完全陌生，使用互惠、喜好和联盟培养关系；基础关系，使用社会认同和权威减少不确定性；关系到位，使用承诺与一致和稀缺激发行为。</p><p><img src="../images/9787559656438/outline.png" alt="核心要点"></p><h2 id="影响力武器">影响力武器</h2><p><img src="../images/9787559656438/part01.png" alt="part01"></p><h2 id="七大武器">七大武器</h2><p><img src="../images/9787559656438/part02.png" alt="part02"></p>]]></content>
<categories>
<category> Learn </category>
</categories>
<tags>
<tag> 阅读 </tag>
<tag> 心理 </tag>
</tags>
</entry>
</search>