-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
3941 lines (3783 loc) · 499 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
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>LeetCode:1. 两数之和</title>
<url>/posts/2f3d653d/</url>
<content><![CDATA[<center>我不想O(n^2) :(</center>
<span id="more"></span>
<h1 id="前置声明">前置声明</h1>
<blockquote>
<h2 id="center-LeetCode所有题目版权均归-LeetCode-和-力扣中国-所有-center-center-本文仅提题解与思路，详情请访问官网查看-center"><center> LeetCode所有题目版权均归 LeetCode 和 力扣中国 所有</center><center> 本文仅提题解与思路，详情请访问官网查看 </center></h2>
<hr>
<center>
<p><a href="https://leetcode.cn/problems/two-sum/description/"><img src="https://leetcode.cn/favicon.ico" alt="LeetCode Logo"></a></p>
</center>
<center>
<p><a href="https://leetcode.cn/problems/two-sum/description/">LeetCode:1. 两数之和</a></p>
</center>
</blockquote>
<h1 id="O-n-解法-hashmap">O(n)解法:hashmap</h1>
<p>下面是我直接用AI写的：在这个方法中，HashMap扮演了非常重要的角色。它允许我们在O(1)时间复杂度内检查一个数是否已经在之前遍历过的元素中出现过，并且还能够获取到这个数在数组中的索引。这种方法比暴力解法（即使用两层循环遍历数组）要高效得多，因为暴力解法的时间复杂度是O(n^2)，而这种方法的时间复杂度是O(n)。</p>
<p>需要注意的是，HashMap中的键（key）是数组中的元素值，而值（value）是这些元素值在数组中的索引。这种方法利用了HashMap能够快速查找键的特性，从而避免了不必要的重复遍历。</p>
<p>最后，如果遍历完整个数组都没有找到满足条件的两个数，那么方法会抛出一个IllegalArgumentException异常。</p>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.util.HashMap; </span><br><span class="line"><span class="keyword">import</span> java.util.Map; </span><br><span class="line"> </span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Solution</span> { </span><br><span class="line"> <span class="keyword">public</span> <span class="type">int</span>[] twoSum(<span class="type">int</span>[] nums, <span class="type">int</span> target) { </span><br><span class="line"> Map<Integer, Integer> map = <span class="keyword">new</span> <span class="title class_">HashMap</span><>(); </span><br><span class="line"> <span class="keyword">for</span> (<span class="type">int</span> <span class="variable">i</span> <span class="operator">=</span> <span class="number">0</span>; i < nums.length; i++) { </span><br><span class="line"> <span class="type">int</span> <span class="variable">complement</span> <span class="operator">=</span> target - nums[i]; </span><br><span class="line"> <span class="keyword">if</span> (map.containsKey(complement)) { </span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">int</span>[]{map.get(complement), i}; </span><br><span class="line"> } </span><br><span class="line"> map.put(nums[i], i); </span><br><span class="line"> } </span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">IllegalArgumentException</span>(<span class="string">"No two sum solution"</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="O-nlog-n-解法：">O(nlog(n))解法：</h1>
<p>我第一眼想到先用对儿值记录值和索引通过对值进行排序，再用双指针扫两端这样匹配后可以获得排序之前的索引</p>
<blockquote>
<p>不太会java，还是得靠AI找包和各种方法：（</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.util.Arrays;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">class</span> <span class="title class_">Solution</span> {</span><br><span class="line"> <span class="keyword">public</span> <span class="type">int</span>[] twoSum(<span class="type">int</span>[] nums, <span class="type">int</span> target) {</span><br><span class="line"> <span class="comment">// 创建一个可排序的数组来保存值和索引</span></span><br><span class="line"> <span class="type">int</span>[][] indexedNums = <span class="keyword">new</span> <span class="title class_">int</span>[nums.length][<span class="number">2</span>];</span><br><span class="line"> <span class="keyword">for</span> (<span class="type">int</span> <span class="variable">i</span> <span class="operator">=</span> <span class="number">0</span>; i < nums.length; i++) {</span><br><span class="line"> indexedNums[i] = <span class="keyword">new</span> <span class="title class_">int</span>[]{nums[i], i};</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 按照值对数组进行排序</span></span><br><span class="line"> Arrays.sort(indexedNums, (a, b) -> Integer.compare(a[<span class="number">0</span>], b[<span class="number">0</span>]));</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 初始化两个指针</span></span><br><span class="line"> <span class="type">int</span> <span class="variable">left</span> <span class="operator">=</span> <span class="number">0</span>, right = nums.length - <span class="number">1</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 使用双指针技术寻找匹配对</span></span><br><span class="line"> <span class="keyword">while</span> (left < right) {</span><br><span class="line"> <span class="type">int</span> <span class="variable">currentSum</span> <span class="operator">=</span> indexedNums[left][<span class="number">0</span>] + indexedNums[right][<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">if</span> (currentSum == target) {</span><br><span class="line"> <span class="comment">// 返回原始索引</span></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">int</span>[]{indexedNums[left][<span class="number">1</span>], indexedNums[right][<span class="number">1</span>]};</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (currentSum < target) {</span><br><span class="line"> left++;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> right--;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 如果没有找到匹配项，则返回空数组</span></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">int</span>[]{};</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>算法题</category>
<category>LeetCode</category>
</categories>
<tags>
<tag>LeetCode</tag>
<tag>算法题</tag>
<tag>java</tag>
</tags>
</entry>
<entry>
<title>LeetCode:2. 两数相加</title>
<url>/posts/f899f771/</url>
<content><![CDATA[<center>两数相加<center>
<span id="more"></span>
<h1 id="前置声明">前置声明</h1>
<blockquote>
<h2 id="center-LeetCode所有题目版权均归-LeetCode-和-力扣中国-所有-center-center-本文仅提题解与思路，详情请访问官网查看-center"><center> LeetCode所有题目版权均归 LeetCode 和 力扣中国 所有</center><center> 本文仅提题解与思路，详情请访问官网查看 </center></h2>
<hr>
<center>
<p><a href="https://leetcode.cn/problems/add-two-numbers/"><img src="https://leetcode.cn/favicon.ico" alt="LeetCode Logo"></a></p>
</center>
<center>
<p><a href="https://leetcode.cn/problems/add-two-numbers/">两数相加</a></p>
</center>
</blockquote>
<h2 id="O-n-复杂度">O(n)复杂度</h2>
<p>按题意来，两个链遍历，取个位，进十位就行了。</p>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Definition for singly-linked list.</span></span><br><span class="line"><span class="comment"> * public class ListNode {</span></span><br><span class="line"><span class="comment"> * int val;</span></span><br><span class="line"><span class="comment"> * ListNode next;</span></span><br><span class="line"><span class="comment"> * ListNode() {}</span></span><br><span class="line"><span class="comment"> * ListNode(int val) { this.val = val; }</span></span><br><span class="line"><span class="comment"> * ListNode(int val, ListNode next) { this.val = val; this.next = next; }</span></span><br><span class="line"><span class="comment"> * }</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Solution</span> { </span><br><span class="line"> <span class="keyword">public</span> ListNode <span class="title function_">addTwoNumbers</span><span class="params">(ListNode l1, ListNode l2)</span> { </span><br><span class="line"> <span class="type">ListNode</span> <span class="variable">p</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">ListNode</span>(<span class="number">0</span>); </span><br><span class="line"> <span class="type">ListNode</span> <span class="variable">cur</span> <span class="operator">=</span> p; </span><br><span class="line"> <span class="type">int</span> <span class="variable">pp</span> <span class="operator">=</span> <span class="number">0</span>; </span><br><span class="line"> <span class="keyword">while</span> (l1 != <span class="literal">null</span> || l2 != <span class="literal">null</span> || pp != <span class="number">0</span>) { </span><br><span class="line"> <span class="type">int</span> <span class="variable">s1</span> <span class="operator">=</span> l1 != <span class="literal">null</span> ? l1.val : <span class="number">0</span>; </span><br><span class="line"> <span class="type">int</span> <span class="variable">s2</span> <span class="operator">=</span> l2 != <span class="literal">null</span> ? l2.val : <span class="number">0</span>; </span><br><span class="line"> <span class="type">int</span> <span class="variable">add</span> <span class="operator">=</span> s1 + s2 + pp; </span><br><span class="line"> pp = add >= <span class="number">10</span> ? <span class="number">1</span> : <span class="number">0</span>; </span><br><span class="line"> add = add >= <span class="number">10</span> ? add - <span class="number">10</span> : add; </span><br><span class="line"> cur.next = <span class="keyword">new</span> <span class="title class_">ListNode</span>(add); </span><br><span class="line"> cur = cur.next; </span><br><span class="line"> <span class="keyword">if</span> (l1 != <span class="literal">null</span>) { </span><br><span class="line"> l1 = l1.next; </span><br><span class="line"> } </span><br><span class="line"> <span class="keyword">if</span> (l2 != <span class="literal">null</span>) { </span><br><span class="line"> l2 = l2.next; </span><br><span class="line"> } </span><br><span class="line"> } </span><br><span class="line"> <span class="keyword">return</span> p.next; </span><br><span class="line"> } </span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>算法题</category>
<category>LeetCode</category>
</categories>
<tags>
<tag>LeetCode</tag>
<tag>算法题</tag>
<tag>记录</tag>
<tag>教程</tag>
</tags>
</entry>
<entry>
<title>Vue:计算属性</title>
<url>/posts/ffe80f36/</url>
<content><![CDATA[<center>默认只读<center>
<span id="more"></span>
<h2 id="我们为什么需要计算属性">我们为什么需要计算属性</h2>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">全名：<span class="tag"><<span class="name">span</span>></span>{{firstName + '-' + lastName}}<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">br</span>></span></span><br></pre></td></tr></table></figure>
<p>vue官方不建议我们在模板这么写，这看起来过于 <strong>复杂</strong></p>
<h2 id="示例代码">示例代码</h2>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"></span><br><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">"person"</span>></span></span><br><span class="line"> 姓：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"firstName"</span>></span> <span class="tag"><<span class="name">br</span>></span> </span><br><span class="line"> 名：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"lastName"</span>></span> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> 全名：<span class="tag"><<span class="name">span</span>></span>{{fullName}}<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"changeName"</span>></span>修改姓名<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="comment"><!-- 全名 <span>{{firstName}}-{{lastName}}</span> <br> --></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><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"ts"</span> <span class="attr">name</span>=<span class="string">"Personsss"</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> {computed, ref} <span class="keyword">from</span> <span class="string">'vue'</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> firstName= <span class="title function_">ref</span>(<span class="string">'章'</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> lastName = <span class="title function_">ref</span>(<span class="string">'礼'</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> fullName =<span class="title function_">computed</span>(</span></span><br><span class="line"><span class="language-javascript"><span class="function">()=></span>firstName.<span class="property">value</span>.<span class="title function_">slice</span>(<span class="number">0</span>,<span class="number">1</span>).<span class="title function_">toUpperCase</span>()+firstName.<span class="property">value</span>.<span class="title function_">slice</span>(<span class="number">1</span>)+lastName.<span class="property">value</span></span></span><br><span class="line"><span class="language-javascript">);</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>
<p>首先我们需要导入<code>computed</code>然后使用这个计算属性定义<code>fullName</code>通过这个方法，使得模板变得简易，可读性变高</p>
<h2 id="计算属性默认只可读">计算属性默认只可读</h2>
<p>事实上如果我在里面定义一个函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">changeName</span>(<span class="params"></span>){</span><br><span class="line">fullName.<span class="property">value</span>=<span class="string">'李四'</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这个<code>changeName</code>函数会报错<code>无法为“value”赋值，因为它是只读属性。</code><br>
这是计算属性的只读特性</p>
<h2 id="如何修改？">如何修改？</h2>
<p>如果想要修改计算属性的值，我们需要<code>get</code>和<code>set</code>方法</p>
<p>例如来自于<a href="https://cn.vuejs.org/guide/essentials/computed.html">vue官方文档</a></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref, computed } <span class="keyword">from</span> <span class="string">'vue'</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> firstName = <span class="title function_">ref</span>(<span class="string">'John'</span>)</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> lastName = <span class="title function_">ref</span>(<span class="string">'Doe'</span>)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> fullName = <span class="title function_">computed</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// getter</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">get</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> firstName.<span class="property">value</span> + <span class="string">' '</span> + lastName.<span class="property">value</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// setter</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">set</span>(<span class="params">newValue</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 注意：我们这里使用的是解构赋值语法</span></span></span><br><span class="line"><span class="language-javascript"> [firstName.<span class="property">value</span>, lastName.<span class="property">value</span>] = newValue.<span class="title function_">split</span>(<span class="string">' '</span>)</span></span><br><span class="line"><span class="language-javascript"> }</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>
<p>你发现了吗，这种修改本质上还是修改了<code>firstName</code>和<code>lastName</code>,那我们不禁想到，为什么我们不直接修改这两个的值，来实现通过计算属性更新<code>fullName</code>的值呢？</p>
<h3 id="官方推荐">官方推荐</h3>
<p>正如官方文档所言<br>
<em><strong>避免直接修改计算属性值</strong></em><br>
从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。</p>
<p>所以，这种只读属性是必然的，我们完全可以通过修改那两个值实现计算属性的值的更新！</p>
]]></content>
<categories>
<category>Vue3</category>
<category>基础</category>
</categories>
<tags>
<tag>Vue3</tag>
<tag>前端</tag>
</tags>
</entry>
<entry>
<title>通过创作罗斯科绘画学习 CSS 盒子模型</title>
<url>/posts/5129f3bd/</url>
<content><![CDATA[<p>一种大胆且直白抽象的艺术</p>
<span id="more"></span>
<h1 id="效果">效果</h1>
<p>来自于<a href="https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/#learn-the-css-box-model-by-building-a-rothko-painting">freecodecamp</a></p>
<style>
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
overflow: hidden;
filter: blur(2px);
}
.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}
.one {
width: 425px;
height: 150px;
background-color: #efb762;
margin: 20px auto;
box-shadow: 0 0 3px 3px #efb762;
border-radius: 9px;
transform: rotate(-0.6deg);
}
.two {
width: 475px;
height: 200px;
background-color: #8f0401;
margin: 0 auto 20px;
box-shadow: 0 0 3px 3px #8f0401;
border-radius: 8px 10px;
transform: rotate(0.4deg);
}
.one, .two {
filter: blur(1px);
}
.three {
width: 91%;
height: 28%;
background-color: #b20403;
margin: auto;
filter: blur(2px);
box-shadow: 0 0 5px 5px #b20403;
border-radius: 30px 25px 60px 12px;
transform:rotate(-0.2deg);
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rothko Painting</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="frame">
<div class="canvas">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>
<h2 id="index-html">index.html</h2>
<p>基本都是div</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"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</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">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Rothko Painting<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"./styles.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</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">div</span> <span class="attr">class</span>=<span class="string">"frame"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"canvas"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"one"</span>></span><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">"two"</span>></span><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">"three"</span>></span><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><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="styles-css">styles.css</h2>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.canvas</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#4d0f00</span>;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">2px</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.frame</span> {</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">50px</span> solid black;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">20px</span> auto;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.one</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">425px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#efb762</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">20px</span> auto;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">3px</span> <span class="number">3px</span> <span class="number">#efb762</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">9px</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">0.6deg</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.two</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#8f0401</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">3px</span> <span class="number">3px</span> <span class="number">#8f0401</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">8px</span> <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0.4deg</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.one</span>, <span class="selector-class">.two</span> {</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">1px</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.three</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">91%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">28%</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#b20403</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">2px</span>);</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="number">5px</span> <span class="number">#b20403</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">30px</span> <span class="number">25px</span> <span class="number">60px</span> <span class="number">12px</span>;</span><br><span class="line"><span class="attribute">transform</span>:<span class="built_in">rotate</span>(-<span class="number">0.2deg</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h1 id="闲话-什么是罗斯科">闲话:什么是罗斯科</h1>
<p>罗斯科（Mark Rothko）的艺术风格，作为20世纪抽象表现主义的重要代表之一，具有鲜明的特色和深远的影响。以下是对其艺术风格的详细解析：</p>
<h2 id="一、色彩运用">一、色彩运用</h2>
<p>大胆而纯净：罗斯科的作品以大胆且纯净的色彩著称，他善于使用饱和度高、对比强烈的色彩来营造强烈的视觉冲击力和情感共鸣。色彩心理学：他深知每种色彩带给人的不同感受，并能巧妙地运用这些色彩来表达特定的情绪或氛围。例如，橙色和红色在他的作品中常被用来表达强烈的情感，如狂喜或愤怒。层叠与渐变：通过色彩的层叠和渐变，罗斯科创造出丰富的色彩变化，使画面充满动感和生命力。</p>
<h2 id="二、形状与构图">二、形状与构图</h2>
<p>简化的几何形状：罗斯科的作品通常由简化的矩形或方形色块构成，这些形状之间存在着微妙的关系和平衡。他通过形状的排列和组合来创造视觉的动态和张力。大尺寸画布：他倾向于使用大尺寸的画布进行创作，以便更好地将观者拉入画面所营造的情绪之中。这种大尺寸的画布也使得他的作品更具震撼力和感染力。空间感：罗斯科在构图中注重空间感的营造，他通过色彩和形状的相互作用来创造出一种连绵不断、模棱两可的效果，使画面充满神秘感和深度。</p>
<h2 id="三、情感与精神表达">三、情感与精神表达</h2>
<p>表达人类基本情感：罗斯科认为艺术的核心在于表达人类的基本情感，如悲剧、狂喜、毁灭等。他通过色彩和形状的组合来触发观者的内心共鸣和情感体验。冥想与宗教体验：他的作品常被视为一种冥想的媒介，引导观者进入一种宁静、沉思和超验的状态。罗斯科自己也曾表示，艺术的欣赏是一种心灵上的联姻，创作则是一个向内探索的过程。精神内涵：罗斯科的艺术不仅关注表面的视觉效果，更注重作品背后的精神内涵和象征意义。他通过有限的色彩和极少的形状来反映深刻的象征意义，使作品具有深远的思考价值。</p>
<h2 id="四、艺术历程与影响">四、艺术历程与影响</h2>
<p>艺术探索：罗斯科的艺术风格经历了从现实主义到表现主义、超现实主义再到抽象表现主义的转变。他不断尝试新的艺术语言和表达方式，最终形成了自己独特的艺术风格。市场认可：尽管罗斯科在生前并未获得广泛的市场认可，但随着时间的推移，他的作品逐渐得到了艺术界和市场的重视。如今，他的作品已成为艺术市场上的高价拍品之一。艺术影响：罗斯科的艺术风格对后来的艺术家产生了深远的影响，他的创作理念和艺术手法被许多艺术家所借鉴和发扬。</p>
<h1 id="综上所述">综上所述</h1>
<p>罗斯科的艺术风格以大胆的色彩运用、简化的几何形状、强烈的情感与精神表达为特点，他的作品不仅具有极高的艺术价值，更在艺术史上留下了浓墨重彩的一笔。</p>
]]></content>
<categories>
<category>前端</category>
<category>CSS</category>
</categories>
<tags>
<tag>记录</tag>
<tag>CSS</tag>
<tag>HTML</tag>
</tags>
</entry>
<entry>
<title>Vue:watch监视</title>
<url>/posts/b0f770c3/</url>
<content><![CDATA[<center>👁️👁️watching you!👁️👁️</center>
<span id="more"></span>
<p>#watch监视属性方法</p>
<h2 id="情况一">情况一</h2>
<p>对ref基础类型的监视</p>
<p>这个很容易理解</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><script setup lang=<span class="string">"ts"</span>> </span><br><span class="line"><span class="keyword">import</span> { ref,watch} <span class="keyword">from</span> <span class="string">'vue'</span>; </span><br><span class="line"><span class="keyword">let</span> num2 = <span class="title function_">ref</span>(<span class="string">'0'</span>); <span class="comment">// 用于存储二进制字符串 </span></span><br><span class="line"><span class="title function_">watch</span>(num2,<span class="function">(<span class="params">newvalue,oldvalue</span>)=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(num2+<span class="string">'和新数据'</span>+newvalue+<span class="string">'和旧数据'</span>+oldvalue);</span><br><span class="line">})</span><br><span class="line"></script> </span><br></pre></td></tr></table></figure>
<p>多次改变<code>num2</code>，打印的结果是这样的</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">[object Object]和新数据和旧数据0</span><br><span class="line">Change.vue:19 [object Object]和新数据1111011和旧数据</span><br><span class="line">Change.vue:19 [object Object]和新数据11110000101101001和旧数据1111011</span><br><span class="line">Change.vue:19 [object Object]和新数据1和旧数据11110000101101001</span><br></pre></td></tr></table></figure>
<p>这确实不难理解</p>
<h2 id="情况二">情况二</h2>
<p>对ref对象数据的监视</p>
<blockquote>
<p>这不禁让我们思考，对ref对象的监视是对它的什么进行监视呢？它类里面的数据吗？还是说它本身？让我们测试一下</p>
</blockquote>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> person=<span class="title function_">ref</span>({</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'李四'</span>,</span><br><span class="line"> <span class="attr">age</span>:<span class="number">30</span></span><br><span class="line">})</span><br><span class="line"><span class="title function_">watch</span>(num2,<span class="function">(<span class="params">newvalue,oldvalue</span>)=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(num2+<span class="string">'和新数据'</span>+newvalue+<span class="string">'和旧数据'</span>+oldvalue);</span><br><span class="line">})</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeAge</span>(<span class="params"></span>){</span><br><span class="line"> person.<span class="property">value</span>.<span class="property">age</span>++;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeName</span>(<span class="params"></span>){</span><br><span class="line"> person.<span class="property">value</span>.<span class="property">name</span>+=<span class="string">'~'</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changePerson</span>(<span class="params"></span>){</span><br><span class="line"> person.<span class="property">value</span>={</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'王二'</span>,</span><br><span class="line"> <span class="attr">age</span>:<span class="number">90</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="title function_">watch</span>(person,<span class="function">(<span class="params">newvalue,oldvalue</span>)=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(newvalue+<span class="string">'和'</span>+oldvalue);</span><br><span class="line">})</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>实际上，只有第三个方法触发了监视，这意味着监视ref定义的对象数据，实际监视的是它的地址值，但是如果我们想要监视它内部的值呢？这时候就需要<code>深度监视</code></p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="title function_">watch</span>(person,<span class="function">(<span class="params">newvalue,oldvalue</span>)=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(newvalue+<span class="string">'和'</span>+oldvalue);</span><br><span class="line">},{<span class="attr">deep</span>:<span class="literal">true</span>})</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="情况三">情况三</h2>
<p><code>reactive</code>定义的对象类型数据，默认是深度监视，这里懒得示例了：）</p>
<blockquote>
<p>newvalue和oldvalue打印出来是一样的，这是因为地址没有变</p>
</blockquote>
<h2 id="情况四">情况四</h2>
<p>监视<code>ref</code>和<code>reactive</code>定义的对象数据类型中的属性:<br>
若属性不是对象类型，需要写成函数形式若属性是对象类型，可以直接编，或者写函数，但是建议写函数</p>
]]></content>
<categories>
<category>前端</category>
<category>Vue3</category>
</categories>
<tags>
<tag>记录</tag>
<tag>Vue3</tag>
<tag>前端</tag>
</tags>
</entry>
<entry>
<title>工业博物馆游览</title>
<url>/posts/ca82fca4/</url>
<content><![CDATA[<h2 id="早上出发">早上出发</h2>
<p>骑哈喽单车刚出校门，我以为校园车是专属的，不能停校外，但还是试着锁了一下，嗯…果然是我想错了，但我还是选择走着去了地铁口，作为起点站，又是早上，人很少，打开高德地图，这里换乘，那里倒线，有点迷糊…</p>
<span id="more"></span>
<h2 id="到达工业博物馆">到达工业博物馆</h2>
<p><img src="images/2024.7.12/%E5%B9%BC%E5%84%BF%E5%9B%A2.jpg" alt=""></p>
<blockquote>
<p><s>本来想着跟着小朋友跟团游的</s></p>
</blockquote>
<p>当时在美团上预定票的时候说要带身份证，到最后也不过是在闸机上扫了个码而已，没用上身份证。也许是去的太早，前台人还没上班呢，我于是直奔主题，看看工业区展览<br>
<img src="images/2024.7.12/%E5%9D%A6%E5%85%8B%E5%B1%95%E8%A7%88.jpg" alt=""></p>
<blockquote>
<p>很多人参观的时候第一眼都是这辆坦克吧！</p>
</blockquote>
<p>后面又去各个馆区参观<img src="images/2024.7.12/%E9%93%81%E8%A5%BF%E5%8C%BA%E9%A6%86%E5%8C%BA.jpg" alt=""><br>
<img src="images/2024.7.12/%E9%93%B8%E9%80%A0%E9%A6%86.jpg" alt=""><br>
话说没想到工业区展览竟然也<s>大红花</s><br>
<img src="images/2024.7.12/%E5%B7%A5%E4%B8%9A%E5%B0%8F%E8%8A%B1.jpg" alt=""></p>
<blockquote>
<p>或许是迎接孩子们的?</p>
</blockquote>
<h2 id="小插曲">小插曲</h2>
<p>打开手机准备分享照片，没想到学校一食堂西边过道着火了，还好我早就离校，同学们也没事，只不过周围封起来了，三舍去一号楼反而得绕小南湖，不过远就远吧，安全最重要<br>
<img src="images/2024.7.12/%E5%AD%A6%E6%A0%A1%E7%9D%80%E7%81%AB1.jpg" alt=""><br>
<img src="images/2024.7.12/%E5%AD%A6%E6%A0%A1%E7%9D%80%E7%81%AB2.jpg" alt=""></p>
<blockquote>
<p>及时发现，已及时扑灭</p>
</blockquote>
<h2 id="回程">回程</h2>
<p>最近b站刀哥账号解封了，就顺便去了一下抽象圣地<br>
<img src="images/2024.7.12/%E6%8A%BD%E8%B1%A1%E5%9C%A3%E5%9C%B01.jpg" alt=""><br>
<img src="images/2024.7.12/%E6%8A%BD%E8%B1%A1%E5%9C%A3%E5%9C%B02.jpg" alt=""></p>
<blockquote>
<p>抽象哭墙今犹在，不见当年整活人！</p>
</blockquote>
<p>看到环卫工在打扫，我就没买冰红茶祭奠，拍两张照走人，不麻烦环卫了</p>
]]></content>
<categories>
<category>日记</category>
</categories>
<tags>
<tag>记录</tag>
<tag>游览</tag>
</tags>
</entry>
<entry>
<title>forever</title>
<url>/posts/f5bf34a0/</url>
<content><![CDATA[<center>
<h1 id="记录一下搭建博客所用的资料">记录一下搭建博客所用的资料</h1>
<blockquote>
<p>真的非常感谢他们！致以由衷的敬意！</p>
</blockquote>
<span id="more"></span>
</center>
<h2 id="链接如下">链接如下</h2>
<h3 id="别忘了给他们点个star">别忘了给他们点个star!</h3>
<p><a href="https://wokron.github.io/posts/hexo-personal-blog-tutorial/">Hexo 个人博客搭建及主题配置教程</a><br>
<a href="https://www.bilibili.com/video/BV1Qt421u7PL/?spm_id_from=333.337.search-card.all.click&vd_source=15276cfc65b1ac8fad46ad8f5ed33307">[2024]在Hexo中给自己的博客添加萌萌Live2d看板娘</a><br>
<a href="https://oml2d.com/">OhMyLive2D Live2D For Web Github</a><br>
<a href="https://sspai.com/post/85116">Hexo+Github Page｜基础教程(二)：NexT 主题基本美化｜全网最细致全面的教程</a></p>
<h3 id="俗话说的好：">俗话说的好：</h3>
<center>
<blockquote>
<h1 id="前人栽树，后人乘凉">前人栽树，后人乘凉</h1>
</blockquote>
<p>所以以后我也要写一个搭建博客的教程:)<br>
<s>虽然现在确实还是个小白</s>~<br>
所以</p>
<blockquote>
<h1 id="敬请期待！">敬请期待！</h1>
</blockquote>
</center>
<h3 id="如果可以的话">如果可以的话</h3>
<p>:)也可以给我点个<a href="https://github.com/xingwangzhe/xingwangzhe.github.io">star</a>哦！<br>
<a href="https://github.com/xingwangzhe/xingwangzhe.github.io"><img src="https://i.ibb.co/vLC0cft/202406212107148.jpg" alt=""></a></p>
]]></content>
<categories>
<category>基于hexo的博客搭建教程</category>
<category>开篇致谢</category>
</categories>
<tags>
<tag>记录</tag>
<tag>教程</tag>
<tag>hexo</tag>
<tag>live2d</tag>
</tags>
</entry>
<entry>
<title>本来想搬fishport_serverwiki来着</title>
<url>/posts/2283d3b7/</url>
<content><![CDATA[<center>
<h1 id="本来想搬fishport-server-wiki来着">本来想搬fishport_server_wiki来着</h1>
<blockquote>
<p>一个我的世界服务器wiki</p>
</blockquote>
<span id="more"></span>
<p><img src="https://i.ibb.co/XpnwWk3/202406222147179.webp" alt=""></p>
</center>
<p>感觉<s>还行</s>,但是能力不足，况且搬到github上托管,对别的玩家来说，写wiki门槛似乎有点高了</p>
<blockquote>
<p><s>应该是特别高</s></p>
</blockquote>
<h2 id="那接下来怎么继续写wiki">那接下来怎么继续写wiki?</h2>
<p>这是我搬的一个空壳界面[fishport_wiki][sss],就暂时放这放这放着吧，懒得管了，以后再说。</p>
<p>2024-9<br>
已废除</p>
<p>~~[sss]:<a href="https://xingwangzhe.github.io/docs/docsify/#/~~">https://xingwangzhe.github.io/docs/docsify/#/~~</a></p>
<h2 id="为什么不搬wiki了">为什么不搬wiki了</h2>
<p>首先我不是腐竹。原来是打算迁移到别的现成的的wiki网站，不想搬到国内的wiki站点上</p>
<blockquote>
<p><s>我估计不太能够过审</s></p>
</blockquote>
<p>但是国外本身很多都不能访问</p>
<blockquote>
<p><s>众所周知的网络防火墙的原因</s></p>
</blockquote>
<p>当然也是不可能自己租个服务器搭建wiki的</p>
<center>
所以就这样吧，
还是原来的站点
>原来的站点已经废除
<p>点击图片来访问[fishport wiki][ppp]</p>
<p>2024-9</p>
<p>~~[ppp]:<a href="https://fishportsever.fandom.com/zh/wiki/FishPort_Wiki~~">https://fishportsever.fandom.com/zh/wiki/FishPort_Wiki~~</a></p>
<p><a href="https://fishportsever.fandom.com/zh/wiki/FishPort_Wiki"><img src="https://i.ibb.co/XpnwWk3/202406222147179.webp" alt="ppp"></a></p>
<p>有兴趣的话欢迎加入游玩哦</p>
<h1 id="最新站点">最新站点</h1>
<blockquote>
<p>最后编辑于2024-10-1</p>
</blockquote>
<p>已由服务器管理员迁移至新站点<br>
<a href="https://wiki.fishport.net"><img src="https://wiki.fishport.net/images/thumb/e/ee/Fishport.webp/188px-Fishport.webp.png" alt="fishport"></a></p>
</center>
bye bye]]></content>
<categories>
<category>游戏</category>
<category>我的世界服务器</category>
</categories>
<tags>
<tag>wiki</tag>
<tag>我的世界服务器</tag>
<tag>懒得动</tag>
<tag>游戏</tag>
</tags>
</entry>
<entry>
<title>在hexo-next配置gitalk</title>
<url>/posts/8403dd78/</url>
<content><![CDATA[<h1 id="center-如何在hexo-next配置gitalk评论-center"><center>如何在hexo-next配置gitalk评论</center></h1>
<p>你是否也想在你的博客里面添加这样的评论区？<img src="images/set_blog/gitalk.png" alt=""><br>
那就快来看以下教程吧：）</p>
<span id="more"></span>
<p>打开<a href="https://github.com/">github</a>,点击右上角的图片，选择Settings,然后在左边栏最下方找到Developer settings并点击，然后在左边栏找到OAuth Apps选中点击，主页面右上角有new OAuth App<br>
点击创建新OAuth Apps，输入必要参数，记录ID,创建密码，记得复制，然后转到blog\themes\next下的_config.yml文件修改其中的配置，转到<a href="https://dash.cloudflare.com/">cloudflare</a>配置worker,然后就大功告成了，不过光听我讲没用，看图更容易理解，所以请一步一步按图片示意做:</p>
<h3 id="在github上创建OAuth-Apps">在github上创建OAuth Apps</h3>
<p><img src="images/set_blog/scene1.png" alt=""><br>
<img src="images/set_blog/scene2.png" alt=""><br>
<img src="images/set_blog/scene3.png" alt=""><br>
<img src="images/set_blog/scene4.png" alt=""><br>
<img src="images/set_blog/scene5.png" alt=""><br>
<img src="images/set_blog/scene6.png" alt=""><br>
<img src="images/set_blog/scene7.png" alt=""><br>
<img src="images/set_blog/scene8.png" alt=""><br>
可以先用文本编辑器创建txt文件记录Client id和secrets</p>
<blockquote>
<p><strong>切记不要把Client id和secrets泄露给他人！这里仅作演示，此测试OAuh Apps已删除</strong></p>
</blockquote>
<hr>
<h3 id="转到blog-themes-next下的-config-yml文件修改其中的配置">转到blog\themes\next下的_config.yml文件修改其中的配置</h3>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># ---------------------------------------------------------------</span></span><br><span class="line"><span class="comment"># Comments Settings</span></span><br><span class="line"><span class="comment"># See: https://theme-next.org/docs/third-party-services/comments</span></span><br><span class="line"><span class="comment"># ---------------------------------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Multiple Comment System Support</span></span><br><span class="line"><span class="attr">comments:</span></span><br><span class="line"> <span class="comment">#use: Valine</span></span><br><span class="line"> <span class="attr">text:</span> <span class="literal">true</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="attr">count:</span> <span class="literal">true</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">gitalk</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><span class="line"> <span class="comment"># Modify texts or order for any navs, here are some examples.</span></span><br><span class="line"> <span class="attr">nav:</span></span><br><span class="line"> <span class="attr">gitalk:</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line"> <span class="comment">#disqus:</span></span><br><span class="line"> <span class="comment"># text: Load Disqus</span></span><br><span class="line"> <span class="comment"># order: -1</span></span><br><span class="line"> <span class="comment">#gitalk:</span></span><br><span class="line"> <span class="comment"># order: -2</span></span><br></pre></td></tr></table></figure>
<p>下面的也是配置，记得把用户名改一下</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Gitalk</span></span><br><span class="line"><span class="comment"># For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk</span></span><br><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">xingwangzhe</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">xingwangzhe.github.io</span></span><br><span class="line"> <span class="attr">client_id:</span> <span class="string">sdaf</span> <span class="comment"># OAuth app的</span></span><br><span class="line"> <span class="attr">client_secret:</span> <span class="string">asdfghjgds</span> <span class="comment">#同上</span></span><br><span class="line"> <span class="attr">admin_user:</span> <span class="string">xingwangzhe</span></span><br><span class="line"> <span class="attr">distraction_free_mode:</span> <span class="literal">true</span> <span class="comment"># Facebook-like distraction free mode</span></span><br><span class="line"> <span class="comment"># Gitalk's display language depends on user's browser or system environment</span></span><br><span class="line"> <span class="comment"># If you want everyone visiting your site to see a uniform language, you can set a force language value</span></span><br><span class="line"> <span class="comment"># Available values: en | es-ES | fr | ru | zh-CN | zh-TW</span></span><br><span class="line"> <span class="attr">language:</span> <span class="string">zh-CN</span></span><br><span class="line"> <span class="attr">proxy:</span> <span class="string">'https://cors-anywhere.xingwangzhe.workers.dev/https://github.com/login/oauth/access_token'</span></span><br><span class="line"> <span class="comment">#worker，请记住这段链接，接下来要用到</span></span><br></pre></td></tr></table></figure>
<hr>
<h3 id="利用cloudflare创建worker代理">利用cloudflare创建worker代理</h3>
<p><img src="images/set_blog/1scene.png" alt=""><br>
<img src="images/set_blog/2scene.png" alt=""><br>
<img src="images/set_blog/3scene.png" alt=""><br>
<img src="images/set_blog/4scene.png" alt=""><br>
<img src="images/set_blog/5scene.png" alt=""><br>
别忘了注册的用户名是你的博客用户名在左侧worker代码栏添加如下代码，但是请记得替换用户名。代码栏有替换工具，这里就不演示了<a href="https://github.com/chrisspiegl/cloudflare-cors-anywhere">源码地址</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> exclude = []; <span class="comment">// Regexp for blacklisted urls</span></span><br><span class="line"><span class="keyword">const</span> include = [<span class="regexp">/^https?:\/\/.*xingwangzhe\.github\.io$/</span>, <span class="regexp">/^https?:\/\/localhost/</span>]; <span class="comment">// Regexp for whitelisted origins e.g.</span></span><br><span class="line"><span class="keyword">const</span> apiKeys = {</span><br><span class="line"> <span class="title class_">EZWTLwVEqFnaycMzdhBz</span>: {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'Test App'</span>,</span><br><span class="line"> <span class="attr">expired</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">exclude</span>: [], <span class="comment">// Regexp for blacklisted urls</span></span><br><span class="line"> <span class="attr">include</span>: [<span class="string">"^http.?://xingwangzhe.github.io$"</span>, <span class="string">"xingwangzhe.github.io$"</span>, <span class="string">"^https?://localhost/"</span>], <span class="comment">// Regexp for whitelisted origins</span></span><br><span class="line"> },</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="comment">// Config is all above this line.</span></span><br><span class="line"><span class="comment">// It should not be necessary to change anything below.</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">verifyCredentials</span>(<span class="params">request</span>) {</span><br><span class="line"> <span class="comment">// Throws exception on verification failure.</span></span><br><span class="line"> <span class="keyword">const</span> requestApiKey = request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'x-cors-proxy-api-key'</span>);</span><br><span class="line"> <span class="keyword">if</span> (!<span class="title class_">Object</span>.<span class="title function_">keys</span>(apiKeys).<span class="title function_">includes</span>(requestApiKey)) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">UnauthorizedException</span>(<span class="string">'Invalid authorization key.'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (apiKeys[requestApiKey].<span class="property">expired</span>) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">UnauthorizedException</span>(<span class="string">'Expired authorization key.'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (apiKeys[requestApiKey].<span class="property">expiresAt</span> && apiKeys[requestApiKey].<span class="property">expiresAt</span>.<span class="title function_">getTime</span>() < <span class="title class_">Date</span>.<span class="title function_">now</span>()) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">UnauthorizedException</span>(<span class="string">`Expired authorization key.\nKey was valid until: <span class="subst">${apiKeys[requestApiKey].expiresAt}</span>`</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> apiKeys[requestApiKey];</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">checkRequiredHeadersPresent</span>(<span class="params">request</span>) {</span><br><span class="line"> <span class="comment">// Throws exception on verification failure.</span></span><br><span class="line"> <span class="keyword">if</span> (!request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'Origin'</span>) && !request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'x-requested-with'</span>)) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">BadRequestException</span>(<span class="string">'Missing required request header. Must specify one of: origin,x-requested-with'</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="title function_">UnauthorizedException</span>(<span class="params">reason</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">status</span> = <span class="number">401</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">statusText</span> = <span class="string">'Unauthorized'</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">reason</span> = reason;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">BadRequestException</span>(<span class="params">reason</span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">status</span> = <span class="number">400</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">statusText</span> = <span class="string">'Bad Request'</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">reason</span> = reason;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">isListed</span>(<span class="params">uri, listing</span>) {</span><br><span class="line"> <span class="keyword">let</span> returnValue = <span class="literal">false</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(uri);</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> uri === <span class="string">'string'</span>) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> m <span class="keyword">of</span> listing) {</span><br><span class="line"> <span class="keyword">if</span> (uri.<span class="title function_">match</span>(m) !== <span class="literal">null</span>) {</span><br><span class="line"> returnValue = <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">else</span> { <span class="comment">// Decide what to do when Origin is null</span></span><br><span class="line"> returnValue = <span class="literal">true</span>; <span class="comment">// True accepts null origins false rejects them.</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> returnValue;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fix</span>(<span class="params">myHeaders, request, isOPTIONS</span>) {</span><br><span class="line"> myHeaders.<span class="title function_">set</span>(<span class="string">'Access-Control-Allow-Origin'</span>, request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'Origin'</span>));</span><br><span class="line"> <span class="keyword">if</span> (isOPTIONS) {</span><br><span class="line"> myHeaders.<span class="title function_">set</span>(<span class="string">'Access-Control-Allow-Methods'</span>, request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'access-control-request-method'</span>));</span><br><span class="line"> <span class="keyword">const</span> acrh = request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'access-control-request-headers'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (acrh) {</span><br><span class="line"> myHeaders.<span class="title function_">set</span>(<span class="string">'Access-Control-Allow-Headers'</span>, acrh);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> myHeaders.<span class="title function_">delete</span>(<span class="string">'X-Content-Type-Options'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> myHeaders;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">parseURL</span>(<span class="params">requestUrl</span>) {</span><br><span class="line"> <span class="keyword">const</span> match = requestUrl.<span class="title function_">match</span>(<span class="regexp">/^(?:(https?:)?\/\/)?(([^/?]+?)(?::(\d{0,5})(?=[/?]|$))?)([/?][\S\s]*|$)/i</span>);</span><br><span class="line"> <span class="comment">// ^^^^^^^ ^^^^^^^^ ^^^^^^^ ^^^^^^^^^^^^</span></span><br><span class="line"> <span class="comment">// 1:protocol 3:hostname 4:port 5:path + query string</span></span><br><span class="line"> <span class="comment">// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^</span></span><br><span class="line"> <span class="comment">// 2:host</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!match) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'no match'</span>);</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">BadRequestException</span>(<span class="string">'Invalid URL for proxy request.'</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">'parseURL:match:'</span>, match);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!match[<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">'nothing in match group 1'</span>);</span><br><span class="line"> <span class="keyword">if</span> (<span class="regexp">/^https?:/i</span>.<span class="title function_">test</span>(requestUrl)) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'The pattern at top could mistakenly parse "http:///" as host="http:" and path=///.'</span>);</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">BadRequestException</span>(<span class="string">'Invalid URL for proxy request.'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// Scheme is omitted.</span></span><br><span class="line"> <span class="keyword">if</span> (requestUrl.<span class="title function_">lastIndexOf</span>(<span class="string">'//'</span>, <span class="number">0</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">'"//" is omitted'</span>);</span><br><span class="line"> requestUrl = <span class="string">'//'</span> + requestUrl;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> requestUrl = (match[<span class="number">4</span>] === <span class="string">'443'</span> ? <span class="string">'https:'</span> : <span class="string">'http:'</span>) + requestUrl;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> parsed = <span class="keyword">new</span> <span class="title function_">URL</span>(requestUrl);</span><br><span class="line"> <span class="keyword">if</span> (!parsed.<span class="property">hostname</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'"http://:1/" and "http:/notenoughslashes" could end up here.'</span>);</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">BadRequestException</span>(<span class="string">'Invalid URL for proxy request.'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> parsed;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">proxyRequest</span>(<span class="params">request, activeApiKey</span>) {</span><br><span class="line"> <span class="keyword">const</span> isOPTIONS = (request.<span class="property">method</span> === <span class="string">'OPTIONS'</span>);</span><br><span class="line"> <span class="keyword">const</span> originUrl = <span class="keyword">new</span> <span class="title function_">URL</span>(request.<span class="property">url</span>);</span><br><span class="line"> <span class="keyword">const</span> origin = request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'Origin'</span>);</span><br><span class="line"> <span class="comment">// ParseURL throws when the url is invalid</span></span><br><span class="line"> <span class="keyword">const</span> fetchUrl = <span class="title function_">parseURL</span>(request.<span class="property">url</span>.<span class="title function_">replace</span>(originUrl.<span class="property">origin</span>, <span class="string">''</span>).<span class="title function_">slice</span>(<span class="number">1</span>));</span><br><span class="line"></span><br><span class="line"> <span class="comment">// Throws if it fails the check</span></span><br><span class="line"> <span class="title function_">checkRequiredHeadersPresent</span>(request);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// Excluding urls which are not allowed as destination urls</span></span><br><span class="line"> <span class="comment">// Exclude origins which are not int he included ones</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="title function_">isListed</span>(fetchUrl.<span class="title function_">toString</span>(), [...exclude, ...(activeApiKey?.<span class="property">exclude</span> || [])]) || !<span class="title function_">isListed</span>(origin, [...include, ...(activeApiKey?.<span class="property">include</span> || [])])) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">BadRequestException</span>(<span class="string">'Origin or Destination URL is not allowed.'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> corsHeaders = request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'x-cors-headers'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (corsHeaders !== <span class="literal">null</span>) {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> corsHeaders = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(corsHeaders);</span><br><span class="line"> } <span class="keyword">catch</span> {}</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!originUrl.<span class="property">pathname</span>.<span class="title function_">startsWith</span>(<span class="string">'/'</span>)) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">BadRequestException</span>(<span class="string">'Pathname does not start with "/"'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> recvHpaireaders = {};</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> pair <span class="keyword">of</span> request.<span class="property">headers</span>.<span class="title function_">entries</span>()) {</span><br><span class="line"> <span class="keyword">if</span> ((pair[<span class="number">0</span>].<span class="title function_">match</span>(<span class="string">'^origin'</span>) === <span class="literal">null</span>)</span><br><span class="line"> && (pair[<span class="number">0</span>].<span class="title function_">match</span>(<span class="string">'eferer'</span>) === <span class="literal">null</span>)</span><br><span class="line"> && (pair[<span class="number">0</span>].<span class="title function_">match</span>(<span class="string">'^cf-'</span>) === <span class="literal">null</span>)</span><br><span class="line"> && (pair[<span class="number">0</span>].<span class="title function_">match</span>(<span class="string">'^x-forw'</span>) === <span class="literal">null</span>)</span><br><span class="line"> && (pair[<span class="number">0</span>].<span class="title function_">match</span>(<span class="string">'^x-cors-headers'</span>) === <span class="literal">null</span>)</span><br><span class="line"> ) {</span><br><span class="line"> recvHpaireaders[pair[<span class="number">0</span>]] = pair[<span class="number">1</span>];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (corsHeaders !== <span class="literal">null</span>) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> c <span class="keyword">of</span> <span class="title class_">Object</span>.<span class="title function_">entries</span>(corsHeaders)) {</span><br><span class="line"> recvHpaireaders[c[<span class="number">0</span>]] = c[<span class="number">1</span>];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> newRequest = <span class="keyword">new</span> <span class="title class_">Request</span>(request, {</span><br><span class="line"> <span class="attr">headers</span>: recvHpaireaders,</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> response = <span class="keyword">await</span> <span class="title function_">fetch</span>(fetchUrl, newRequest);</span><br><span class="line"> <span class="keyword">let</span> myHeaders = <span class="keyword">new</span> <span class="title class_">Headers</span>(response.<span class="property">headers</span>);</span><br><span class="line"> <span class="keyword">const</span> newCorsHeaders = [];</span><br><span class="line"> <span class="keyword">const</span> allh = {};</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> pair <span class="keyword">of</span> response.<span class="property">headers</span>.<span class="title function_">entries</span>()) {</span><br><span class="line"> newCorsHeaders.<span class="title function_">push</span>(pair[<span class="number">0</span>]);</span><br><span class="line"> allh[pair[<span class="number">0</span>]] = pair[<span class="number">1</span>];</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> newCorsHeaders.<span class="title function_">push</span>(<span class="string">'cors-received-headers'</span>);</span><br><span class="line"> myHeaders = <span class="title function_">fix</span>(myHeaders, request, isOPTIONS);</span><br><span class="line"></span><br><span class="line"> myHeaders.<span class="title function_">set</span>(<span class="string">'Access-Control-Expose-Headers'</span>, newCorsHeaders.<span class="title function_">join</span>(<span class="string">','</span>));</span><br><span class="line"></span><br><span class="line"> myHeaders.<span class="title function_">set</span>(<span class="string">'cors-received-headers'</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(allh));</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> body = isOPTIONS ? <span class="literal">null</span> : <span class="keyword">await</span> response.<span class="title function_">arrayBuffer</span>();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Response</span>(body, {</span><br><span class="line"> <span class="attr">headers</span>: myHeaders,</span><br><span class="line"> <span class="attr">status</span>: (isOPTIONS ? <span class="number">200</span> : response.<span class="property">status</span>),</span><br><span class="line"> <span class="attr">statusText</span>: (isOPTIONS ? <span class="string">'OK'</span> : response.<span class="property">statusText</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="title function_">homeRequest</span>(<span class="params">request</span>) {</span><br><span class="line"> <span class="keyword">const</span> isOPTIONS = (request.<span class="property">method</span> === <span class="string">'OPTIONS'</span>);</span><br><span class="line"> <span class="keyword">const</span> originUrl = <span class="keyword">new</span> <span class="title function_">URL</span>(request.<span class="property">url</span>);</span><br><span class="line"> <span class="keyword">const</span> origin = request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'Origin'</span>);</span><br><span class="line"> <span class="keyword">const</span> remIp = request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'CF-Connecting-IP'</span>);</span><br><span class="line"> <span class="keyword">const</span> corsHeaders = request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'x-cors-headers'</span>);</span><br><span class="line"> <span class="keyword">let</span> myHeaders = <span class="keyword">new</span> <span class="title class_">Headers</span>();</span><br><span class="line"> myHeaders = <span class="title function_">fix</span>(myHeaders, request, isOPTIONS);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> country = <span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">let</span> colo = <span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> request.<span class="property">cf</span> !== <span class="string">'undefined'</span>) {</span><br><span class="line"> country = <span class="keyword">typeof</span> request.<span class="property">cf</span>.<span class="property">country</span> === <span class="string">'undefined'</span> ? <span class="literal">false</span> : request.<span class="property">cf</span>.<span class="property">country</span>;</span><br><span class="line"> colo = <span class="keyword">typeof</span> request.<span class="property">cf</span>.<span class="property">colo</span> === <span class="string">'undefined'</span> ? <span class="literal">false</span> : request.<span class="property">cf</span>.<span class="property">colo</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Response</span>(</span><br><span class="line"> <span class="string">'CLOUDFLARE-CORS-ANYWHERE\n\n'</span></span><br><span class="line"> + <span class="string">'Source:\nhttps://github.com/chrisspiegl/cloudflare-cors-anywhere\n\n'</span></span><br><span class="line"> + <span class="string">'Usage:\n'</span></span><br><span class="line"> + originUrl.<span class="property">origin</span> + <span class="string">'/{uri}\n'</span></span><br><span class="line"> + <span class="string">'Header x-cors-proxy-api-key must be set with valid api key\n'</span></span><br><span class="line"> + <span class="string">'Header origin or x-requested-with must be set\n\n'</span></span><br><span class="line"> <span class="comment">// + 'Limits: 100,000 requests/day\n'</span></span><br><span class="line"> <span class="comment">// + ' 1,000 requests/10 minutes\n\n'</span></span><br><span class="line"> + (origin === <span class="literal">null</span> ? <span class="string">''</span> : <span class="string">'Origin: '</span> + origin + <span class="string">'\n'</span>)</span><br><span class="line"> + <span class="string">'Ip: '</span> + remIp + <span class="string">'\n'</span></span><br><span class="line"> + (country ? <span class="string">'Country: '</span> + country + <span class="string">'\n'</span> : <span class="string">''</span>)</span><br><span class="line"> + (colo ? <span class="string">'Datacenter: '</span> + colo + <span class="string">'\n'</span> : <span class="string">''</span>) + <span class="string">'\n'</span></span><br><span class="line"> + ((corsHeaders === <span class="literal">null</span>) ? <span class="string">''</span> : <span class="string">'\nx-cors-headers: '</span> + <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(corsHeaders)),</span><br><span class="line"> {<span class="attr">status</span>: <span class="number">200</span>, <span class="attr">headers</span>: myHeaders},</span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">handleRequest</span>(<span class="params">request</span>) {</span><br><span class="line"> <span class="keyword">const</span> {protocol, pathname} = <span class="keyword">new</span> <span class="title function_">URL</span>(request.<span class="property">url</span>);</span><br><span class="line"> <span class="comment">// In the case of a "Basic" authentication, the exchange MUST happen over an HTTPS (TLS) connection to be secure.</span></span><br><span class="line"> <span class="keyword">if</span> (protocol !== <span class="string">'https:'</span> || request.<span class="property">headers</span>.<span class="title function_">get</span>(<span class="string">'x-forwarded-proto'</span>) !== <span class="string">'https'</span>) {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">BadRequestException</span>(<span class="string">'Must use a HTTPS connection.'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">switch</span> (pathname) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'/favicon.ico'</span>:</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'/robots.txt'</span>:</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Response</span>(<span class="literal">null</span>, {<span class="attr">status</span>: <span class="number">204</span>});</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'/'</span>:</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">homeRequest</span>(request);</span><br><span class="line"> <span class="attr">default</span>: {</span><br><span class="line"> <span class="comment">// Not 100% sure if this is a good idea…</span></span><br><span class="line"> <span class="comment">// Right now all OPTIONS requests are just simply replied to because otherwise they fail.</span></span><br><span class="line"> <span class="comment">// This is necessary because apparently, OPTIONS requests do not carry the `x-cors-proxy-api-key` header so this can not be authorized.</span></span><br><span class="line"> <span class="keyword">if</span> (request.<span class="property">method</span> === <span class="string">'OPTIONS'</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Response</span>(<span class="literal">null</span>, {</span><br><span class="line"> <span class="attr">headers</span>: <span class="title function_">fix</span>(<span class="keyword">new</span> <span class="title class_">Headers</span>(), request, <span class="literal">true</span>),</span><br><span class="line"> <span class="attr">status</span>: <span class="number">200</span>,</span><br><span class="line"> <span class="attr">statusText</span>: <span class="string">'OK'</span>,</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// The "x-cors-proxy-api-key" header is sent when authenticated.</span></span><br><span class="line"> <span class="comment">//if (request.headers.has('x-cors-proxy-api-key')) {</span></span><br><span class="line"> <span class="comment">// Throws exception when authorization fails.</span></span><br><span class="line"> <span class="comment">//const activeApiKey = verifyCredentials(request);</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// Only returns this response when no exception is thrown.</span></span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">proxyRequest</span>(request);</span><br><span class="line"> <span class="comment">//}</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// Not authenticated.</span></span><br><span class="line"> <span class="comment">//throw new UnauthorizedException('Valid x-cors-proxy-api-key header has to be provided.');</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_">addEventListener</span>(<span class="string">'fetch'</span>, <span class="keyword">async</span> event => {</span><br><span class="line"> event.<span class="title function_">respondWith</span>(</span><br><span class="line"> <span class="title function_">handleRequest</span>(event.<span class="property">request</span>).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> message = error.<span class="property">reason</span> || error.<span class="property">stack</span> || <span class="string">'Unknown Error'</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Response</span>(message, {</span><br><span class="line"> <span class="attr">status</span>: error.<span class="property">status</span> || <span class="number">500</span>,</span><br><span class="line"> <span class="attr">statusText</span>: error.<span class="property">statusText</span> || <span class="literal">null</span>,</span><br><span class="line"> <span class="attr">headers</span>: {</span><br><span class="line"> <span class="string">'Content-Type'</span>: <span class="string">'text/plain;charset=UTF-8'</span>,</span><br><span class="line"> <span class="comment">// Disables caching by default.</span></span><br><span class="line"> <span class="string">'Cache-Control'</span>: <span class="string">'no-store'</span>,</span><br><span class="line"> <span class="comment">// Returns the "Content-Length" header for HTTP HEAD requests.</span></span><br><span class="line"> <span class="string">'Content-Length'</span>: message.<span class="property">length</span>,</span><br><span class="line"> },</span><br><span class="line"> });</span><br><span class="line"> }),</span><br><span class="line"> );</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>然后就大功告成了：）</p>
<h1 id="无脑解决-2024-9-16">无脑解决 2024/9/16</h1>
<p>将 proxy 替换为了</p>
<blockquote>
<p><code>proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token</code></p>
</blockquote>
<p>再次 hexo clean && hexo g -d, 即可使用 gitalk, 评论区会作为设置中的 repo 的 issue 存在.</p>
<h1 id="后话">后话</h1>
<p>如果你为你的博客购买了其他的域名，记得要在OAuh Apps设置的返回链接改成你的域名当然，连带着worker应该也要改，但是在这里我还是建议你直接使用无脑的那个<code>proxy</code></p>
<blockquote>
<p>我为此折腾了半天：（</p>
</blockquote>
]]></content>
<categories>
<category>基于hexo的博客搭建教程</category>
<category>gitalk</category>
</categories>
<tags>
<tag>记录</tag>
<tag>hexo</tag>
<tag>博客教程</tag>
<tag>gitalk</tag>
<tag>第一次</tag>
</tags>
</entry>
<entry>
<title>哈基米</title>
<url>/posts/e855e869/</url>
<content><![CDATA[<center>
<span id="more"></span>
<h2 id="哈基米">哈基米</h2>
<h3 id="哈基米-v2">哈基米</h3>
<h4 id="哈基米-v3">哈基米</h4>
<p><img src="https://i.ibb.co/S5gbtHB/202406212119544.png" alt=""></p>
<h4 id="阿西吧">阿西吧</h4>
<h3 id="阿西吧-v2">阿西吧</h3>
<h2 id="阿西吧-v3">阿西吧</h2>
<h1 id="阿西吧-v4">阿西吧</h1>
<h1 id="雅酷哪路"><em><strong>雅酷哪路</strong></em></h1>
<p>转载自b站up主<a href="https://space.bilibili.com/361064349?spm_id_from=333.788.0.0">奕庭Easton</a></p>
<iframe src="https://www.bilibili.com/video/BV14x4y1b7YX/?spm_id_from=333.337.search-card.all.click" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="700px" height="472px"> </iframe>
</center>
]]></content>
<categories>
<category>胡思乱想</category>
<category>哈基米爱猫tv</category>
<category>大石碎胸口</category>
</categories>
<tags>
<tag>哈基米</tag>
<tag>爱猫tv</tag>
</tags>
</entry>
<entry>
<title>hexo-next在文章下添加版权信息</title>
<url>/posts/50aa0545/</url>
<content><![CDATA[<p><img src="images/copyright/cp1.png" alt=""></p>
<span id="more"></span>
<h2 id="修改主题目录下的-config-yml文件">修改主题目录下的_config.yml文件</h2>
<p><code>themes/next/_config.yml</code></p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Creative Commons 4.0 International License.</span></span><br><span class="line"><span class="comment"># See: https://creativecommons.org/share-your-work/licensing-types-examples</span></span><br><span class="line"><span class="comment"># Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero</span></span><br><span class="line"><span class="comment"># You can set a language value if you prefer a translated version of CC license, e.g. deed.zh</span></span><br><span class="line"><span class="comment"># CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org</span></span><br><span class="line"><span class="attr">creative_commons:</span></span><br><span class="line"> <span class="attr">license:</span> <span class="string">by-nc-sa</span></span><br><span class="line"> <span class="attr">sidebar:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">post:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">language:</span></span><br></pre></td></tr></table></figure>
<p>post的值改为true表示文章开启添加版权信息。</p>
<h2 id="单独设置文章版权">单独设置文章版权</h2>
<p>打开<code>themes/next/layout/_macro/post.swig</code>找到creative_commons那一行改为：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">{%- if theme.creative_commons.license and theme.creative_commons.post and page.copyright %}</span><br><span class="line"> {{ partial('_partials/post/post-copyright.swig') }}</span><br><span class="line">{%- endif %}</span><br></pre></td></tr></table></figure>
<p>就是添加了 <code>page.copyright</code> ，这样就可以单独控制某篇文章是否添加版权信息了。</p>
<p>可以修改模板文件，这样默认就有 <code>copyright: true</code></p>
<p>模板文件在<code>scaffolds/post.md</code></p>
<h2 id="参考">参考</h2>
<p><a href="https://xq-120.github.io/2022/05/07/hexo-next%E4%B8%BB%E9%A2%98%E7%BB%99%E6%96%87%E7%AB%A0%E6%B7%BB%E5%8A%A0%E7%89%88%E6%9D%83%E4%BF%A1%E6%81%AF/#:~:text=next%E4%B8%BB%E9%A2%98%E4%B8%8B%E7%BB%99%E6%96%87%E7%AB%A0">hexo next主题给文章添加版权信息</a></p>
]]></content>
<categories>
<category>基于hexo的博客搭建教程</category>
</categories>
<tags>
<tag>记录</tag>
<tag>教程</tag>
<tag>hexo</tag>
<tag>博客教程</tag>
<tag>第一次</tag>
<tag>next</tag>
</tags>
</entry>
<entry>
<title>hexo-next在侧边栏添加IP信息</title>
<url>/posts/69cc9e5f/</url>
<content><![CDATA[<p>显示如下<br>
<a href="https://tool.lu/ip/"><br>
<img src="https://tool.lu/netcard/"><br>
</a></p>
<span id="more"></span>
<h2 id="使用第三方IP签名图">使用第三方IP签名图</h2>
<blockquote>
<p>此处感谢<a href="https://tool.lu/">在线工具</a>网站<a href="https://tool.lu/"><img src="images/IP/whereip.png" alt=""></a><br>
别忘了站长的警告： ⚠️请勿将本页面作为api使用，当请求量过高时，系统会限制访问！如图所示，该IP签名图可以使用四种代码进行引用，这里我们使用html代码。</p>
</blockquote>
<h2 id="在本地文件找到侧边栏设计代码">在本地文件找到侧边栏设计代码</h2>
<p>路径是<br>
<code>blog\themes\next\layout\_macro\sidebar.swig</code></p>
<p>接下来你可以使用我的html代码直接插入到下面的位置</p>
<blockquote>
<p>我的代码</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"where is your ip"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>访客信息<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://tool.lu/ip/"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://tool.lu/netcard/"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>插入的位置大概是这里</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"> <span class="comment"><!--noindex--></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"post-toc-wrap sidebar-panel"</span>></span></span><br><span class="line"> {%- if display_toc %}</span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"post-toc motion-element"</span>></span>{{ toc }}<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> {%- endif %}</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!--/noindex--></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"site-overview-wrap sidebar-panel"</span>></span></span><br><span class="line"> {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}</span><br><span class="line"></span><br><span class="line"> {{- next_inject('sidebar') }}</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><--插入的位置--></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"where is your ip"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>访客信息<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://tool.lu/ip/"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://tool.lu/netcard/"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><--插入的位置--></span><br><span class="line"> {%- if theme.back2top.enable and theme.back2top.sidebar %}</span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"back-to-top motion-element"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-arrow-up"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>0%<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"> {%- endif %}</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">aside</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"sidebar-dimmer"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">{% endmacro %}</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="如果你有html基础">如果你有html基础</h3>
]]></content>
<categories>
<category>基于hexo的博客搭建教程</category>
</categories>
<tags>
<tag>记录</tag>
<tag>教程</tag>
<tag>hexo</tag>
<tag>博客教程</tag>
<tag>第一次</tag>
</tags>
</entry>
<entry>
<title>hexo优化网站性能记录-持续更新</title>
<url>/posts/9f6ebe30/</url>
<content><![CDATA[<img src="https://i.ibb.co/sQqSRzh/2024-10-15-135544.png" alt="2024-10-15-135544" border="0">
<center>优化前的效果:(</center>
<span id="more"></span>
<h2 id="使用插件hexo-all-minifier">使用插件<a href="https://github.com/chenzhutian/hexo-all-minifier.git">hexo-all-minifier</a></h2>
<p>如果你访问github有困难，可以访问此镜像库<a href="https://gitcode.com/gh_mirrors/he/hexo-all-minifier/overview">hexo-all-minifier</a></p>
<blockquote>
<p>这里我选择静默的原因是因为这些插件的输出日志影响hexon的加载</p>
</blockquote>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">all_minifier:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="attr">js_concator:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">bundle_path:</span> <span class="string">'/js/bundle.js'</span></span><br><span class="line"> <span class="attr">front:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">silent:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="attr">html_minifier:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">ignore_error:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">silent:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">exclude:</span></span><br><span class="line"></span><br><span class="line"><span class="attr">css_minifier:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">silent:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">exclude:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">'*.min.css'</span></span><br><span class="line"></span><br><span class="line"><span class="attr">js_minifier:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">mangle:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">silent:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">output:</span></span><br><span class="line"> <span class="attr">compress:</span></span><br><span class="line"> <span class="attr">exclude:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">'*.min.js'</span></span><br><span class="line"></span><br><span class="line"><span class="attr">image_minifier:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">interlaced:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">multipass:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">optimizationLevel:</span> <span class="number">2</span></span><br><span class="line"> <span class="attr">pngquant:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">progressive:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">silent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p>这个是优化后的效果<br>
<a href="https://ibb.co/JtD2JHb"><img src="https://i.ibb.co/sR8QYqD/2024-10-15-143007.png" alt="2024-10-15-143007" border="0"></a></p>
<p>爆赞！</p>
]]></content>
<categories>
<category>基于hexo的博客搭建教程</category>
<category>基础</category>
</categories>
<tags>
<tag>记录</tag>
<tag>CSS</tag>
<tag>HTML</tag>
<tag>博客</tag>
<tag>js</tag>
<tag>404</tag>
</tags>
</entry>
<entry>
<title>hexo创建一个友情链接页面</title>
<url>/posts/62fedd1e/</url>
<content><![CDATA[<p>尽管hexo自带links功能，但是这样看起来单一无趣，那么为了改善友链，我们可以自定义一个页面</p>
<span id="more"></span>
<h1 id="创建新页面">创建新页面</h1>
<p>找到你的本地博客位置，输入<code>hexo new page 友情链接</code><br>
你的本地博客目录就会出现<code>blog\source\友情与链接\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: 2024-09-12 20:35:40</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure>
<h1 id="添加代码">添加代码</h1>
<p>如下一大长串</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: 2024-09-12 20:35:40</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line"></span><br><span class="line"><span class="section"># <span class="language-xml"><span class="tag"><<span class="name">center</span>></span></span>友情链接<span class="language-xml"><span class="tag"></<span class="name">center</span>></span></span> </span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"post-body"</span>></span></span></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"links"</span>></span></span></span><br><span class="line"><span class="code"> <style></span></span><br><span class="line"><span class="code"> .links-content{</span></span><br><span class="line"><span class="code"> margin-top:1rem;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .link-navigation::after {</span></span><br><span class="line"><span class="code"> content: " ";</span></span><br><span class="line"><span class="code"> display: block;</span></span><br><span class="line"><span class="code"> clear: both;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card {</span></span><br><span class="line"><span class="code"> width: 45%;</span></span><br><span class="line"><span class="code"> font-size: 1rem;</span></span><br><span class="line"><span class="code"> padding: 10px 20px;</span></span><br><span class="line"><span class="code"> border-radius: 4px;</span></span><br><span class="line"><span class="code"> transition-duration: 0.15s;</span></span><br><span class="line"><span class="code"> margin-bottom: 1rem;</span></span><br><span class="line"><span class="code"> display:flex;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card:nth-child(odd) {</span></span><br><span class="line"><span class="code"> float: left;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card:nth-child(even) {</span></span><br><span class="line"><span class="code"> float: right;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card:hover {</span></span><br><span class="line"><span class="code"> transform: scale(1.1);</span></span><br><span class="line"><span class="code"> box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card a {</span></span><br><span class="line"><span class="code"> border:none;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card .ava {</span></span><br><span class="line"><span class="code"> width: 3rem!important;</span></span><br><span class="line"><span class="code"> height: 3rem!important;</span></span><br><span class="line"><span class="code"> margin:0!important;</span></span><br><span class="line"><span class="code"> margin-right: 1em!important;</span></span><br><span class="line"><span class="code"> border-radius:4px;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card .card-header {</span></span><br><span class="line"><span class="code"> font-style: italic;</span></span><br><span class="line"><span class="code"> overflow: hidden;</span></span><br><span class="line"><span class="code"> width: 100%;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card .card-header a {</span></span><br><span class="line"><span class="code"> font-style: normal;</span></span><br><span class="line"><span class="code"> color: #2bbc8a;</span></span><br><span class="line"><span class="code"> font-weight: bold;</span></span><br><span class="line"><span class="code"> text-decoration: none;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card .card-header a:hover {</span></span><br><span class="line"><span class="code"> color: #d480aa;</span></span><br><span class="line"><span class="code"> text-decoration: none;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> .card .card-header .info {</span></span><br><span class="line"><span class="code"> font-style:normal;</span></span><br><span class="line"><span class="code"> color:#a3a3a3;</span></span><br><span class="line"><span class="code"> font-size:14px;</span></span><br><span class="line"><span class="code"> min-width: 0;</span></span><br><span class="line"><span class="code"> overflow: hidden;</span></span><br><span class="line"><span class="code"> white-space: nowrap;</span></span><br><span class="line"><span class="code"> }</span></span><br><span class="line"><span class="code"> </style></span></span><br><span class="line"><span class="code"> <div class="links-content"></span></span><br><span class="line"><span class="code"> <div class="link-navigation"></span></span><br><span class="line"><span class="code"> <div class="card"></span></span><br><span class="line"><span class="code"> <img class="ava" src="https://xingwangzhe.github.io/images/avatar.jpg" /></span></span><br><span class="line"><span class="code"> <div class="card-header"></span></span><br><span class="line"><span class="code"> <div></span></span><br><span class="line"><span class="code"> <a href="https://xingwangzhe.github.io">xingwangzhe</a></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> <div class="info">记录学习生活的琐事，或者技术文章:)</div></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> <div class="card"></span></span><br><span class="line"><span class="code"> <img class="ava" src="https://xingwangzhe.github.io/images/avatar.jpg" /></span></span><br><span class="line"><span class="code"> <div class="card-header"></span></span><br><span class="line"><span class="code"> <div></span></span><br><span class="line"><span class="code"> <a href="https://xingwangzhe.github.io">xingwangzhe</a></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> <div class="info">记录学习生活的琐事，或者技术文章:)</div></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"></div></span></span><br><span class="line"><span class="code"></section></span></span><br><span class="line"><span class="code"></body></span></span><br></pre></td></tr></table></figure>
<h1 id="关键代码">关键代码</h1>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card"</span>></span></span></span><br><span class="line"><span class="code"> <img class="ava" src="https://xingwangzhe.github.io/images/avatar.jpg" /></span></span><br><span class="line"><span class="code"> <--双引号里是网站图标，你可以通过F12在<head></head>之间找到--></span></span><br><span class="line"><span class="code"> <div class="card-header"></span></span><br><span class="line"><span class="code"> <div></span></span><br><span class="line"><span class="code"> <a href="https://xingwangzhe.github.io">xingwangzhe</a></span></span><br><span class="line"><span class="code"> <--双引号里面是网站链接，后面的文本是标题--></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> <div class="info">记录学习生活的琐事，或者技术文章:)</div></span></span><br><span class="line"><span class="code"> <--这段文本是网站描述--></span></span><br><span class="line"><span class="code"> </div></span></span><br><span class="line"><span class="code"> </div></span></span><br></pre></td></tr></table></figure>
<p>你可以通过多次重复使用这些代码来实现添加友链的效果</p>
<h1 id="效果如下">效果如下</h1>
<h1 id="center-友情链接-center"><center>友情链接</center></h1>
<div class="post-body">
<div id="links">
<style>
.links-content{
margin-top:1rem;
}
.link-navigation::after {
content: " ";
display: block;
clear: both;
}
.card {
width: 45%;
font-size: 1rem;
padding: 10px 20px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display:flex;
}
.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: right;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card a {
border:none;
}
.card .ava {
width: 3rem!important;
height: 3rem!important;
margin:0!important;
margin-right: 1em!important;
border-radius:4px;
}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 100%;
}
.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #d480aa;
text-decoration: none;
}
.card .card-header .info {
font-style:normal;
color:#a3a3a3;
font-size:14px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
</style>
<div class="links-content">
<div class="link-navigation">
<div class="card">
<img class="ava" src="https://xingwangzhe.github.io/images/avatar.jpg" />
<div class="card-header">
<div>
<a href="https://xingwangzhe.github.io">xingwangzhe</a>
</div>
<div class="info">记录学习生活的琐事，或者技术文章:)</div>
</div>
</div>
<div class="card">
<img class="ava" src="https://xingwangzhe.github.io/images/avatar.jpg" />
<div class="card-header">
<div>
<a href="https://xingwangzhe.github.io">xingwangzhe</a>
</div>
<div class="info">记录学习生活的琐事，或者技术文章:)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<h1 id="别忘了这是markdown-md"><a href="http://xn--markdown-g00m341ali3br5pwy1k.md">别忘了这是markdown.md</a></h1>
<p>你可以自定义后续的内容：）</p>
<h1 id="参考推荐">参考推荐</h1>
<p><a href="https://enfangzhong.github.io/2019/12/08/Hexo%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%8B%E9%93%BE%E9%A1%B5%E9%9D%A2/">Hexo个人博客自定义友链页面</a><br>
<a href="https://wangjiezhe.com/posts/2021-03-30-add-link-page/?highlight=%E5%8F%8B">hexo NexT 添加友链页面</a></p>
]]></content>
<categories>
<category>基于hexo的博客搭建教程</category>
</categories>
<tags>
<tag>记录</tag>
<tag>教程</tag>
<tag>博客教程</tag>
</tags>
</entry>
<entry>
<title>hexo压缩资源，优化访问</title>
<url>/posts/42cabe35/</url>
<content><![CDATA[<p><a href="https://github.com/chenzhutian/hexo-all-minifier">Hexo-all-minifier</a>压缩资源，优化访问</p>
<p><img src="images/hexo/1.png" alt="1"></p>
<span id="more"></span>
<blockquote>
<p>对hexon不友好，如果你使用hexon或其他类似的本地编辑器，我建议你静默日志</p>
</blockquote>
<h1 id="安装">安装</h1>
<h2 id="执行安装命令">执行安装命令</h2>
<blockquote>
<p><code>npm install hexo-all-minifier --save</code></p>
</blockquote>
<blockquote>
<p>由于网络原因，有可能无法下载，请自行解决</p>
</blockquote>
<h2 id="简单配置">简单配置</h2>
<p>在网站根目录<code>_config.yml</code>里面添加</p>
<blockquote>
<p>all_minifier: true</p>
</blockquote>
<h2 id="其他参数">其他参数</h2>
<p>访问<a href="https://github.com/chenzhutian/hexo-all-minifier">Hexo-all-minifier</a>获取详情</p>
]]></content>
<categories>
<category>基于hexo的博客搭建教程</category>
</categories>
<tags>
<tag>记录</tag>
<tag>博客教程</tag>
</tags>
</entry>
<entry>
<title>hexon:hexo的可视化编辑</title>
<url>/posts/59a1e261/</url>
<content><![CDATA[<h1 id="center-你是否对这些命令感到枯燥乏味？-center"><center> 你是否对这些命令感到枯燥乏味？</center></h1>
<pre><code> hexo g| hexo d|hexo s
</code></pre>
<h2 id="center-那么就来试试hexon吧！-center"><center>那么就来试试hexon吧！</center></h2>
<span id="more"></span>
<p>找到你的博客目录<br>
(这是我的目录)<br>
<img src="images/hexon/blog.png" alt=""><br>
在此目录执行</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git <span class="built_in">clone</span> https://github.com/gethexon/hexon --depth 1</span><br><span class="line"><span class="built_in">cd</span> hexon</span><br><span class="line">pnpm install</span><br><span class="line">pnpm run setup</span><br></pre></td></tr></table></figure>
<p>此时你的博客目录下会出现hexon文件夹</p>
<h2 id="注册用户">注册用户</h2>
<p>如图接下来会出现这个界面<img src="images/hexon/blog2.png" alt=""><br>
按照其中的英文提示进行操作即可</p>
<h2 id="登录">登录</h2>
<p>执行命令</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm start</span><br></pre></td></tr></table></figure>
<p>此时会出现<img src="images/hexon/blog3.png" alt=""><br>
框选的链接既是登录的界面，复制链接到浏览器打开<br>
<img src="images/hexon/blog4.png" alt=""></p>
<blockquote>
<p>如果出现Authentication error，这时候你需要把用户名那栏输入为你的系统用户名（看c盘，那里会有显示），密码还是不变，输入完毕后点击登录。至此教程基本结束<br>
<img src="images/hexon/blog5.png" alt=""></p>
</blockquote>
<h2 id="其他事项">其他事项</h2>
<p>你可以访问hexon目录下的readme.md文件详细浏览</p>
<h2 id="参考">参考</h2>
<p><a href="https://github.com/gethexon/hexon">gethexon/hexon: Let’s hexo online. - GitHub</a></p>
]]></content>
<categories>
<category>基于hexo的博客搭建教程</category>
</categories>
<tags>
<tag>记录</tag>
<tag>教程</tag>
<tag>hexo</tag>
<tag>博客教程</tag>
<tag>第一次</tag>
</tags>
</entry>
<entry>
<title>hexo创建公益404界面</title>
<url>/posts/6ec2376e/</url>
<content><![CDATA[<p><img src="images/404/4044.png" alt="404"></p>
<center>让世界更美好</center>
<span id="more"></span>
<h1 id="什么是404界面">什么是404界面</h1>
<p>以下来自<a href="https://baike.baidu.com/item/404%20not%20found/5101769">百度百科</a></p>
<blockquote>
<p>404 not found，是HTTP对网页错误情况返回的一种状态码，当用户在浏览器中输入网址时，服务器会根据输入的地址判断是否有对应的网页信息，如果没有对应信息，说明用户输入的可能是一串无效的链接，服务器就会向用户返回404 not found状态码，告诉用户没有找到对应的网页信息。</p>
</blockquote>
<p>我的理解就是无法找到网页后重定向到的网页</p>
<h1 id="404公益">404公益</h1>
<h2 id="为hexo创建404页面">为hexo创建404页面</h2>
<p>在你的博客根目录下``执行命令<code>hexo new page 404</code><br>
然后你的博客<code>blog\source\404\</code>目录下会生成新的index.md文件</p>
<h2 id="添加404页面">添加404页面</h2>
<p>请index.md在里面添加</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"><span class="tag"><<span class="name">html</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">meta</span> <span class="attr">http-equiv</span>=<span class="string">"content-type"</span> <span class="attr">content</span>=<span class="string">"text/html;charset=utf-8;"</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge,chrome=1"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"robots"</span> <span class="attr">content</span>=<span class="string">"all"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"robots"</span> <span class="attr">content</span>=<span class="string">"index,follow"</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">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> <span class="attr">homePageUrl</span>=<span class="string">"http://xingwangzhe.fun"</span> <span class="attr">homePageName</span>=<span class="string">"回到我的主页"</span>></span><span class="tag"></<span class="name">script</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">html</span>></span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>记得把homePageUrl的链接换成自己网站如此就完成了</p>
</blockquote>
<h2 id="公益404发展">公益404发展</h2>
<h3 id="起源与早期发展">起源与早期发展</h3>
<p>公益404最早源于欧洲的“NotFound Project”，该项目由Missing Children Europe和European Federation for Missing and Sexually Exploited Children等公益组织联合发起。该项目的初衷是利用闲置不用的网络空间发挥公益的力量，通过404错误页面展示失踪儿童的信息，以帮助更多人参与寻找失踪儿童的工作。这一创意迅速得到了国际社会的关注和响应，为后来的公益404模式奠定了基础。</p>
<h3 id="全球推广">全球推广</h3>
<p>随着NotFound Project的成功，公益404模式逐渐在全球范围内得到推广。越来越多的公益组织和互联网公司开始关注这一模式，并尝试将其应用于自己的平台上。这种创新的公益形式不仅提高了失踪儿童信息的曝光率，还激发了公众的参与热情，为打击人口拐卖和儿童失踪犯罪提供了有力支持。</p>
<h3 id="中国公益404的发展">中国公益404的发展</h3>
<h4 id="引入与初期实践">引入与初期实践</h4>
<p>2012年，益云（公益互联网）社会创新中心将404公益模式引入国内，并发起了“404公益”行动。该行动邀请每位网站站长在自己网站的404错误页面上安装一个公益广告位，刊登失踪儿童的姓名和照片信息，旨在帮助孩子回家。这一行动迅速得到了中国计算机学会、百度、CSDN、中国人口福利基金会寻子基金、中华社会救助基金会微博打拐基金等多方支持和响应。</p>
<h4 id="快速发展与成果">快速发展与成果</h4>
<p>在多方共同努力下，“404公益”行动在中国取得了显著成果。越来越多的网站加入到了这一行列中，包括知名互联网公司如腾讯、百度、淘宝等。这些网站通过在自己的404页面上展示失踪儿童信息，为失踪儿童家庭带来了更多希望。据统计，已有超过1100多家各类网站加入到404公益的行列中，404公益页面总展现次数已达数十万次，成功帮助了多个失踪儿童找到亲人。</p>
<h4 id="创新与发展">创新与发展</h4>
<p>除了传统的404页面展示失踪儿童信息外，中国的公益404还产生了更多元化的衍生形式。例如，一些搜索引擎在搜索不到匹配内容时，也会在页面上显示寻人信息；社交媒体平台上也开设了专门的“#404公益#”话题，方便网友们进行寻人信息的传播和搜索。此外，一些科技公司还利用自己的技术优势和平台优势，为公益404提供了更多的支持和帮助。</p>
<blockquote>
<p>2022年腾讯公益:自从2012年12月13号早上，腾讯404公益页面上线以来，多年来我们一直在做寻亲信息投放。但是随着整个社会对于寻亲事业的关注，和公安部门对于人口拐卖犯罪的打击，这些年来人口拐卖发生的越来越少，随着天眼等社会安全系统等普及，人口失踪的发生也越来越少，失踪时间也越来越短，到现在，404公益继续进行寻亲信息投放的意义已经越来越小了。因此，今年我们要对404公益项目做一些转型，利用404页面资源投放一些对当前的社会更有意义的公益信息，比如环保、救灾、避险等等。</p>
</blockquote>
<h2 id="我的看法">我的看法</h2>
<p>自2017年以来，中国互联网的网站开始减少，互联网开始向移动互联网发展。如今移动设备很少使用浏览器，网站访问也大不如前，尽管如此，公益404依然是非常有意义的事业。</p>
<p>不聚萤火，何成希望呢？</p>
<h1 id="参考">参考</h1>
<p><a href="https://zhuanlan.zhihu.com/p/97675291">Hexo博客如何添加404公益页面</a></p>
]]></content>
<categories>
<category>基于hexo的博客搭建教程</category>
</categories>
<tags>
<tag>记录</tag>
<tag>博客教程</tag>
<tag>404</tag>
<tag>公益</tag>
</tags>
</entry>
<entry>
<title>通过创建小测验学习无障碍</title>
<url>/posts/9f32bac9/</url>
<content><![CDATA[<center>无障碍环境正在使你的网页便于所有人使用——甚至是残疾人。
<p>在这个课程中，你将建立一个测验网页。你将学习诸如键盘快捷键、ARIA 属性和设计最佳实践等无障碍工具。</p>
</center>
<span id="more"></span>
<h1 id="显示如下">显示如下</h1>
<p>来自于<a href="https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/#learn-accessibility-by-building-a-quiz">freecodecamp</a></p>
<style>
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
#logo {
width: max(10rem, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
text-align: center;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
main {
padding-top: 50px;
}
section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}
.info {
padding: 10px 0 0 5px;
}
.formrow {
margin-top: 30px;
padding: 0px 15px;
}
input {
font-size: 16px;
}
.info label, .info input {
display: inline-block;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
text-align: right;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
h3 {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
h3::before {
content: "Question #";
}
.question {
border: none;
padding-bottom: 0;
}
.answers-list {
list-style: none;
padding: 0;
}
button {
display: block;
margin: 40px auto;
width: 40%;
padding: 15px;
font-size: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}