-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
1835 lines (1812 loc) · 153 KB
/
Copy pathsearch.xml
File metadata and controls
1835 lines (1812 loc) · 153 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>零基础搭建静态博客：Jekyll+GitHub Pages全流程指南</title>
<url>/posts/94ec1eda/</url>
<content><![CDATA[<p>搭建流程：</p>
<ul>
<li>下载安装配置Git</li>
<li>GitHub创建公共仓库</li>
<li>克隆本地仓库</li>
<li>克隆博客模板</li>
<li>博客基础功能设置</li>
<li>设置评论功能</li>
<li>上传GitHub</li>
</ul>
<h2 id="下载安装配置-Git"><a href="#下载安装配置-Git" class="headerlink" title="下载安装配置 Git"></a>下载安装配置 Git</h2><ul>
<li>下载 <a href="https://git-scm.com/">Git官网</a> & <a href="https://blog.csdn.net/m0_72983118/article/details/130546429">Git 安装配置参考以下教程</a></li>
</ul>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356305.png" alt="完成测试"></p>
<h2 id="GitHub-创建公共仓库"><a href="#GitHub-创建公共仓库" class="headerlink" title="GitHub 创建公共仓库"></a>GitHub 创建公共仓库</h2><ul>
<li>创建仓库名结尾为 * .github.io 的公共仓库</li>
<li>示范：ChenPeiming52001.github.io<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356841.png" alt="仓库创建"></li>
</ul>
<h2 id="克隆本地仓库"><a href="#克隆本地仓库" class="headerlink" title="克隆本地仓库"></a>克隆本地仓库</h2><ul>
<li>将刚刚创建好的空仓库克隆到本地</li>
</ul>
<ol>
<li><p>复制仓库中的 HTTPS 地址<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356309.png" alt="HTTPS"></p>
</li>
<li><p>在需要克隆的本地文件夹打开 Git 终端，粘贴的地址命令行并回车<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356802.png" alt="Git"></p>
</li>
<li><p>等待克隆完毕<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356759.png" alt="克隆完毕"></p>
</li>
</ol>
<h2 id="克隆博客模板"><a href="#克隆博客模板" class="headerlink" title="克隆博客模板"></a>克隆博客模板</h2><ul>
<li>打开博客模板项目 <a href="https://github.com/MingTechPro/ChenPeiming52001.github.io">ChenPeiming52001.github.io</a></li>
<li>博客模板 <a href="https://github.com/MingTechPro/ChenPeiming52001.github.io/releases">ChenPeiming52001.github.io 发行版</a></li>
<li><p>复制仓库中的 HTTPS 地址<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356535.png" alt="博客模板"></p>
</li>
<li><p>通过 Git 终端 克隆到本地<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356405.png" alt="Git"></p>
</li>
<li><p>打开下载好的项目，删除根目录里面 .git 文件夹和 _posts 、images 文件夹里面的文件</p>
</li>
<li>懒得删除可以下载打包好的 <code>ChenPeiming52001.github.io 发行版</code><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356937.png" alt="删除文件"></li>
</ul>
<h2 id="博客基础功能设置"><a href="#博客基础功能设置" class="headerlink" title="博客基础功能设置"></a>博客基础功能设置</h2><ul>
<li>博客的基础功能都可以在根目录 <font color=SpringGreen>_config.yml</font> 文件下设置</li>
</ul>
<h3 id="设置主页"><a href="#设置主页" class="headerlink" title="设置主页"></a>设置主页</h3><ul>
<li>title: ChenPeiming <code>设置自己博客的名称</code></li>
<li>location: 广东，广州 <code>设置自己所在的地区</code></li>
<li>company: CSDN <code>设置第三方链接名称</code></li>
<li>company_url: <a href="https://blog.csdn.net/cpm011023">https://blog.csdn.net/cpm011023</a> <code>设置第三方网络地址</code></li>
<li>name: ChenPeiming52001 <code>设置自己 GitHub 的名称</code></li>
<li>github_url: <a href="https://github.com/ChenPeiming52001">https://github.com/ChenPeiming52001</a> <code>设置自己 GitHub 的网络地址</code></li>
<li>description: 这是ChenPeiming的个人博客 <code>设置博客的描述</code></li>
<li>url: <a href="https://chenpeiming52001.github.io">https://chenpeiming52001.github.io</a> <code>设置个人博客的网络协议</code></li>
</ul>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356385.png" alt="设置主页标题"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356705.png" alt="设置主页标题"></p>
<h3 id="设置关于页"><a href="#设置关于页" class="headerlink" title="设置关于页"></a>设置关于页</h3><ul>
<li>introduce: 我是一个对学习充满热情、善于思考和寻找解决方案的人。 <code>设置个人介绍</code></li>
<li>email: <a href="mailto:chenpeiming52001@163.com">chenpeiming52001@163.com</a> <code>设置自己的邮箱</code></li>
<li>skill_software_keywords: [Java, Python] <code>软件开发标签</code></li>
<li>skill_j2ee_keywords: <code>J2EE开发标签</code></li>
<li>skill_mobile_app_keywords: <code>手机开发标签</code></li>
<li>skill_web_keywords: [HTML, CSS, JS, JQuery,SpringBoot, MySQL, MongoDB, PHP] <code>Web开发标签</code></li>
</ul>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356703.png" alt="设置关于页"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356350.png" alt="设置关于页"></p>
<h3 id="设置简历"><a href="#设置简历" class="headerlink" title="设置简历"></a>设置简历</h3><ul>
<li>将简历放在根目录下的 <code>assets\files</code> 件夹中</li>
<li>在根目录下 <code>about.md</code> 里面引入简历链接</li>
<li><code>ChenPeiming_CH.pdf</code> 替换为己的文件名称</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h3</span>></span>下载我的简历<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"><span class="tag"><<span class="name">a</span></span></span><br><span class="line"><span class="tag"> <span class="attr">role</span>=<span class="string">"button"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">class</span>=<span class="string">"btn btn-primary hvr-grow-shadow"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">href</span>=<span class="string">"/assets/files/ChenPeiming_CH.pdf"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">target</span>=<span class="string">"_blanks"</span></span></span><br><span class="line"><span class="tag">></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"flag-icon flag-icon-cn"</span>></span><span class="tag"></<span class="name">span</span>></span> 中文</span><br><span class="line"><span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356171.png" alt="设置简历"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356426.png" alt="设置简历"></p>
<h3 id="设置书签"><a href="#设置书签" class="headerlink" title="设置书签"></a>设置书签</h3><ul>
<li><p>书签🔖用于快速标记您喜欢使用的资源库/工具/书籍</p>
</li>
<li><p>书签展示内容可以在根目录 <font color=SpringGreen>bookmark.md</font> 文件下设置</p>
</li>
</ul>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356613.png" alt="设置书签"></p>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356646.png" alt="设置书签"></p>
<h2 id="设置评论功能"><a href="#设置评论功能" class="headerlink" title="设置评论功能"></a>设置评论功能</h2><ul>
<li><a href="https://console-e1.leancloud.cn/">LeanCloud 官网</a></li>
</ul>
<h3 id="注册-LeanCloud-账号"><a href="#注册-LeanCloud-账号" class="headerlink" title="注册 LeanCloud 账号"></a>注册 <a href="https://console-e1.leancloud.cn/register">LeanCloud</a> 账号</h3><p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356174.png" alt="注册LeanCloud账号"></p>
<h3 id="创建-LeanCloud-应用"><a href="#创建-LeanCloud-应用" class="headerlink" title="创建 LeanCloud 应用"></a>创建 LeanCloud 应用</h3><p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356828.png" alt="创建 LeanCloud 应用"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356993.png" alt="创建 LeanCloud 应用"></p>
<h3 id="设置-LeanCloud-应用"><a href="#设置-LeanCloud-应用" class="headerlink" title="设置 LeanCloud 应用"></a>设置 LeanCloud 应用</h3><ul>
<li><p>设置 Web 安全域名<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356087.png" alt="设置Web安全域名"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300007910.png" alt="设置Web安全域名"></p>
</li>
<li><p>获取 LeanCloud 应用凭证 AppID & AppKey<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356989.png" alt="AppID"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300008012.png" alt="AppKey"></p>
</li>
</ul>
<h3 id="设置魔改-Valine"><a href="#设置魔改-Valine" class="headerlink" title="设置魔改 Valine"></a>设置魔改 Valine</h3><ul>
<li>appId: Evlk9TNDwcQAIW9cC3NVx9bO-gzGzoHsz <code>填入刚刚复制的 AppID</code></li>
<li><p>appKey: 9TNYPTSFy6BvTeJnmxzBT7H9 <code>填入刚刚复制的 AppKey</code><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356356.png" alt="设置魔改Valine"></p>
</li>
<li><p><a href="https://c.runoob.com/front-end/703/">MD5加密工具</a> 可以将邮箱加密为 MD5</p>
</li>
<li>master: [‘33c0f3680c72dd299d9463a496cc7640’] <code>填入 MD5 加密后博主(自己)的邮箱</code></li>
<li>friends: [‘f652e9c510f5948f083d453a189b13bc’, ‘261225df065b70eafdef4c88eecdb55d’] <code>填入 MD5 加密后小伙伴的邮箱</code><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356876.png" alt="设置魔改Valine"></li>
</ul>
<h2 id="上传-GitHub"><a href="#上传-GitHub" class="headerlink" title="上传 GitHub"></a>上传 GitHub</h2><ul>
<li>上传文件<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356026.png" alt="上传文件"></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">git add .</span><br></pre></td></tr></table></figure>
<ul>
<li>添加上传添加消息<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356318.png" alt="添加上传添加消息"></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">git commit -m "部署博客"</span><br></pre></td></tr></table></figure>
<ul>
<li>选择上传分支<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404292356361.png" alt="选择上传分支"></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">git push origin main</span><br></pre></td></tr></table></figure>
<p><br></p>
<hr>
]]></content>
<categories>
<category>运维笔记</category>
</categories>
<tags>
<tag>Jekyll</tag>
<tag>静态网站</tag>
</tags>
</entry>
<entry>
<title>Markdown博客写作全流程：从文件创建到GitHub部署</title>
<url>/posts/f909e55e/</url>
<content><![CDATA[<p>手把手教你如何在博客写文章，<br>流程比较简单，主要分以下4步：</p>
<ul>
<li>创建Markdown文件</li>
<li>添加页面信息</li>
<li>写入博客文章内容</li>
<li>上传GitHub</li>
</ul>
<h2 id="创建Markdown文件"><a href="#创建Markdown文件" class="headerlink" title="创建Markdown文件"></a>创建Markdown文件</h2><p>先在博客本地 GitHub 仓库的 \_posts 文件下创建 一个以年份的文件夹 \2023 这个文件夹将放你一整年的文章。然后在 \2023 的文件夹里面创建命名为 “时间-文章名称.md” 的文件</p>
<p>.md 文件的命名规则：</p>
<ul>
<li>以时间开头：2023-12-13</li>
<li>后加上文章名称：blog-found 文章名称需要是英文的</li>
<li>在加上：.md</li>
<li>完整名称：2023-12-13-blog-found.md</li>
<li>命名有问题页面会渲染不出来</li>
</ul>
<h2 id="添加页面信息"><a href="#添加页面信息" class="headerlink" title="添加页面信息"></a>添加页面信息</h2><h3 id="标签含义"><a href="#标签含义" class="headerlink" title="标签含义"></a>标签含义</h3><ul>
<li>layout: 布局 “默认是post”</li>
<li>title: “标题”</li>
<li>author: 作者</li>
<li>category: 分类</li>
<li>tags: 标签</li>
</ul>
<p>写完通过这个网站验证一下格式，网站会帮我们优化。</p>
<p><a href="https://www.yamllint.com/">YAML验证器</a></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">layout:</span> <span class="string">post</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">"Markdown 博客写作指南"</span></span><br><span class="line"><span class="attr">author:</span> <span class="string">Chenpeiming</span></span><br><span class="line"><span class="attr">categories:</span> <span class="string">Markdown</span></span><br><span class="line"><span class="attr">tags:</span> [<span class="string">博客</span>] <span class="string">单个标签使用这个方式</span></span><br><span class="line"><span class="attr">tags:</span> <span class="string">多标签使用这种</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">博客</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">Markdown</span></span><br><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="meta"></span></span><br><span class="line"><span class="string">在文章需要被渲染到主页的内容后面，插入两个换行即可停止渲染。否则将整篇文章渲染到主页面！</span></span><br></pre></td></tr></table></figure>
<h2 id="写入博客文章内容"><a href="#写入博客文章内容" class="headerlink" title="写入博客文章内容"></a>写入博客文章内容</h2><h3 id="两种标题格式"><a href="#两种标题格式" class="headerlink" title="两种标题格式"></a>两种标题格式</h3><ul>
<li><p>使用两个以上 = 标记一级标题 和 使用两个以上 - 标记二级标题</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="section"># 一级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">## 二级标题</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<h1 id="一级标题"><a href="#一级标题" class="headerlink" title="一级标题"></a>一级标题</h1><h2 id="二级标题"><a href="#二级标题" class="headerlink" title="二级标题"></a>二级标题</h2></li>
</ul>
<p><hr><br></p>
<ul>
<li><p>使用 <code>#</code> 来表示标题，其中 <code>#</code> 的数量代表标题级别，共有六个级别。写文章建议使用二级标题、 三级标题来写，这样子会在文章的侧边栏生成目录（二级标题生成主标题、三级标题生成副标题）。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="section"># 一级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">## 二级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">### 三级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">#### 四级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">##### 五级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">###### 六级标题</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<h2 id="二级标题-1"><a href="#二级标题-1" class="headerlink" title="二级标题"></a>二级标题</h2><h3 id="三级标题"><a href="#三级标题" class="headerlink" title="三级标题"></a>三级标题</h3></li>
</ul>
<h3 id="三种设置段落格式"><a href="#三种设置段落格式" class="headerlink" title="三种设置段落格式"></a>三种设置段落格式</h3><p>直接连续输入文字即可自动生成段落，也可以使用以下三种方式设置段落。</p>
<ul>
<li><p>使用两个以上空格加上回车</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">使用 </span><br><span class="line">两个以说空格加上回车可以换行</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p>使用<br>两个以说空格加上回车可以换行</p>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>使用一个空行进行换行</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">使用</span><br><span class="line"></span><br><span class="line">一个空行进行换行</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p>使用</p>
<p>一个空行进行换行</p>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>使用 <code><br></code> 换行标签进行换行</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">使用 <span class="language-xml"><span class="tag"><<span class="name">br</span>></span></span> <span class="code">`<br>`</span> 换行标签进行换行</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p>使用 <br> <code><br></code> 换行标签进行换行</p>
</li>
</ul>
<h3 id="斜体文本、粗体文本和粗斜体文本"><a href="#斜体文本、粗体文本和粗斜体文本" class="headerlink" title="斜体文本、粗体文本和粗斜体文本"></a>斜体文本、粗体文本和粗斜体文本</h3><ul>
<li><p>使用 <code>*斜体文本*</code> 或 <code>_斜体文本_</code> 可以使文本变为斜体。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="emphasis">_斜体文本_</span></span><br><span class="line"></span><br><span class="line"><span class="emphasis">_斜体文本_</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p><em>斜体文本</em></p>
<p><em>斜体文本</em></p>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>使用 <code>**粗体文本**</code> 或 <code>__粗体文本__</code> 可以使文本加粗</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="strong">**粗体文本**</span></span><br><span class="line"></span><br><span class="line"><span class="strong">**粗体文本**</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p><strong>粗体文本</strong></p>
<p><strong>粗体文本</strong></p>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>使用 <code>***粗斜体文本***</code> 或 <code>___粗斜体文本___</code> 可以使文本变为斜体。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="strong">**<span class="emphasis">_粗斜体文本_</span>**</span></span><br><span class="line"></span><br><span class="line"><span class="strong">**<span class="emphasis">_粗斜体文本_</span>**</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p><strong><em>粗斜体文本</em></strong></p>
<p><strong><em>粗斜体文本</em></strong></p>
</li>
</ul>
<h3 id="分隔线、删除线和下划线"><a href="#分隔线、删除线和下划线" class="headerlink" title="分隔线、删除线和下划线"></a>分隔线、删除线和下划线</h3><ul>
<li><p>分隔线</p>
<p>使用三个以上的 <code>-</code> 、<code>_</code> 或 <code>*</code> 可以生成分隔线,也可以使用 <code><hr></code> 标签。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="section">---</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="language-xml"><span class="tag"><<span class="name">hr</span>></span></span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<hr>
<hr>
<hr>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>删除线</p>
<p>使用两个 <code>~</code> 在文字的两端加上两个波浪线 <code>~~删除线~~</code> 。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">~~删除线~~</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p><del>删除线</del></p>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>下划线</p>
<p>使用 <code><u></code> 标签来实现</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag"><<span class="name">u</span>></span></span>下划线文本<span class="language-xml"><span class="tag"></<span class="name">u</span>></span></span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p><u>下划线文本</u></p>
</li>
</ul>
<h3 id="脚注"><a href="#脚注" class="headerlink" title="脚注"></a>脚注</h3><p>脚注是对文本的补充说明，使用 <code>[^文本]</code> 。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">这是一个带有脚注的文本[^1]。</span><br><span class="line"></span><br><span class="line">[<span class="symbol">^1</span>]: <span class="link">这是一个脚注。</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p>这是一个带有脚注的文本<sup><a href="#fn_1" id="reffn_1">1</a></sup>。</p>
<blockquote id="fn_1">
<sup>1</sup>. 这是一个脚注。<a href="#reffn_1" title="Jump back to footnote [1] in the text."> ↩</a>
</blockquote>
<h3 id="列表和列表嵌套"><a href="#列表和列表嵌套" class="headerlink" title="列表和列表嵌套"></a>列表和列表嵌套</h3><ul>
<li><p>列表</p>
<p>使用 <code>+</code> 加号、 <code>-</code> 减号或 <code>*</code> 星号可以创建无序列表，使用 <code>1.</code> 数字加点可以创建有序列表。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="bullet">-</span> 无序列表项1</span><br><span class="line"><span class="bullet">-</span> 无序列表项2</span><br><span class="line"></span><br><span class="line"><span class="bullet">*</span> 无序列表项1</span><br><span class="line"><span class="bullet">*</span> 无序列表项2</span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> 无序列表项1</span><br><span class="line"><span class="bullet">-</span> 无序列表项2</span><br><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 有序列表项1</span><br><span class="line"><span class="bullet">2.</span> 有序列表项2</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<ul>
<li><p>无序列表项1</p>
</li>
<li><p>无序列表项2</p>
</li>
<li><p>无序列表项1</p>
</li>
<li><p>无序列表项2</p>
</li>
<li><p>无序列表项1</p>
</li>
<li><p>无序列表项2</p>
</li>
</ul>
<ol>
<li><p>有序列表项1</p>
</li>
<li><p>有序列表项2</p>
</li>
</ol>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>列表嵌套</p>
<p>只需在子列表中的选项前面添加个四个空格即可</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="bullet">1.</span> 第一项：</span><br><span class="line"><span class="bullet"> -</span> 第一项嵌套的第一个元素</span><br><span class="line"><span class="bullet"> -</span> 第一项嵌套的第二个元素</span><br><span class="line"><span class="bullet">2.</span> 第二项：</span><br><span class="line"><span class="bullet"> -</span> 第二项嵌套的第一个元素</span><br><span class="line"><span class="bullet"> -</span> 第二项嵌套的第二个元素</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<ol>
<li>第一项：<ul>
<li>第一项嵌套的第一个元素</li>
<li>第一项嵌套的第二个元素</li>
</ul>
</li>
<li>第二项：<ul>
<li>第二项嵌套的第一个元素</li>
<li>第二项嵌套的第二个元素</li>
</ul>
</li>
</ol>
</li>
</ul>
<h3 id="引用块、嵌套引用块、引用块列表和列表引用块"><a href="#引用块、嵌套引用块、引用块列表和列表引用块" class="headerlink" title="引用块、嵌套引用块、引用块列表和列表引用块"></a>引用块、嵌套引用块、引用块列表和列表引用块</h3><ul>
<li><p>引用块</p>
<p>使用 <code>></code> 符号来表示引用块。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="quote">> 这是引用的文本块。</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<blockquote>
<p>这是引用的文本块。</p>
</blockquote>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>嵌套引用块</p>
<p>使用 <code>></code> 、 <code>> ></code> 、 <code>> > ></code> 多个符号来表示嵌套引用块的层级关系。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="quote">> 最外层</span></span><br><span class="line"><span class="quote">></span></span><br><span class="line"><span class="quote">> > 第一层嵌套</span></span><br><span class="line"><span class="quote">> ></span></span><br><span class="line"><span class="quote">> > > 第二层嵌套</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<blockquote>
<p>最外层</p>
<blockquote>
<p>第一层嵌套</p>
<blockquote>
<p>第二层嵌套</p>
</blockquote>
</blockquote>
</blockquote>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>引用块列表</p>
<p>使用 <code>></code> 符号加 <code>-</code> 无序列表或 <code>1.</code> 有序列表来实现。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="quote">> 区块中使用列表</span></span><br><span class="line"><span class="quote">></span></span><br><span class="line"><span class="quote">> - 第一项</span></span><br><span class="line"><span class="quote">> - 第二项</span></span><br><span class="line"><span class="quote">> - 第三项</span></span><br><span class="line"></span><br><span class="line"><span class="quote">> 1. 第一项</span></span><br><span class="line"><span class="quote">> 2. 第二项</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<blockquote>
<p>区块中使用列表</p>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
</blockquote>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>列表引用块</p>
<p>使用 <code>-</code> 无序列表或 <code>2.</code> 有序列表加 <code>></code> 符号实现。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="bullet">-</span> 第一项</span><br><span class="line"> > 第一项的第一个元素</span><br><span class="line"> > 第一项的第二个元素</span><br><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 第二项</span><br><span class="line"> > 第二项的第一个元素</span><br><span class="line"> > 第二项的第二个元素</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<ul>
<li><p>第一项</p>
<blockquote>
<p>第一项的第一个元素</p>
<p>第一项的第二个元素</p>
</blockquote>
</li>
</ul>
<ol>
<li><p>第二项</p>
<blockquote>
<p>第二项的第一个元素</p>
<p>第二项的第二个元素</p>
</blockquote>
</li>
</ol>
</li>
</ul>
<h3 id="两种设置代码块"><a href="#两种设置代码块" class="headerlink" title="两种设置代码块"></a>两种设置代码块</h3><ul>
<li><p>使用 4 个空格或者一个制表符（Tab 键）。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">print("Hello, world!")</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<pre><code>print("Hello, world!")
</code></pre></li>
</ul>
<p><hr><br></p>
<ul>
<li><p>使用三个反引号```包裹代码，并指定语言（可选）以进行语法高亮。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="code">```python</span></span><br><span class="line"><span class="code">def hello_world():</span></span><br><span class="line"><span class="code"> print("Hello, world!")</span></span><br><span class="line"><span class="code">```</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<figure class="highlight python"><table><tr><td class="code"><pre><span class="line"><span class="keyword">def</span> <span class="title function_">hello_world</span>():</span><br><span class="line"> <span class="built_in">print</span>(<span class="string">"Hello, world!"</span>)</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="链接和高级链接"><a href="#链接和高级链接" class="headerlink" title="链接和高级链接"></a>链接和高级链接</h3><ul>
<li><p>链接</p>
<p>使用<code>[链接文字](链接地址)</code>的形式插入链接。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">[<span class="string">百度</span>](<span class="link">https://www.baidu.com</span>)</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p><a href="https://www.baidu.com">百度</a></p>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>高级链接</p>
<p>使用变量来设置一个链接，变量赋值在文档末尾。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">这个链接用 1 作为网址变量 [<span class="string">百度</span>][<span class="symbol">1</span>]</span><br><span class="line"></span><br><span class="line">这个链接用 runoob 作为网址变量 [<span class="string">搜狗</span>][<span class="symbol">runoob</span>]</span><br><span class="line"></span><br><span class="line">然后在文档的结尾为变量赋值（网址）</span><br><span class="line">[<span class="symbol">1</span>]: <span class="link">https://www.baidu.com</span></span><br><span class="line">[<span class="symbol">runoob</span>]: <span class="link">http://www.runoob.com/</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p>这个链接用 1 作为网址变量 <a href="https://www.baidu.com">百度</a></p>
<p>这个链接用 sogou 作为网址变量 <a href="https://www.sogou.com//">搜狗</a></p>
</li>
</ul>
<h3 id="图片、标题图片和高级图片"><a href="#图片、标题图片和高级图片" class="headerlink" title="图片、标题图片和高级图片"></a>图片、标题图片和高级图片</h3><ul>
<li><p>图片</p>
<p>使用 <code></code> 可以插入图片。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">![<span class="string">示例图片</span>](<span class="link">https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg</span>)</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p><img src="https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg" alt="示例图片"></p>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>标题图片</p>
<p>使用 <code></code> 可以加上选择性的 <code>title</code> 属性的文字。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">![<span class="string">示例图片</span>](<span class="link">https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg "示例图片"</span>)</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p><img src="https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg" alt="示例图片" title="示例图片"></p>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>高级图片</p>
<p>使用 <code>[链接文字](链接地址)</code> 链接来嵌套 <code></code> 图片可以实现点击图片打开链接或者图片</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">点击示例图片打开图片</span><br><span class="line">[<span class="string"> ![示例图片</span>](<span class="link">https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg</span>) ](https://foruda.gitee.com/images/1683356304790177332/3b3e34db<span class="emphasis">_12518707.jpeg)</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">点击百度logo打开百度网站</span></span><br><span class="line"><span class="emphasis">[<span class="string"> ![百度logo</span>](<span class="link">https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png</span>) ](https://www.baidu.com)</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<ul>
<li><p>点击示例图片打开图片</p>
<p><a href="https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg"><img src="https://foruda.gitee.com/images/1683356304790177332/3b3e34db_12518707.jpeg" alt="示例图片"></a></p>
</li>
<li><p>点击百度logo打开百度网站</p>
<p><a href="https://www.baidu.com"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo"></a></p>
</li>
</ul>
</li>
</ul>
<h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3><ul>
<li><p>使用 <code>|</code> 来分隔不同的单元格，使用 <code>-</code> 来分隔表头和其他行。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">| 表头 | 表头 |</span><br><span class="line">| ------ | ------ |</span><br><span class="line">| 单元格 | 单元格 |</span><br><span class="line">| 单元格 | 单元格 |</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p>| 表头 | 表头 |<br>| ——— | ——— |<br>| 单元格 | 单元格 |<br>| 单元格 | 单元格 |</p>
</li>
</ul>
<p><hr><br></p>
<ul>
<li><p>使用 <code>:----</code> 居左对齐、<code>:---:</code> 居中对齐和 <code>----:</code> 居右对齐来设置内容和标题栏对齐方式。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">| 居左对齐 | 居中对齐 | 居右对齐 |</span><br><span class="line">| :------- | :------: | -------: |</span><br><span class="line">| 左 | 中 | 右 |</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p>| 居左对齐 | 居中对齐 | 居右对齐 |<br>| :———- | :———: | ———-: |<br>| 左 | 中 | 右 |</p>
</li>
</ul>
<h3 id="标签"><a href="#标签" class="headerlink" title="标签"></a>标签</h3><p>使用两个反引号 ` 将文字包裹。</p>
<p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="code">`这是一个标签`</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p><code>这是一个标签</code></p>
<h2 id="上传GitHub"><a href="#上传GitHub" class="headerlink" title="上传GitHub"></a>上传GitHub</h2><p>在博客本地 GitHub 仓库 运行下面命令上传博客文章</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m "添加文章"</span><br><span class="line">git push origin main</span><br></pre></td></tr></table></figure>
<p><br></p>
<hr>
<p>参考文章：</p>
<ul>
<li><a href="https://www.runoob.com/markdown/md-tutorial.html">Markdown 教程 - 菜鸟教程</a></li>
</ul>
]]></content>
<categories>
<category>运维笔记</category>
</categories>
<tags>
<tag>Markdown</tag>
<tag>博客写作</tag>
</tags>
</entry>
<entry>
<title>Markdown进阶写作技巧：排版优化与效率提升指南</title>
<url>/posts/2b5beace/</url>
<content><![CDATA[<p>9个Markdown文档进阶写作技巧分享：</p>
<ul>
<li>显示特殊符号</li>
<li>添加emoji表情符号🥰</li>
<li>添加字体字号</li>
<li>添加字体颜色和修改字体大小</li>
<li>添加文字背景色</li>
<li>添加 Todo 列表</li>
<li>添加常用数学公式</li>
<li>添加流程图、时序图和甘特图</li>
<li>添加注意事项</li>
</ul>
<h2 id="显示特殊符号"><a href="#显示特殊符号" class="headerlink" title="显示特殊符号"></a>显示特殊符号</h2><ul>
<li><a href="https://symbl.cc/cn/">SYMBL</a> - 特殊字符对应的Unicode码查询</li>
<li>语法符号，前面加反斜线\即可显示符号本身，例如：</li>
</ul>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">\\ 反斜杠 \* 星号</span><br><span class="line">\_ 下划线</span><br><span class="line">\{\} 括号</span><br><span class="line">\# 井号</span><br><span class="line">\+ 加号</span><br><span class="line">\- 减号</span><br><span class="line">\! 感叹号</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<p>\ 反斜杠 * 星号<br>_ 下划线<br>{} 括号<br># 井号<br>+ 加号<br>- 减号<br>! 感叹号</p>
<h2 id="添加emoji表情符号🥰"><a href="#添加emoji表情符号🥰" class="headerlink" title="添加emoji表情符号🥰"></a>添加emoji表情符号🥰</h2><ul>
<li><a href="https://www.webfx.com/tools/emoji-cheat-sheet/">Emoji Cheat Sheet</a> - 给你的Markdown文档添加表情🍁</li>
<li>去上面的网站即可复制粘贴，需要的表情包🤔</li>
</ul>
<h2 id="添加字体字号"><a href="#添加字体字号" class="headerlink" title="添加字体字号"></a>添加字体字号</h2><p>有时侯我们需要修改文字的字体字号，可是我们就会简单的“加粗”“斜体”等，这样子一来又觉得有点单调。<br>其实我们可以用HTML代码来改变Markdown文档的字体字号：</p>
<ul>
<li><a href="https://www.jb51.net/css/67658.html">CSS字体</a> - 让你的Markdown文档有更多的字体</li>
<li>通过上面的网站查询到的字体名字 <code><font style="font-family:写入到这里"></font></code></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">font</span> <span class="attr">style</span>=<span class="string">"font-family: STKaiti;"</span>></span>我是华文楷体<span class="tag"></<span class="name">font</span>></span></span><br><span class="line"><span class="tag"><<span class="name">font</span> <span class="attr">style</span>=<span class="string">"font-family: STCaiyun;"</span>></span>我是华文彩云体<span class="tag"></<span class="name">font</span>></span></span><br><span class="line"><span class="tag"><<span class="name">font</span> <span class="attr">style</span>=<span class="string">"font-family: STXingkai;"</span>></span>我是华文行楷<span class="tag"></<span class="name">font</span>></span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<font style="font-family: STKaiti;">我是华文楷体</font><br>
<font style="font-family: STCaiyun;">我是华文彩云体</font><br>
<font style="font-family: STXingkai;">我是华文行楷</font>
<h2 id="添加字体颜色和修改字体大小"><a href="#添加字体颜色和修改字体大小" class="headerlink" title="添加字体颜色和修改字体大小"></a>添加字体颜色和修改字体大小</h2><p>通过上面的学习你已经会使用HTML代码来改变Markdown文档的字体字号，同样Markdown文档也是可以通过HTML代码实现字体颜色：</p>
<ul>
<li><a href="http://xh.5156edu.com/page/z1015m9220j18754.html">CSS颜色</a> - 让你的Markdown文档字体有更多的颜色</li>
<li>通过上面查询到的颜色编码 <code><font color="写入到这里" size="写入数值改变字体大小"></font></code></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">font</span> <span class="attr">color</span>=<span class="string">"LightSkyBlue"</span> <span class="attr">size</span>=<span class="string">"72"</span>></span>亮天蓝色<span class="tag"></<span class="name">font</span>></span></span><br><span class="line"><span class="tag"><<span class="name">font</span> <span class="attr">color</span>=<span class="string">"SpringGreen"</span> <span class="attr">size</span>=<span class="string">"42"</span>></span>春绿色<span class="tag"></<span class="name">font</span>></span></span><br><span class="line"><span class="tag"><<span class="name">font</span> <span class="attr">color</span>=<span class="string">"Red"</span> <span class="attr">size</span>=<span class="string">"6"</span>></span>纯红色<span class="tag"></<span class="name">font</span>></span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<font color=LightSkyBlue size=72>亮天蓝色</font>
<font color=SpringGreen size=42>春绿色</font>
<font color=Red size=6>纯红色</font>
<h2 id="添加文字背景色"><a href="#添加文字背景色" class="headerlink" title="添加文字背景色"></a>添加文字背景色</h2><p>Markdown本身不支持背景色设置，需要采用内置html的方式实现。<br>借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。例如：</p>
<ul>
<li><a href="http://xh.5156edu.com/page/z1015m9220j18754.html">CSS颜色</a> - 让你的Markdown文档字体有更多的颜色</li>
<li>通过上面查询到的颜色编码 <code><table><tr><td bgcolor="写入到这里"></td></tr></table></code></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">bgcolor</span>=<span class="string">"LightSkyBlue"</span>></span>背景色是：亮天蓝色<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br><span class="line"><span class="tag"><<span class="name">table</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">bgcolor</span>=<span class="string">"SpringGreen"</span>></span>背景色是：春绿色<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br><span class="line"><span class="tag"><<span class="name">table</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">bgcolor</span>=<span class="string">"Red"</span>></span>背景色是：纯红色<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<table><tr><td bgcolor=LightSkyBlue>背景色是：亮天蓝色</td></tr></table>
<table><tr><td bgcolor=SpringGreen>背景色是：春绿色</td></tr></table>
<table><tr><td bgcolor=Red>背景色是：纯红色</td></tr></table>
<h2 id="添加-Todo-列表"><a href="#添加-Todo-列表" class="headerlink" title="添加 Todo 列表"></a>添加 Todo 列表</h2><ul>
<li>使用 - [ ] 和 - [x] 语法可以创建复选框，实现 todo-list 等功能</li>
<li>输入顺序：- 空格 [ 空格 ] 空格</li>
</ul>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="bullet">-</span> [ ] 未选中状态</span><br><span class="line"><span class="bullet">-</span> [x] 选中状态</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<ul>
<li><p>[ ] 未选中状态</p>
</li>
<li><p>[x] 选中状态</p>
</li>
</ul>
<h2 id="添加常用数学公式"><a href="#添加常用数学公式" class="headerlink" title="添加常用数学公式"></a>添加常用数学公式</h2><ul>
<li><p><a href="https://blog.csdn.net/mingzhuo_126/article/details/82722455">数学公式</a> - 让你的Markdown文档添加公式</p>
</li>
<li><p>公式块 ，输入美元符（$）然后回车，中间输入相应代码，详细代码参考上方网站。例如：</p>
</li>
</ul>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">$$</span><br><span class="line">\sin x =2 \sin x \cos</span><br><span class="line">$$</span><br><span class="line"></span><br><span class="line">$$</span><br><span class="line">e^{i\pi} + 1 = 0</span><br><span class="line">$$</span><br><span class="line"></span><br><span class="line">$$</span><br><span class="line">\begin{Bmatrix}</span><br><span class="line"> a & b \\</span><br><span class="line"> c & d</span><br><span class="line">\end{Bmatrix}</span><br><span class="line">$$</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<script type="math/tex; mode=display">
\sin x =2 \sin x \cos</script><script type="math/tex; mode=display">
e^{i\pi} + 1 = 0</script><script type="math/tex; mode=display">
\begin{Bmatrix}
a & b \\
c & d
\end{Bmatrix}</script><h2 id="添加流程图、时序图、甘特图、类别图、状态图、饼型图、用户体验旅程图和-C4-图"><a href="#添加流程图、时序图、甘特图、类别图、状态图、饼型图、用户体验旅程图和-C4-图" class="headerlink" title="添加流程图、时序图、甘特图、类别图、状态图、饼型图、用户体验旅程图和 C4 图"></a>添加流程图、时序图、甘特图、类别图、状态图、饼型图、用户体验旅程图和 C4 图</h2><h3 id="横向流程图"><a href="#横向流程图" class="headerlink" title="横向流程图"></a>横向流程图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">flowchart LR</span><br><span class="line">A[方形] -->B(圆角)</span><br><span class="line">B --> C{条件a}</span><br><span class="line">C -->|a=1| D[结果1]</span><br><span class="line">C -->|a=2| E[结果2]</span><br><span class="line">F[横向流程图]</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
flowchart LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
</pre></div>
<h3 id="竖向流程图"><a href="#竖向流程图" class="headerlink" title="竖向流程图"></a>竖向流程图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">flowchart TD</span><br><span class="line">A[方形] --> B(圆角)</span><br><span class="line">B --> C{条件a}</span><br><span class="line">C --> |a=1| D[结果1]</span><br><span class="line">C --> |a=2| E[结果2]</span><br><span class="line">F[竖向流程图]</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
flowchart TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
</pre></div>
<h3 id="UML时序图"><a href="#UML时序图" class="headerlink" title="UML时序图"></a>UML时序图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">sequenceDiagram</span><br><span class="line">对象A->对象B: 对象B你好吗?（请求）</span><br><span class="line">Note right of 对象B: 对象B的描述</span><br><span class="line">Note left of 对象A: 对象A的描述(提示)</span><br><span class="line">对象B-->对象A: 我很好(响应)</span><br><span class="line">对象A->对象B: 你真的好吗？</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
sequenceDiagram
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
</pre></div>
<h3 id="UML复杂时序图"><a href="#UML复杂时序图" class="headerlink" title="UML复杂时序图"></a>UML复杂时序图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">sequenceDiagram</span><br><span class="line">Title: 标题：复杂使用</span><br><span class="line">对象A->对象B: 对象B你好吗?（请求）</span><br><span class="line">Note right of 对象B: 对象B的描述</span><br><span class="line">Note left of 对象A: 对象A的描述(提示)</span><br><span class="line">对象B-->对象A: 我很好(响应)</span><br><span class="line">对象B->小三: 你好吗</span><br><span class="line">小三-->>对象A: 对象B找我了</span><br><span class="line">对象A->对象B: 你真的好吗？</span><br><span class="line">Note over 小三,对象B: 我们是朋友</span><br><span class="line">participant C</span><br><span class="line">Note right of C: 没人陪我玩</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
sequenceDiagram
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
</pre></div>
<h3 id="甘特图"><a href="#甘特图" class="headerlink" title="甘特图"></a>甘特图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">%% 语法示例</span><br><span class="line">gantt</span><br><span class="line">section Section</span><br><span class="line">dateFormat YYYY-MM-DD</span><br><span class="line">title 软件开发甘特图</span><br><span class="line">section 设计</span><br><span class="line">需求 : done, des1, 2014-01-06,2014-01-08</span><br><span class="line">原型 : active, des2, 2014-01-09, 3d</span><br><span class="line">UI设计 : des3, after des2, 5d</span><br><span class="line">未来任务 : des4, after des3, 5d</span><br><span class="line">section 开发</span><br><span class="line">学习准备理解需求 : crit, done, 2014-01-06,24h</span><br><span class="line">设计框架 : crit, done, after des2, 2d</span><br><span class="line">开发 : crit, active, 3d</span><br><span class="line">未来任务 : crit, 5d</span><br><span class="line">耍 : 2d</span><br><span class="line">section 测试</span><br><span class="line">功能测试 : active, a1, after des3, 3d</span><br><span class="line">压力测试 : after a1, 20h</span><br><span class="line">测试报告 : 48h</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
gantt
section Section
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 : done, des1, 2014-01-06,2014-01-08
原型 : active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 : crit, done, 2014-01-06,24h
设计框架 : crit, done, after des2, 2d
开发 : crit, active, 3d
未来任务 : crit, 5d
耍 : 2d
section 测试
功能测试 : active, a1, after des3, 3d
压力测试 : after a1, 20h
测试报告 : 48h
</pre></div>
<h3 id="类别图"><a href="#类别图" class="headerlink" title="类别图"></a>类别图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">classDiagram</span><br><span class="line">Class01 <|-- AveryLongClass : Cool</span><br><span class="line"><<span class="language-xml"><span class="tag"><<span class="name">Interface</span>></span></span>> Class01</span><br><span class="line">Class09 --> C2 : 我在哪里?</span><br><span class="line">Class09 --\* C3</span><br><span class="line">Class09 --|> Class07</span><br><span class="line">Class07 : equals()</span><br><span class="line">Class07 : Object[] 元素数据</span><br><span class="line">Class01 : size()</span><br><span class="line">Class01 : int 黑猩猩</span><br><span class="line">Class01 : int 大猩猩</span><br><span class="line">class Class10 {</span><br><span class="line"><<span class="language-xml"><span class="tag"><<span class="name">service</span>></span></span>></span><br><span class="line">int id</span><br><span class="line">size()</span><br><span class="line">}</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : 我在哪里?
Class09 --\* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] 元素数据
Class01 : size()
Class01 : int 黑猩猩
Class01 : int 大猩猩
class Class10 {
<<service>>
int id
size()
}
</pre></div>
<h3 id="状态图"><a href="#状态图" class="headerlink" title="状态图"></a>状态图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">stateDiagram-v2</span><br><span class="line">[<span class="emphasis">*] --> Still</span></span><br><span class="line"><span class="emphasis">Still --> [*</span>]</span><br><span class="line">Still --> Moving</span><br><span class="line">Moving --> Still</span><br><span class="line">Moving --> Crash</span><br><span class="line">Crash --> [<span class="emphasis">*]</span></span><br><span class="line"><span class="emphasis">{% endmermaid %}</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
</pre></div>
<h3 id="饼型图"><a href="#饼型图" class="headerlink" title="饼型图"></a>饼型图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">pie</span><br><span class="line">"狗" : 386</span><br><span class="line">"猫" : 85</span><br><span class="line">"其他" : 15</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
pie
"狗" : 386
"猫" : 85
"其他" : 15
</pre></div>
<h3 id="用户体验旅程图"><a href="#用户体验旅程图" class="headerlink" title="用户体验旅程图"></a>用户体验旅程图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">journey</span><br><span class="line">title 我的工作日</span><br><span class="line">section 上班</span><br><span class="line">泡茶: 5: Me</span><br><span class="line">上楼: 3: Me</span><br><span class="line">工作: 1: Me, Cat</span><br><span class="line">section 回家</span><br><span class="line">下楼: 5: Me</span><br><span class="line">坐下: 3: Me</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
journey
title 我的工作日
section 上班
泡茶: 5: Me
上楼: 3: Me
工作: 1: Me, Cat
section 回家
下楼: 5: Me
坐下: 3: Me
</pre></div>
<h3 id="C4-图"><a href="#C4-图" class="headerlink" title="C4 图"></a>C4 图</h3><p>例如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">C4Context</span><br><span class="line">title System Context diagram for Internet Banking System</span><br><span class="line"></span><br><span class="line">Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")</span><br><span class="line">Person(customerB, "Banking Customer B")</span><br><span class="line">Person<span class="emphasis">_Ext(customerC, "Banking Customer C")</span></span><br><span class="line"><span class="emphasis">System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">Person(customerD, "Banking Customer D", "A customer of the bank, <span class="language-xml"><span class="tag"><<span class="name">br</span>/></span></span> with personal bank accounts.")</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">Enterprise_</span>Boundary(b1, "BankBoundary") {</span><br><span class="line"></span><br><span class="line">SystemDb<span class="emphasis">_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">System_</span>Boundary(b2, "BankBoundary2") {</span><br><span class="line">System(SystemA, "Banking System A")</span><br><span class="line">System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">System<span class="emphasis">_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")</span></span><br><span class="line"><span class="emphasis">SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">Boundary(b3, "BankBoundary3", "boundary") {</span></span><br><span class="line"><span class="emphasis">SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")</span></span><br><span class="line"><span class="emphasis">SystemQueue_</span>Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">BiRel(customerA, SystemAA, "Uses")</span><br><span class="line">BiRel(SystemAA, SystemE, "Uses")</span><br><span class="line">Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")</span><br><span class="line">Rel(SystemC, customerA, "Sends e-mails to")</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>
C4Context
title System Context diagram for Internet Banking System
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
</pre></div>
<h2 id="添加注意事项"><a href="#添加注意事项" class="headerlink" title="添加注意事项"></a>添加注意事项</h2><ul>
<li>输入三个反单引号 ``` 再输入 notice 回车即可输入注意事项，例如：</li>
</ul>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line"><span class="code">```notice</span></span><br><span class="line"><span class="code">这个是一个注意事项</span></span><br><span class="line"><span class="code">```</span></span><br></pre></td></tr></table></figure>
<p>演示：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">这个是一个注意事项</span><br></pre></td></tr></table></figure>
<p><br></p>
<hr>
<p>参考文章：</p>
<ul>
<li><a href="https://www.runoob.com/markdown/md-advance.html">Markdown - 菜鸟教程</a></li>
</ul>
]]></content>
<categories>
<category>运维笔记</category>
</categories>
<tags>
<tag>Markdown</tag>
<tag>写作技巧</tag>
<tag>排版优化</tag>
</tags>
</entry>
<entry>
<title>Valine评论系统配置：基于LeanCloud实现邮件实时提醒</title>
<url>/posts/673e8029/</url>
<content>< 上注册并登录账号。
- 3.注册后，确认你的邮箱以完成登录。
- 4.进入[服务页面](https://akismet.com/pricing/)，选择适合你的服务。
- 5.根据你的需求选择付费金额，如果你选择免费版本，请注意不能用于商业活动。
- 6.我这里选择免费，确认付款信息，然后你就可以获得到 Api 。
 -->
<h2 id="获取-valine-admin-项目"><a href="#获取-valine-admin-项目" class="headerlink" title="获取 valine-admin 项目"></a>获取 valine-admin 项目</h2><ul>
<li><p><a href="https://github.com/bin862324915/valine-admin">项目地址</a></p>
</li>
<li><p>复制此链接以备后用：<code>https://github.com/bin862324915/valine-admin</code></p>
</li>
<li><p>记住分支以备后用：<code>main</code></p>
</li>
</ul>
<h2 id="登录-LeanCloud-并部署项目"><a href="#登录-LeanCloud-并部署项目" class="headerlink" title="登录 LeanCloud 并部署项目"></a>登录 LeanCloud 并部署项目</h2><ul>
<li><p>1.在 <a href="https://console.leancloud.cn/">LeanCloud</a> 上登录并创建云引擎</p>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300040076.png" alt="创建云引擎"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300040534.png" alt="创建云引擎"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300040808.png" alt="创建云引擎"></p>
</li>
<li><p>2.通过 Git 方式部署项目</p>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300041197.png" alt="部署项目"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300041104.png" alt="部署项目"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300041194.png" alt="部署项目"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300041737.png" alt="部署项目"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300041016.png" alt="部署项目"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300041009.png" alt="部署项目"></p>
</li>
</ul>
<h2 id="配置项目环境变量"><a href="#配置项目环境变量" class="headerlink" title="配置项目环境变量"></a>配置项目环境变量</h2><p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300042051.png" alt="环境变量"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300042654.png" alt="环境变量"></p>
<p>请按照以下表格填写相应的项目环境变量：</p>
<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:center">变量名</th>
<th style="text-align:center">说明</th>
<th style="text-align:center">示例</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">SENDER_NAME</td>
<td style="text-align:center">寄件人名称</td>
<td style="text-align:center">ChenPeiming — 评论提醒</td>
</tr>
<tr>
<td style="text-align:center">SITE_NAME</td>
<td style="text-align:center">[必填]网站名称</td>
<td style="text-align:center">ChenPeiming</td>
</tr>
<tr>
<td style="text-align:center">SITE_URL</td>
<td style="text-align:center">[必填]网站地址，地址后方不带 /</td>
<td style="text-align:center"><a href="https://chenpeiming52001.github.io">https://chenpeiming52001.github.io</a></td>
</tr>
<tr>
<td style="text-align:center">SMTP_SERVICE</td>
<td style="text-align:center">[必填]邮件服务提供商，支持 QQ、163、126 等</td>
<td style="text-align:center">QQ</td>
</tr>
<tr>
<td style="text-align:center">SMTP_USER</td>
<td style="text-align:center">[必填]SMTP 服务用户名，及邮箱地址</td>
<td style="text-align:center"><a href="mailto:123@qq.com">123@qq.com</a></td>
</tr>
<tr>
<td style="text-align:center">SMTP_PASS</td>
<td style="text-align:center">[必填]SMTP 密码，及授权码</td>
<td style="text-align:center">123</td>
</tr>
<tr>
<td style="text-align:center">TEMPLATE_NAME</td>
<td style="text-align:center">邮件模板，默认 default，可以选 rainbow</td>
<td style="text-align:center">rainbow</td>
</tr>
<tr>
<td style="text-align:center">TO_EMAIL</td>
<td style="text-align:center">自定义博主收件人</td>
<td style="text-align:center"><a href="mailto:chenpeiming52001@163.com">chenpeiming52001@163.com</a></td>
</tr>
</tbody>
</table>
</div>
<h2 id="设置后台管理"><a href="#设置后台管理" class="headerlink" title="设置后台管理"></a>设置后台管理</h2><ul>
<li><p>添加 <code>email</code>、<code>password</code> 和 <code>username</code></p>
</li>
<li><p>请注意，<code>email</code> 必须是 <code>SMTP_USER</code> 或 <code>TO_EMAIL</code> 中的一个</p>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300042458.png" alt="后台管理"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300042100.png" alt="后台管理"></p>
</li>
<li><p>配置访问域名（需要注册有域名）</p>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300046495.png" alt="后台管理"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300046160.png" alt="后台管理"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300046024.png" alt="后台管理"></p>
</li>
</ul>
<p>绑定好后就可以登录后台管理评论信息，我没有域名就不做相关的演示了</p>
<h2 id="邮件展示"><a href="#邮件展示" class="headerlink" title="邮件展示"></a>邮件展示</h2><ul>
<li><p>邮件模板：default</p>
<ul>
<li>评论</li>
</ul>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300046287.png" alt="default"></p>
<ul>
<li>回复评论</li>
</ul>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300046316.png" alt="default"></p>
</li>
<li><p>邮件模板：rainbow</p>
<ul>
<li>评论</li>
</ul>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300048681.png" alt="rainbow"></p>
<ul>
<li>回复评论</li>
</ul>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202404300048647.png" alt="rainbow"></p>
</li>
</ul>
<p><br></p>
<hr>
]]></content>
<categories>
<category>运维笔记</category>
</categories>
<tags>
<tag>Jekyll</tag>
<tag>评论系统</tag>
<tag>LeanCloud</tag>
</tags>
</entry>
<entry>
<title>玩客云刷机指南：刷入 CasaOS 打造轻量 NAS 替代方案</title>
<url>/posts/b065c228/</url>
<content><![CDATA[<h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2><p>玩客云，一款硬件性能出色的智能存储设备。轻 NAC 系统（CasaOS）以其简洁高效的优势，深受众多用户喜爱。将玩客云刷入 CasaOS 系统，能充分挖掘其潜力，带来全新功能和体验。下面，我将为大家详细介绍玩客云刷入 CasaOS 的具体步骤，并分享其优势，希望能激发大家对刷机过程的兴趣。</p>
<h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><h3 id="所需材料"><a href="#所需材料" class="headerlink" title="所需材料"></a>所需材料</h3><ul>
<li>玩客云设备及电源</li>
<li>金属镊子或金属丝：用于短接刷机触点</li>
<li>USB 公对公连接线：连接玩客云和电脑</li>
<li>电脑：安装刷机工具和系统</li>
<li>热风枪或吹风机：拆卸玩客云外壳</li>
</ul>
<h3 id="下载相关资料"><a href="#下载相关资料" class="headerlink" title="下载相关资料"></a>下载相关资料</h3><ul>
<li>ArmBian 系统固件：底层系统</li>
<li>USB_Burning_Tool：晶晨烧录工具</li>
<li>MobaXterm：连接 ArmBian 系统工具</li>
</ul>
<h2 id="刷机步骤"><a href="#刷机步骤" class="headerlink" title="刷机步骤"></a>刷机步骤</h2><h3 id="拆开玩客云主机"><a href="#拆开玩客云主机" class="headerlink" title="拆开玩客云主机"></a>拆开玩客云主机</h3><p>使用热风枪或吹风机加热玩客云外壳后盖版并撬开外面装饰盖板<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182121905.jpg" alt="加热后盖板"><br>然后打下螺丝小心地将其后盖拆开取出主板，注意不要损坏内部元件！<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182122268.jpg" alt="取下螺丝"></p>
<h3 id="刷-ArmBian-底包"><a href="#刷-ArmBian-底包" class="headerlink" title="刷 ArmBian 底包"></a>刷 ArmBian 底包</h3><p>将下载好的 ArmBian 系统固件刷入玩客云，为后续刷机做好准备。具体步骤如下：</p>
<ul>
<li><p>打开已下载安装好的<code>“USB_Burning_Tool：晶晨烧录工具”</code>，并导入烧录包<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182123269.png" alt="导入烧录包"></p>
</li>
<li><p>选择烧录配置，然后点击<code>“开始”</code><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182124771.png" alt="烧录配置"></p>
</li>
<li><p>使用 USB 公对公线将主板和电脑连接起来<br>(USB 接口应选择靠近 HDMI 接口的那一边)<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182126519.jpg" alt="接入USB接口"></p>
</li>
<li><p>短接刷机触点，并给设备接通电源<br>(此时电脑会自动连接主板，进入刷机模式)</p>
<div class="note danger modern"><p>注：不同玩客云型号所对应的短接刷机触点是有所不同的，请参考以下图片进行短接操作。</p>
</div>
<p><code>1.0</code>版本主板短接触点<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182133751.png" alt="1.0版本主板"><br><code>1.3</code>版本主板短接触点<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182134262.png" alt="1.3版本主板"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182138509.png" alt="进入刷机模式"></p>
</li>
<li><p>等待刷机完成，注意先点击刷机软件中的<code>“停止”</code>，再移除 USB 连接线，然后重启设备<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182139217.png" alt="刷机完成"></p>
</li>
</ul>
<h3 id="进入路由器后台查看设备IP"><a href="#进入路由器后台查看设备IP" class="headerlink" title="进入路由器后台查看设备IP"></a>进入路由器后台查看设备IP</h3><p>查找名为<code>“onecloud”</code>的设备，并记下其 IP 地址<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182140430.png" alt="查找设备Ip"></p>
<h3 id="刷入-CasaOS"><a href="#刷入-CasaOS" class="headerlink" title="刷入 CasaOS"></a>刷入 CasaOS</h3><p>在 ArmBian 底包的基础上刷入 CasaOS 系统。这一过程需要耐心等待，以确保刷机顺利完成。</p>
<ul>
<li><p>使用 MobaXterm 连接 ArmBian 系统<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182141970.png" alt="连接ArmBian系统"><br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182142344.png" alt="连接MobaXterm"></p>
</li>
<li><p>登录 ArmBian 系统 - 账号：root 默认密码：1234<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182143434.png" alt="登录ArmBian系统"></p>
</li>
<li><p>修改登录密码并取消设置新账户<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182143317.png" alt="修改密码"></p>
</li>
<li><p>检查系统时间及时区<br>执行命令：</p>
</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">date</span> -R</span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182144795.png" alt="系统时间及时区"></p>
<ul>
<li>如果系统时区不正确，需要修改时区<br>执行命令：</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">cp</span> /usr/share/zoneinfo/Asia/Shanghai /etc/localtime</span><br></pre></td></tr></table></figure>
<p>建议重新运行命令查看是否成功修改时区<br><img src="https://cdn.jsdmirror.com/gh/MingTechPro/drawing-bed/post-img_url/202405182145663.png" alt="修改时区"></p>
<ul>
<li>修改软件安装源以提高安装成功率<br>执行命令：</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">nano /etc/apt/sources.list</span><br></pre></td></tr></table></figure>