-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
1039 lines (910 loc) · 369 KB
/
search.xml
File metadata and controls
1039 lines (910 loc) · 369 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>Canvas 和 SVG 的区别是什么？</title>
<url>/2024/03/25/Font-end/canvas&svg/Canvas%20%E5%92%8C%20SVG%20%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F/</url>
<content><![CDATA[<ol>
<li>Canvas 主要是用笔刷来绘制 2D 图形的。</li>
<li>SVG 主要是用标签来绘制不规则矢量图的。</li>
<li>相同点：都是主要用来画 2D 图形的。</li>
<li>不同点：Canvas 画的是位图，SVG 画的是矢量图。</li>
<li>不同点：SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。</li>
<li>不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。</li>
</ol>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>canvas</tag>
<tag>svg</tag>
<tag>front-end</tag>
</tags>
</entry>
<entry>
<title>Facebook添加双重验证</title>
<url>/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/</url>
<content><![CDATA[<p>在 Facebook（Meta）账户上启用双重验证（2FA） 以提升安全性。主要内容包括：</p>
<ol>
<li><p>双重验证的作用：防止未经授权的登录，即使密码泄露也能保护账户。</p>
</li>
<li><p>设置步骤：通过手机短信、验证器应用（如 Google Authenticator）或物理安全密钥绑定 2FA。</p>
</li>
<li><p>备用方法：生成一次性备用代码，避免设备丢失时无法登录。</p>
</li>
<li><p>注意事项：建议绑定多设备并妥善保存备用代码，以防锁定账户。</p>
</li>
</ol>
<span id="more"></span>
<h1 id="1、给Facebook设置双重验证，并获取密钥"><a href="#1、给Facebook设置双重验证，并获取密钥" class="headerlink" title="1、给Facebook设置双重验证，并获取密钥"></a>1、给Facebook设置双重验证，并获取密钥</h1><h2 id="1-1-登陆Facebook点击设置"><a href="#1-1-登陆Facebook点击设置" class="headerlink" title="1.1 登陆Facebook点击设置"></a>1.1 登陆Facebook点击设置</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/01%E8%AE%BE%E7%BD%AE.png" alt="01设置"></p>
<h2 id="1-2-输入双重验证-点击双重验证"><a href="#1-2-输入双重验证-点击双重验证" class="headerlink" title="1.2 输入双重验证,点击双重验证"></a>1.2 输入双重验证,点击双重验证</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/02%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81.png" alt="02双重验证"></p>
<h2 id="1-3-添加身份验证应用"><a href="#1-3-添加身份验证应用" class="headerlink" title="1.3 添加身份验证应用"></a>1.3 添加身份验证应用</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/03%E6%B7%BB%E5%8A%A0%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81%E5%BA%94%E7%94%A8.png" alt="03添加身份验证应用"></p>
<h2 id="1-4-复制密钥"><a href="#1-4-复制密钥" class="headerlink" title="1.4 复制密钥"></a>1.4 复制密钥</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/04%E5%A4%8D%E5%88%B6%E5%AF%86%E9%92%A5.png" alt="04复制密钥"></p>
<h1 id="2、给浏览器添加插件身份验证器"><a href="#2、给浏览器添加插件身份验证器" class="headerlink" title="2、给浏览器添加插件身份验证器"></a>2、给浏览器添加插件身份验证器</h1><p>以Chorme浏览器为例</p>
<h2 id="2-1-搜索身份验证器"><a href="#2-1-搜索身份验证器" class="headerlink" title="2.1 搜索身份验证器"></a>2.1 搜索身份验证器</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/05chrome%E6%B7%BB%E5%8A%A0%E6%8F%92%E4%BB%B6%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81%E5%99%A8.png" alt="05chrome添加插件身份验证器"></p>
<h2 id="2-2-添加身份验证器"><a href="#2-2-添加身份验证器" class="headerlink" title="2.2 添加身份验证器"></a>2.2 添加身份验证器</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/06%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81%E5%99%A8.png" alt="06身份验证器"></p>
<h1 id="3、在身份验证器上添加facebook密钥"><a href="#3、在身份验证器上添加facebook密钥" class="headerlink" title="3、在身份验证器上添加facebook密钥"></a>3、在身份验证器上添加facebook密钥</h1><h2 id="3-1-在Chrome浏览器上打开插件"><a href="#3-1-在Chrome浏览器上打开插件" class="headerlink" title="3.1 在Chrome浏览器上打开插件"></a>3.1 在Chrome浏览器上打开插件</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/07%E6%89%93%E5%BC%80%E6%8F%92%E4%BB%B6.png" alt="07打开插件"></p>
<h2 id="3-2-新建"><a href="#3-2-新建" class="headerlink" title="3.2 新建"></a>3.2 新建</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/08%E6%96%B0%E5%BB%BA.png" alt="08新建"></p>
<h2 id="3-3-点击手动输入"><a href="#3-3-点击手动输入" class="headerlink" title="3.3 点击手动输入"></a>3.3 点击手动输入</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/09%E6%89%8B%E5%8A%A8%E8%BE%93%E5%85%A5.png" alt="09手动输入"></p>
<h2 id="3-4-添加密钥"><a href="#3-4-添加密钥" class="headerlink" title="3.4 添加密钥"></a>3.4 添加密钥</h2><p>将从facebook上获取的密钥粘贴到这<br><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/10%E6%B7%BB%E5%8A%A0%E5%AF%86%E9%92%A5.png" alt="10添加密钥"></p>
<h1 id="4、登陆Facebook时使用浏览器上的身份验证器"><a href="#4、登陆Facebook时使用浏览器上的身份验证器" class="headerlink" title="4、登陆Facebook时使用浏览器上的身份验证器"></a>4、登陆Facebook时使用浏览器上的身份验证器</h1><h2 id="4-1-打开Chrome浏览器上安装的身份验证器"><a href="#4-1-打开Chrome浏览器上安装的身份验证器" class="headerlink" title="4.1 打开Chrome浏览器上安装的身份验证器"></a>4.1 打开Chrome浏览器上安装的身份验证器</h2><h2 id="4-2-使用身份验证器上提供的验证码"><a href="#4-2-使用身份验证器上提供的验证码" class="headerlink" title="4.2 使用身份验证器上提供的验证码"></a>4.2 使用身份验证器上提供的验证码</h2><p><img src="/2024/09/22/Other/Facebook%E6%B7%BB%E5%8A%A0%E5%8F%8C%E9%87%8D%E9%AA%8C%E8%AF%81/11%E4%BD%BF%E7%94%A8.png" alt="11使用"></p>
<hr>
]]></content>
<categories>
<category>Other</category>
</categories>
<tags>
<tag>Other</tag>
</tags>
</entry>
<entry>
<title>CSS选择器优先级如何确定？</title>
<url>/2024/03/17/Font-end/css/CSS%E9%80%89%E6%8B%A9%E5%99%A8%E4%BC%98%E5%85%88%E7%BA%A7%E5%A6%82%E4%BD%95%E7%A1%AE%E5%AE%9A%EF%BC%9F/</url>
<content><![CDATA[<h1 id="属性赋值，层叠（Cascading）和继承"><a href="#属性赋值，层叠（Cascading）和继承" class="headerlink" title="属性赋值，层叠（Cascading）和继承"></a>属性赋值，层叠（Cascading）和继承</h1><h2 id="1、指定值，计算值和实际值"><a href="#1、指定值，计算值和实际值" class="headerlink" title="1、指定值，计算值和实际值"></a>1、指定值，计算值和实际值</h2><p>一旦用户代理已经解析了文档并构造好了文档树，它就必须给树中的每个元素上适用于目标媒体类型的每个属性赋值</p>
<p>属性的最终值是4步计算的结果：先通过指定来确定值（“指定值（specified value）”），接着处理得到一个用于继承的值（“计算值（computed value）”），然后如果有必要的话转化为一个绝对值（“应用值（used value）”），最后根据本地环境限制进行转换（“实际值（actual value）”）</p>
<h3 id="1-1-指定值"><a href="#1-1-指定值" class="headerlink" title="1.1 指定值"></a>1.1 指定值</h3><p>用户代理必须先根据下列机制（按优先顺序）给每个属性赋值一个指定值：</p>
<h4 id="1-1-1-如果层叠产生了一个值，就使用它"><a href="#1-1-1-如果层叠产生了一个值，就使用它" class="headerlink" title="1.1.1 如果层叠产生了一个值，就使用它"></a>1.1.1 如果层叠产生了一个值，就使用它</h4><h4 id="1-1-2-否则，如果属性是继承的并且该元素不是文档树的根元素，使用其父元素的计算值"><a href="#1-1-2-否则，如果属性是继承的并且该元素不是文档树的根元素，使用其父元素的计算值" class="headerlink" title="1.1.2 否则，如果属性是继承的并且该元素不是文档树的根元素，使用其父元素的计算值"></a>1.1.2 否则，如果属性是继承的并且该元素不是文档树的根元素，使用其父元素的计算值</h4><h4 id="1-1-3-否则使用属性的初始值，每个属性的初始值都在属性定义中指出了"><a href="#1-1-3-否则使用属性的初始值，每个属性的初始值都在属性定义中指出了" class="headerlink" title="1.1.3 否则使用属性的初始值，每个属性的初始值都在属性定义中指出了"></a>1.1.3 否则使用属性的初始值，每个属性的初始值都在属性定义中指出了</h4><h3 id="1-2-计算值"><a href="#1-2-计算值" class="headerlink" title="1.2 计算值"></a>1.2 计算值</h3><p>指定值通过层叠被处理为计算值，例如，URI被转换成绝对的，’em’和’ex’单位被计算为像素或者绝对长度。计算一个值并不需要用户代理渲染文档</p>
<p>UA无法处理为绝对URI的话，该URI的计算值就是指定值</p>
<p>一个属性的计算值由属性定义中Computed Value行决定。当指定值为’inherit’时，计算值的定义见继承小节</p>
<p>即使属性不适用（于当前元素），其计算值也存在，定义在’Applies To’行。然而，有些属性可能根据属性是否适用于该元素来定义元素属性的计算值</p>
<h3 id="1-3-应用值"><a href="#1-3-应用值" class="headerlink" title="1.3 应用值"></a>1.3 应用值</h3><p>处理计算值时，尽可能不要格式化文档。然而，有些值只能在文档布局完成时确定。例如，如果一个元素的宽度是其包含块的特定百分比，在包含块的宽度确定之前无法确定这个宽度。应用值是把计算值剩余的依赖（值）都处理成绝对值后的（计算）结果</p>
<h3 id="1-4-实际值"><a href="#1-4-实际值" class="headerlink" title="1.4 实际值"></a>1.4 实际值</h3><p>原则上，应用值应该用于渲染，但用户代理可能无法在给定的环境中利用该值。例如，用户代理或许只能用整数像素宽度渲染边框，因此不得不对宽度的计算值做近似处理，或者用户代理可能被迫只能用黑白色调而不是全彩色。实际值是经过近似处理后的应用值</p>
<h2 id="2、继承"><a href="#2、继承" class="headerlink" title="2、继承"></a>2、继承</h2><p>有些值是从文档树中某个元素的子级继承来的，就像上面描述的一样。每个属性都定义了它是否可继承</p>
<p>假设H1元素里有个强调元素(EM)：<br><code><H1>The headline <EM>is</EM> important!</H1></code></p>
<p>如果没有给EM元素赋值颜色，强调的”is”将从其父元素继承颜色，所以如果H1是蓝色的，EM元素同样也将是蓝色的</p>
<p>发生继承时，元素继承计算值。来自父元素的计算值同时作为指定值和其子级的计算值</p>
<p>例如，给出如下样式表：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span> { <span class="attribute">font-size</span>: <span class="number">10pt</span> }</span><br><span class="line"><span class="selector-tag">h1</span> { <span class="attribute">font-size</span>: <span class="number">130%</span> }</span><br></pre></td></tr></table></figure>
<p>和文档片段：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">BODY</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">H1</span>></span>A <span class="tag"><<span class="name">EM</span>></span>large<span class="tag"></<span class="name">EM</span>></span> heading<span class="tag"></<span class="name">H1</span>></span></span><br><span class="line"><span class="tag"></<span class="name">BODY</span>></span></span><br></pre></td></tr></table></figure>
<p>H1元素的’font-size’属性将获得计算值’13pt’（130%乘以父元素的值10pt）。因为’font-size’的计算值是继承的，EM元素也将获得计算值’13pt’。如果用户代理没有可用的13pt字体，H1和EM的’font-size’的实际值可能是，例如，’12pt’</p>
<p>注意，继承遵循文档树并且不会被匿名框截断</p>
<h3 id="2-1-‘inherit’值"><a href="#2-1-‘inherit’值" class="headerlink" title="2.1 ‘inherit’值"></a>2.1 ‘inherit’值</h3><p>每个属性也可能有一个’inherit’层叠值，表示对于一个给定的元素，属性采用与其父级属性相同的指定值。’inherit’值可以用来实现值的继承，并且它也可以用在那些一般不是继承的属性上</p>
<p>如果’inherit’值设置在根元素上，该属性会被赋值为其初始值</p>
<p>下例中，’color’和’background’属性被设置在BODY元素上。对于其它所有元素，’color’值都将被继承并且背景将是透明的。如果这些规则是用户样式表的一部分，整个文档都将是白色背景上的黑色文本</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span> {</span><br><span class="line"> <span class="attribute">color</span>: black <span class="meta">!important</span>; </span><br><span class="line"> <span class="attribute">background</span>: white <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="attribute">color</span>: inherit <span class="meta">!important</span>; </span><br><span class="line"> <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="3、-import规则"><a href="#3、-import规则" class="headerlink" title="3、@import规则"></a>3、@import规则</h2><p>‘@import’规则允许用户从其它样式表引入样式规则。CSS 2.1中，任何@import规则必须位于所有其它规则（除了@charset，如果有的话）之前。关于用户代理什么情况下必须忽略@import规则，见解析章节。‘@import’关键字后面必须跟着想要引入的样式表的URI。字符串也可以接受，也可以表示成周围有url(…)的形式</p>
<p>下面这几行在意义上是等价的，都描述了‘@import’语法（一个有”url()”，另一个是裸字符串）：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">@import "mystyle.css";</span><br><span class="line">@import url("mystyle.css");</span><br></pre></td></tr></table></figure>
<p>为了让用户代理能够避免为不支持的媒体类型检索资源，编写者可以指定带媒体依赖（media-dependent）的@import规则。这种条件引入在URI后面指定了逗号分隔的媒体类型</p>
<p>下列规则描述了@import规则怎样变成带媒体依赖的：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">@import url("fineprint.css") print;</span><br><span class="line">@import url("bluish.css") projection, tv;</span><br></pre></td></tr></table></figure>
<p>缺少媒体类型时，引入是无条件的，与把媒体指定为’all’效果一样。引入只在目标媒体匹配媒体列表时才生效</p>
<p>如果媒体列表中有一项是目标媒体或者’all’时，目标媒体匹配媒体列表</p>
<p>注意，媒体查询[MEDIAQ]扩展了媒体列表的语法和匹配的定义</p>
<p>引入相同样式表或者在多处链接同一文档时，用户代理必须处理（或者表现得像那样）每一个链接，就像链接都指向一个单独的样式表一样</p>
<h2 id="4、层叠（cascade）"><a href="#4、层叠（cascade）" class="headerlink" title="4、层叠（cascade）"></a>4、层叠（cascade）</h2><p>样式表可能有3种不同来源：编写者，用户和用户代理</p>
<ul>
<li><strong>编写者</strong>：编写者根据文档语言约定给源文档指定样式表。例如，HTML中，样式表可以包含在文档中或者从外部链接</li>
<li><strong>用户</strong>：用户可能会给某个特定文档指定样式信息。例如，用户可以指定一个含有样式表的文件，或者用户代理可能会提供一个用来生成用户样式表（或者表现得像这样做了一样）的界面</li>
<li><strong>用户代理</strong>: （与CSS规范）一致的用户代理必须应用一份默认样式表（或者表现得像它做了一样）。用户代理的默认样式表应该以满足文档语言一般表现预期的方式来呈现文档语言元素（例如，对于可视化浏览器，HTML中EM元素用斜体来表示）。关于HTML元素的推荐默认样式表，见一份简单的HTML样式表<br>注意，用户可能会修改系统设置（例如，系统配色），这会影响默认样式表。然而，有些用户代理实现让默认样式表中的值不可改变</li>
</ul>
<p>这3种样式表将在一定范围内重叠，并且它们按照层叠互相影响</p>
<p>CSS层叠给每个样式规则赋予了权重。应用几条规则时，权重最大的优先</p>
<p>默认情况下，编写者样式表中的规则比用户样式表中的规则权重高。然而，对于”!important”规则，优先级却是相反的。所有用户和编写者规则都比UA默认样式表中的规则权重高</p>
<h3 id="4-1-层叠顺序"><a href="#4-1-层叠顺序" class="headerlink" title="4.1 层叠顺序"></a>4.1 层叠顺序</h3><p>为了找出一个元素/属性组合的值，用户代理必须按照下列（步骤）排序：</p>
<ol>
<li>找出目标媒体类型下，所有适用于该元素和目标属性的声明。如果关联的选择器匹配该元素，并且目标媒体类型与含有该声明的@media规则列出的所有媒体类型，以及到达样式表的路径上所有链接匹配，则声明适用（Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.）</li>
<li>根据重要性（常规或重要）和来源（编写者，用户或用户代理）排序，升序优先级为：<ul>
<li>用户代理声明</li>
<li>用户常规声明</li>
<li>编写者常规声明</li>
<li>编写者重要声明</li>
<li>用户重要声明</li>
</ul>
<p> </p>
</li>
<li>相同重要性和来源的规则根据选择器的特殊性（specificity）排序：更特殊的选择器将重写一般的。伪元素和伪类被分别算作常规元素和类</li>
<li>最后，根据指定顺序排序：如果两个声明的权重，来源和特殊性都相同，后指定的生效。引入的样式表（译注：这里应该是指‘@import’，而不是广义的通过各种方式引入样式表）中的声明被认为在样式表自身的所有声明之前</li>
</ol>
<p>除了给个别声明设置”!important”外，比起读者样式表，这种策略给了编写者样式表更高的权重。用户代理必须给予用户去除特定编写者样式表影响的能力，例如，通过一个下拉菜单。与UAAG 1.0 checkpoint 4.14一致的（用户代理）满足该条件[UAAG10]</p>
<h3 id="4-2-important规则"><a href="#4-2-important规则" class="headerlink" title="4.2 !important规则"></a>4.2 !important规则</h3><p>CSS尝试在编写者和用户样式表之间建立平衡。默认情况下，编写者样式表中的规则会重写那些位于用户样式表中的（见层叠规则3）</p>
<p>然而，为了平衡，”!important”声明（声明后面跟着分隔符token “!”和关键字”important”）比常规声明优先。编写者和用户样式表都可能含有”!important”声明，并且用户”!important”规则会重写编写者”!important”规则。通过给予用户表现上的特殊需求（大字体，颜色组合等等）控制，该CSS特性提高了文档的可访问性</p>
<p>声明一个简写属性（例如，’background’）为”!important”等价于声明其所有子属性为”!important”</p>
<p>下例中用户样式表的第一条规则含有一个”!important”声明，重写了编写者样式表中的相关声明。第二条声明也将生效，因为被标记为”!important”了。然而，用户样式表中的第三条规则不是”!important”，因此被编写者样式表（恰好在一条简写属性中设置了）中的第二条规则重写了。而且，第三条编写者规则将被第二条编写者规则重写，因为第二条规则是”!important”。这说明”!important”声明在编写者样式表中也有效</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* From the user's style sheet */</span></span><br><span class="line"><span class="selector-tag">p</span> { <span class="attribute">text-indent</span>: <span class="number">1em</span> ! important }</span><br><span class="line"><span class="selector-tag">p</span> { <span class="attribute">font-style</span>: italic ! important }</span><br><span class="line"><span class="selector-tag">p</span> { <span class="attribute">font-size</span>: <span class="number">18pt</span> }</span><br><span class="line"></span><br><span class="line"><span class="comment">/* From the author's style sheet */</span></span><br><span class="line"><span class="selector-tag">p</span> { <span class="attribute">text-indent</span>: <span class="number">1.5em</span> <span class="meta">!important</span> }</span><br><span class="line"><span class="selector-tag">p</span> { <span class="attribute">font</span>: normal <span class="number">12pt</span> sans-serif <span class="meta">!important</span> }</span><br><span class="line"><span class="selector-tag">p</span> { <span class="attribute">font-size</span>: <span class="number">24pt</span> }</span><br></pre></td></tr></table></figure>
<h3 id="4-3-计算选择器的特殊性（specificity）"><a href="#4-3-计算选择器的特殊性（specificity）" class="headerlink" title="4.3 计算选择器的特殊性（specificity）"></a>4.3 计算选择器的特殊性（specificity）</h3><p>一个选择器的特殊性是根据下列（规则）计算的：</p>
<ul>
<li>如果声明来自一个’style’属性而不是一条选择器样式规则，算1，否则就是0 (= a)（HTMl中，一个元素的”style”属性值是样式表规则，这些属性没有选择器，所以a=1，b=0，c=0，d=0）</li>
<li>计算选择器中ID属性的数量 (= b)</li>
<li>计算选择器中其它属性和伪类的数量 (= c)</li>
<li>计算选择器中元素名和伪元素的数量 (= d)</li>
</ul>
<p>特殊性只根据选择器的形式来定。特殊的，一个”[id=p33]”形式的选择器被算作一个属性选择器(a=0, b=0, c=1, d=0)，即使id属性在源文档的DTD中被定义为”ID”</p>
<p>4个数连起来a-b-c-d（在一个基数很大的数字系统中（in a number system with a large base））表示特殊性</p>
<p>一些示例：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"> * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */</span><br><span class="line"> li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */</span><br><span class="line"> li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */</span><br><span class="line"> ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */</span><br><span class="line"> ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */</span><br><span class="line"> h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */</span><br><span class="line"> ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */</span><br><span class="line"> li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */</span><br><span class="line"> #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */</span><br><span class="line"> style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */</span><br><span class="line"> </span><br><span class="line"><span class="tag"><<span class="name">HEAD</span>></span></span><br><span class="line"><span class="tag"><<span class="name">STYLE</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"> <span class="selector-id">#x97z</span> { <span class="attribute">color</span>: red }</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">STYLE</span>></span></span><br><span class="line"><span class="tag"></<span class="name">HEAD</span>></span></span><br><span class="line"><span class="tag"><<span class="name">BODY</span>></span></span><br><span class="line"><span class="tag"><<span class="name">P</span> <span class="attr">ID</span>=<span class="string">x97z</span> <span class="attr">style</span>=<span class="string">"color: green"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">BODY</span>></span></span><br></pre></td></tr></table></figure>
<p>上面的示例中，P元素的颜色将是绿色，”style”属性中的声明将重写STYLE元素中的，因为层叠规则3，它的特殊性更高</p>
<h3 id="4-4-非CSS表现型提示（presentational-hints）的样式优先级"><a href="#4-4-非CSS表现型提示（presentational-hints）的样式优先级" class="headerlink" title="4.4 非CSS表现型提示（presentational hints）的样式优先级"></a>4.4 非CSS表现型提示（presentational hints）的样式优先级</h3><p>UA可能选择尊重HTML源文档中的表现型属性。如果这样的话，这些属性会被翻译成相应的特殊性为0的CSS规则，并且就当它们像是被插在编写者样式表开头的一样。因此，它们可以被后续样式表符规则重写。在过渡阶段，这种策略让表现型属性（stylistic attributes）更容易与样式表共存</p>
<p>对于HTML，下面列表之外的任何属性都应该被认为是表现性的：abbr，accept-charset，accept，accesskey， action，alt，archive，axis，charset，checked，cite，class，classid， code，codebase，codetype，colspan，coords，data，datetime，declare， defer，dir，disabled，enctype，for，headers，href，hreflang， http-equiv，id，ismap，label，lang，language，longdesc，maxlength， media，method，multiple，name，nohref，object，onblur，onchange， onclick，ondblclick，onfocus，onkeydown，onkeypress，onkeyup，onload， onload，onmousedown，onmousemove，onmouseout，onmouseover，onmouseup， onreset，onselect，onsubmit，onunload，onunload，profile，prompt， readonly，rel，rev，rowspan，scheme，scope，selected，shape，span， src，standby，start，style，summary，title，type（LI，OL和UL元素上的除外），usemap，value，valuetype，version</p>
<p>对于其它语言，所有基于文档语言的样式必须被翻译成相应的CSS，并且要么算进用户代理级的层叠中，要么与HTML表现型提示一起被当作特殊性为0的编写者级规则放在编写者样式表开头</p>
<p>下列用户样式表将会重写所有文档中’b’元素的字重，以及XML文档中具有color属性的font’元素的颜色。它将不会影响HTML文档中任何具有color属性的’font’元素的颜色（译注：实际上，在HTML里这个样式对有color属性的font元素也是有效的。但一致性章节有声明“示例和注意事项是非规范的”，这里是示例）：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">b</span> { <span class="attribute">font-weight</span>: normal; }</span><br><span class="line"><span class="attribute">font</span><span class="selector-attr">[color]</span> { <span class="attribute">color</span>: orange; }</span><br></pre></td></tr></table></figure>
<p>然而，下面的（样式表）将会重写所有文档中font元素的颜色：</p>
<p><code>font[color] { color: orange ! important; }</code></p>
<h2 id="5、小结"><a href="#5、小结" class="headerlink" title="5、小结"></a>5、小结</h2><h3 id="5-1-选择器越具体，其优先级越高"><a href="#5-1-选择器越具体，其优先级越高" class="headerlink" title="5.1 选择器越具体，其优先级越高"></a>5.1 选择器越具体，其优先级越高</h3><h3 id="5-2-相同优先级，出现在后面的，覆盖前面的"><a href="#5-2-相同优先级，出现在后面的，覆盖前面的" class="headerlink" title="5.2 相同优先级，出现在后面的，覆盖前面的"></a>5.2 相同优先级，出现在后面的，覆盖前面的</h3><h3 id="5-3-属性后面加-important-的优先级最高，但是要少用"><a href="#5-3-属性后面加-important-的优先级最高，但是要少用" class="headerlink" title="5.3 属性后面加 !important 的优先级最高，但是要少用"></a>5.3 属性后面加 !important 的优先级最高，但是要少用</h3><hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>css</tag>
</tags>
</entry>
<entry>
<title>七种方式实现垂直居中</title>
<url>/2024/04/02/Font-end/css/%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/</url>
<content><![CDATA[<p>如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；<br><br>如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法。<br><br>忠告：能不写 height 就千万别写 height。<br></p>
<h1 id="​​​​​​​1、table自带功能"><a href="#​​​​​​​1、table自带功能" class="headerlink" title="​​​​​​​1、table自带功能"></a>​​​​​​​1、table自带功能</h1><p><strong>代码</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// html</span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">table</span> <span class="attr">class</span>=<span class="string">"parent"</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">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> 【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】</span><br><span class="line"> <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">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid green;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>效果图</strong></p>
<p><img src="/2024/04/02/Font-end/css/%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B01table%E8%87%AA%E5%B8%A6%E5%8A%9F%E8%83%BD.png" alt="​​​​​​​01table自带功能"></p>
<h1 id="2、100-高度的-after-before-加上-inline-block"><a href="#2、100-高度的-after-before-加上-inline-block" class="headerlink" title="2、100% 高度的 after before 加上 inline block"></a>2、100% 高度的 after before 加上 inline block</h1><p><strong>代码</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// html</span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">before</span>></span><span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> 【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span><span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">after</span>></span><span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">3px</span> solid red;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">3px</span> solid black;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.parent</span> <span class="selector-class">.before</span>{</span><br><span class="line"> <span class="attribute">outline</span>: <span class="number">3px</span> solid red;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.parent</span> <span class="selector-class">.after</span>{</span><br><span class="line"> <span class="attribute">outline</span>: <span class="number">3px</span> solid red;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>效果图</strong></p>
<p><img src="/2024/04/02/Font-end/css/%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E2%80%8B02%E5%8A%A0%E4%B8%8AinlineBlock.png" alt="​02加上inlineBlock"></p>
<p><strong>优化版</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// html</span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> 【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">3px</span> solid red;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">3px</span> solid black;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.parent</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">outline</span>: <span class="number">3px</span> solid red;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.parent</span><span class="selector-pseudo">:after</span>{</span><br><span class="line"> <span class="attribute">content</span>:<span class="string">''</span>;</span><br><span class="line"> <span class="attribute">outline</span>: <span class="number">3px</span> solid red;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="3、div-装成-table"><a href="#3、div-装成-table" class="headerlink" title="3、div 装成 table"></a>3、div 装成 table</h1><p><strong>代码</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// html</span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"table"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"td"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> 【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">// css</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.table</span>{</span><br><span class="line"> <span class="attribute">display</span>: table;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.td</span>{</span><br><span class="line"> <span class="attribute">display</span>: table-cell;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid blue;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">10px</span> solid black;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>效果图</strong></p>
<p><img src="/2024/04/02/Font-end/css/%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/03div%E8%A3%85%E6%88%90table.png" alt="03div 装成 table"></p>
<h1 id="4、margin-top-50"><a href="#4、margin-top-50" class="headerlink" title="4、margin-top -50%"></a>4、margin-top -50%</h1><p><strong>代码</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// html</span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> 【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">// css</span><br><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid green;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">margin-left</span>: -<span class="number">150px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: -<span class="number">50px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>效果图</strong></p>
<p><img src="/2024/04/02/Font-end/css/%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%0B%0B%0B%0B%0B%0B%0B%0B04margin-top-50%25.png" alt="​​​​​​​04margin-top -50%.png"></p>
<h1 id="5、translate-50"><a href="#5、translate-50" class="headerlink" title="5、translate -50%"></a>5、translate -50%</h1><p><strong>代码</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// html</span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> 【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">// css</span><br><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid green;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>,-<span class="number">50%</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>效果图</strong></p>
<h2 id><a href="#" class="headerlink" title></a><img src="/2024/04/02/Font-end/css/%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%0B%0B%0B%0B%0B%0B%0B%0B05translate-50%25.png" alt="05translate -50%.png"></h2><h1 id="6、absolute-margin-auto"><a href="#6、absolute-margin-auto" class="headerlink" title="6、absolute margin auto"></a>6、absolute margin auto</h1><p><strong>代码</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// html</span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> 【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">// css</span><br><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid green;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</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</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>效果图</strong></p>
<p><img src="/2024/04/02/Font-end/css/%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B06absoluteMarginAuto.png" alt="​​​​​​​06absolute margin auto"></p>
<h1 id="7、flex"><a href="#7、flex" class="headerlink" title="7、flex"></a>7、flex</h1><p><strong>代码</strong> </p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line">// html</span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> 【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】【垂直居中】</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">// css</span><br><span class="line"><span class="selector-class">.parent</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">3px</span> solid red;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.child</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">3px</span> solid green;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>效果图</strong></p>
<h2 id="-1"><a href="#-1" class="headerlink" title></a><img src="/2024/04/02/Font-end/css/%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B07flex.png" alt="​​​​​​​07flex"></h2><p><img src="/2024/04/02/Font-end/css/%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B01table%E8%87%AA%E5%B8%A6%E5%8A%9F%E8%83%BD.png" alt="​​​​​​​01table自带功能"></p>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>css</tag>
</tags>
</entry>
<entry>
<title>两种盒模型（box-sizing）的区别？</title>
<url>/2024/03/17/Font-end/css/%E4%B8%A4%E7%A7%8D%E7%9B%92%E6%A8%A1%E5%9E%8B%EF%BC%88box-sizing%EF%BC%89%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F/</url>
<content><![CDATA[<h2 id="第一种盒模型是-content-box，即-width-指定的是-content-区域宽度，而不是实际宽度，公式为"><a href="#第一种盒模型是-content-box，即-width-指定的是-content-区域宽度，而不是实际宽度，公式为" class="headerlink" title="第一种盒模型是 content-box，即 width 指定的是 content 区域宽度，而不是实际宽度，公式为"></a>第一种盒模型是 content-box，即 width 指定的是 content 区域宽度，而不是实际宽度，公式为</h2><p><code>实际宽度 = width + padding + border </code></p>
<h2 id="第二种盒模型是-border-box，即-width-指定的是左右边框外侧的距离，公式为"><a href="#第二种盒模型是-border-box，即-width-指定的是左右边框外侧的距离，公式为" class="headerlink" title="第二种盒模型是 border-box，即 width 指定的是左右边框外侧的距离，公式为"></a>第二种盒模型是 border-box，即 width 指定的是左右边框外侧的距离，公式为</h2><p><code>实际宽度 = width</code></p>
<p>相同点是都是用来指定宽度的，不同点是 border-box 更好用。 </p>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>css</tag>
</tags>
</entry>
<entry>
<title>如何清除浮动？</title>
<url>/2024/03/26/Font-end/css/%E5%A6%82%E4%BD%95%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%EF%BC%9F/</url>
<content><![CDATA[<h1 id="未清除浮动的影响"><a href="#未清除浮动的影响" class="headerlink" title="未清除浮动的影响"></a>未清除浮动的影响</h1><ol>
<li>父级元素因为子级浮动引起的内部高度为0</li>
<li>父级元素的兄弟元素高度为0，其他样式也不能实现</li>
</ol>
<p><img src="/2024/03/26/Font-end/css/%E5%A6%82%E4%BD%95%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%EF%BC%9F/01%E6%9C%AA%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E5%BD%B1%E5%93%8D.png" alt="01未清除浮动的影响"></p>
<p><strong>代码</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"father"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child1"</span>></span>child1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child2"</span>></span>child2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"friend"</span>></span>friend<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.child1</span>,<span class="selector-class">.child2</span>,<span class="selector-class">.friend</span>{</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">50px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child1</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid blue;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child2</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid green;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.friend</span>{</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid red;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.father</span>{</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid black;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="方法1：给父元素加上-clearfix"><a href="#方法1：给父元素加上-clearfix" class="headerlink" title="方法1：给父元素加上 .clearfix"></a>方法1：给父元素加上 .clearfix</h1><p><strong>代码</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"father clearfix"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child1"</span>></span>child1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child2"</span>></span>child2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"friend"</span>></span>friend<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.child1</span>,<span class="selector-class">.child2</span>,<span class="selector-class">.friend</span>{</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">50px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child1</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid blue;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child2</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid green;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.friend</span>{</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid red;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.father</span>{</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid black;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>{</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line"> <span class="attribute">display</span>: block; <span class="comment">/*或者 table*/</span></span><br><span class="line"> <span class="attribute">clear</span>: both;</span><br><span class="line"> }</span><br><span class="line"><span class="selector-class">.clearfix</span>{</span><br><span class="line"> zoom: <span class="number">1</span>; <span class="comment">/* IE 兼容*/</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>效果图</strong></p>
<p><img src="/2024/03/26/Font-end/css/%E5%A6%82%E4%BD%95%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%EF%BC%9F/02%E7%BB%99%E7%88%B6%E5%85%83%E7%B4%A0%E5%8A%A0%E4%B8%8A.clearfix%E6%95%88%E6%9E%9C%E5%9B%BE.png" alt="02给父元素加上.clearfix效果图"></p>
<h1 id="方法2：给父元素加上-overflow-hidden"><a href="#方法2：给父元素加上-overflow-hidden" class="headerlink" title="方法2：给父元素加上 overflow:hidden"></a>方法2：给父元素加上 overflow:hidden</h1><p><strong>代码</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"father"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child1"</span>></span>child1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child2"</span>></span>child2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"friend"</span>></span>friend<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.child1</span>,<span class="selector-class">.child2</span>,<span class="selector-class">.friend</span>{</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">50px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child1</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid blue;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child2</span>{</span><br><span class="line"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid green;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.friend</span>{</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid red;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.father</span>{</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">1px</span> solid black;</span><br><span class="line"> <span class="attribute">overflow</span>:hidden</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>效果图</strong></p>
<p><img src="/2024/03/26/Font-end/css/%E5%A6%82%E4%BD%95%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%EF%BC%9F/03%E7%BB%99%E7%88%B6%E5%85%83%E7%B4%A0%E5%8A%A0%E4%B8%8Aoverflow-hidden.png" alt="03给父元素加上overflow-hidden"></p>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>css</tag>
</tags>
</entry>
<entry>
<title>大屏可视化项目实践</title>
<url>/2024/03/24/Font-end/echarts/%E5%A4%A7%E5%B1%8F%E5%8F%AF%E8%A7%86%E5%8C%96%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/</url>
<content><![CDATA[<h1 id="一、如何使用-rem-和-px-函数适配各种屏幕"><a href="#一、如何使用-rem-和-px-函数适配各种屏幕" class="headerlink" title="一、如何使用 rem 和 px 函数适配各种屏幕"></a>一、如何使用 rem 和 px 函数适配各种屏幕</h1><h2 id="1、如何适配屏幕"><a href="#1、如何适配屏幕" class="headerlink" title="1、如何适配屏幕"></a>1、如何适配屏幕</h2><h3 id="设计稿"><a href="#设计稿" class="headerlink" title="设计稿"></a>设计稿</h3><p><img src="/2024/03/24/Font-end/echarts/%E5%A4%A7%E5%B1%8F%E5%8F%AF%E8%A7%86%E5%8C%96%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/01%E8%AE%BE%E8%AE%A1%E7%A8%BF.png" alt="01设计稿"></p>
<h3 id="大屏"><a href="#大屏" class="headerlink" title="大屏"></a>大屏</h3><h4 id="屏幕高"><a href="#屏幕高" class="headerlink" title="屏幕高"></a>屏幕高</h4><p><img src="/2024/03/24/Font-end/echarts/%E5%A4%A7%E5%B1%8F%E5%8F%AF%E8%A7%86%E5%8C%96%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/02%E5%B1%8F%E5%B9%95%E9%AB%98.png" alt="02屏幕高"></p>
<h4 id="屏幕宽"><a href="#屏幕宽" class="headerlink" title="屏幕宽"></a>屏幕宽</h4><p><img src="/2024/03/24/Font-end/echarts/%E5%A4%A7%E5%B1%8F%E5%8F%AF%E8%A7%86%E5%8C%96%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/03%E5%B1%8F%E5%B9%95%E5%AE%BD.png" alt="03屏幕宽"></p>
<p>结论：屏幕宽就左右居中，屏幕高就上下居中</p>
<h3 id="算法"><a href="#算法" class="headerlink" title="算法"></a>算法</h3><p><img src="/2024/03/24/Font-end/echarts/%E5%A4%A7%E5%B1%8F%E5%8F%AF%E8%A7%86%E5%8C%96%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/04%E7%AE%97%E6%B3%95.png" alt="04算法"></p>
<p>Wp为页面有效宽度，Hp为页面有效高度<br>页面左右居中，上下居中，四周留白即可<br>然后在head里用JS设置1rem = Wp /100</p>
<h3 id="1-1-获取设备（浏览器）宽高"><a href="#1-1-获取设备（浏览器）宽高" class="headerlink" title="1.1 获取设备（浏览器）宽高"></a>1.1 获取设备（浏览器）宽高</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> clientWidth = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span> </span><br><span class="line"><span class="keyword">const</span> clientHeight = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span> </span><br></pre></td></tr></table></figure>
<h3 id="1-2-判断设备宽高是大于16比9还是小于16比9"><a href="#1-2-判断设备宽高是大于16比9还是小于16比9" class="headerlink" title="1.2 判断设备宽高是大于16比9还是小于16比9"></a>1.2 判断设备宽高是大于16比9还是小于16比9</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> pageWidth = clientWidth / clientHeight > <span class="number">16</span> / <span class="number">9</span> ? clientHeight * (<span class="number">16</span> / <span class="number">9</span>) : clientWidth; </span><br><span class="line"><span class="keyword">const</span> pageHeight = pageWidth / (<span class="number">16</span>/<span class="number">9</span>) </span><br></pre></td></tr></table></figure>
<h3 id="1-3-设置1rem-100px，并写入页面"><a href="#1-3-设置1rem-100px，并写入页面" class="headerlink" title="1.3 设置1rem=100px，并写入页面"></a>1.3 设置1rem=100px，并写入页面</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> string = <span class="string">`<style>html{ </span></span><br><span class="line"><span class="string"> font-size: <span class="subst">${pageWidth / <span class="number">100</span>}</span>px </span></span><br><span class="line"><span class="string">}</style>`</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">write</span>(string)</span><br></pre></td></tr></table></figure>
<h2 id="2、-用rem代替像素"><a href="#2、-用rem代替像素" class="headerlink" title="2、 用rem代替像素"></a>2、 用rem代替像素</h2><p>像素不能用时用rem<br><img src="/2024/03/24/Font-end/echarts/%E5%A4%A7%E5%B1%8F%E5%8F%AF%E8%A7%86%E5%8C%96%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/05%E7%94%A8rem%E4%BB%A3%E6%9B%BF%E5%83%8F%E7%B4%A01.png" alt="05用rem代替像素1"></p>
<p><img src="/2024/03/24/Font-end/echarts/%E5%A4%A7%E5%B1%8F%E5%8F%AF%E8%A7%86%E5%8C%96%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/06%E7%94%A8rem%E4%BB%A3%E6%9B%BF%E5%83%8F%E7%B4%A02.png" alt="06用rem代替像素2"></p>
<p>假设某div在设计稿中长100px，设计稿宽度1920px<br>那么该div在页面中长为100/1920 * 100 rem</p>
<h3 id="2-1-定义px用来转换成rem"><a href="#2-1-定义px用来转换成rem" class="headerlink" title="2.1 定义px用来转换成rem"></a>2.1 定义px用来转换成rem</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">@<span class="keyword">function</span> <span class="title function_">px</span>(<span class="params">$n</span>){</span><br><span class="line"> @<span class="keyword">return</span> $n /<span class="number">2420</span> * 100rem;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<br>
<h1 id="二、如何使用-echarts"><a href="#二、如何使用-echarts" class="headerlink" title="二、如何使用 echarts"></a>二、如何使用 echarts</h1><h2 id="1、-引入echarts"><a href="#1、-引入echarts" class="headerlink" title="1、 引入echarts"></a>1、 引入echarts</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> echarts <span class="keyword">from</span> <span class="string">'echarts'</span>;</span><br></pre></td></tr></table></figure>
<h2 id="2、-初始化echarts"><a href="#2、-初始化echarts" class="headerlink" title="2、 初始化echarts"></a>2、 初始化echarts</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> divRef = <span class="title function_">useRef</span>(<span class="literal">null</span>);</span><br><span class="line"> <span class="title function_">useEffect</span>(<span class="function">()=></span>{</span><br><span class="line"> <span class="keyword">var</span> myChart = echarts.<span class="title function_">init</span>(divRef.<span class="property">current</span>);</span><br><span class="line"> 此处有省略</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> (</span><br><span class="line"> 此处有省略</span><br><span class="line"> <div ref={divRef} className=<span class="string">"chart"</span>> </div></span><br><span class="line"> 此处有省略</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<h2 id="3、设置echarts"><a href="#3、设置echarts" class="headerlink" title="3、设置echarts"></a>3、设置echarts</h2><h3 id="3-1-基础设置"><a href="#3-1-基础设置" class="headerlink" title="3.1 基础设置"></a>3.1 基础设置</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">myChart.<span class="title function_">setOption</span>({</span><br><span class="line"> <span class="attr">textStyle</span>:{</span><br><span class="line"> <span class="attr">fontSize</span>: <span class="title function_">px</span>(<span class="number">12</span>),</span><br><span class="line"> <span class="attr">color</span>: <span class="string">'#79839E'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">title</span>:{ <span class="attr">show</span>: <span class="literal">false</span>},</span><br><span class="line"> <span class="attr">legend</span>: {<span class="attr">show</span>: <span class="literal">false</span>},</span><br><span class="line"> 此处有省略</span><br><span class="line"> <span class="attr">series</span>:[{</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'销量'</span>,</span><br><span class="line"> <span class="attr">type</span>:<span class="string">'bar'</span>,</span><br><span class="line"> <span class="attr">data</span>:[<span class="number">5</span>, <span class="number">20</span>, <span class="number">36</span>, <span class="number">10</span>, <span class="number">10</span>, <span class="number">20</span>]</span><br><span class="line"> }]</span><br><span class="line"> })</span><br></pre></td></tr></table></figure>
<h3 id="3-2-设置x轴、y轴样式"><a href="#3-2-设置x轴、y轴样式" class="headerlink" title="3.2 设置x轴、y轴样式"></a>3.2 设置x轴、y轴样式</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line">// x轴样式 </span><br><span class="line">xAxis:{</span><br><span class="line"> axisLabel:{</span><br><span class="line"> fontSize: <span class="built_in">px</span>(<span class="number">12</span>)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">//y轴样式</span><br><span class="line"> yAxis: {</span><br><span class="line"> axisLabel:{</span><br><span class="line"> fontSize: <span class="built_in">px</span>(<span class="number">12</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="3-3-设置空白区域"><a href="#3-3-设置空白区域" class="headerlink" title="3.3 设置空白区域"></a>3.3 设置空白区域</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="attribute">grid</span>:{</span><br><span class="line"> x: <span class="built_in">px</span>(<span class="number">40</span>),</span><br><span class="line"> y: <span class="built_in">px</span>(<span class="number">40</span>),</span><br><span class="line"> x2: <span class="built_in">px</span>(<span class="number">40</span>),</span><br><span class="line"> y2: <span class="built_in">px</span>(<span class="number">40</span>),</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="3-4-修改x轴标签样式"><a href="#3-4-修改x轴标签样式" class="headerlink" title="3.4 修改x轴标签样式"></a>3.4 修改x轴标签样式</h3><p>每行两个字</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">xAxis</span>: {</span><br><span class="line"> <span class="attr">axisLabel</span>: {</span><br><span class="line"> <span class="title function_">formatter</span>(<span class="params">val</span>) {</span><br><span class="line"> <span class="keyword">if</span> (val.<span class="property">length</span> > <span class="number">2</span>) {</span><br><span class="line"> <span class="keyword">const</span> array = val.<span class="title function_">split</span>(<span class="string">''</span>);</span><br><span class="line"> array.<span class="title function_">splice</span>(<span class="number">2</span>, <span class="number">0</span>, <span class="string">'\n'</span>);</span><br><span class="line"> <span class="keyword">return</span> array.<span class="title function_">join</span>(<span class="string">''</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> val;</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>注：这样写会报错val.splice(2,0,’\n’);<br>因为val是字符串，而字符串是没有splice，要先转换成数组，再连在一起</p>
<h3 id="3-5-隐藏x轴图形文字说明"><a href="#3-5-隐藏x轴图形文字说明" class="headerlink" title="3.5 隐藏x轴图形文字说明"></a>3.5 隐藏x轴图形文字说明</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line">xAxis: {</span><br><span class="line"> axisTick: {show: false}</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="3-6-柱形图加渐变"><a href="#3-6-柱形图加渐变" class="headerlink" title="3.6 柱形图加渐变"></a>3.6 柱形图加渐变</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line">itemStyle:{</span><br><span class="line"> <span class="attribute">normal</span>:{</span><br><span class="line"> <span class="attribute">color</span>: new echarts.graphic.<span class="built_in">LinearGradient</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">1</span>,<span class="number">0</span>,[{</span><br><span class="line"> offset: <span class="number">0</span>,</span><br><span class="line"> color: <span class="string">'#2034f9'</span></span><br><span class="line"> },{</span><br><span class="line"> offset: <span class="number">1</span>,</span><br><span class="line"> color: <span class="string">'#04a1ff'</span></span><br><span class="line"> }]),</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="3-7-去掉X轴上的小竖杠"><a href="#3-7-去掉X轴上的小竖杠" class="headerlink" title="3.7 去掉X轴上的小竖杠"></a>3.7 去掉X轴上的小竖杠</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line">xAxis: {</span><br><span class="line"> axisTick: {show: false},</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="3-8-去掉X轴上的白线"><a href="#3-8-去掉X轴上的白线" class="headerlink" title="3.8 去掉X轴上的白线"></a>3.8 去掉X轴上的白线</h3><figure class="highlight css"><table><tr><td class="code"><pre><span class="line">xAxis: {</span><br><span class="line"> axisLine: {show: false},</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>echarts</tag>
</tags>
</entry>
<entry>
<title>jQuery 的功能</title>
<url>/2024/04/03/Font-end/jQuery/jQuery%20%E7%9A%84%E5%8A%9F%E8%83%BD/</url>
<content><![CDATA[<h1 id="1、jQuery-如何获取元素"><a href="#1、jQuery-如何获取元素" class="headerlink" title="1、jQuery 如何获取元素"></a>1、jQuery 如何获取元素</h1><h2 id="1-1-选择表达式可以是CSS选择器："><a href="#1-1-选择表达式可以是CSS选择器：" class="headerlink" title="1.1 选择表达式可以是CSS选择器："></a>1.1 选择表达式可以是CSS选择器：</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">　$(<span class="variable language_">document</span>) <span class="comment">//选择整个文档对象</span></span><br><span class="line"></span><br><span class="line">　$(<span class="string">'#myId'</span>) <span class="comment">//选择ID为myId的网页元素</span></span><br><span class="line"></span><br><span class="line">　$(<span class="string">'div.myClass'</span>) <span class="comment">// 选择class为myClass的div元素</span></span><br><span class="line"></span><br><span class="line">　$(<span class="string">'input[name=first]'</span>) <span class="comment">// 选择name属性等于first的input元素</span></span><br></pre></td></tr></table></figure>
<h2 id="1-2-jQuery特有的表达式："><a href="#1-2-jQuery特有的表达式：" class="headerlink" title="1.2 jQuery特有的表达式："></a>1.2 jQuery特有的表达式：</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">'a:first'</span>) <span class="comment">//选择网页中第一个a元素</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">'tr:odd'</span>) <span class="comment">//选择表格的奇数行</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">'#myForm :input'</span>) <span class="comment">// 选择表单中的input元素</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">'div:visible'</span>) <span class="comment">//选择可见的div元素</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">'div:gt(2)'</span>) <span class="comment">// 选择所有的div元素，除了前三个</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">'div:animated'</span>) <span class="comment">// 选择当前处于动画状态的div元素</span></span><br></pre></td></tr></table></figure>
<h1 id="2、jQuery-的链式操作是怎样的"><a href="#2、jQuery-的链式操作是怎样的" class="headerlink" title="2、jQuery 的链式操作是怎样的"></a>2、jQuery 的链式操作是怎样的</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).<span class="title function_">find</span>(<span class="string">'h3'</span>).<span class="title function_">eq</span>(<span class="number">2</span>).<span class="title function_">html</span>(<span class="string">'Hello'</span>);</span><br></pre></td></tr></table></figure>
<p>分解开来，就是下面这样：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">　$(<span class="string">'div'</span>) <span class="comment">//找到div元素</span></span><br><span class="line"></span><br><span class="line">　　　.<span class="title function_">find</span>(<span class="string">'h3'</span>) <span class="comment">//选择其中的h3元素</span></span><br><span class="line"></span><br><span class="line">　　　.<span class="title function_">eq</span>(<span class="number">2</span>) <span class="comment">//选择第3个h3元素</span></span><br><span class="line"></span><br><span class="line">　　　.<span class="title function_">html</span>(<span class="string">'Hello'</span>); <span class="comment">//将它的内容改为Hello</span></span><br></pre></td></tr></table></figure>
<p>jQuery还提供了.end()方法，使得结果集可以后退一步：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">　　$(<span class="string">'div'</span>)</span><br><span class="line"></span><br><span class="line">　　　.<span class="title function_">find</span>(<span class="string">'h3'</span>)</span><br><span class="line"></span><br><span class="line">　　　.<span class="title function_">eq</span>(<span class="number">2</span>)</span><br><span class="line"></span><br><span class="line">　　　.<span class="title function_">html</span>(<span class="string">'Hello'</span>)</span><br><span class="line"></span><br><span class="line">　　　.<span class="title function_">end</span>() <span class="comment">//退回到选中所有的h3元素的那一步</span></span><br><span class="line"></span><br><span class="line">　　　.<span class="title function_">eq</span>(<span class="number">0</span>) <span class="comment">//选中第一个h3元素</span></span><br><span class="line"></span><br><span class="line">　　　.<span class="title function_">html</span>(<span class="string">'World'</span>); <span class="comment">//将它的内容改为World</span></span><br></pre></td></tr></table></figure>
<h1 id="3、jQuery-如何创建元素"><a href="#3、jQuery-如何创建元素" class="headerlink" title="3、jQuery 如何创建元素"></a>3、jQuery 如何创建元素</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">'<p>Hello</p>'</span>);</span><br><span class="line"></span><br><span class="line">$(<span class="string">'<li class="new">new list item</li>'</span>);</span><br><span class="line"></span><br><span class="line">$(<span class="string">'ul'</span>).<span class="title function_">append</span>(<span class="string">'<li>list item</li>'</span>);</span><br></pre></td></tr></table></figure>
<h1 id="4、jQuery-如何移动元素"><a href="#4、jQuery-如何移动元素" class="headerlink" title="4、jQuery 如何移动元素"></a>4、jQuery 如何移动元素</h1><p>假定我们选中了一个div元素，需要把它移动到p元素后面。<br>第一种方法是使用.insertAfter()，把div元素移动p元素后面：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).<span class="title function_">insertAfter</span>($(<span class="string">'p'</span>));</span><br></pre></td></tr></table></figure>
<p>第二种方法是使用.after()，把p元素加到div元素前面：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">　$(<span class="string">'p'</span>).<span class="title function_">after</span>($(<span class="string">'div'</span>));</span><br></pre></td></tr></table></figure>
<h1 id="5、jQuery-取值和赋值"><a href="#5、jQuery-取值和赋值" class="headerlink" title="5、jQuery 取值和赋值"></a>5、jQuery 取值和赋值</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">$(<span class="string">'h1'</span>).<span class="title function_">html</span>(); <span class="comment">//html()没有参数，表示取出h1的值</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">'h1'</span>).<span class="title function_">html</span>(<span class="string">'Hello'</span>); <span class="comment">//html()有参数Hello，表示对h1进行赋值</span></span><br></pre></td></tr></table></figure>
<p>常见的取值和赋值函数如下：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">　.html() 取出或设置html内容</span><br><span class="line"></span><br><span class="line">　.text() 取出或设置text内容</span><br><span class="line"></span><br><span class="line">　.attr() 取出或设置某个属性的值</span><br><span class="line"></span><br><span class="line">　.width() 取出或设置某个元素的宽度</span><br><span class="line"></span><br><span class="line">　.height() 取出或设置某个元素的高度</span><br><span class="line"></span><br><span class="line">　.val() 取出某个表单元素的值</span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>jQuery</tag>
</tags>
</entry>
<entry>
<title>DOM 事件模型或 DOM 事件机制</title>
<url>/2024/04/03/Font-end/js/DOM%20%E4%BA%8B%E4%BB%B6%E6%A8%A1%E5%9E%8B%E6%88%96%20DOM%20%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6/</url>
<content><![CDATA[<h1 id="1、事件捕获"><a href="#1、事件捕获" class="headerlink" title="1、事件捕获"></a>1、事件捕获</h1><p>捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)</p>
<h1 id="2、事件冒泡"><a href="#2、事件冒泡" class="headerlink" title="2、事件冒泡"></a>2、事件冒泡</h1><p>冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。</p>
<h1 id="3、捕获和冒泡顺序"><a href="#3、捕获和冒泡顺序" class="headerlink" title="3、捕获和冒泡顺序"></a>3、捕获和冒泡顺序</h1><p>w3c规定了，任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。绑定在被点击元素的事件是按照代码的顺序发生的。<br>冒泡，它就像鱼儿吐泡泡一样，从下到上。<br>从祖先元素开始慢慢找，最后找到我们的点击目标，这个行为不就像警察叔叔抓坏人一样，逐渐的缩小抓捕范围，最后确定到某一个人身上，所以这个叫做捕获。</p>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>javascript</tag>
</tags>
</entry>
<entry>
<title>JS 函数的执行时机</title>
<url>/2024/04/03/Font-end/js/JS%20%E5%87%BD%E6%95%B0%E7%9A%84%E6%89%A7%E8%A1%8C%E6%97%B6%E6%9C%BA/</url>
<content><![CDATA[<h1 id="1、解释为什么如下代码会打印-6-个-6"><a href="#1、解释为什么如下代码会打印-6-个-6" class="headerlink" title="1、解释为什么如下代码会打印 6 个 6"></a>1、解释为什么如下代码会打印 6 个 6</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line"><span class="keyword">for</span>(i = <span class="number">0</span>; i<<span class="number">6</span>; i++){</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">()=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line"> },<span class="number">0</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>SetTimeout在for循环之后才执行，那时候i为6，然后再打印出6次6</p>
<h1 id="2、写出让上面代码打印-0、1、2、3、4、5-的方法"><a href="#2、写出让上面代码打印-0、1、2、3、4、5-的方法" class="headerlink" title="2、写出让上面代码打印 0、1、2、3、4、5 的方法"></a>2、写出让上面代码打印 0、1、2、3、4、5 的方法</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i<<span class="number">6</span>; i++){</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">()=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line"> },<span class="number">0</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="3-、（可选内容）除了使用-for-let-配合，还有什么其他方法可以打印出-0、1、2、3、4、5，如果你能找到并写在博客里，可以得到五星好评"><a href="#3-、（可选内容）除了使用-for-let-配合，还有什么其他方法可以打印出-0、1、2、3、4、5，如果你能找到并写在博客里，可以得到五星好评" class="headerlink" title="3 、（可选内容）除了使用 for let 配合，还有什么其他方法可以打印出 0、1、2、3、4、5，如果你能找到并写在博客里，可以得到五星好评 :)"></a>3 、（可选内容）除了使用 for let 配合，还有什么其他方法可以打印出 0、1、2、3、4、5，如果你能找到并写在博客里，可以得到五星好评 :)</h1><h2 id="方法一："><a href="#方法一：" class="headerlink" title="方法一："></a>方法一：</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line"><span class="keyword">while</span>(<span class="number">1</span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line"> i++</span><br><span class="line"> <span class="keyword">if</span>(i><span class="number">5</span>){</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="方法二："><a href="#方法二：" class="headerlink" title="方法二："></a>方法二：</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line"><span class="keyword">let</span> timer = <span class="built_in">setInterval</span>(<span class="function">()=></span>{ </span><br><span class="line"> <span class="keyword">if</span>(i<<span class="number">6</span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(i); </span><br><span class="line"> i++;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">timer</span> = <span class="literal">null</span>;</span><br><span class="line"> }</span><br><span class="line">}, <span class="number">0</span>);</span><br></pre></td></tr></table></figure>
<h2 id="方法三："><a href="#方法三：" class="headerlink" title="方法三："></a>方法三：</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">6</span>).<span class="title function_">fill</span>(<span class="string">''</span>)</span><br><span class="line">i.<span class="title function_">map</span>(<span class="function">(<span class="params">k,j</span>)=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(j);</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="方法四："><a href="#方法四：" class="headerlink" title="方法四："></a>方法四：</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span></span><br><span class="line"><span class="keyword">switch</span> (i){</span><br><span class="line"> <span class="keyword">case</span> <span class="number">0</span>:<span class="variable language_">console</span>.<span class="title function_">log</span>(i);i++;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">1</span>:<span class="variable language_">console</span>.<span class="title function_">log</span>(i);i++;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">2</span>:<span class="variable language_">console</span>.<span class="title function_">log</span>(i);i++;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">3</span>:<span class="variable language_">console</span>.<span class="title function_">log</span>(i);i++;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">4</span>:<span class="variable language_">console</span>.<span class="title function_">log</span>(i);i++;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">5</span>:<span class="variable language_">console</span>.<span class="title function_">log</span>(i);<span class="keyword">break</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>javascript</tag>
</tags>
</entry>
<entry>
<title>事件委托</title>
<url>/2024/04/03/Font-end/js/%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98/</url>
<content><![CDATA[<p>事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。我用取快递来解释这个现象： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台也会在收到寄给新员工的快递后核实并代为签收。</p>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>javascript</tag>
</tags>
</entry>
<entry>
<title>JS的new做了什么？</title>
<url>/2024/03/16/Font-end/js/JS%E7%9A%84new%E5%81%9A%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F/</url>
<content><![CDATA[<h1 id="new-做了什么"><a href="#new-做了什么" class="headerlink" title="new 做了什么"></a>new 做了什么</h1><p>1、创建临时对象/新对象<br>2、绑定原型<br>3、指定 this = 临时对象<br>4、执行构造函数<br>5、返回临时对象</p>
<p>想象我们在制作一个足球游戏，玩家可以创造球员。</p>
<p>我们着重来研究一下这个游戏里面的「制造球员」环节。</p>
<p>一个球员的在计算机里就是一堆属性<br><code>位置、弹跳、速度、 生命值 奔跑(动作)、传球(动作)、突破(动作)、铲球(动作)、射门(动作)</code></p>
<h1 id="我们只需要这样就可以制造一个球员："><a href="#我们只需要这样就可以制造一个球员：" class="headerlink" title="我们只需要这样就可以制造一个球员："></a>我们只需要这样就可以制造一个球员：</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> 球员 = {</span><br><span class="line"> <span class="attr">ID</span>: <span class="number">1</span>, <span class="comment">// 用于区分每个球员</span></span><br><span class="line"> 生命值：<span class="number">52</span>，</span><br><span class="line"> 位置:<span class="string">"前锋"</span>,</span><br><span class="line"> 弹跳:<span class="number">60</span>,</span><br><span class="line"> 速度:<span class="number">82</span>, </span><br><span class="line"> 奔跑:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*狂奔的代码*/</span> },</span><br><span class="line"> 传球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*传球的代码*/</span> },</span><br><span class="line"> 突破:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*突破的代码*/</span> },</span><br><span class="line"> 铲球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*铲球的代码*/</span> },</span><br><span class="line"> 射门:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*射门的代码*/</span> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>俱乐部.制造(球员)<br>制造二十个球员</p>
<h1 id="如果需要制造-100-个球员怎么办呢？"><a href="#如果需要制造-100-个球员怎么办呢？" class="headerlink" title="如果需要制造 100 个球员怎么办呢？"></a>如果需要制造 100 个球员怎么办呢？</h1><p>循环 100 次吧：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> 球员们 = []</span><br><span class="line"><span class="keyword">var</span> 球员</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i<<span class="number">100</span>; i++){</span><br><span class="line"> 球员 = {</span><br><span class="line"> <span class="attr">ID</span>: i, <span class="comment">// ID 不能重复</span></span><br><span class="line"> 生命值：<span class="number">52</span>，</span><br><span class="line"> 位置:<span class="string">"前锋"</span>,</span><br><span class="line"> 弹跳:<span class="number">60</span>,</span><br><span class="line"> 速度:<span class="number">82</span>, </span><br><span class="line"> 奔跑:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*狂奔的代码*/</span> },</span><br><span class="line"> 传球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*传球的代码*/</span> },</span><br><span class="line"> 突破:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*突破的代码*/</span> },</span><br><span class="line"> 铲球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*铲球的代码*/</span> },</span><br><span class="line"> 射门:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*射门的代码*/</span> }</span><br><span class="line"> }</span><br><span class="line"> 球员们.<span class="title function_">push</span>(球员)</span><br><span class="line">}</span><br><span class="line">俱乐部.批量制造(球员们)</span><br></pre></td></tr></table></figure>
<h1 id="质疑"><a href="#质疑" class="headerlink" title="质疑"></a>质疑</h1><p>上面的代码存在一个问题：浪费了很多内存。</p>
<p>奔跑、传球、突破、铲球、射门这五个动作对于每个球员其实是一样的，只需要各自引用同一个函数就可以了，没必要重复创建 100 个行走、100个奔跑……<br>只有 ID、生命值、弹跳、速度、位置需要创建 100 次，因为每个球员有自己的 ID、生命值、弹跳、速度、位置。</p>
<h1 id="改进"><a href="#改进" class="headerlink" title="改进"></a>改进</h1><p>用原型链可以解决重复创建的问题：我们先创建一个「球员原型」，然后让「球员」的 <strong>proto</strong> 指向「球员原型」</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> 球员原型 = {</span><br><span class="line"> 奔跑:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*狂奔的代码*/</span> },</span><br><span class="line"> 传球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*传球的代码*/</span> },</span><br><span class="line"> 突破:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*突破的代码*/</span> },</span><br><span class="line"> 铲球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*铲球的代码*/</span> },</span><br><span class="line"> 射门:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*射门的代码*/</span> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> 球员们 = []</span><br><span class="line"><span class="keyword">var</span> 球员</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i<<span class="number">100</span>; i++){</span><br><span class="line"> 球员 = {</span><br><span class="line"> <span class="attr">ID</span>: i, <span class="comment">// ID 不能重复</span></span><br><span class="line"> 生命值：<span class="number">52</span>，</span><br><span class="line"> 位置:<span class="string">"前锋"</span>,</span><br><span class="line"> 弹跳:<span class="number">60</span>,</span><br><span class="line"> 速度:<span class="number">82</span>, </span><br><span class="line"> }</span><br><span class="line"> 球员.<span class="property">__proto__</span> = 球员原型 </span><br><span class="line"> 球员们.<span class="title function_">push</span>(球员)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">俱乐部.批量制造(球员们)</span><br></pre></td></tr></table></figure>
<h1 id="优雅？"><a href="#优雅？" class="headerlink" title="优雅？"></a>优雅？</h1><p>有人指出创建一个球员的代码分散在两个地方很不优雅，于是我们用一个函数把这两部分联系起来：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> 球员(<span class="variable constant_">ID</span>){</span><br><span class="line"> <span class="keyword">var</span> 临时对象 = {}</span><br><span class="line"></span><br><span class="line"> 临时对象.<span class="property">__proto__</span> = 球员.原型</span><br><span class="line"></span><br><span class="line"> 临时对象.<span class="property">ID</span> = <span class="variable constant_">ID</span></span><br><span class="line"> 临时对象.生命值 = <span class="number">42</span></span><br><span class="line"> 临时对象.位置 = <span class="string">'前锋'</span></span><br><span class="line"> 临时对象.弹跳 = <span class="number">60</span></span><br><span class="line"> 临时对象.速度 = <span class="number">90</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> 临时对象</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">球员.原型 = {</span><br><span class="line"> 奔跑:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*狂奔的代码*/</span> },</span><br><span class="line"> 传球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*传球的代码*/</span> },</span><br><span class="line"> 突破:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*突破的代码*/</span> },</span><br><span class="line"> 铲球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*铲球的代码*/</span> },</span><br><span class="line"> 射门:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*射门的代码*/</span> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>然后就可以愉快地引用「球员」来创建球员了：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> 球员们 = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i<<span class="number">100</span>; i++){</span><br><span class="line"> 球员们.<span class="title function_">push</span>(球员(i))</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">俱乐部.批量制造(球员们)</span><br></pre></td></tr></table></figure>
<h1 id="用-new-关键字，可以让我们少写几行代码："><a href="#用-new-关键字，可以让我们少写几行代码：" class="headerlink" title="用 new 关键字，可以让我们少写几行代码："></a>用 new 关键字，可以让我们少写几行代码：</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> 球员(<span class="variable constant_">ID</span>){</span><br><span class="line"> <span class="keyword">var</span> 临时对象 = {} <span class="comment">// 1、我帮你创建临时对象</span></span><br><span class="line"></span><br><span class="line"> 临时对象.<span class="property">__proto__</span> = 球员.原型 <span class="comment">// 2、我帮你绑定原型</span></span><br><span class="line"></span><br><span class="line"> 临时对象.<span class="property">ID</span> = <span class="variable constant_">ID</span></span><br><span class="line"> 临时对象.生命值 = <span class="number">42</span></span><br><span class="line"> 临时对象.位置 = <span class="string">'前锋'</span></span><br><span class="line"> 临时对象.弹跳 = <span class="number">60</span></span><br><span class="line"> 临时对象.速度 = <span class="number">90</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> 临时对象 <span class="comment">// 3、我帮你return</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、统一叫做prototype</span></span><br><span class="line">球员.原型 = { </span><br><span class="line"> 奔跑:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*狂奔的代码*/</span> },</span><br><span class="line"> 传球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*传球的代码*/</span> },</span><br><span class="line"> 突破:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*突破的代码*/</span> },</span><br><span class="line"> 铲球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*铲球的代码*/</span> },</span><br><span class="line"> 射门:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*射门的代码*/</span> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>只要你在球员前面使用 new 关键字，那么可以少做四件事情：<br>1、不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；<br>2、不用绑定原型，因为 new 会帮你做（new 为了知道原型在哪，所以指定原型的名字为 prototype）；<br>3、不用 return 临时对象，因为 new 会帮你做；<br>4、不要给原型想名字了，因为 new 指定名字为 prototype。</p>
<p>这一次我们用 new 来写</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> 球员(<span class="variable constant_">ID</span>){</span><br><span class="line"> <span class="variable language_">this</span>.生命值 = <span class="number">42</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">ID</span> = <span class="variable constant_">ID</span></span><br><span class="line"> <span class="variable language_">this</span>.生命值 = <span class="number">42</span></span><br><span class="line"> <span class="variable language_">this</span>.位置 = <span class="string">"前锋"</span></span><br><span class="line"> <span class="variable language_">this</span>.弹跳 = <span class="number">60</span></span><br><span class="line"> <span class="variable language_">this</span>.速度 = <span class="number">82</span> </span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">球员.<span class="property"><span class="keyword">prototype</span></span> = {</span><br><span class="line"> 奔跑:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*狂奔的代码*/</span> },</span><br><span class="line"> 传球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*传球的代码*/</span> },</span><br><span class="line"> 突破:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*突破的代码*/</span> },</span><br><span class="line"> 铲球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*铲球的代码*/</span> },</span><br><span class="line"> 射门:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*射门的代码*/</span> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>然后是创建球员（加了一个 new 关键字）：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> 球员们 = []</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i<<span class="number">100</span>; i++){</span><br><span class="line"> 球员们.<span class="title function_">push</span>(<span class="keyword">new</span> 球员(i))</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">俱乐部.批量制造(球员们)</span><br></pre></td></tr></table></figure>
<p>new 的作用，就是省那么几行代码。（也就是所谓的语法糖）</p>
<p>注意 constructor 属性<br>new 操作为了记录「临时对象是由哪个函数创建的」，所以预先给「球员.prototype」加了一个 constructor 属性：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">球员.<span class="property"><span class="keyword">prototype</span></span> = {</span><br><span class="line"> <span class="attr">constructor</span>: 球员</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>如果你重新对「球员.prototype」赋值，那么这个 constructor 属性就没了，所以你应该这么写：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">球员.<span class="property"><span class="keyword">prototype</span></span>.奔跑 = <span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*狂奔的代码*/</span> }</span><br><span class="line">球员.<span class="property"><span class="keyword">prototype</span></span>.传球 = <span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*传球的代码*/</span> }</span><br><span class="line">球员.<span class="property"><span class="keyword">prototype</span></span>.突破 = <span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*突破的代码*/</span> }</span><br><span class="line">球员.<span class="property"><span class="keyword">prototype</span></span>.铲球 = <span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*铲球的代码*/</span> }</span><br><span class="line">球员.<span class="property"><span class="keyword">prototype</span></span>.射门 = <span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*射门的代码*/</span> }</span><br></pre></td></tr></table></figure>
<p>或者你也可以自己给 constructor 重新赋值：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">球员.<span class="property"><span class="keyword">prototype</span></span> = {</span><br><span class="line"> <span class="attr">constructor</span>: 球员,</span><br><span class="line"> 奔跑:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*狂奔的代码*/</span> },</span><br><span class="line"> 传球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*传球的代码*/</span> },</span><br><span class="line"> 突破:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*突破的代码*/</span> },</span><br><span class="line"> 铲球:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*铲球的代码*/</span> },</span><br><span class="line"> 射门:<span class="keyword">function</span>(<span class="params"></span>){ <span class="comment">/*射门的代码*/</span> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>javascript</tag>
</tags>
</entry>
<entry>
<title>浅析MVC</title>
<url>/2024/04/03/Font-end/js/%E6%B5%85%E6%9E%90MVC/</url>
<content><![CDATA[<h1 id="1、MVC-三个对象分别做什么，给出伪代码示例"><a href="#1、MVC-三个对象分别做什么，给出伪代码示例" class="headerlink" title="1、MVC 三个对象分别做什么，给出伪代码示例"></a>1、MVC 三个对象分别做什么，给出伪代码示例</h1><p>M:model（模型） 负责操作数据与服务器的交互，将请求到的数据传给control<br>V:View （视图） 负责所有UI界面，比如el,templete，render<br>C:controller（控制器）负责其他,比如初始化和事件,负责监听和处理View事件，并更新和调用 Model,负责监听Model数据变化，并更新View</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** 模擬 Model, View, Controller */</span></span><br><span class="line"><span class="keyword">var</span> M = {}, V = {}, C = {};</span><br><span class="line"></span><br><span class="line"><span class="comment">/** Model 負責存放資料 */</span></span><br><span class="line">M.<span class="property">data</span> = <span class="string">"hello world"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/** View 負責將資料輸出到螢幕上 */</span></span><br><span class="line">V.<span class="property">render</span> = <span class="function">(<span class="params">M</span>) =></span> { <span class="title function_">alert</span>(M.<span class="property">data</span>); }</span><br><span class="line"></span><br><span class="line"><span class="comment">/** Controller 作為一個 M 和 V 的橋樑 */</span></span><br><span class="line">C.<span class="property">handleOnload</span> = <span class="function">() =></span> { V.<span class="title function_">render</span>(M); }</span><br><span class="line"></span><br><span class="line"><span class="comment">/** 在網頁讀取的時候呼叫 Controller */</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">onload</span> = C.<span class="property">handleOnload</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> m={</span><br><span class="line"> data={},</span><br><span class="line"> <span class="title function_">create</span>(<span class="params"></span>){},</span><br><span class="line"> <span class="title function_">delete</span>(<span class="params"></span>){},</span><br><span class="line"> <span class="title function_">update</span>(<span class="params"></span>){},</span><br><span class="line"> <span class="title function_">get</span>(<span class="params"></span>){}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> v={</span><br><span class="line"> <span class="attr">el</span>:<span class="literal">null</span>,</span><br><span class="line"> <span class="attr">html</span>:<span class="string">`代码`</span>,</span><br><span class="line"> <span class="title function_">init</span>(<span class="params">container</span>){</span><br><span class="line"> v.<span class="property">el</span>=$(container)</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">render</span>(<span class="params">n</span>){}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> c={</span><br><span class="line"> <span class="title function_">init</span>(<span class="params">constainer</span>){}</span><br><span class="line"> <span class="attr">events</span>:{事件}</span><br><span class="line"> <span class="title function_">add</span>(<span class="params"></span>){执行}</span><br><span class="line"> <span class="title function_">minus</span>(<span class="params"></span>){执行}</span><br><span class="line"> <span class="title function_">update</span>(<span class="params"></span>){执行}</span><br><span class="line"> <span class="title function_">get</span>(<span class="params"></span>){执行}</span><br><span class="line"> <span class="title function_">autoBindEvents</span>(<span class="params"></span>){逻辑}</span><br><span class="line">}</span><br><span class="line">————————————————</span><br><span class="line">版权声明：本文为<span class="variable constant_">CSDN</span>博主「小峰同学的前端之路」的原创文章，遵循<span class="variable constant_">CC</span> <span class="number">4.0</span> <span class="variable constant_">BY</span>-<span class="variable constant_">SA</span>版权协议，转载请附上原文出处链接及本声明。</span><br><span class="line">原文链接：<span class="attr">https</span>:<span class="comment">//blog.csdn.net/abc465200/article/details/106731890</span></span><br></pre></td></tr></table></figure>
<h1 id="2、EventBus-有哪些-API，是做什么用的，给出伪代码示例"><a href="#2、EventBus-有哪些-API，是做什么用的，给出伪代码示例" class="headerlink" title="2、EventBus 有哪些 API，是做什么用的，给出伪代码示例"></a>2、EventBus 有哪些 API，是做什么用的，给出伪代码示例</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">_self.<span class="property">getEventBus</span></span><br><span class="line"> 方法：<span class="attr">getEventBus</span>:<span class="keyword">function</span>(<span class="params"></span>){}</span><br><span class="line"> 描述：直接返回前端<span class="title class_">EventBus</span>对象，不推荐直接使用。</span><br><span class="line"> </span><br><span class="line">_self.<span class="property">subscribeEvent</span></span><br><span class="line"> 方法：<span class="attr">subscribeEvent</span>:<span class="keyword">function</span>(<span class="params">event,fn,pointcut</span>){}</span><br><span class="line"> 描述：注册事件，并指定实现方法和插入点</span><br><span class="line"> 参数：event：字符串形式事件名，命名规则为<span class="title class_">Event</span>或<span class="title class_">ActionEvent</span>结尾</span><br><span class="line"> fn：实现方法</span><br><span class="line"> 插入点类型：after、overwrite、before</span><br><span class="line"> </span><br><span class="line">_self.<span class="property">unSubscribeEvent</span></span><br><span class="line"> 方法：<span class="attr">unSubscribeEvent</span>:<span class="keyword">function</span>(<span class="params">event</span>){}</span><br><span class="line"> 描述：取消注册事件</span><br><span class="line"> 参数：event：字符串形式事件名，命名规则为<span class="title class_">Event</span>或<span class="title class_">ActionEvent</span>结尾</span><br><span class="line"> </span><br><span class="line">_self.<span class="property">fireEvent</span></span><br><span class="line"> 方法：<span class="attr">fireEvent</span>:<span class="keyword">function</span>(<span class="params">event</span>){}</span><br><span class="line"> 描述：触发某个具体事件，执行这个事件对于的实现方法队列</span><br><span class="line"> 参数：event：字符串形式事件名，命名规则为<span class="title class_">Event</span>或<span class="title class_">ActionEvent</span>结尾</span><br><span class="line"> 其他参数：可以增加一些后续参数</span><br><span class="line"> </span><br><span class="line"><span class="title class_">Handler</span>实现说明：</span><br><span class="line"> 参数：接收fireEvent方法传递过来的参数</span><br><span class="line"> 特殊参数e：只有按钮绑定的页面功能才有值，手工调用不会有e的。页面功能代码生成时，默认会生成这个e，值为jquery.<span class="property">event</span></span><br><span class="line"> 返回值：无返回值的处理，只能通过返回值确定是否继续执行后续的方法队列</span><br><span class="line"> <span class="literal">true</span>/无：继续执行后续的实现方法队列</span><br><span class="line"> <span class="literal">false</span>：停止执行后续的实现方法队列 </span><br><span class="line"> 其他：返回<span class="literal">true</span></span><br><span class="line"> <span class="title class_">Handle</span>队列中数据的传递：只能利用页面的全局变量，本身没有提供处理机制</span><br><span class="line">————————————————</span><br><span class="line">版权声明：本文为<span class="variable constant_">CSDN</span>博主「小峰同学的前端之路」的原创文章，遵循<span class="variable constant_">CC</span> <span class="number">4.0</span> <span class="variable constant_">BY</span>-<span class="variable constant_">SA</span>版权协议，转载请附上原文出处链接及本声明。</span><br><span class="line">原文链接：<span class="attr">https</span>:<span class="comment">//blog.csdn.net/abc465200/article/details/106731890</span></span><br></pre></td></tr></table></figure>
<h1 id="3、表驱动编程是做什么的（可以自己查查资料）"><a href="#3、表驱动编程是做什么的（可以自己查查资料）" class="headerlink" title="3、表驱动编程是做什么的（可以自己查查资料）"></a>3、表驱动编程是做什么的（可以自己查查资料）</h1><p>Table-Driven Approach<br>解决if else面对多种情况的情形，以表的形式进行获取数据，通过下标索引来查</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">methods{</span><br><span class="line"> <span class="title function_">add</span>(<span class="params"></span>){执行}</span><br><span class="line"> <span class="title function_">delete</span>(<span class="params"></span>){执行}</span><br><span class="line"> <span class="title function_">minus</span>(<span class="params"></span>){执行}</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="4、我是如何理解模块化的"><a href="#4、我是如何理解模块化的" class="headerlink" title="4、我是如何理解模块化的"></a>4、我是如何理解模块化的</h1><p>模块化就是把一个模块的代码放在一个文件夹里，再进行引入，简化了代码之间的影响</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> string=<span class="string">`内容`</span></span><br><span class="line"><span class="keyword">import</span> <span class="keyword">default</span> string<span class="comment">//导出</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">`string`</span><span class="comment">//引入</span></span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>javascript</tag>
</tags>
</entry>
<entry>
<title>Vite2 + Vue3添加svg的使用并通过svg实现自定义Icon组件</title>
<url>/2024/03/21/Font-end/vue/Vite2%20+%20Vue3%E6%B7%BB%E5%8A%A0svg%E7%9A%84%E4%BD%BF%E7%94%A8%E5%B9%B6%E9%80%9A%E8%BF%87svg%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%AE%9A%E4%B9%89Icon%E7%BB%84%E4%BB%B6/</url>
<content><![CDATA[<h2 id="1、安装依赖插件vite-plugin-svg-icons"><a href="#1、安装依赖插件vite-plugin-svg-icons" class="headerlink" title="1、安装依赖插件vite-plugin-svg-icons"></a>1、安装依赖插件vite-plugin-svg-icons</h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">yarn add vite-plugin-svg-icons -D </span><br></pre></td></tr></table></figure>
<p>或</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm i vite-plugin-svg-icons -D</span><br></pre></td></tr></table></figure>
<h2 id="2、安装glob"><a href="#2、安装glob" class="headerlink" title="2、安装glob"></a>2、安装glob</h2><p>不安装会提示<code>Error: Cannot find module 'fast-glob'</code></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">yarn add fast-glob -D</span><br></pre></td></tr></table></figure>
<p>或</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install fast-glob -D</span><br></pre></td></tr></table></figure>
<h2 id="3、配置vite-config-ts"><a href="#3、配置vite-config-ts" class="headerlink" title="3、配置vite.config.ts"></a>3、配置vite.config.ts</h2><h3 id="3-1-iconDirs所有的-svg的文件都存放在该文件夹下"><a href="#3-1-iconDirs所有的-svg的文件都存放在该文件夹下" class="headerlink" title="3.1 iconDirs所有的 svg的文件都存放在该文件夹下"></a>3.1 iconDirs所有的 svg的文件都存放在该文件夹下</h3><h3 id="3-2-symbolId指定use标签中href格式"><a href="#3-2-symbolId指定use标签中href格式" class="headerlink" title="3.2 symbolId指定use标签中href格式"></a>3.2 symbolId指定use标签中href格式</h3><p>导出名为<code>createSvgIconsPlugin</code>并加大括号，不然会提示<code>TypeError: (0 , import_vite_plugin_svg_icons.default) is not a function</code></p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { defineConfig } <span class="keyword">from</span> <span class="string">'vite'</span></span><br><span class="line"><span class="keyword">import</span> { resolve } <span class="keyword">from</span> <span class="string">'path'</span></span><br><span class="line"><span class="keyword">import</span> {createSvgIconsPlugin} <span class="keyword">from</span> <span class="string">'vite-plugin-svg-icons'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>({</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="title function_">createSvgIconsPlugin</span>({</span><br><span class="line"> <span class="comment">// 指定要缓存的图标文件夹</span></span><br><span class="line"> <span class="attr">iconDirs</span>: [path.<span class="title function_">resolve</span>(process.<span class="title function_">cwd</span>(), <span class="string">'src/svg'</span>)],</span><br><span class="line"> <span class="comment">// 执行icon name的格式</span></span><br><span class="line"> <span class="attr">symbolId</span>: <span class="string">'icon-[name]'</span>,</span><br><span class="line"> })</span><br><span class="line"> ]</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h2 id="3、在main-ts注册脚本"><a href="#3、在main-ts注册脚本" class="headerlink" title="3、在main.ts注册脚本"></a>3、在main.ts注册脚本</h2><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'virtual:svg-icons-register'</span>; <span class="comment">// 引入svg icon注册脚本</span></span><br></pre></td></tr></table></figure>
<h2 id="4、通过svg实现Icon组件"><a href="#4、通过svg实现Icon组件" class="headerlink" title="4、通过svg实现Icon组件"></a>4、通过svg实现Icon组件</h2><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">svg</span> <span class="attr">:class</span>=<span class="string">"svgClass"</span> <span class="attr">aria-hidden</span>=<span class="string">"true"</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">use</span> <span class="attr">:xlink:href</span>=<span class="string">"iconName"</span> <span class="attr">:fill</span>=<span class="string">"color"</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">svg</span>></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> { computed, defineComponent } <span class="keyword">from</span> <span class="string">'vue'</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>({</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">props</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">name</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">type</span>: <span class="title class_">String</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">default</span>: <span class="string">''</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">color</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">type</span>: <span class="title class_">String</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">default</span>: <span class="string">''</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">setup</span>(<span class="params">props</span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">iconName</span>: <span class="title function_">computed</span>(<span class="function">() =></span> <span class="string">`#icon-<span class="subst">${props.name}</span>`</span>),</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">svgClass</span>: <span class="title function_">computed</span>(<span class="function">() =></span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">if</span> (props.<span class="property">name</span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> <span class="string">`gulu-icon <span class="subst">${props.name}</span>`</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> <span class="string">'gulu-icon'</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> })</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">})</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"><span class="selector-class">.gulu-icon</span> {</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">width</span>: <span class="number">3em</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">height</span>: <span class="number">3em</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">position</span>: relative;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> fill: currentColor;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">vertical-align</span>: -<span class="number">2px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">}</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure>
<h2 id="5、引用自定义Icon组件"><a href="#5、引用自定义Icon组件" class="headerlink" title="5、引用自定义Icon组件"></a>5、引用自定义Icon组件</h2><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">Icon</span> <span class="attr">name</span> = <span class="string">"alipay"</span> /></span></span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">Icon</span> <span class="attr">name</span> = <span class="string">"qq"</span> /></span></span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">Icon</span> <span class="attr">name</span> = <span class="string">"wechat"</span> /></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title class_">Icon</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">} <span class="keyword">from</span> <span class="string">'./lib/index'</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">components</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title class_">Icon</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">}</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>vite</tag>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title>TS 泛型的使用</title>
<url>/2024/03/21/Font-end/ts/TS%20%E6%B3%9B%E5%9E%8B%E7%9A%84%E4%BD%BF%E7%94%A8/</url>
<content><![CDATA[<h1 id="一、泛型"><a href="#一、泛型" class="headerlink" title="一、泛型"></a>一、泛型</h1><p>泛型用一个东西来表示广泛类型</p>
<h2 id="1、泛型定义"><a href="#1、泛型定义" class="headerlink" title="1、泛型定义"></a>1、泛型定义</h2><p><img src="/2024/03/21/Font-end/ts/TS%20%E6%B3%9B%E5%9E%8B%E7%9A%84%E4%BD%BF%E7%94%A8/01%E6%B3%9B%E5%9E%8B%E5%AE%9A%E4%B9%89.png" alt="泛型定义"></p>
<h2 id="2、interface"><a href="#2、interface" class="headerlink" title="2、interface"></a>2、interface</h2><p><img src="/2024/03/21/Font-end/ts/TS%20%E6%B3%9B%E5%9E%8B%E7%9A%84%E4%BD%BF%E7%94%A8/02interface.png" alt="interface"></p>
<h2 id="3、return数组"><a href="#3、return数组" class="headerlink" title="3、return数组"></a>3、return数组</h2><p><img src="/2024/03/21/Font-end/ts/TS%20%E6%B3%9B%E5%9E%8B%E7%9A%84%E4%BD%BF%E7%94%A8/03return%E6%95%B0%E7%BB%84.png" alt="return数组"></p>
<h2 id="4、加尖括号"><a href="#4、加尖括号" class="headerlink" title="4、加尖括号"></a>4、加尖括号</h2><p><img src="/2024/03/21/Font-end/ts/TS%20%E6%B3%9B%E5%9E%8B%E7%9A%84%E4%BD%BF%E7%94%A8/04%E5%8A%A0%E5%B0%96%E6%8B%AC%E5%8F%B7.png" alt="加尖括号"></p>
<h2 id="5、泛型类"><a href="#5、泛型类" class="headerlink" title="5、泛型类"></a>5、泛型类</h2><p><img src="/2024/03/21/Font-end/ts/TS%20%E6%B3%9B%E5%9E%8B%E7%9A%84%E4%BD%BF%E7%94%A8/05%E6%B3%9B%E5%9E%8B%E7%B1%BB.png" alt="泛型类"></p>
<h1 id="二、泛型约束"><a href="#二、泛型约束" class="headerlink" title="二、泛型约束"></a>二、泛型约束</h1><h2 id="1、泛型约束"><a href="#1、泛型约束" class="headerlink" title="1、泛型约束"></a>1、泛型约束</h2><p><img src="/2024/03/21/Font-end/ts/TS%20%E6%B3%9B%E5%9E%8B%E7%9A%84%E4%BD%BF%E7%94%A8/06%E6%B3%9B%E5%9E%8B%E7%BA%A6%E6%9D%9F.png" alt="泛型约束"></p>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>typescript</tag>
</tags>
</entry>
<entry>
<title>Vue 中的 .sync 修饰符作用</title>
<url>/2024/03/21/Font-end/vue/Vue%20%E4%B8%AD%E7%9A%84%20.sync%20%E4%BF%AE%E9%A5%B0%E7%AC%A6%E4%BD%9C%E7%94%A8/</url>
<content><![CDATA[<p>功能：父组件传数据给子组件，子组件改prop值并通知父组件</p>
<h2 id="1、无-sync实现方法"><a href="#1、无-sync实现方法" class="headerlink" title="1、无.sync实现方法"></a>1、无.sync实现方法</h2><h3 id="子组件"><a href="#子组件" class="headerlink" title="子组件"></a>子组件</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> {{money}}</span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"$emit('update:money', money - 100)"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>花钱<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">props</span>:[<span class="string">"money"</span>]</span></span><br><span class="line"><span class="language-javascript">};</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="父组件"><a href="#父组件" class="headerlink" title="父组件"></a>父组件</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> App.vue 我现在有 {{total}}</span><br><span class="line"> <span class="tag"><<span class="name">hr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">Child</span> <span class="attr">:money</span>=<span class="string">"total"</span> <span class="attr">v-on:update:money</span> =<span class="string">"total = $event"</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">template</span>></span> </span><br></pre></td></tr></table></figure>
<h2 id="2、有-sync修饰符实现方法"><a href="#2、有-sync修饰符实现方法" class="headerlink" title="2、有.sync修饰符实现方法"></a>2、有.sync修饰符实现方法</h2><h3 id="父组件-1"><a href="#父组件-1" class="headerlink" title="父组件"></a>父组件</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> App.vue 我现在有 {{total}}</span><br><span class="line"> <span class="tag"><<span class="name">hr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">Child</span> <span class="attr">:money.sync</span>=<span class="string">"total"</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="子组件-1"><a href="#子组件-1" class="headerlink" title="子组件"></a>子组件</h3><p>不变</p>
<h2 id="3、修饰符sync小结"><a href="#3、修饰符sync小结" class="headerlink" title="3、修饰符sync小结"></a>3、修饰符sync小结</h2><h3 id="3-1-功能"><a href="#3-1-功能" class="headerlink" title="3.1 功能"></a>3.1 功能</h3><p>当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。</p>
<h3 id="3-2-缩写"><a href="#3-2-缩写" class="headerlink" title="3.2 缩写"></a>3.2 缩写</h3><p><code>:money.sync="total" </code> 等价于 <code>:money="total" v-on:update:money ="total = $event"</code> </p>
<h3 id="3-3-是一个语法糖"><a href="#3-3-是一个语法糖" class="headerlink" title="3.3 是一个语法糖"></a>3.3 是一个语法糖</h3><hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title>Vue 数据响应式</title>
<url>/2024/03/23/Font-end/vue/Vue%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E5%BC%8F/</url>
<content><![CDATA[<h1 id="什么是深入响应式原理"><a href="#什么是深入响应式原理" class="headerlink" title="什么是深入响应式原理"></a>什么是深入响应式原理</h1><p>● 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 <code>Object.defineProperty</code> 把这些 property 全部转为 getter/setter。<br>● 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。<br>● 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。<br>● 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。</p>
<h1 id="一、getter-和-setter"><a href="#一、getter-和-setter" class="headerlink" title="一、getter 和 setter"></a>一、getter 和 setter</h1><h2 id="1、-n-0-变成-n-…"><a href="#1、-n-0-变成-n-…" class="headerlink" title="1、{n:0}变成{n:(…)}"></a>1、{n:0}变成{n:(…)}</h2><p> 一开始是{n:0}，传给new Vue之后立马变成{n:(…)}<br> <figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> myData = {</span><br><span class="line"> <span class="attr">n</span>: <span class="number">0</span></span><br><span class="line">};</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myData); <span class="comment">//本节课精髓</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line"> <span class="attr">data</span>: myData,</span><br><span class="line"> <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string"> <div>{{n}}<button @click="add">+10</div></span></span><br><span class="line"><span class="string"> `</span>,</span><br><span class="line"> <span class="attr">methods</span>: {</span><br><span class="line"> <span class="title function_">add</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">n</span> += <span class="number">10</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}).$mount(<span class="string">"#app"</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> myData.<span class="property">n</span> += <span class="number">10</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(myData); <span class="comment">// 本节课精髓</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(vm)</span><br><span class="line">}, <span class="number">3000</span>);</span><br></pre></td></tr></table></figure></p>
<h2 id="2、get和set"><a href="#2、get和set" class="headerlink" title="2、get和set"></a>2、get和set</h2><p>定义的时候设置getter、setter</p>
<h3 id="2-1-需求一：得到姓名"><a href="#2-1-需求一：得到姓名" class="headerlink" title="2.1 需求一：得到姓名"></a>2.1 需求一：得到姓名</h3><p>姓名后面的括号能删掉吗？<br>不能，因为它是函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> obj1 = {</span><br><span class="line"> 姓: <span class="string">"高"</span>,</span><br><span class="line"> 名: <span class="string">"圆圆"</span>,</span><br><span class="line"> 姓名() {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.姓 + <span class="variable language_">this</span>.名;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"需求一："</span> + obj1.姓名());</span><br></pre></td></tr></table></figure>
<h2 id="2-2-需求二：姓名不要括号也能得出值"><a href="#2-2-需求二：姓名不要括号也能得出值" class="headerlink" title="2.2 需求二：姓名不要括号也能得出值"></a>2.2 需求二：姓名不要括号也能得出值</h2><p>总结：getter 就是这样用的。不加括号的函数，仅此而已</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> obj2 = {</span><br><span class="line"> 姓: <span class="string">"高"</span>,</span><br><span class="line"> 名: <span class="string">"圆圆"</span>,</span><br><span class="line"> get 姓名() {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.姓 + <span class="variable language_">this</span>.名;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"需求二："</span> + obj2.姓名);</span><br></pre></td></tr></table></figure>
<h2 id="2-3-需求三：姓名可以被写"><a href="#2-3-需求三：姓名可以被写" class="headerlink" title="2.3 需求三：姓名可以被写"></a>2.3 需求三：姓名可以被写</h2><p>总结：setter就是这样用的。用 = xxx 触发 set 函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> obj3 = {</span><br><span class="line"> 姓: <span class="string">"高"</span>,</span><br><span class="line"> 名: <span class="string">"圆圆"</span>,</span><br><span class="line"> get 姓名() {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.姓 + <span class="variable language_">this</span>.名;</span><br><span class="line"> },</span><br><span class="line"> set 姓名(xxx) {</span><br><span class="line"> <span class="variable language_">this</span>.姓 = xxx[<span class="number">0</span>];</span><br><span class="line"> <span class="variable language_">this</span>.名 = xxx.<span class="title function_">substring</span>(<span class="number">1</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">obj3.姓名 = <span class="string">"刘诗诗"</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求三：姓<span class="subst">${obj3.姓}</span>, 名<span class="subst">${obj3.名}</span>`</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj3);</span><br></pre></td></tr></table></figure>
<h1 id="二、Object-defineProperty"><a href="#二、Object-defineProperty" class="headerlink" title="二、Object.defineProperty"></a>二、Object.defineProperty</h1><p>定义完一个对象之后，想再添加新的get、set，只能通过Object.defineProperty<br>新定义的get、set属性xxx是不存在的，不能return this.xxx/xxx，会造成死循环，可使用局部变量_xxx</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> obj3 = {</span><br><span class="line"> 姓: <span class="string">"高"</span>,</span><br><span class="line"> 名: <span class="string">"圆圆"</span>,</span><br><span class="line"> get 姓名() {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.姓 + <span class="variable language_">this</span>.名;</span><br><span class="line"> },</span><br><span class="line"> set 姓名(xxx) {</span><br><span class="line"> <span class="variable language_">this</span>.姓 = xxx[<span class="number">0</span>];</span><br><span class="line"> <span class="variable language_">this</span>.名 = xxx.<span class="title function_">substring</span>(<span class="number">1</span>);</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> _xxx = <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperties</span>(obj3, <span class="string">'xxx'</span>,{</span><br><span class="line"> <span class="title function_">get</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> _xxx</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">set</span>(<span class="params">value</span>){</span><br><span class="line"> _xxx = value</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">obj3.姓名 = <span class="string">"刘诗诗"</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求三：姓<span class="subst">${obj3.姓}</span>, 名<span class="subst">${obj3.名}</span>`</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj3);</span><br></pre></td></tr></table></figure>
<h1 id="三、代理和监听"><a href="#三、代理和监听" class="headerlink" title="三、代理和监听"></a>三、代理和监听</h1><h2 id="1、需求一：用Object-defineProperty-定义n"><a href="#1、需求一：用Object-defineProperty-定义n" class="headerlink" title="1、需求一：用Object.defineProperty 定义n"></a>1、需求一：用Object.defineProperty 定义n</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> data1 = {}</span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(data1, <span class="string">'n'</span>,{</span><br><span class="line"> <span class="attr">value</span>:<span class="number">0</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求一：<span class="subst">${data1.n}</span>`</span>)</span><br></pre></td></tr></table></figure>
<h2 id="2、需求二：-n-不能小于0"><a href="#2、需求二：-n-不能小于0" class="headerlink" title="2、需求二： n 不能小于0"></a>2、需求二： n 不能小于0</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 即data2.n = -1 应该无效，但data2.n = 1 有效</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> data2 = {}</span><br><span class="line"></span><br><span class="line">data2.<span class="property">_n</span> = <span class="number">0</span> <span class="comment">// _n 用来偷偷存储 n 的值</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(data2, <span class="string">'n'</span>, {</span><br><span class="line"> <span class="title function_">get</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">_n</span></span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">set</span>(<span class="params">value</span>){</span><br><span class="line"> <span class="keyword">if</span>(value < <span class="number">0</span>){</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_n</span> = value</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求二:<span class="subst">${data2.n}</span>`</span>)</span><br><span class="line">data2.<span class="property">n</span> = -<span class="number">1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求二：<span class="subst">${data2.n}</span> 设置为 -1 失败`</span>)</span><br><span class="line">data2.<span class="property">n</span> = <span class="number">1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求二：<span class="subst">${data2.n}</span> 设置为 1 成功`</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 那如果对方直接使用 data2._n 呢？</span></span><br></pre></td></tr></table></figure>
<h2 id="3、需求三：使用代理"><a href="#3、需求三：使用代理" class="headerlink" title="3、需求三：使用代理"></a>3、需求三：使用代理</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> data3 = <span class="title function_">proxy</span>({<span class="attr">data</span>:{<span class="attr">n</span>:<span class="number">0</span>}}) <span class="comment">// 括号里是匿名对象，无法访问</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">proxy</span>(<span class="params">{data}<span class="comment">/* 解构赋值*/</span></span>) {</span><br><span class="line"> <span class="keyword">const</span> obj = {}</span><br><span class="line"> <span class="comment">// 这里是 'n' 写死了，理论上应该遍历data的所有key，这里做了简化</span></span><br><span class="line"> <span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(obj, <span class="string">'n'</span>, {</span><br><span class="line"> <span class="title function_">get</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> data.<span class="property">n</span></span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">set</span>(<span class="params">value</span>){</span><br><span class="line"> <span class="keyword">if</span>(value<<span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> data.<span class="property">n</span> = value</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> obj <span class="comment">// obj 就是代理</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// data3 就是 obj</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求三：<span class="subst">${data3.n}</span>`</span>)</span><br><span class="line">data3.<span class="property">n</span> = -<span class="number">1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求三：<span class="subst">${data3.n}</span>, 设置为 -1 失败`</span>)</span><br><span class="line">data3.<span class="property">n</span> = -<span class="number">1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求三：<span class="subst">${data3.n}</span>, 设置为 1 失败`</span>)</span><br></pre></td></tr></table></figure>
<h2 id="4、需求四"><a href="#4、需求四" class="headerlink" title="4、需求四"></a>4、需求四</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> myData = {<span class="attr">n</span>:<span class="number">0</span>}</span><br><span class="line"><span class="keyword">let</span> data4 = <span class="title function_">proxy</span>({<span class="attr">data</span>:myData}) <span class="comment">// 括号里是匿名对象，无法访问</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// data3 就是 obj</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`杠精：<span class="subst">${data4.n}</span>`</span>)</span><br><span class="line">myData.<span class="property">n</span> = -<span class="number">1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`杠精：<span class="subst">${data4.n}</span>, 设置为 -1 失败了吗!?`</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 我现在改 myData，是不是还能改？！</span></span><br></pre></td></tr></table></figure>
<h2 id="5、需求五：用户擅自改"><a href="#5、需求五：用户擅自改" class="headerlink" title="5、需求五：用户擅自改"></a>5、需求五：用户擅自改</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> myData5 = {<span class="attr">n</span>:<span class="number">0</span>}</span><br><span class="line"><span class="keyword">let</span> data5 = <span class="title function_">proxy2</span>({ <span class="attr">data</span>:myData5}) <span class="comment">// 括号里是匿名对象，无法访问</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">proxy2</span>(<span class="params">{data}<span class="comment">/* 解构赋值 */</span></span>){</span><br><span class="line"> <span class="comment">// 这里的'n'写死了，天蝎座上应该遍历data的所有key，这里做了简化</span></span><br><span class="line"> <span class="comment">// 因为我怕你们看不懂</span></span><br><span class="line"> <span class="keyword">let</span> value = data.<span class="property">n</span></span><br><span class="line"> <span class="keyword">delete</span> data.<span class="property">n</span> <span class="comment">// 这句话可以不写</span></span><br><span class="line"> <span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(data, <span class="string">'n'</span>,{</span><br><span class="line"> <span class="title function_">get</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> value</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">set</span>(<span class="params">newValue</span>){</span><br><span class="line"> <span class="keyword">if</span>(newValue<<span class="number">0</span>){</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> value = newValue</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="comment">// 就加了上面几句，这几句话会监听data</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> obj = {}</span><br><span class="line"> <span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(obj, <span class="string">'n'</span>, {</span><br><span class="line"> <span class="title function_">get</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> data.<span class="property">n</span></span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">set</span>(<span class="params">value</span>){</span><br><span class="line"> <span class="keyword">if</span>(value<<span class="number">0</span>){</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> data.<span class="property">n</span> = value</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> obj <span class="comment">// obj 就是代理</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// data3 就是obj</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求五：<span class="subst">${data5.n}</span>`</span>)</span><br><span class="line">data5.<span class="property">n</span> = -<span class="number">1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求五：<span class="subst">${data5.n}</span>, 设置为 -1 失败`</span>)</span><br><span class="line">data5.<span class="property">n</span> = -<span class="number">1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`需求五：<span class="subst">${data5.n}</span>, 设置为 1 失败`</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 这代理看着眼熟吗？</span></span><br><span class="line"><span class="comment">// let data5 = proxy2({data:myData5})</span></span><br><span class="line"><span class="comment">// let vm = new Vue({data:{n:0}})</span></span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title>在Vite2+Vue3渲染Markdown文档(亲测有效）</title>
<url>/2024/03/14/Font-end/vue/%E5%9C%A8Vite2+Vue3%E6%B8%B2%E6%9F%93Markdown%E6%96%87%E6%A1%A3(%E4%BA%B2%E6%B5%8B%E6%9C%89%E6%95%88%EF%BC%89/</url>
<content><![CDATA[<h2 id="方法1：自定义-Vite-插件"><a href="#方法1：自定义-Vite-插件" class="headerlink" title="方法1：自定义 Vite 插件"></a>方法1：自定义 Vite 插件</h2><p>原版本升级到Vite2之后会报错<code>plugin.configureServer is not a function</code> ，此插件为修改后版本，亲测有效</p>
<h3 id="1、在项目根目录创建-md-ts-文件，填充如下内容："><a href="#1、在项目根目录创建-md-ts-文件，填充如下内容：" class="headerlink" title="1、在项目根目录创建 md.ts 文件，填充如下内容："></a>1、在项目根目录创建 md.ts 文件，填充如下内容：</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> path <span class="keyword">from</span> <span class="string">'path'</span></span><br><span class="line"><span class="keyword">import</span> fs <span class="keyword">from</span> <span class="string">'fs'</span></span><br><span class="line"><span class="keyword">import</span> marked <span class="keyword">from</span> <span class="string">'marked'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">mdToJs</span> = str => {</span><br><span class="line"> <span class="keyword">const</span> content = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(<span class="title function_">marked</span>(str))</span><br><span class="line"> <span class="keyword">return</span> <span class="string">`export default <span class="subst">${content}</span>`</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">md</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'md'</span>, </span><br><span class="line"> <span class="title function_">configureServer</span>(<span class="params"></span>){ <span class="comment">// 用于开发</span></span><br><span class="line"> <span class="keyword">async</span> ({ app }) => {</span><br><span class="line"> app.<span class="title function_">use</span>(<span class="keyword">async</span> (ctx, next) => { <span class="comment">// koa</span></span><br><span class="line"> <span class="keyword">if</span> (ctx.<span class="property">path</span>.<span class="title function_">endsWith</span>(<span class="string">'.md'</span>)) {</span><br><span class="line"> ctx.<span class="property">type</span> = <span class="string">'js'</span></span><br><span class="line"> <span class="keyword">const</span> filePath = path.<span class="title function_">join</span>(process.<span class="title function_">cwd</span>(), ctx.<span class="property">path</span>)</span><br><span class="line"> ctx.<span class="property">body</span> = <span class="title function_">mdToJs</span>(fs.<span class="title function_">readFileSync</span>(filePath).<span class="title function_">toString</span>())</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">await</span> <span class="title function_">next</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="title function_">transform</span>(<span class="params">code, id</span>){ <span class="comment">// 用于 rollup // 插件</span></span><br><span class="line"> <span class="comment">// 获取文件后缀名</span></span><br><span class="line"> <span class="keyword">const</span> fileArr = id.<span class="title function_">split</span>(<span class="string">'.'</span>) <span class="comment">//根据.分割数组</span></span><br><span class="line"> <span class="keyword">const</span> fileType = fileArr[fileArr.<span class="property">length</span> -<span class="number">1</span>]; <span class="comment">//取最后一个</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(<span class="regexp">/\md$/</span>.<span class="title function_">test</span>(fileType)){</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">mdToJs</span>(code)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="2、接着修改-vite-config-ts，引入上面创建的插件"><a href="#2、接着修改-vite-config-ts，引入上面创建的插件" class="headerlink" title="2、接着修改 vite.config.ts，引入上面创建的插件"></a>2、接着修改 vite.config.ts，引入上面创建的插件</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> {md} <span class="keyword">from</span> <span class="string">'./md'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="attr">plugins</span>: [<span class="title function_">md</span>()]</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<h3 id="3、在使用时，会将导入的-md-文件转换成-js-文件渲染。具体使用示例："><a href="#3、在使用时，会将导入的-md-文件转换成-js-文件渲染。具体使用示例：" class="headerlink" title="3、在使用时，会将导入的 md 文件转换成 js 文件渲染。具体使用示例："></a>3、在使用时，会将导入的 md 文件转换成 js 文件渲染。具体使用示例：</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">article</span> <span class="attr">v-html</span>=<span class="string">"md"</span> /></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> md <span class="keyword">from</span> <span class="string">'./xxx.md'</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="title function_">setup</span>(<span class="params"></span>){</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> {md}</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">}</span></span></span><br></pre></td></tr></table></figure>
<h2 id="方法2：使用-vite-plugin-markdown"><a href="#方法2：使用-vite-plugin-markdown" class="headerlink" title="方法2：使用 vite-plugin-markdown"></a>方法2：使用 vite-plugin-markdown</h2><p>这款第三方插件不仅支持引入并渲染 Markdown 文件，并且支持渲染成各种格式，例入 HTML 字符串、React 或 Vue 的组件等。</p>
<h3 id="1、安装-vite-plugin-markdown"><a href="#1、安装-vite-plugin-markdown" class="headerlink" title="1、安装 vite-plugin-markdown"></a>1、安装 vite-plugin-markdown</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm i vite-plugin-markdown</span><br></pre></td></tr></table></figure>
<p>或</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">yarn add vite-plugin-markdown</span><br></pre></td></tr></table></figure>
<h3 id="2、在-vite-config-ts-中修改："><a href="#2、在-vite-config-ts-中修改：" class="headerlink" title="2、在 vite.config.ts 中修改："></a>2、在 vite.config.ts 中修改：</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> mdPlugin = <span class="built_in">require</span>(<span class="string">'vite-plugin-markdown'</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> mdPlugin.<span class="title function_">plugin</span>({</span><br><span class="line"> <span class="attr">mode</span>: [<span class="string">'html'</span>],</span><br><span class="line"> })</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="3、配置中传入一个-options，选项对象，支持以下参数："><a href="#3、配置中传入一个-options，选项对象，支持以下参数：" class="headerlink" title="3、配置中传入一个 options，选项对象，支持以下参数："></a>3、配置中传入一个 options，选项对象，支持以下参数：</h3><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">mode?: (<span class="string">'html'</span> | <span class="string">'toc'</span> | <span class="string">'react'</span> | <span class="string">'vue'</span>)[]</span><br><span class="line">markdown?: <span class="function">(<span class="params">body: <span class="built_in">string</span></span>) =></span> <span class="built_in">string</span></span><br><span class="line">markdownIt?: <span class="title class_">MarkdownIt</span> | <span class="title class_">MarkdownIt</span>.<span class="property">Options</span></span><br></pre></td></tr></table></figure>
<h3 id="4、各个模式下的渲染示例："><a href="#4、各个模式下的渲染示例：" class="headerlink" title="4、各个模式下的渲染示例："></a>4、各个模式下的渲染示例：</h3><h4 id="4-1-Import-Front-Matter-attributes"><a href="#4-1-Import-Front-Matter-attributes" class="headerlink" title="4.1 Import Front Matter attributes"></a>4.1 Import Front Matter attributes</h4><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line"><span class="attr">title</span>: <span class="title class_">Awesome</span> <span class="title class_">Title</span></span><br><span class="line"><span class="attr">description</span>: <span class="title class_">Describe</span> <span class="variable language_">this</span> awesome content</span><br><span class="line"><span class="attr">tags</span>:</span><br><span class="line"> - <span class="string">"great"</span></span><br><span class="line"> - <span class="string">"awesome"</span></span><br><span class="line"> - <span class="string">"rad"</span></span><br><span class="line">---</span><br><span class="line"># <span class="title class_">This</span> is awesome</span><br><span class="line"><span class="title class_">Vite</span> is an opinionated web dev build tool that serves your code via native <span class="variable constant_">ES</span> <span class="title class_">Module</span> imports during dev and bundles it <span class="keyword">with</span> <span class="title class_">Rollup</span> <span class="keyword">for</span> production.</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> { attributes } <span class="keyword">from</span> <span class="string">'./contents/the-doc.md'</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(attributes) <span class="comment">//=> { title: 'Awesome Title', description: 'Describe this awesome content', tags: ['great', 'awesome', 'rad'] }</span></span><br></pre></td></tr></table></figure>
<h4 id="4-2-Import-compiled-HTML-Mode-HTML"><a href="#4-2-Import-compiled-HTML-Mode-HTML" class="headerlink" title="4.2 Import compiled HTML (Mode.HTML)"></a>4.2 Import compiled HTML (Mode.HTML)</h4><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> { html } <span class="keyword">from</span> <span class="string">'./contents/the-doc.md'</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(html) </span><br><span class="line"><span class="comment">//=> "This is awesomeite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production."</span></span><br></pre></td></tr></table></figure>
<h4 id="4-3-Import-ToC-metadata-Mode-TOC"><a href="#4-3-Import-ToC-metadata-Mode-TOC" class="headerlink" title="4.3 Import ToC metadata (Mode.TOC)"></a>4.3 Import ToC metadata (Mode.TOC)</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"># vite</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vite</span> is an opinionated web dev build tool that serves your code via native <span class="variable constant_">ES</span> <span class="title class_">Module</span> imports during dev and bundles it <span class="keyword">with</span> <span class="title class_">Rollup</span> <span class="keyword">for</span> production.</span><br><span class="line"></span><br><span class="line">## <span class="title class_">Status</span></span><br><span class="line"></span><br><span class="line">## <span class="title class_">Getting</span> <span class="title class_">Started</span></span><br><span class="line"></span><br><span class="line"># <span class="title class_">Notes</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> { toc } <span class="keyword">from</span> <span class="string">'./contents/the-doc.md'</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(toc)</span><br><span class="line"><span class="comment">//=> [{ level: '1', content: 'vite' }, { level: '2', content: 'Status' }, { level: '2', content: 'Getting Started' }, { level: '1', content: 'Notes' },]</span></span><br></pre></td></tr></table></figure>
<h4 id="4-4-Import-as-a-React-component-Mode-REACT"><a href="#4-4-Import-as-a-React-component-Mode-REACT" class="headerlink" title="4.4 Import as a React component (Mode.REACT)"></a>4.4 Import as a React component (Mode.REACT)</h4><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">'react'</span></span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">ReactComponent</span> } <span class="keyword">from</span> <span class="string">'./contents/the-doc.md'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">MyReactApp</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">ReactComponent</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> )</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h4 id="4-5-Import-as-a-Vue-component-Mode-VUE"><a href="#4-5-Import-as-a-Vue-component-Mode-VUE" class="headerlink" title="4.5 Import as a Vue component (Mode.VUE)"></a>4.5 Import as a Vue component (Mode.VUE)</h4><figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">article</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">markdown-content</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">article</span>></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> { <span class="title class_">VueComponent</span> } <span class="keyword">from</span> <span class="string">'./contents/the-doc.md'</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">components</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title class_">MarkdownContent</span>: <span class="title class_">VueComponent</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">};</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>vite</tag>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title>简述computed和watch的区别</title>
<url>/2024/03/23/Font-end/vue/%E7%AE%80%E8%BF%B0computed%E5%92%8Cwatch%E7%9A%84%E5%8C%BA%E5%88%AB/</url>
<content><![CDATA[<h2 id="1、computed是计算属性的意思"><a href="#1、computed是计算属性的意思" class="headerlink" title="1、computed是计算属性的意思"></a>1、computed是计算属性的意思</h2><h3 id="1-1-computed是用来计算出一个值的，这个值我们调用是不需要加括号"><a href="#1-1-computed是用来计算出一个值的，这个值我们调用是不需要加括号" class="headerlink" title="1.1 computed是用来计算出一个值的，这个值我们调用是不需要加括号"></a>1.1 computed是用来计算出一个值的，这个值我们调用是不需要加括号</h3><h3 id="1-2-根据依赖会自动缓存"><a href="#1-2-根据依赖会自动缓存" class="headerlink" title="1.2 根据依赖会自动缓存"></a>1.2 根据依赖会自动缓存</h3><h3 id="1-3-不支持异步代码"><a href="#1-3-不支持异步代码" class="headerlink" title="1.3 不支持异步代码"></a>1.3 不支持异步代码</h3><h2 id="2、watch是监听的意思"><a href="#2、watch是监听的意思" class="headerlink" title="2、watch是监听的意思"></a>2、watch是监听的意思</h2><h3 id="2-1-watch支持异步代码"><a href="#2-1-watch支持异步代码" class="headerlink" title="2.1 watch支持异步代码"></a>2.1 watch支持异步代码</h3><h3 id="2-2-有两个选项"><a href="#2-2-有两个选项" class="headerlink" title="2.2 有两个选项"></a>2.2 有两个选项</h3><h4 id="2-2-1-immediate-第一次渲染的时候要执行函数"><a href="#2-2-1-immediate-第一次渲染的时候要执行函数" class="headerlink" title="2.2.1 immediate 第一次渲染的时候要执行函数"></a>2.2.1 immediate 第一次渲染的时候要执行函数</h4><h4 id="2-2-2-deep-是否要监听对象里面的属性变化。如果某个属性变化了就执行函数。"><a href="#2-2-2-deep-是否要监听对象里面的属性变化。如果某个属性变化了就执行函数。" class="headerlink" title="2.2.2 deep 是否要监听对象里面的属性变化。如果某个属性变化了就执行函数。"></a>2.2.2 deep 是否要监听对象里面的属性变化。如果某个属性变化了就执行函数。</h4><hr>
]]></content>
<categories>
<category>Front-end</category>
</categories>
<tags>
<tag>front-end</tag>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title>Hexo主题Next相关配置</title>
<url>/2018/08/22/hexo/2018/Next%E4%B8%BB%E9%A2%98%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE/</url>
<content><![CDATA[<h1 id="一、更改主题颜色方案"><a href="#一、更改主题颜色方案" class="headerlink" title="一、更改主题颜色方案"></a>一、更改主题颜色方案</h1><h2 id="1、打开主题下的配置文件-config-yml"><a href="#1、打开主题下的配置文件-config-yml" class="headerlink" title="1、打开主题下的配置文件_config.yml"></a>1、打开主题下的配置文件_config.yml</h2><p>路径 <code>\themes\hexo-theme-next-master\_config.yml</code>,打开这个文件并找到Schemes这段代码</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Schemes</span></span><br><span class="line"><span class="comment">#scheme: Muse</span></span><br><span class="line"><span class="comment">#scheme: Mist</span></span><br><span class="line"><span class="comment">#scheme: Pisces</span></span><br><span class="line"><span class="attr">scheme:</span> <span class="string">Gemini</span></span><br></pre></td></tr></table></figure>
<h2 id="2、打开想要选择的颜色方案"><a href="#2、打开想要选择的颜色方案" class="headerlink" title="2、打开想要选择的颜色方案"></a>2、打开想要选择的颜色方案</h2><p>可以看到一共四个主题，这里选择的是Gemini颜色方案，把这一行前面的”#”去掉即可，重新运行后就会显示Gemini的颜色方案</p>
<h1 id="二、在导航栏中添加主页"><a href="#二、在导航栏中添加主页" class="headerlink" title="二、在导航栏中添加主页"></a>二、在导航栏中添加主页</h1><p>安装主题后，发现导航栏没有主页</p>
<h2 id="1、在当前主题下的配置文件-config-yml中找到menu这段代码，把home这一行的“-”去掉即可"><a href="#1、在当前主题下的配置文件-config-yml中找到menu这段代码，把home这一行的“-”去掉即可" class="headerlink" title="1、在当前主题下的配置文件_config.yml中找到menu这段代码，把home这一行的“#”去掉即可"></a>1、在当前主题下的配置文件_config.yml中找到menu这段代码，把home这一行的“#”去掉即可</h2><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line"> <span class="attr">home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-home</span></span><br></pre></td></tr></table></figure>
<p>重新运行后导航栏会显示主页</p>
<h1 id="三、配置分类"><a href="#三、配置分类" class="headerlink" title="三、配置分类"></a>三、配置分类</h1><h2 id="1、在当前主题下的配置文件-config-yml中找到menu这段代码-，把categories这一行的“-”去掉"><a href="#1、在当前主题下的配置文件-config-yml中找到menu这段代码-，把categories这一行的“-”去掉" class="headerlink" title="1、在当前主题下的配置文件_config.yml中找到menu这段代码 ，把categories这一行的“#”去掉"></a>1、在当前主题下的配置文件_config.yml中找到menu这段代码 ，把categories这一行的“#”去掉</h2><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line"> <span class="attr">categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-th</span></span><br></pre></td></tr></table></figure>
<h2 id="2、创建分类目录文件"><a href="#2、创建分类目录文件" class="headerlink" title="2、创建分类目录文件"></a>2、创建分类目录文件</h2><p>因为分类页是没有默认页面的所以需要我们手动创建分类页。</p>
<p>打开命令行，进入博客项目所在的文件夹下，执行以下命令</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo new page categories</span><br></pre></td></tr></table></figure>
<p>成功后会提示：</p>
<p><code>INFO Created: ~/blog/source/categories/index.md</code></p>
<p>这样我们就创建好了分类页面了。</p>
<p>但是这时主题还能将页面识别为分类页；所以我们需要编辑这个新建的页面，让主题识别页面，并自动为这个页面显示分类。</p>
<h2 id="3、编辑页面让主题识别页面为分类页面"><a href="#3、编辑页面让主题识别页面为分类页面" class="headerlink" title="3、编辑页面让主题识别页面为分类页面"></a>3、编辑页面让主题识别页面为分类页面</h2><p>根据成功后提示路径打开<code>index.md</code>这个页面文件，打开后默认内容是</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 文章分类</span><br><span class="line"><span class="section">date: 2018-03-25 12:35:35</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure>
<p>添加上<code>type: "categories"</code>这段代码</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 文章分类</span><br><span class="line">date: 2018-03-25 12:35:35</span><br><span class="line"><span class="section">type: "categories"</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure>
<p>这样就完成了分类页面的配置了</p>
<h2 id="4-给文章设置分类属性"><a href="#4-给文章设置分类属性" class="headerlink" title="4. 给文章设置分类属性"></a>4. 给文章设置分类属性</h2><p>打开需要添加分类的文章，在文章Front-matter区域，也就是顶部两个<code>---</code>中，添加categories设置分类</p>
<p>注：“-”后面有个空格</p>
<h3 id="4-1-设置一级分类"><a href="#4-1-设置一级分类" class="headerlink" title="4.1 设置一级分类"></a>4.1 设置一级分类</h3><figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 如何更换Hexo主题</span><br><span class="line">date: 2017-10-19 22:26:23</span><br><span class="line">categories: </span><br><span class="line"><span class="section">- Hexo</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure>
<p>如<code>categories:Hexo</code>表示添加该文章到 “Hexo” 这个分类下。</p>
<p>然后我们就可以在博客到分类里看到该分类了。</p>
<h3 id="4-2-设置二级分类"><a href="#4-2-设置二级分类" class="headerlink" title="4.2 设置二级分类"></a>4.2 设置二级分类</h3><figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 如何更换Hexo主题</span><br><span class="line">date: 2017-10-19 22:26:23</span><br><span class="line">categories: </span><br><span class="line"><span class="bullet">-</span> Blog</span><br><span class="line"><span class="section">- Hexo</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure>
<p>如上设置二级分类，表示该篇文章为 Blog 分类下的 Hexo 分类下。</p>
<h3 id="4-3-并列-子分类"><a href="#4-3-并列-子分类" class="headerlink" title="4.3 并列+子分类"></a>4.3 并列+子分类</h3><p>如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 如何更换Hexo主题</span><br><span class="line">date: 2017-10-19 22:26:23</span><br><span class="line">categories:</span><br><span class="line"><span class="bullet">-</span> [Diary, PlayStation]</span><br><span class="line"><span class="bullet">-</span> [Diary, Games]</span><br><span class="line"><span class="section">- [Life]</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure>
<h1 id="四、配置标签"><a href="#四、配置标签" class="headerlink" title="四、配置标签"></a>四、配置标签</h1><h2 id="1、-在当前主题下的配置文件-config-yml中找到menu这段代码，把tags这一行的“-”去掉即可"><a href="#1、-在当前主题下的配置文件-config-yml中找到menu这段代码，把tags这一行的“-”去掉即可" class="headerlink" title="1、 在当前主题下的配置文件_config.yml中找到menu这段代码，把tags这一行的“#”去掉即可"></a>1、 在当前主题下的配置文件_config.yml中找到menu这段代码，把tags这一行的“#”去掉即可</h2><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line"> <span class="attr">tags:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-tags</span></span><br></pre></td></tr></table></figure>
<h2 id="2、创建标签目录文件"><a href="#2、创建标签目录文件" class="headerlink" title="2、创建标签目录文件"></a>2、创建标签目录文件</h2><p>和分类页一样，标签页也是没有默认页面的所以需要我们手动创建标签页。</p>
<p>打开命令行，进入博客项目所在的文件夹下，执行以下命令</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo new page tags</span><br></pre></td></tr></table></figure>
<p>成功后会提示：</p>
<p><code>INFO Created: ~/blog/source/tags/index.md</code></p>
<p>这样我们就创建好了标签页面了。但是这个时候主题还不会识别这个页面为标签页；所以我们需要编辑这个新建的页面，让主题识别这个页面，并自动为这个页面显示标签。</p>
<h2 id="3、-编辑页面让主题识别页面为标签页面"><a href="#3、-编辑页面让主题识别页面为标签页面" class="headerlink" title="3、 编辑页面让主题识别页面为标签页面"></a>3、 编辑页面让主题识别页面为标签页面</h2><p>上文说到需要编辑页面才能让主题识别这个页面为标签页面，我们只需要根据成功后到提示路径打开<code>index.md</code>这个页面文件，打开后默认内容是</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">标签</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2021-01-25 22:54:58</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure>
<p>添加上<code>type: "tags"</code>这段代码，这样就能让主题识别该页面为标签页面了</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">标签</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2021-01-25 22:54:58</span></span><br><span class="line"><span class="attr">type:</span> <span class="string">"tags"</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure>
<h2 id="4、-给文章设置标签属性"><a href="#4、-给文章设置标签属性" class="headerlink" title="4、 给文章设置标签属性"></a>4、 给文章设置标签属性</h2><p>打开需要添加标签的文章，在Front-matter区域，顶部两个<code>---</code>中，添加tags设置标签</p>
<p>注：“-”后面有个空格</p>
<h3 id="4-1-设置单标签"><a href="#4-1-设置单标签" class="headerlink" title="4.1 设置单标签"></a>4.1 设置单标签</h3><figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 开博大吉</span><br><span class="line">date: 2017-10-08 17:48:54</span><br><span class="line">tags:</span><br><span class="line"><span class="section">- Hexo</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure>
<h3 id="4-2-设置多标签-并同时设置分类"><a href="#4-2-设置多标签-并同时设置分类" class="headerlink" title="4.2 设置多标签 并同时设置分类"></a>4.2 设置多标签 并同时设置分类</h3><figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 开博大吉</span><br><span class="line">date: 2017-10-08 17:48:54</span><br><span class="line">categories: </span><br><span class="line"><span class="bullet">-</span> Hexo</span><br><span class="line">tags:</span><br><span class="line"><span class="bullet">-</span> Hexo</span><br><span class="line"><span class="section">- Blog</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure>
<h1 id="五、添加本地搜索功能"><a href="#五、添加本地搜索功能" class="headerlink" title="五、添加本地搜索功能"></a>五、添加本地搜索功能</h1><h2 id="1、在当前主题下的配置文件-config-yml-中开启搜索功能"><a href="#1、在当前主题下的配置文件-config-yml-中开启搜索功能" class="headerlink" title="1、在当前主题下的配置文件 _config.yml 中开启搜索功能"></a>1、在当前主题下的配置文件 _config.yml 中开启搜索功能</h2><p>找到local_search，enalbe属性改为true</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">local_search:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h2 id="2、安装-hexo-generator-searchdb-插件"><a href="#2、安装-hexo-generator-searchdb-插件" class="headerlink" title="2、安装 hexo-generator-searchdb 插件"></a>2、安装 <code>hexo-generator-searchdb</code> 插件</h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install hexo-generator-searchdb --save</span><br></pre></td></tr></table></figure>
<h2 id="3、在当前主题下的配置文件-config-yml-中配置搜索功能"><a href="#3、在当前主题下的配置文件-config-yml-中配置搜索功能" class="headerlink" title="3、在当前主题下的配置文件 _config.yml 中配置搜索功能"></a>3、在当前主题下的配置文件 _config.yml 中配置搜索功能</h2><p>添加以下代码</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line"> <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line"> <span class="attr">format:</span> <span class="string">html</span></span><br></pre></td></tr></table></figure>
<h1 id="六、设置代码样式"><a href="#六、设置代码样式" class="headerlink" title="六、设置代码样式"></a>六、设置代码样式</h1><h2 id="4-1-在当前主题下的配置文件-config-yml-中搜索到以下代码"><a href="#4-1-在当前主题下的配置文件-config-yml-中搜索到以下代码" class="headerlink" title="4.1 在当前主题下的配置文件 _config.yml 中搜索到以下代码"></a>4.1 在当前主题下的配置文件 _config.yml 中搜索到以下代码</h2><figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">codeblock:</span></span><br><span class="line"> <span class="comment"># Code Highlight theme</span></span><br><span class="line"> <span class="comment"># All available themes: https://theme-next.js.org/highlight/</span></span><br><span class="line"> <span class="attr">theme:</span></span><br><span class="line"> <span class="attr">light:</span> <span class="string">stackoverflow-light</span></span><br><span class="line"> <span class="attr">dark:</span> <span class="string">stackoverflow-light</span></span><br><span class="line"> <span class="attr">prism:</span></span><br><span class="line"> <span class="attr">light:</span> <span class="string">prism</span></span><br><span class="line"> <span class="attr">dark:</span> <span class="string">prism-dark</span></span><br></pre></td></tr></table></figure>
<h2 id="4-2-打开网址，选择自己喜欢的样式-根据网站上的代码设置"><a href="#4-2-打开网址，选择自己喜欢的样式-根据网站上的代码设置" class="headerlink" title="4.2 打开网址，选择自己喜欢的样式,根据网站上的代码设置"></a>4.2 打开<a href="https://theme-next.js.org/highlight/">网址</a>，选择自己喜欢的样式,根据网站上的代码设置</h2><p>如这里设置了stackoverflow-light样式，使用时在代码块旁边写明什么语言，如这里是yml就写”```yml”</p>
<hr>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>Hexo添加评论系统gitalk</title>
<url>/2024/03/15/hexo/2024/Hexo%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9Fgitalk/</url>
<content><![CDATA[<h1 id="一、申请GitHub应用"><a href="#一、申请GitHub应用" class="headerlink" title="一、申请GitHub应用"></a>一、申请GitHub应用</h1><h2 id="1-注册一个新应用-new-OAuth-application"><a href="#1-注册一个新应用-new-OAuth-application" class="headerlink" title="1. 注册一个新应用 new OAuth application"></a>1. 注册一个新应用 new OAuth application</h2><p><a href="https://github.com/settings/applications/new">注册new OAuth application网址</a>,这三项内容必须填写</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="string">Application</span> <span class="string">name：//</span> <span class="string">这个随意填写</span></span><br><span class="line"><span class="string">Homepage</span> <span class="string">URL：//</span> <span class="string">你的网站的URL地址，包含http部分。</span></span><br><span class="line"><span class="string">Authorization</span> <span class="string">callback</span> <span class="string">URL：//</span> <span class="string">你的网站的URL地址，包含http部分，和上面的</span> <span class="string">Homepage</span> <span class="string">URL</span> <span class="string">一致就行</span></span><br></pre></td></tr></table></figure>
<h2 id="1-1-Homepage-URL与Authorization-callback-URL的填写"><a href="#1-1-Homepage-URL与Authorization-callback-URL的填写" class="headerlink" title="1.1 Homepage URL与Authorization callback URL的填写"></a>1.1 Homepage URL与Authorization callback URL的填写</h2><ul>
<li>如果你的网站是host在github上的，是通过github分配给你的网址进行访问的，直接填写github分配给你的网站就可以，类似 <code>username.github.io</code></li>
<li>如果你有自己的域名，但网站内容host是在github上的，是通过cname的方式访问的，那么这两项都填你的域名</li>
<li>如果你有自己的域名，也有自己的站点，那么这两项都填你的域名</li>
<li>在调试阶段，可以把这两项设置为你的本地地址，这样方便测试，而不用一次又一次的部署网站，等测试好之后再统一部署。</li>
</ul>
<h2 id="2-生成Client信息"><a href="#2-生成Client信息" class="headerlink" title="2. 生成Client信息"></a>2. 生成Client信息</h2><p>点击 “register application”完成注册，系统会生成Client ID和Client secrets(需要手动点一下旁边的按钮)</p>
<h1 id="二、配置Gitalk"><a href="#二、配置Gitalk" class="headerlink" title="二、配置Gitalk"></a>二、配置Gitalk</h1><h2 id="方法1：通过Next主题进行配置"><a href="#方法1：通过Next主题进行配置" class="headerlink" title="方法1：通过Next主题进行配置"></a>方法1：通过Next主题进行配置</h2><p>Next主题已经为我们配置了gitalk，只需配置即可</p>
<h3 id="打开当前主题下的配置文件-config-yml"><a href="#打开当前主题下的配置文件-config-yml" class="headerlink" title="打开当前主题下的配置文件_config.yml"></a>打开当前主题下的配置文件_config.yml</h3><p>路径 <code>\themes\hexo-theme-next-master\_config.yml</code>,打开这个文件并找到下面这段代码</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">gitalk:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">github_id:</span> <span class="string">你的Github登录账号</span> <span class="string">//</span> <span class="string">这里可以不要加引号</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">gitalk</span> <span class="string">你的</span> <span class="string">Github仓库的名称</span> <span class="string">//</span> <span class="string">不要写成仓库地址</span></span><br><span class="line"> <span class="attr">client_id:</span> <span class="string">上面刚刚申请的</span> <span class="string">Client</span> <span class="string">ID</span> </span><br><span class="line"> <span class="attr">client_secret:</span> <span class="string">上面刚刚申请的</span> <span class="string">Client</span> <span class="string">Secret</span></span><br><span class="line"> <span class="attr">admin_user:</span> <span class="string">你的Github登录账号</span></span><br><span class="line"> <span class="attr">distraction_free_mode:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">proxy:</span> <span class="string">https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token</span></span><br><span class="line"> <span class="attr">language:</span></span><br></pre></td></tr></table></figure>
<h2 id="方法2：使用官网配置"><a href="#方法2：使用官网配置" class="headerlink" title="方法2：使用官网配置"></a>方法2：使用官网配置</h2><p>官网地址：<a href="https://github.com/gitalk/gitalk">https://github.com/gitalk/gitalk</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> gitalk = <span class="keyword">new</span> <span class="title class_">Gitalk</span>({</span><br><span class="line"> <span class="attr">clientID</span>: <span class="string">'GitHub Application Client ID'</span>,</span><br><span class="line"> <span class="attr">clientSecret</span>: <span class="string">'GitHub Application Client Secret'</span>,</span><br><span class="line"> <span class="attr">repo</span>: <span class="string">'GitHub repo'</span>, <span class="comment">// The repository of store comments,</span></span><br><span class="line"> <span class="attr">owner</span>: <span class="string">'GitHub repo owner'</span>,</span><br><span class="line"> <span class="attr">admin</span>: [<span class="string">'GitHub repo owner and collaborators, only these guys can initialize github issues'</span>],</span><br><span class="line"> <span class="attr">id</span>: location.<span class="property">pathname</span>, <span class="comment">// Ensure uniqueness and length less than 50</span></span><br><span class="line"> <span class="attr">distractionFreeMode</span>: <span class="literal">false</span> <span class="comment">// Facebook-like distraction free mode</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">gitalk.<span class="title function_">render</span>(<span class="string">'gitalk-container'</span>)</span><br></pre></td></tr></table></figure>
<h1 id="三、参数说明"><a href="#三、参数说明" class="headerlink" title="三、参数说明"></a>三、参数说明</h1><p>注：官网配置的参数和Hexo主题Next的参数是通用的</p>
<ul>
<li><p>repo: 要求填写你的<b>Github仓库的名称</b>，这个仓库可以是你的github上的任意一个，但必须是公开的。评论内容会以 issue的形式保存到仓库的issues中，所以建议为评论单独新建一个仓库</p>
</li>
<li><p>admin: 指定了可以初始化文章评论的github用户，一般只填写你自己就可以了</p>
</li>
<li><p>id: 文章的URL路径，不包括域名，这个路径要求必须是唯一的，且不能超过50个字符(如果超过了，可以使用md5等工具对路径进行摘要缩短长度即可)。每一遍文章的评论和这个路径相关联，所以即使域名不同，只要文章的URL一样，就会显示相关联的评论。<br>在Next主题中是自动配置的Hexo主题Next的参数定义在<code>layout/_third-party/comments/gitalk.njk</code>中</p>
</li>
<li><p>distractionFreeMode：是否是聚精会神模式，即评论框在写评论的时候，周围是否变成黑</p>
</li>
</ul>
<h1 id="四、遇到的问题"><a href="#四、遇到的问题" class="headerlink" title="四、遇到的问题"></a>四、遇到的问题</h1><ul>
<li><p>问题1：<code>Error: Not Found</code><br>解决方法：一般是仓库名称没有正确设置，请依据上面的参数说明部分进行设置</p>
</li>
<li><p>问题2：<code>Related Issues not found：</code> 未找到相关的issue进行评论<br>解决方法：出现这种情况是因为文章评论还未初始化，只需要点击下面的按钮，登录 GitHub 账户即可</p>
</li>
<li><p>问题3：评论区一直加载不上：配置中的proxy地址不正确或已经失效。<br>解决方法：官网默认地址是 <a href="https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token">https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token</a>。 如果你使用的是Next主题，请确保也是这个地址</p>
</li>
<li><p>问题4：设置后报错<code>Error: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.</code><br>解决方法：配置文件<code>_config.yml</code>中gitalk相关配置有问题</p>
</li>
<li><p>问题5：评论区点击使用Github登陆报错404<br>解决方法：配置文件<code>_config.yml</code>中gitalk相关配置有问题</p>
</li>
</ul>
<hr>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>Hexo上传图片</title>
<url>/2024/03/18/hexo/2024/Hexo%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/</url>
<content><![CDATA[<h1 id="方法1：将图片放置source-images中上传图片"><a href="#方法1：将图片放置source-images中上传图片" class="headerlink" title="方法1：将图片放置source/images中上传图片"></a>方法1：将图片放置<code>source/images</code>中上传图片</h1><h2 id="1、在source目录下新建文件images"><a href="#1、在source目录下新建文件images" class="headerlink" title="1、在source目录下新建文件images"></a>1、在source目录下新建文件images</h2><h2 id="2、将图片复制到images文件夹中"><a href="#2、将图片复制到images文件夹中" class="headerlink" title="2、将图片复制到images文件夹中"></a>2、将图片复制到images文件夹中</h2><p>Hexo默认从根目录下的<code>/source/images/</code>文件夹寻找图片</p>
<h2 id="3、引入图片"><a href="#3、引入图片" class="headerlink" title="3、引入图片"></a>3、引入图片</h2><p>注：路径以images开头</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">![<span class="string">pic</span>](<span class="link">images/pic.png</span>)</span><br></pre></td></tr></table></figure>
<h1 id="方法2：在同名文件夹中上传图片"><a href="#方法2：在同名文件夹中上传图片" class="headerlink" title="方法2：在同名文件夹中上传图片"></a>方法2：在同名文件夹中上传图片</h1><h2 id="1、让每篇新建的文章生成一个与文章同名的文件夹"><a href="#1、让每篇新建的文章生成一个与文章同名的文件夹" class="headerlink" title="1、让每篇新建的文章生成一个与文章同名的文件夹"></a>1、让每篇新建的文章生成一个与文章同名的文件夹</h2><p>打开本目录下的配置文件<code>_config.yml</code>，将<code>post_asset_folder</code>这个选项设置为true</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">post_asset_floder:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<ul>
<li>此时运行<code>hexo new xxx</code>，在<code>/source/_posts</code>文件夹下,除了会生成<code>xxx.md</code>文件，还会生成一个同名文件夹</li>
<li>此时上传代码到github时，会将同名文件夹一并上传(设置false时不会上传)</li>
</ul>
<h2 id="2、让Hexo改为从与文章同名的资源文件夹中寻找图片"><a href="#2、让Hexo改为从与文章同名的资源文件夹中寻找图片" class="headerlink" title="2、让Hexo改为从与文章同名的资源文件夹中寻找图片"></a>2、让Hexo改为从与文章同名的资源文件夹中寻找图片</h2><h3 id="2-1-安装插件hexo-asset-image"><a href="#2-1-安装插件hexo-asset-image" class="headerlink" title="2.1 安装插件hexo-asset-image"></a>2.1 安装插件<code>hexo-asset-image</code></h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install hexo-asset-image --save</span><br></pre></td></tr></table></figure>
<h3 id="2-2-插件hexo-asset-image说明"><a href="#2-2-插件hexo-asset-image说明" class="headerlink" title="2.2 插件hexo-asset-image说明"></a>2.2 插件<code>hexo-asset-image</code>说明</h3><ul>
<li><p><code>hexo-asset-image</code>是一个Hexo的插件，它针对的是那些为每篇博文独立设立资源文件夹（通过<code>post_asset_folder</code>设为true）的用户。</p>
</li>
<li><p>如果你在Hexo文章中使用<code></code>这样的标记来引用图片，那么Hexo默认从根目录下的<code>/source/images/</code>文件夹寻找图片，而非从当前文章的资源文件夹中寻找。</p>
</li>
<li><p>如果你安装并启用了<code>hexo-asset-image</code>插件，那么Hexo会改为<b>从与文章同名的资源文件夹</b>中寻找图片。</p>
</li>
<li><p>当你安装并启用<code>hexo-asset-image</code>插件后，可以直接把图片放到文章的资源文件夹中，然后在文章中使用相对路径引用图片，比如<code></code>，Hexo会自动从文章的资源文件夹中寻找pic.jpg</p>
</li>
</ul>
<h2 id="3、在文章中添加图片"><a href="#3、在文章中添加图片" class="headerlink" title="3、在文章中添加图片"></a>3、在文章中添加图片</h2><h3 id="3-1-创建新文章"><a href="#3-1-创建新文章" class="headerlink" title="3.1 创建新文章"></a>3.1 创建新文章</h3><p>运行<code>hexo new xxx</code>生成的博文，此时在<code>/source/_posts</code>文件夹下,除了会生成<code>xxx.md</code>文件，还会生成一个同名文件夹</p>
<h3 id="3-2-添加图片"><a href="#3-2-添加图片" class="headerlink" title="3.2 添加图片"></a>3.2 添加图片</h3><p>在<code>xxx.md</code>中引入本地图片时，先把图片复制到同名文件夹下，然后在需要引用图片的地方按照markdown的格式输入</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">![<span class="string">图片标题</span>](<span class="link">图片名.jpg</span>)</span><br></pre></td></tr></table></figure>
<p>注：</p>
<ul>
<li>文件夹xxx与xxx.md文件需要在同一层级的目录下</li>
<li>在xxx.md文件中引入图片时，直接输入图片名，不要输入具体路径</li>
</ul>
<h4 id="错误示范"><a href="#错误示范" class="headerlink" title="错误示范"></a>错误示范</h4><figure class="highlight md"><table><tr><td class="code"><pre><span class="line">![<span class="string">图片标题</span>](<span class="link">./xxx/图片名.jpg</span>)</span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>Hexo添加评论系统livere</title>
<url>/2024/03/18/hexo/2024/Hexo%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9Flivere/</url>
<content><![CDATA[<h1 id="注册必力账号-网页"><a href="#注册必力账号-网页" class="headerlink" title="注册必力账号 网页"></a>注册必力账号 <a href="https://livere.com/">网页</a></h1><p>点右上角头像，再点登陆，跳转页面后，点来必力注册</p>
<p><img src="/2024/03/18/hexo/2024/Hexo%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9Flivere/01%E7%99%BB%E9%99%86%E7%95%8C%E9%9D%A2.png" alt="登陆界面"></p>
<p>第一行填注册邮箱，第二行用户名，第三行密码</p>
<p><img src="/2024/03/18/hexo/2024/Hexo%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9Flivere/02%E6%B3%A8%E5%86%8C%E7%95%8C%E9%9D%A2.png" alt="注册界面"></p>
<h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><p>在注册成功后，跳转到安装界面，选择City版本进行安装。 点击现在安装。</p>
<p><img src="/2024/03/18/hexo/2024/Hexo%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9Flivere/03%E5%AE%89%E8%A3%85.png" alt="安装"></p>
<p>输入自己的网址（带https://），网站名（随便填），和网站类型（选择个人网站）即可。</p>
<p><img src="/2024/03/18/hexo/2024/Hexo%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9Flivere/04%E7%BD%91%E5%9D%80%E5%A1%AB%E5%86%99.png" alt="网址"></p>
<h1 id="获取data-uid"><a href="#获取data-uid" class="headerlink" title="获取data-uid"></a>获取data-uid</h1><p>申请成功后，进入到代码管理界面。找到以下内容。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><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">"xxxxxxx"</span>></span></span><br></pre></td></tr></table></figure>
<p>复制<code>data-uid</code>里面的那一串字段，配置要用。</p>
<p><img src="/2024/03/18/hexo/2024/Hexo%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9Flivere/05%E4%BB%A3%E7%A0%81.png" alt="uid"></p>
<h1 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h1><p>打开你当前主题目录下的配置文件（路径：<code>themes/next/_config.yml</code>），搜索livere，找到如下内容，把之前<code>data-uid</code>里面的字段复制到<code>livere-uid:</code>后面（注意字段和冒号中间要有空格,#号去掉）。</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># LiveRe comments system</span></span><br><span class="line"><span class="comment"># You can get your uid from https://livere.com/insight/myCode (General web site)</span></span><br><span class="line"><span class="attr">livere_uid:</span> <span class="comment">#<your_uid></span></span><br></pre></td></tr></table></figure>
<h1 id="开启livere评论系统"><a href="#开启livere评论系统" class="headerlink" title="开启livere评论系统"></a>开启livere评论系统</h1><p>在你当前主题目录下的配置文件中，搜索comments，找到如下内容，在<code>active:</code>后面打上livere。</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">comments:</span></span><br><span class="line"> <span class="comment"># Available values: tabs | buttons</span></span><br><span class="line"> <span class="attr">style:</span> <span class="string">tabs</span></span><br><span class="line"> <span class="comment"># Choose a comment system to be displayed by default.</span></span><br><span class="line"> <span class="comment"># Available values: changyan | disqus | disqusjs | gitalk | livere | valine</span></span><br><span class="line"> <span class="attr">active:</span> <span class="string">livere</span></span><br><span class="line"> <span class="comment"># Setting `true` means remembering the comment system selected by the visitor.</span></span><br><span class="line"> <span class="attr">storage:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># Lazyload all comment systems.</span></span><br><span class="line"> <span class="attr">lazyload:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<h1 id="最后效果"><a href="#最后效果" class="headerlink" title="最后效果"></a>最后效果</h1><p>运行代码</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo d -g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure>
<p>效果如图</p>
<p><img src="/2024/03/18/hexo/2024/Hexo%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9Flivere/06%E8%AF%84%E8%AE%BA%E5%8C%BA.png" alt="评论区"></p>
<hr>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>Hexo点击某一具体分类或标签报404</title>
<url>/2024/03/18/hexo/2024/Hexo%E7%82%B9%E5%87%BB%E6%9F%90%E4%B8%80%E5%85%B7%E4%BD%93%E5%88%86%E7%B1%BB%E6%88%96%E6%A0%87%E7%AD%BE%E6%8A%A5404/</url>
<content><![CDATA[<h1 id="【问题描述】"><a href="#【问题描述】" class="headerlink" title="【问题描述】"></a>【问题描述】</h1><p>点击某一具体标签报404，但是本地没有问题</p>
<h1 id="【分析】"><a href="#【分析】" class="headerlink" title="【分析】"></a>【分析】</h1><ul>
<li>发现这些报404的标签或分类名都是修改过的，原先的标签开头是大写名称</li>
<li>将网址后面的标签名首字母改成大写，就会显示标签下的文章</li>
</ul>
<h1 id="【原因】"><a href="#【原因】" class="headerlink" title="【原因】"></a>【原因】</h1><p>由于git中设置了忽略大小写</p>
<h1 id="【解决办法】"><a href="#【解决办法】" class="headerlink" title="【解决办法】"></a>【解决办法】</h1><p>设置 git 不忽略大小写</p>
<h2 id="1、进入博客文件夹，编辑-git-目录下的配置文件"><a href="#1、进入博客文件夹，编辑-git-目录下的配置文件" class="headerlink" title="1、进入博客文件夹，编辑 git 目录下的配置文件"></a>1、进入博客文件夹，编辑 git 目录下的配置文件</h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">cd</span> blog</span><br><span class="line">vim .deploy_git/.git/config</span><br><span class="line">i // 这时左下角变成--INSERT--，可修改模式</span><br></pre></td></tr></table></figure>
<h2 id="2、修改内容"><a href="#2、修改内容" class="headerlink" title="2、修改内容"></a>2、修改内容</h2><p>将光标移到<code>ignorecase=true</code>这一行，将ignorecase值改为false</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># ignorecase = true</span></span><br><span class="line">ignorecase = <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<h2 id="3、保存修改内容"><a href="#3、保存修改内容" class="headerlink" title="3、保存修改内容"></a>3、保存修改内容</h2><p>按esc，输入:号，左下角就变成:号,在左下角输入wq回车</p>
<h2 id="4、查看是否修改成功"><a href="#4、查看是否修改成功" class="headerlink" title="4、查看是否修改成功"></a>4、查看是否修改成功</h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">cat</span> .deploy_git/.git/config </span><br></pre></td></tr></table></figure>
<h2 id="5、重写清空部署项目"><a href="#5、重写清空部署项目" class="headerlink" title="5、重写清空部署项目"></a>5、重写清空部署项目</h2><h3 id="5-1-如果还没有解决，清空部署到-github-上的文件，重新发布："><a href="#5-1-如果还没有解决，清空部署到-github-上的文件，重新发布：" class="headerlink" title="5.1 如果还没有解决，清空部署到 github 上的文件，重新发布："></a>5.1 如果还没有解决，清空部署到 github 上的文件，重新发布：</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">cd</span> .deploy_git</span><br><span class="line">git <span class="built_in">rm</span> -rf *</span><br><span class="line">git commit -m <span class="string">'clean all file'</span></span><br><span class="line">git push</span><br></pre></td></tr></table></figure>
<h3 id="5-2-进入博客文件夹，用-hexo-重新生成部署"><a href="#5-2-进入博客文件夹，用-hexo-重新生成部署" class="headerlink" title="5.2 进入博客文件夹，用 hexo 重新生成部署"></a>5.2 进入博客文件夹，用 hexo 重新生成部署</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo d -g</span><br></pre></td></tr></table></figure>
<hr>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>如何更换Hexo主题</title>
<url>/2017/10/19/hexo/2017/%E5%A6%82%E4%BD%95%E6%9B%B4%E6%8D%A2Hexo%E4%B8%BB%E9%A2%98/</url>
<content><![CDATA[<h2 id="1、下载主题"><a href="#1、下载主题" class="headerlink" title="1、下载主题"></a>1、下载主题</h2><p>  首先，你需要选择一个你喜欢的主题并下载。在 Hexo 的官方网站（hexo.io/themes）上可以找到许多主题。每个主题的描述旁边通常都会有一个链接，点击这个链接就可以下载这个主题。</p>
<p>  如果链接跳转到了 Github 仓库，你可以直接点击页面右上方的 “Clone or download” 按钮，然后选择 “Download ZIP”。这样就可以下载下来该主题的压缩包。</p>
<p>  还有一种方式是使用 git 命令行工具克隆主题的仓库。首先你需要安装 git 工具，然后在命令行中输入类似于下面的命令：</p>
<pre><code class="bash">git clone https://github.com/theme-author/theme-name.git themes/theme-name
</code></pre>
<h2 id="2、安装主题"><a href="#2、安装主题" class="headerlink" title="2、安装主题"></a>2、安装主题</h2><p>  下载主题后，将主题的整个文件夹复制或移动到你的 Hexo 博客的 <code>themes/</code> 文件夹中。</p>
<h2 id="3、启用主题"><a href="#3、启用主题" class="headerlink" title="3、启用主题"></a>3、启用主题</h2><p>  打开 Hexo 博客的<b>根目录</b>下的 <code>_config.yml</code> 文件，并找到 theme 配置项。将这个配置项的值修改为你刚刚安装的主题的名字。比如，如果你安装的是 Next 主题，就将 <code>theme</code> 配置项的值修改为 <code>next</code>。</p>
<h2 id="4、配置主题"><a href="#4、配置主题" class="headerlink" title="4、配置主题"></a>4、配置主题</h2><p>  大部分主题都可以进行自定义配置。通常在主题的文件夹下会有一个 _config.yml 文件，这个文件用于定义主题的配置。每个主题的配置项都不尽相同，具体可以参考主题的文档说明。</p>
<p>  一旦你完成了上面的步骤，你的 Hexo 博客就会使用新的主题了。为了看到改变，你可能需要运行 <code>hexo clean</code> 和 <code>hexo server</code>，然后在浏览器中刷新你的博客网页。如果你在切换主题后遇到问题，记得查看新主题的文档，或者与主题的作者联系。</p>
<hr>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>开博大吉</title>
<url>/2017/10/08/hexo/2017/%E5%BC%80%E5%8D%9A%E5%A4%A7%E5%90%89/</url>
<content><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>
<hr>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>如何使用Hexo搭建博客</title>
<url>/2017/10/08/hexo/2017/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8Hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/</url>
<content><![CDATA[<h1>一、初始化你的Hexo博客</h1>
<p>Hexo 是一个基于 Node.js 的快速、简单且强大的博客框架。以下是 Hexo 的初始化步骤：</p>
<h3 id="1、首先你需要在电脑上安装-Node-js-和-Git。这两者是-Hexo-运行的必要环境。"><a href="#1、首先你需要在电脑上安装-Node-js-和-Git。这两者是-Hexo-运行的必要环境。" class="headerlink" title="1、首先你需要在电脑上安装 Node.js 和 Git。这两者是 Hexo 运行的必要环境。"></a>1、首先你需要在电脑上安装 Node.js 和 Git。这两者是 Hexo 运行的必要环境。</h3><h3 id="2、安装-Hexo。打开终端，输入以下命令："><a href="#2、安装-Hexo。打开终端，输入以下命令：" class="headerlink" title="2、安装 Hexo。打开终端，输入以下命令："></a>2、安装 Hexo。打开终端，输入以下命令：</h3><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>
<p> 这将全局安装 Hexo。</p>
<h3 id="3、创建一个新的-Hexo-项目。替换-为你想要的文件夹名，再输入："><a href="#3、创建一个新的-Hexo-项目。替换-为你想要的文件夹名，再输入：" class="headerlink" title="3、创建一个新的 Hexo 项目。替换 <folder> 为你想要的文件夹名，再输入："></a>3、创建一个新的 Hexo 项目。替换 <code><folder></code> 为你想要的文件夹名，再输入：</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo init <folder></span><br><span class="line"><span class="built_in">cd</span> <folder></span><br></pre></td></tr></table></figure>
<p>这将在指定的文件夹中创建一个新的 Hexo 项目，并且进入到这个文件夹内。</p>
<h3 id="4、安装项目依赖。在终端，输入："><a href="#4、安装项目依赖。在终端，输入：" class="headerlink" title="4、安装项目依赖。在终端，输入："></a>4、安装项目依赖。在终端，输入：</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure>
<p>这将安装所有 Hexo 项目所需要的依赖。</p>
<p>5、现在，你可以运行 Hexo 服务器来预览你的博客。输入：</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo server</span><br></pre></td></tr></table></figure>
<p>这将启动 Hexo 服务器。你可以在浏览器中输入 <code>localhost:4000</code> 来查看你的博客。</p>
<p><b>以上步骤便是 Hexo 的基础配置和初始化。</b></p>
<h2 id="6、创建博客（文章）"><a href="#6、创建博客（文章）" class="headerlink" title="6、创建博客（文章）"></a>6、创建博客（文章）</h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo new [layout] <title></span><br></pre></td></tr></table></figure>
<p>如 <code>hexo new 开博大吉</code>（开博大吉为文章标题），返回一个 md 文件的路径</p>
<h3 id="7、编辑-md-文件"><a href="#7、编辑-md-文件" class="headerlink" title="7、编辑 md 文件"></a>7、编辑 md 文件</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">start xxxxxxxxxxxxxxxxxxx.md</span><br></pre></td></tr></table></figure>
<p>内容在第二个<code>---</code>之后编写， （注意：Ubuntu 系统用 xdg-open xxxxxxxxxxxxxxxxxxx.md 命令），或在 <code>source/_posts</code> 文件夹中找到它，并且开始进行编辑。</p>
<h3 id="8、更新"><a href="#8、更新" class="headerlink" title="8、更新"></a>8、更新</h3><p>使用 <code>hexo generate</code> 或简写的 <code>hexo g</code> 来生成静态文件，再次运行 <code>hexo server</code> 就可以看到你的新文章了。</p>
<h1>二、部署到github</h1>
要将 Hexo 博客部署到 GitHub，你需要遵循以下步骤：
<h3 id="1、在-GitHub-上新建一个空-repo-repo-名称是「用户名-github-io」（仓库名一定要这个格式，不然博客跳转有问题）"><a href="#1、在-GitHub-上新建一个空-repo-repo-名称是「用户名-github-io」（仓库名一定要这个格式，不然博客跳转有问题）" class="headerlink" title="1、在 GitHub 上新建一个空 repo ,repo 名称是「用户名.github.io」（仓库名一定要这个格式，不然博客跳转有问题）"></a>1、在 GitHub 上新建一个空 repo ,repo 名称是<code>「用户名.github.io」</code>（仓库名一定要这个格式，不然博客跳转有问题）</h3><h3 id="2、在你的-Hexo-项目目录下，通过以下命令安装-git-部署插件-hexo-deployer-git："><a href="#2、在你的-Hexo-项目目录下，通过以下命令安装-git-部署插件-hexo-deployer-git：" class="headerlink" title="2、在你的 Hexo 项目目录下，通过以下命令安装 git 部署插件 hexo-deployer-git："></a>2、在你的 Hexo 项目目录下，通过以下命令安装 git 部署插件 <code>hexo-deployer-git</code>：</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
<p>这是一个 Hexo 插件，可以帮助你直接将项目部署到 GitHub。之后再修改博客需要上传，可执行：hexo generate代替该步</p>
<h3 id="3、编辑网站配置-start-config-yml（该文件在hexoblog根目录下）"><a href="#3、编辑网站配置-start-config-yml（该文件在hexoblog根目录下）" class="headerlink" title="3、编辑网站配置 start _config.yml（该文件在hexoblog根目录下）"></a>3、编辑网站配置 <code>start _config.yml</code>（该文件在hexoblog<b>根目录</b>下）</h3><p>找到 # Deployment 的部分。在这里，你需要配置如何将你的 Hexo 博客部署到 GitHub。参考以下例子进行设置：</p>
<p><b>可改项：</b></p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="number">1</span><span class="string">.</span> <span class="string">第</span> <span class="number">6</span> <span class="string">行的</span> <span class="string">title</span> <span class="string">文章标题</span></span><br><span class="line"><span class="number">2</span><span class="string">.</span> <span class="string">第</span> <span class="number">9</span> <span class="string">行的</span> <span class="string">author</span> <span class="string">作者名</span></span><br></pre></td></tr></table></figure>
<p><b>必改项：</b></p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="number">1</span><span class="string">.</span> <span class="string">type</span> <span class="string">改成</span> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line"><span class="attr">2. repo:</span> <span class="string"><repository</span> <span class="string">url></span> </span><br><span class="line"><span class="number">3</span><span class="string">.</span> <span class="string">//</span> <span class="string">加上该行</span> <span class="attr">repo:</span> <span class="string">后面有个空格</span></span><br><span class="line"><span class="number">4</span><span class="string">.</span> <span class="string">//</span> <span class="string">与type垂直对齐</span></span><br><span class="line"><span class="number">5</span><span class="string">.</span> <span class="string">//</span> <span class="string">仓库地址为firstblog所对应的地址，仓库地址以</span> <span class="string">git@github.com:开头</span></span><br></pre></td></tr></table></figure>
<p>这里，<code><repository url></code> 是你的 GitHub 存储库的 URL，应该类似于 <code>https://github.com/<username>/<username>.github.io.git</code>。而 <code><branch></code> 则应设置为对应分支名或不写。</p>
<h3 id="4、输入以下命令来生成静态文件并部署到-GitHub："><a href="#4、输入以下命令来生成静态文件并部署到-GitHub：" class="headerlink" title="4、输入以下命令来生成静态文件并部署到 GitHub："></a>4、输入以下命令来生成静态文件并部署到 GitHub：</h3><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo generate</span><br><span class="line">hexo deploy // 上传博客系统（包括文章）</span><br></pre></td></tr></table></figure>
<p>也可以使用简写 <code>hexo d -g</code><br>现在，你应该可以通过访问 <code>https://<username>.github.io</code> 来查看你的 Hexo 博客网站了。<br>注意：部署到 GitHub Pages 时，你的仓库名称应遵循 <code><username>.github.io</code> 的格式，<code><username></code> 要与你的 GitHub 账号名一致</p>
<h3 id="5、进入-username-github-io-对应的-repo，打开-GitHub-Pages-功能（setting中），就可以直接点击预览链接"><a href="#5、进入-username-github-io-对应的-repo，打开-GitHub-Pages-功能（setting中），就可以直接点击预览链接" class="headerlink" title="5、进入 username.github.io 对应的 repo，打开 GitHub Pages 功能（setting中），就可以直接点击预览链接"></a>5、进入 <code>username.github.io</code> 对应的 repo，打开 GitHub Pages 功能（setting中），就可以直接点击预览链接</h3><hr>
]]></content>
<categories>
<category>Hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>shopify结账时无法选择运费</title>
<url>/2024/05/01/international%20e-commerce/shopify/%E7%BB%93%E8%B4%A6%E6%97%B6%E9%99%A4%E4%BA%86%E7%BE%8E%E5%9B%BD%E7%9A%84%E5%9C%B0%E5%9D%80%EF%BC%8C%E5%85%B6%E4%BB%96%E5%9B%BD%E5%AE%B6%E7%9A%84%E5%9C%B0%E5%9D%80%EF%BC%8C%E5%A1%AB%E5%86%99%E5%AE%8C%E5%9C%B0%E5%9D%80%E5%90%8E%E6%97%A0%E6%B3%95%E8%AE%BE%E7%BD%AE%E8%BF%90%E8%B4%B9/</url>
<content><![CDATA[<p>Shopify 结账页面的国际运费设置问题，主要针对非美国地址无法正确计算运费的情况。</p>
<p>问题描述：用户填写非美国地址后，运费无法正常显示或设置失败。</p>
<p>解决方案：</p>
<ol>
<li><p>在 Shopify 后台 设置 > 配送 中添加目标国家/地区，并绑定运费规则。</p>
</li>
<li><p>检查是否启用自动运费计算（如 Shopify Shipping 或第三方物流集成）。</p>
</li>
</ol>