-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
1499 lines (1319 loc) · 122 KB
/
atom.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"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>https://smilin.net</id>
<title>貓謎工坊</title>
<link href="https://smilin.net" />
<updated>2024-08-12T09:00:00.000Z</updated>
<category term="node.js" />
<category term="bot" />
<category term="discord" />
<category term="discord.js" />
<category term="教學" />
<category term="12th鐵人賽" />
<category term="vitepress" />
<category term="algolia" />
<category term="活俠傳" />
<category term="日記" />
<category term="Alist" />
<category term="Cloudflare" />
<category term="docker" />
<category term="javascript" />
<category term="hexo" />
<category term="fluid" />
<category term="github" />
<category term="CI/CD" />
<category term="彈射世界" />
<category term="遊戲" />
<category term="腳本" />
<category term="heroku" />
<category term="render" />
<category term="render.com" />
<category term="Live2D" />
<category term="Rust" />
<category term="addtoany" />
<entry>
<id>https://smilin.net/2024/08/12/algoliaOnVitepress/</id>
<title>關於 algolia 在 vitepress 集成,踩雷過程</title>
<link rel="alternate" href="https://smilin.net/2024/08/12/algoliaOnVitepress/"/>
<content type="html"><p><img src="/img/post/algoliaOnVitepress/01.jpg"></p>
<p>因為想增強網站的搜尋力度,希望連文章的內文都可以搜索到<br>剛好 <code>vitepress</code> 是支援 <code>algolia</code> 的,試著配置<br>不料遇到的問題比想像的多,網路上的教學像是缺了幾塊拼圖似的<br>索性趁著剛完成腦袋還熱呼的現在,記錄一下遇到的問題。</p>
<span id="more"></span>
<hr>
<h2 id="官方文檔"><a href="#官方文檔" class="headerlink" title="官方文檔"></a>官方文檔</h2><p>首先我們看到 <a href="https://vitepress.dev/zh/reference/default-theme-search#algolia-search">vitepress 的文檔</a></p>
<p><img src="/img/post/algoliaOnVitepress/02.jpg"></p>
<p>去 <code>Algolia</code> 申請 <code>api</code>,然後填入,完成<br>恩,看起來挺簡單的,再看看 <a href="https://docsearch.algolia.com/apply">Algolia 怎麼說</a></p>
<p><img src="/img/post/algoliaOnVitepress/03.jpg"></p>
<p>註冊完後,我們審核完畢就會寄信到你的信箱,裡面可以拿到 <code>apikey</code><br>恩…這邊也很方便阿,註冊完等大概五分鐘就收到信了</p>
<pre><code class="Markdown">Hi there 👋
Thanks for your interest and trust in Algolia DocSearch.
We&#39;ve received your request for https://smilin.net/LoM-wiki/, and will get back to you soon.
DocSearch is built in two parts:
- A crawler which we run in our own infrastructure every week (configurable). It follows every link in your website and extracts content from every page it traverses. It then pushes this content to an Algolia index. (Read more: https://www.algolia.com/doc/tools/crawler/getting-started/overview/ )
- A JavaScript snippet to be inserted in your website that will bind this Algolia index to your search input and display its results in a modal UI. (Read more: https://github.com/algolia/docsearch )
If you want to find more details on how DocSearch works, take a look at the docs: https://docsearch.algolia.com/
Meanwhile, let us know if you have any other questions.
Have a great day,
The DocSearch team.
DocSearch is powered by Algolia. See more at https://www.algolia.com/
</code></pre>
<p>大意是說 <code>algolia</code> 分成兩個部分</p>
<ul>
<li>他們會配置爬蟲,每周瀏覽網站</li>
<li>為了使用 <code>algolia</code>,必須在網站配置他們的 <code>js</code></li>
</ul>
<p>第一部份 <code>algolia</code> 會協助,第二部份也有 <code>vitepress</code> 集成,一切看起來都很美好</p>
<p>但是去 <code>algolia</code> 後台要拿 <code>api</code> 的時候,問題來了。</p>
<hr>
<h2 id="問題?"><a href="#問題?" class="headerlink" title="問題?"></a>問題?</h2><p><img src="/img/post/algoliaOnVitepress/04.jpg"></p>
<p>(註:由於筆者已經踩完雷了,圖中是已解決的樣子)</p>
<p>只要進入後台,他就會彈出 <code>Get Start</code><br>大意是要求我們自己寫爬蟲讀取自己網站的資料,然後透過他們的工具上傳給 <code>algolia</code></p>
<p>不對呀?爬蟲的部份<code>algolia</code>不是幫我們做好了嗎?<br>上網找了下,其他人似乎沒有遇到這個狀況,甚至可以在後台要求 <code>algolia</code> 主動重爬</p>
<p>恩…回頭去看信中的第一點,點進他提供的網址,看看爬蟲相關的問題</p>
<p><img src="/img/post/algoliaOnVitepress/05.jpg"></p>
<p>痾,不知道為什麼,我的帳戶不能使用他們家的爬蟲服務<br>難怪進後台就要求我主動提供資料,那沒辦法,只好自己來</p>
<br>
<h3 id="隔天-8-13-更新:"><a href="#隔天-8-13-更新:" class="headerlink" title="隔天(8&#x2F;13)更新:"></a>隔天(8&#x2F;13)更新:</h3><p>今天收到審核通過的信件,可以使用他們家的爬蟲了,<br>應該是筆者當天查看時,還在審核網站是否符合他們的免費支援對象</p>
<p>往下就是自行串接爬蟲的部份了,如果還能利用他們家的爬蟲的話,以下的方案就不是必要的</p>
<hr>
<h2 id="github-action"><a href="#github-action" class="headerlink" title="github action"></a>github action</h2><p>由於筆者的網站放在 <code>github</code> 上<br>想到要寫 for 網站的爬蟲後,第一時間想到的就是 <code>action</code> 啦</p>
<pre><code class="yml">name: Algolia DocSearch Scraper
on:
push:
branches: [release-algolia]
jobs:
scrape:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Prepare Algolia DocSearch config
run: |
echo &#39;$&#123;&#123; secrets.ALGOLIA_CONFIG &#125;&#125;&#39; &gt; config.json
cat config.json
- name: Run DocSearch Scraper
env:
APPLICATION_ID: $&#123;&#123; secrets.ALGOLIA_ID &#125;&#125;
API_KEY: $&#123;&#123; secrets.ALGOLIA_KEY &#125;&#125;
run: |
docker run \
-e APPLICATION_ID=$APPLICATION_ID \
-e API_KEY=$API_KEY \
-e CONFIG=&quot;$(cat config.json | jq -c .)&quot; \
algolia/docsearch-scraper
</code></pre>
<p>透過 <code>action</code> 執行 <code>algolia/docsearch-scraper</code><br><code>id</code>跟<code>key</code>可以在前面的<code>algolia後台</code>獲得<br><code>ALGOLIA_CONFIG</code> 則是爬蟲的相關 <code>config</code>,設置方式可以<a href="https://docsearch.algolia.com/docs/legacy/config-file/">參考這裡</a></p>
<p>全都必須放在 <code>Repository secrets</code>,根據使用的環境不同,載入環境變量的方式略有差異</p>
<p>以上做完,<code>action</code>成功執行後,<code>algolia</code>上就會有資料囉</p>
<hr>
<h2 id="後續步驟"><a href="#後續步驟" class="headerlink" title="後續步驟"></a>後續步驟</h2><p><img src="/img/post/algoliaOnVitepress/06.jpg"></p>
<p>前面爬完資料,第一步會自動打勾<br>由於我們的前端都由 <code>vitepress</code> 自動配置好了,剩下三步驟並不需要設定,一直送出讓他打勾就好</p>
<p><img src="/img/post/algoliaOnVitepress/07.jpg"></p>
<p>終於來到後台,依序點選 Search -&gt; CONFIGURE -&gt; Index<br>找到 <code>Create Index</code> ,輸入 <code>IndexName</code><br>這裡設定的,就是最前面<code>vitepress</code>要求輸入的第三個參數</p>
<p><img src="/img/post/algoliaOnVitepress/01.jpg"></p>
<p>都設定完畢,網頁的搜尋功能連內文都可以搜到,更加強大囉~</p>
<hr>
<h2 id="閒談"><a href="#閒談" class="headerlink" title="閒談"></a>閒談</h2><p>文中提到使用 <code>vitepress</code> 的網站是 <a href="https://smilin.net/LoM-wiki/">活俠傳 wiki</a>,<br>也是最近筆者在休息時間把玩的小專案</p>
<p>網站在 <code>2024-07-01</code> 建立,<br>當時是打算在這寫點文章的,<br>恰巧近期工作也忙,<br>沒甚麼時間更新這邊</p>
<p>其實連這篇文都更新的很吃力,<br>不過想了想,<br>過幾天恐怕連這篇文怎麼動筆都不知道,<br>還是寫吧 xD</p>
<p>建立這個網站,<br>一方面是我自己對<code>vue + vite</code>體系全家桶不太熟悉,<br>趁機學習</p>
<p>另一方面是活俠傳真的很好玩,<br>這邊推薦大家都可以去玩。</p>
<p>關於<code>wiki</code>的建立心路歷程甚麼的,<br>之後會再另外寫一篇的</p>
<p>很感謝同樣喜歡活俠傳的朋友,<br>願意一同維護這個 <code>wiki</code>,<br>也歡迎志同道合的新夥伴加入。</p>
<br>
</content>
<category term="node.js" />
<category term="vitepress" />
<category term="algolia" />
<category term="活俠傳" />
<updated>2024-08-12T09:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2024/05/03/useTheme1/</id>
<title>前幾天有人詢問我用的啥主題</title>
<link rel="alternate" href="https://smilin.net/2024/05/03/useTheme1/"/>
<content type="html"><p><img src="/img/ai/letter_circle.png"></p>
<p>前幾天收到信,信中詢問使用的主題<br>想了下的確從沒寫過,索性紀錄一下。</p>
<span id="more"></span>
<br>
<hr>
<br>
<h1 id="Hexo"><a href="#Hexo" class="headerlink" title="Hexo"></a>Hexo</h1><img width="128" src="/img/post/useTheme1/hexo.png">
<p>首先本站使用模板為 <a href="https://hexo.io/zh-tw/">Hexo</a></p>
<p>該模板提供靜態網頁生成,<br>搭配 Github Page,或是其他免費架設平台,<br>可以輕易實現無開銷環境的長期 blog 支持</p>
<p><code>Hexo</code> 從 2013 年開發至今,<br>筆者發文的 2 周前推出 v7.2.0 版本的 <code>Hexo</code>,<br>有著優秀的基底與長期穩定的維護。</p>
<br>
<hr>
<br>
<h1 id="Icarus"><a href="#Icarus" class="headerlink" title="Icarus"></a>Icarus</h1><p><img src="/img/post/useTheme1/Icarus.png"></p>
<p>除了默認的設置以外,<br><code>Hexo</code> 提供自行開發主題(THEME)的接口</p>
<p>本站使用主題為 <a href="https://github.com/ppoffice/hexo-theme-icarus">Icarus</a></p>
<p>該主題默認提供 default(白色) 跟 cyberpunk(黃色) 主題可供選用</p>
<p>由於 Icarus 後來經過多次更迭,<br>加上筆者自己對 blog 有諸多修改,<br>如今已與原本的 Icarus 有很多差異,<br>不過仍看得出排版等元素皆承襲自 Icarus。</p>
<br>
<hr>
<br>
<h1 id="星空"><a href="#星空" class="headerlink" title="星空"></a>星空</h1><p><img src="/img/post/useTheme1/01.jpg"></p>
<p>黑暗主題的星空背景,參考<a href="https://github.com/imaegoo/hexo-theme-icarus">imaegoo</a>大大的開源代碼</p>
<p><code>imaegoo</code> 的開源代碼同樣是從 <code>Icarus</code> 改進而來<br>如果喜歡星空背景,該開源代碼可以直接套來用</p>
<p>不過由於筆者在此之前,已經對 blog 做過諸多修改<br>最終是自行研究該代碼後,另外自己寫 css,<br>想辦法移植過來的。</p>
<br>
<hr>
<br>
<h1 id="PJAX"><a href="#PJAX" class="headerlink" title="PJAX"></a>PJAX</h1><p>本站的局部加載使用 PJAX,<br>同樣是另外加寫的</p>
<p>原本網站是使用 <a href="https://github.com/fluid-dev/hexo-theme-fluid">Fluid</a> 這套 <code>Hexo</code> 主題</p>
<p>但因為 <code>Fluid</code> 並不支援局部加載,<br>自己想辦法實作後發現基底的確不適合,<br>無奈之下只好棄用。</p>
<p>當時為了魔改 <code>Fluid</code> 還寫了篇<a href="https://smilin.net/2021/11/16/fluidThemeShare/">紀錄</a>,<br>有興趣可以看看。</p>
<br>
<hr>
<br>
<h1 id="Live-2D"><a href="#Live-2D" class="headerlink" title="Live 2D"></a>Live 2D</h1><p><img src="/img/post/useTheme1/03.jpg"></p>
<p>本站的 Live 2D 小人,<br>使用 <a href="https://github.com/fghrsh/live2d_demo">fghrsh</a> 大大撰寫的開源工具</p>
<p>該專案主要負責 live 2d 的加載,<br>與針對網頁元素互動的邏輯撰寫</p>
<p>得益於開源專案的優勢,該工具有著許多變種,<br>同時支持多項設定自定義</p>
<p>像本站是使用了原本的前端工具 + 後端 API 本地靜態化<br>以此來避免 憑證過期 &amp; 後端額外開銷 等等問題。</p>
<br>
<hr>
<br>
<h1 id="Gittalk-熱門評論-最新評論"><a href="#Gittalk-熱門評論-最新評論" class="headerlink" title="Gittalk &amp; 熱門評論 &amp; 最新評論"></a>Gittalk &amp; 熱門評論 &amp; 最新評論</h1><p><img src="/img/post/useTheme1/04.jpg"></p>
<p>Gittalk 一直都是本站的評論系統<br>他主要依賴於 Github Issue 與其 API<br>讓原本靜態的網站,彷彿支援動態的評論系統一般</p>
<p>如果 blog 原本是使用 Github Page 架設,<br>懶一點的話可以架在同一個 Repository,<br>如此便不需花費額外的維護成本。</p>
<br>
<p>除了 Gittalk 原本的功能,<br>熱門&amp;最新評論的 API 串接則是參考<a href="https://removeif.github.io/theme/%E5%8D%9A%E5%AE%A2%E6%BA%90%E7%A0%81%E5%88%86%E4%BA%AB.html">辣椒的醬</a>大大</p>
<p>由於過於方便,並沒有多加修改,</p>
<p>就是那個評論數統計,<br>當時看代碼會偷偷灌水,所以改回了原始數值。</p>
<p>另外由於辣椒的醬大大的 blog 已經多年未有更新,<br>考慮到 <code>hexo</code>&amp;<code>Icarus</code> 在之後有多次版本更迭<br>以剛起步來說,會更加推薦直接使用官方模板來做修改。</p>
<br>
<hr>
<br>
<h1 id="明亮主題的粒子特效"><a href="#明亮主題的粒子特效" class="headerlink" title="明亮主題的粒子特效"></a>明亮主題的粒子特效</h1><p><img src="/img/post/useTheme1/02.jpg"></p>
<p>這部份使用 <a href="https://github.com/hustcc/canvas-nest.js/">canvas-nest</a></p>
<p>使用非常簡單,在網頁引入 js 即可<br>網路教學不少</p>
<p>由於跟夜晚主題適配性差,<br>根據個人需求不同,要稍微調整 css。</p>
<br>
<hr>
<br>
<h1 id="音樂箱"><a href="#音樂箱" class="headerlink" title="音樂箱"></a>音樂箱</h1><p><img src="/img/post/useTheme1/05.jpg"></p>
<p>音樂箱功能使用 <a href="https://github.com/DIYgod/APlayer">Aplayer</a> 播放器</p>
<p>非常低調地摺疊收納在網站角落,<br>按照預想,就算是多次瀏覽本站的旅客也不一定能發現</p>
<p>畢竟音樂箱只需要服務需要聽音樂的人即可,<br>大多人瀏覽網站時也有自己在背景播放的歌曲,<br>這時候若太過強調網站自帶的音樂,顯得不識趣了些。</p>
<p>值得一提的是,<br>本站的音樂箱,在手機可以當作歌曲列表自動播放。</p>
<br>
<hr>
<br>
<h1 id="RSS"><a href="#RSS" class="headerlink" title="RSS"></a>RSS</h1><p><img src="/img/post/useTheme1/06.jpg"></p>
<p>本站 RSS 提供三種格式<br>分別是預設的 RSS、ATOM 與 Json Feed</p>
<p><img src="/img/post/useTheme1/07.jpg"></p>
<p>使用 RSS 訂閱,便可即時知道網站更新了文章</p>
<p>對筆者來說,就像是提醒自己一直都沒在更新文章</p>
<p>看到一排去年的文章,<br>彷彿說著「再不更新就要死了!」這樣。</p>
<br>
<hr>
<br>
<h1 id="寫在後面"><a href="#寫在後面" class="headerlink" title="寫在後面"></a>寫在後面</h1><p>列一列大概是這些,如果有甚麼缺漏,<br>或是未來更新沒寫在這,想問的</p>
<p>歡迎提出來,有時間便會回覆。</p>
</content>
<category term="日記" />
<category term="hexo" />
<updated>2024-05-03T07:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2024/04/30/githubAction1/</id>
<title>Github Action 學習紀錄</title>
<link rel="alternate" href="https://smilin.net/2024/04/30/githubAction1/"/>
<content type="html"><h1 id="Auto-Pixai"><a href="#Auto-Pixai" class="headerlink" title="Auto-Pixai"></a>Auto-Pixai</h1><p><img src="https://raw.githubusercontent.com/Mr-Smilin/Auto-Pixai/main/public/pic/logo.png" alt="auto-pixai"></p>
<p>之前撰寫的 <a href="https://github.com/Mr-Smilin/auto-pixai">auto-pixai</a><br>經過多次調整,基本修復了大部分的 bug</p>
<p>該專案透過爬蟲,<br>提供自動在 <a href="https://pixai.art/">pixai</a> 簽到的功能</p>
<p>考量到便利性,<br>將專案打包成 docker image,<br>實現無狀態的部屬環境,<br>最後透過 github tag 控制版本歷程。</p>
<br>
<h2 id="整合部屬需求"><a href="#整合部屬需求" class="headerlink" title="整合部屬需求"></a>整合部屬需求</h2><p>雖然 User 用起來是方便了,<br>但每次開發部版都需要進行複雜的手續..</p>
<p>CI&#x2F;CD …好..好想要 CI&#x2F;CD 阿..<br>就在這麼想著的時候,想起了..</p>
<p><strong>Github Action!</strong></p>
<span id="more"></span>
<br>
<h1 id="Github-Action"><a href="#Github-Action" class="headerlink" title="Github Action"></a>Github Action</h1><p><img src="/img/post/githubAction1/01.png" alt="Github Action!"></p>
<p>Github Action 是 Github 提供的 CI&#x2F;CD 方案</p>
<p>由 Github 提供整合環境,<br>在統一的無狀態環境下進行整合</p>
<p>最重要的是,它對於 public repository 完全免費!</p>
<p><a href="https://docs.github.com/zh/actions/quickstart">Github Action 官方簡中文檔</a><br>在學習 github action 的過程,<br>官方文檔幫助了我許多</p>
<p>因為有官方翻譯,在專有名詞的學習上也不容易被混淆。</p>
<br>
<h2 id="需求"><a href="#需求" class="headerlink" title="需求?"></a>需求?</h2><p><img src="/img/post/githubAction1/02.jpg"></p>
<p>做為 CI&#x2F;CD (自動整合&#x2F;自動部屬) 的角色,<br>我希望他可以在我推送 release 的時候,去做幾件事——</p>
<ul>
<li>根據 package.json 檢查版本</li>
<li>自動創建新版本代號</li>
<li>根據 Dockerfile 產出 Docker image</li>
<li>將 image 標上版號,推至 Docker Hub</li>
</ul>
<p>並且由於 Github Action 還提供緩存功能,<br>如果將 <code>npm install</code> 拉到 Github Action,<br>搭配緩存可以有效縮短 Dockerfile 的產出時間與大小!</p>
<p>配上 Github Action 的一些格式後,我們還需要——</p>
<ul>
<li>指定 <code>node</code> 版本</li>
<li>緩存儲存 <code>node_modules</code></li>
<li>緩存加載 <code>node_modules</code></li>
</ul>
<p>根據<a href="https://docs.github.com/zh/actions/using-workflows/caching-dependencies-to-speed-up-workflows">官方文檔</a>所述,<br>7 天沒使用的 cache 會自動回收,<br>並且一個 repository 的所有 cache 加總不可超出 10GB </p>
<pre><code>- name: Cache node modules
id: cache-node-modules
uses: actions/cache@v3
with:
path: node_modules
key: $&#123;&#123; runner.os &#125;&#125;-node-$&#123;&#123; hashFiles('**/package-lock.json') &#125;&#125;
restore-keys: |
$&#123;&#123; runner.os &#125;&#125;-node-
</code></pre>
<p>根據 package-lock.json 的變動來決定是否新建緩存,<br>否則就取出原本的 node_modules,<br>以此加速 CD 流程。</p>
<br>
<h2 id="過程"><a href="#過程" class="headerlink" title="過程"></a>過程</h2><p><img src="/img/post/githubAction1/03.jpg"></p>
<p>搭啷,經過整理後,<br>這是目前的 CI&#x2F;CD 流程</p>
<p>由於沒有實作測試,<br>僅有 release 被推送時需要 CI&#x2F;CD</p>
<p>執行首先檢查 tag ,<br>若 package 版號有變動則創建新版本</p>
<p>同時進行 cache 的載入,<br>若是找不到 cache 則重新 <code>npm install</code></p>
<p>兩邊都做完後,<br>進行 Dockerfile 的 building 與 pushing。</p>
<br>
<h2 id="結果"><a href="#結果" class="headerlink" title="結果"></a>結果</h2><p>大功告成!原本繁瑣的整合部屬流程</p>
<ul>
<li>Push New Version</li>
<li>Dockerfile build</li>
<li>Docker image tag</li>
<li>Docker push tag</li>
<li>Docker push latest</li>
<li>…</li>
</ul>
<p>上面列的事情 <strong>通通不用</strong></p>
<p>只要在 main 寫完代碼,<br>要推送版本的時候合併到 release,<br>最後再用自動產生的 tag 生成 Release 說明即可。</p>
<br>
<h1 id="結語"><a href="#結語" class="headerlink" title="結語"></a>結語</h1><p>怎麼說呢…好爽</p>
<p>不過所謂爬蟲簽到甚麼的,<br>說白了只是個小工具</p>
<p>藉著這次 project,<br>心血來潮地想把 repository 弄得有模有樣</p>
<p>結果就是,<br>花在打扮(?)外觀的時間遠遠超出了爬蟲本身的開發時間</p>
<p>感覺對 CICD 有了更深刻的了解;<br>美中不足的大概是爬蟲的測試並不好寫,<br>沒能在這次 action 中寫入自動測試,是比較可惜的。</p>
</content>
<category term="github" />
<category term="CI/CD" />
<updated>2024-04-30T07:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2024/04/23/shareButton1/</id>
<title>使用 AddToAny 分享箱,踩雷過程</title>
<link rel="alternate" href="https://smilin.net/2024/04/23/shareButton1/"/>
<content type="html"><p><img src="/img/post/shareButton1/01.jpg"></p>
<p>網站之前有配置分享箱的系統,使用 <a href="https://github.com/overtrue/share.js">sharejs</a> 依賴<br>該依賴只要套上預設即可,十分方便</p>
<p>不過 sharejs 最新的 release 已經是 2016 年的事了…</p>
<p>實際上有些按鈕已經過時,無法使用</p>
<span id="more"></span>
<p><a href="https://ppoffice.github.io/hexo-theme-icarus/Plugins/Share/icarus%E7%94%A8%E6%88%B7%E6%8C%87%E5%8D%97-%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE">關於本主題的分享箱適配</a></p>
<p>icarus 本身是支援多種分享功能的<br>由於 sharejs 停止維護,官方建議採用別的分享功能</p>
<br>
<hr>
<h1 id="AddToAny"><a href="#AddToAny" class="headerlink" title="AddToAny"></a>AddToAny</h1><p><img src="/img/post/shareButton1/addtoany_logo.svg" alt="addtoany"></p>
<p>看了一圈,決定改用 <a href="https://www.addtoany.com/">AddToAny</a></p>
<p>其一是因為該插件支援的社群足夠多,有持續在維護</p>
<p>與 blog 代碼沒甚麼交集,自定義客製方便</p>
<br>
<hr>
<h1 id="踩雷過程"><a href="#踩雷過程" class="headerlink" title="踩雷過程"></a>踩雷過程</h1><p>簡單選一下想要的按鈕,產出代碼後,扔進 jsx 內</p>
<p>到此就搞定了(超快~),build 看下輸出</p>
<p><img src="/img/post/shareButton1/02.jpg"></p>
<p>hmmm…為什麼會是一片空白呢?</p>
<br>
<hr>
<h2 id="沒有-CSS"><a href="#沒有-CSS" class="headerlink" title="沒有 CSS ?"></a>沒有 CSS ?</h2><p>看了一下,似乎是 css 沒有載入</p>
<p>不過 css 這些內容應該會隨著 js 一併輸出才對</p>
<p>花了些時間尋找問題,之後發現</p>
<p><img src="/img/post/shareButton1/03.jpg"></p>
<p>原來是被瀏覽器擋住了,會被瀏覽器攔截主要有幾個可能性</p>
<ul>
<li>混和內容(Mixed Content):<br>如果網站是透過 HTTPS 協定提供服務的,而嘗試載入的資源(如 page.js)使用的是 HTTP 鏈接,那麼這種「混合內容」可能會被現代瀏覽器封鎖。 確保所有外部載入的資源都使用 HTTPS 來避免這種問題。</li>
<li>安全策略(CSP):<br>瀏覽器可能會因為安全策略(Content Security Policy)而阻止某些腳本的載入。</li>
<li>跨域問題(CORS):<br>服務商有可能因為沒有提供適當的跨域策略(Cross-Origin Resource Sharing),導致資源無法載入</li>
<li>廣告攔截器:<br>一些廣告攔截器或安全相關的瀏覽器擴充功能可能會阻止諸如 AddToAny 這樣的第三方服務。</li>
</ul>
<p>由於我們網站跟 AddToAny 都是 https,第一點可以排除<br>本站並沒有設置 CSP (目前沒有)<br>AddToAny 這類插件沒處理好 CORS 的機率是很低的</p>
<p>簡單排除後,比較有可能的是被廣告攔截器擋住了</p>
<br>
<p><img src="/img/post/shareButton1/04.jpg"></p>
<p>喔喔喔!總算出來了!</p>
<br>
<hr>
<h2 id="廣告攔截器"><a href="#廣告攔截器" class="headerlink" title="廣告攔截器"></a>廣告攔截器</h2><p>試了分享功能正常,就是按鈕有點多<br>可能減少一些..之後客製 style…</p>
<p>恩..不過這樣好像沒有解決問題阿?</p>
<p>根據統計,全世界有至少<strong>四成</strong>的人口,常駐廣告攔截器在上網</p>
<p>只是我看的到而已,如果其他人看不到的話就沒意義了 qq</p>
<p>不過攔截的問題還算好解決,只要讓他不會被攔截就好了!(廢話)</p>
<p>方法很多,最簡單的是將原本被攔截的檔案納入網域下<br>載入原本就是同域名下的資源,通常就能繞過限制了。</p>
<pre><code>&lt;script async src=&quot;https://static.addtoany.com/menu/page.js&quot; defer=&#123;true&#125;&gt;&lt;/script&gt;
</code></pre>
<p>根據產出的代碼來看,主要是這個檔案需要拉進來</p>
<p><img src="/img/post/shareButton1/05.jpg"></p>
<p>整理格式,創建一個 addtoany.js 放進去<br>以 hexo 來說就是將 js 檔案放在 <code>themes/&#123;theme_name&#125;/source/js</code> 底下</p>
<p>之後回到 addtoany.jsx 修改來源</p>
<pre><code>&lt;script async src=&quot;/js/addtoany.js&quot; defer=&#123;true&#125;&gt;&lt;/script&gt;
</code></pre>
<p>RUN!</p>
<p><img src="/img/post/shareButton1/02.jpg"></p>
<p>失敗了!</p>
<p><img src="/img/post/shareButton1/06.jpg"></p>
<p>載入失敗的檔案反而變多了!</p>
<br>
<hr>
<h2 id="更多的廣告"><a href="#更多的廣告" class="headerlink" title="更多的廣告"></a>更多的廣告</h2><p>看了下失敗的內容,來源都是出自 addtoany.js,也就是剛剛新增的檔案</p>
<p>回頭翻代碼…</p>
<p><img src="/img/post/shareButton1/07.jpg"></p>
<p><img src="/img/post/shareButton1/08.jpg"></p>
<p>看來是原本的 page.js 引入了其他檔案<br>然後其他檔案又被攔截了…</p>
<p>雖然有點亂,但還是好解決的</p>
<p>首先在 <code>source</code> 目錄新增 <code>addtoany</code> 資料夾<br>將 <code>addtoany.js</code> 改名回 <code>page.js</code> ,放進 <code>addtoany</code> 資料夾<br>原本 <code>addtoany.jsx</code> 的 script 也要修改</p>
<pre><code>&lt;script async src=&quot;/addtoany/page.js&quot; defer=&#123;true&#125;&gt;&lt;/script&gt;
</code></pre>
<p>之後將三個攔截的檔案拷貝整理後,在 <code>source/addtoany</code> 創建同名檔案</p>
<p>然後..然後…<br>然後在 <code>core.js</code> 引用了更多會被攔截的 url…</p>
<p>估計是進行一些第三方 icon 的載入等等…</p>
<br>
<hr>
<br>
<h1 id="結語"><a href="#結語" class="headerlink" title="結語"></a>結語</h1><p><img src="/img/post/shareButton1/09.jpg"></p>
<p>重新修改 <code>core.js</code> 的代碼,最終是成功了</p>
<p>但是<br>修改已經壓縮過的代碼,過程是麻煩且沒營養的<br>處理方法相當於暴力破解,也不排除往後產生其他 ERROR 的可能,故這邊不多贅述———</p>
<br>
<hr>
<p>如果有幸你也在想辦法處理 AddToAny 的問題,又懶得架 cdn 等方式</p>
<p>這邊提供整理後的檔案,歡迎參考。</p>
<p><a href="/share_file/shareButton1/addtoany.7z">addtoany.7z</a></p>
<p>MD5: <code>e4c6ac982c223e6449d1d962be077bfb</code><br>SHA1: <code>a9cc39cc5e9a7d0854d63b15a4801829c1718efb</code></p>
</content>
<category term="hexo" />
<category term="addtoany" />
<updated>2024-04-23T10:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2024/04/23/twikoo1/</id>
<title>最近想更換評論系統</title>
<link rel="alternate" href="https://smilin.net/2024/04/23/twikoo1/"/>
<content type="html"><p><img src="/img/post/twikoo1/twikoo-logo-home.png" alt="logo"></p>
<p>最近想把 blog 的評論系統換了</p>
<p>原本的 gittalk 免費,開源<br>巧妙利用 github 的 issue,在靜態網站上也能加入評論系統</p>
<p>存在些許不方便,仍瑕不掩瑜。</p>
<p>不過既然存在限制,總有人會想開發更好的工具<br>twikoo 就挺符合 blog 需求的</p>
<span id="more"></span>
<hr>
<h1 id="gittalk"><a href="#gittalk" class="headerlink" title="gittalk"></a>gittalk</h1><p>既然原本是用 gittalk,先說說 gittalk 的優點</p>
<ul>
<li>與 github page 的高度適配</li>
<li>基於 issue 特性,綁定 github 帳戶,防止小白</li>
</ul>
<p>兩邊都有的優點不提,大概是這些<br>至於缺點</p>
<ul>
<li>因為綁在 issue,評論必須先註冊 github</li>
<li>對中國使用者的支援較差(疑似)</li>
</ul>
<p><img src="/img/post/twikoo1/01.jpg" alt="01"></p>
<p>而且本站基於 gittalk ,魔改了許多功能</p>
<ul>
<li>撈取最新留言</li>
<li>撈取熱門留言</li>
<li>從外部撈取文章留言數</li>
</ul>
<p>替換評論系統,不只是舊有的評論會消失<br>也代表著這些功能都需要重新適配,或是棄用。</p>
<hr>
<h1 id="twikoo"><a href="#twikoo" class="headerlink" title="twikoo"></a>twikoo</h1><p><a href="https://twikoo.js.org/">官方文檔</a></p>
<p>twikoo 與 gittalk 不同,資料存放於 MongoDB<br>意味著我們需要自行架設 DB 跟 API Server</p>
<p>不過兩者在網路上都有許多免費資源可用,用來支持一個 blog 的運作綽綽有餘</p>
<p>說說這個評論系統的優點</p>
<ul>
<li>無須登入即可留言</li>
<li>避免騷擾留言,分別配有多種自動偵測垃圾留言的接口,也能開啟人工審核</li>
<li>暱稱&amp;信箱&amp;網址 的填寫方式,很有幾十年前,傳統 blog 那味,我超愛</li>
</ul>
<p>至於缺點</p>
<ul>
<li>比起 gittalk,由於個人資料是自由填寫,相對難以得知發文者的背景</li>
<li>與依附著 github issue 的 gittalk 相比,twikoo 於第三方架設 DB 跟 API Server 環境,長遠來看需要消耗更多的維護成本</li>
<li>以前的評論會全部消失,嗚嗚嗚</li>
</ul>
<hr>
<p><img src="/img/post/twikoo1/02.jpg" alt="02"></p>
<p>基本的配置已經做好了,只是還在猶豫是否該使用</p>
<p>個人 blog 要提高評論數還是比較難的,至少沒辦法跟社群平台競爭<br>在這個前提下,評論門檻相對高的 gittalk,這份缺點也會被不斷放大</p>
<p>但 gittalk 同樣有著他本身天然的優勢在——</p>
</content>
<category term="日記" />
<category term="hexo" />
<updated>2024-04-23T03:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2024/04/13/autoPixai/</id>
<title>自動領取 Pixai 每日獎勵</title>
<link rel="alternate" href="https://smilin.net/2024/04/13/autoPixai/"/>
<content type="html"><p><img src="/img/post/autoPixai/01.jpg" alt="title"></p>
<p>工程網址<br><a href="https://github.com/Mr-Smilin/auto-pixai">Github</a><br><a href="https://hub.docker.com/r/smile0301/auto-pixai">Docker Hub</a></p>
<p>近幾年 AI 工具日新月異<br>我也有幸接觸了 AI 繪圖的一鱗半爪</p>
<p>其中 <a href="https://pixai.art/">pixai</a> 是少有的雲端免費算圖網站</p>
<p>在 pixai 如果對產出來的圖感到滿意的話<br>可以透過 AI 進一步運算,產出會動的圖</p>
<span id="more"></span>
<hr>
<br>
<p>說是免費,其實還是有些限制的</p>
<p>在網站上的運算行為都需要消耗點數,無論是靜態或動態</p>
<p>而點數除了透過付費與活動取得以外<br>pixai 每日都有一萬點數可供會員領取,也就是每日獎勵</p>
<p><img src="/img/post/autoPixai/02.jpg" alt="每日獎勵"></p>
<p>只要每天領取就可以免費算圖了,整個佛心來著對吧</p>
<p>不過筆者最喜歡花費幾個小時來搞定原本一分鐘可以做到的事情(x</p>
<hr>
<br>
<p><a href="https://github.com/Mr-Smilin/auto-pixai">auto-pixai</a></p>
<p>輸入帳號跟密碼,該腳本執行一次就會自動進網站領取每日獎勵</p>
<p>使用 node.js 撰寫,另有 Docker 容器化,開箱即用</p>
<pre><code>docker pull smile0301/auto-pixai
docker run -e LOGINNAME=&lt;你的帳號&gt; -e PASSWORD=&lt;你的密碼&gt; --name &lt;container-name&gt; smile0301/auto-pixai
</code></pre>
</content>
<category term="node.js" />
<category term="教學" />
<category term="docker" />
<updated>2024-04-13T11:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2024/04/11/giveUp/</id>
<title>我的人生不需要英文</title>
<link rel="alternate" href="https://smilin.net/2024/04/11/giveUp/"/>
<content type="html"><p><img src="https://i.imgur.com/gwL59EQ.jpg" alt="title"></p>
<p>學不會,沒動力學,沒必要學</p>
<span id="more"></span>
<p>最近,大概半年,持續沒甚麼動力學習<br>只是乏味的原地踏步,工作著</p>
<p>以前明明每天都會抽空看一點知識的</p>
<p>原本覺得為了找到更好的工作,我應該開始加強英文,補回我以前怠惰學習的債務</p>
<p>事實是我對這東西真的完全沒有興趣</p>
<p>這幾天放棄學習英文後,逐漸找回了那個可以繼續對學習程式有熱忱的自己</p>
<p>感覺有點悲哀,但又很歡喜</p>
<p>也許這個人就是如此,既然沒辦法揠苗助長,那就順其自然吧。</p>
</content>
<category term="日記" />
<updated>2024-04-11T04:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2023/10/27/rust_learning_02/</id>
<title>Rust 學習紀錄[2] = Rust 的 NPM</title>
<link rel="alternate" href="https://smilin.net/2023/10/27/rust_learning_02/"/>
<content type="html"><p>讓我們接著原本的進度繼續</p>
<span id="more"></span>
<br>
<h1 id="Cargo"><a href="#Cargo" class="headerlink" title="Cargo"></a>Cargo</h1><br>
<p><code>Cargo</code> 是 <code>Rust</code> 的專案建置工具以及套件管理器<br>恩..聽起來是個 <code>npm</code></p>
<p>我們在安裝 <code>rustup</code> 時已經一併安裝了 <code>Cargo</code><br>使用 <code>cargo --version</code> 來確認是否正確安裝</p>
<pre><code>cargo --version // cargo 1.73.0 (9c4383fb5 2023-08-26)
</code></pre>
<p>沒問題的話,接著使用 <code>Cargo</code> 創建跟昨天相似的專案。</p>
<br>
<h1 id="創建專案"><a href="#創建專案" class="headerlink" title="創建專案"></a>創建專案</h1><br>
<p>在專案目錄(rust_project)下輸入創建專案的指令</p>
<p><code>cargo new _02_hello_cargo</code></p>
<p>現在我們有名為 <code>_02_hello_cargo</code> 的資料夾,裡面結構如下</p>
<pre><code>src
main.rs
.gitignore
Cargo.toml
</code></pre>
<p><code>src</code> - 常見程式開發檔案目錄,看就知道</p>
<p><code>src\main.rs</code> - 主程式</p>
<p><code>.gitignore</code> - git 的描述文件,主要功能是防止裡面提到的檔案在 git 傳輸時被包進去(Ex:log&#x2F;target)</p>
<p><code>Cargo.toml</code> - 打開來看了下,應該是專案描述文件,對應 node 的 <code>package.json</code></p>
<br>
<h2 id="編譯-build"><a href="#編譯-build" class="headerlink" title="編譯(build)"></a>編譯(build)</h2><br>
<p>試著 build 起這個專案看看<br><code>cargo build</code></p>
<p>執行後,專案內多出了幾個檔案</p>
<pre><code>target
debug
_02_hello_cargo.exe
more debug files...
.rustc_info.json
CACHEDIR.TAG
Cargo.lock
</code></pre>
<p><code>Cargo.lock</code> - 對應 node 的 <code>package-lock.json</code></p>
<p><code>target\debug\_02_hello_cargo.exe</code> - 我們產出的執行檔,debug 大概是 building 的默認方式,之後應該會有相對嚴謹的方法</p>
<pre><code>.\target\debug\_02_hello_cargo // Hello, world!
</code></pre>
<br>
<h2 id="編譯並運行-run"><a href="#編譯並運行-run" class="headerlink" title="編譯並運行(run)"></a>編譯並運行(run)</h2><br>
<p>Cargo 有提供一種命令,可以將編譯與運行合併成一個指令</p>
<pre><code>cargo run // Hello, world!
</code></pre>
<p>如果開發檔案沒有修改,<code>cargo run</code> 不會重建 target<br>加上合併兩個步驟,比 <code>cargo build</code> 方便許多。</p>
<br>
<h2 id="檢查-check"><a href="#檢查-check" class="headerlink" title="檢查(check)"></a>檢查(check)</h2><br>
<p>除了編譯與運行,Cargo 當然也提供了檢查命令</p>
<pre><code>cargo check
/**
Checking _02_hello_cargo v0.1.0(C:\my\01\git\rust\_02_hello_cargo)
Finished dev [unoptimized + debuginfo] target(s) in 0.07s
**/
</code></pre>
<p>單純的 <code>check</code> 比 <code>build</code> 快上許多<br>在自動化部屬等一類場景中廣泛運用。</p>
<br>
<h2 id="正式編譯-release"><a href="#正式編譯-release" class="headerlink" title="正式編譯(release)"></a>正式編譯(release)</h2><br>
<pre><code>cargo build --release
/**
Compiling _02_hello_cargo v0.1.0 (C:\my\01\git\rust\_02_hello_cargo)
Finished release [optimized] target(s) in 0.36s
**/
</code></pre>
<p>使用 <code>--release</code> building 的檔案會放在 <code>target\release</code><br>與 debug 版本不同,release 的編譯過程比較久,但會最佳化產出的結果</p>
<p>因此,使用 debug 開發可以有效降低等待編譯的時間<br>需要發佈檔案時,再使用 release。</p>
<br>
<h1 id="今日小結"><a href="#今日小結" class="headerlink" title="今日小結"></a>今日小結</h1><br>
<p><code>cargo --version</code> 驗證版本</p>
<p><code>cargo new &#123;project_name&#125;</code> 創建專案</p>
<p><code>cargo build</code> 編譯專案</p>
<p><code>cargo run</code> 編譯&amp;運行專案</p>
<p><code>cargo check</code> 驗證專案</p>
<p><code>cargo build --release</code> 正式版本的編譯</p>
</content>
<category term="Rust" />
<updated>2023-10-27T13:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2023/10/27/rust_learning_01/</id>
<title>Rust 學習紀錄[1] = 日誌中的教學</title>
<link rel="alternate" href="https://smilin.net/2023/10/27/rust_learning_01/"/>
<content type="html"><p>工欲善其事,必先利其器<br>想學一門語言,要從一篇教學文檔找起</p>
<p><a href="https://doc.rust-lang.org/book/">官方文檔</a></p>
<p>恩,官方文檔看起來挺不錯的,就這個吧</p>
<p>這篇文撰寫當下,文檔對應 Rust 版本為 <code>Rust 1.67.1 (released 2023-02-09) or later</code><br>如果因為版本不同造成閱讀的困擾的話,可以在學會安裝 Rust 後自行降版學習。</p>
<span id="more"></span>
<br>
<h1 id="安裝"><a href="#安裝" class="headerlink" title="安裝"></a>安裝</h1><br>
<p>說是 Rust,其實第一個遇到的是 <code>rustup</code></p>
<p><a href="https://www.rust-lang.org/tools/install">Window 安裝 rustup</a></p>
<p>安裝過程一直 Enter 就好,之後在 cmd 下 <code>rustc --version</code></p>
<p>得到版本號 <code>rustc 1.73.0 (cc66ad468 2023-10-03)</code>,表示安裝成功</p>
<p>其他比較常用的指令還有</p>
<p>更新 Rust 版本 - <code>rustup update</code></p>
<p>卸載 Rust 跟 rustup - <code>rustup self uninstall</code></p>
<p>查看 Rust Doc 本機離線版 - <code>rustup doc</code></p>
<br>
<p>根據 Rust 自己的說明,約莫每兩周會有一次小版更新<br>也因此,除非目標是維護專案,理論上更新版本 &amp; 追蹤文檔改動會很頻繁。</p>
<br>
<h1 id="HELLO-RUST!"><a href="#HELLO-RUST!" class="headerlink" title="HELLO RUST!"></a>HELLO RUST!</h1><br>
<p>首先讓我們創建一個資料夾</p>
<p><code>rust_project</code></p>
<p>往後任何的 Rust 程式都會放在這個資料夾下<br>現在在專案資料夾下新增我們要製作的第一個 Rust 程式</p>
<p><code>rust_project\_01_hello_rust\main.rs</code></p>
<pre><code>fn main() &#123;
println!(&quot;Hello, Rust!&quot;);
&#125;
</code></pre>
<p>之後打開 cmd ,輸入以下</p>
<pre><code>rustc main.rs
.\main.exe // 印出 Hello, Rust!
</code></pre>
<p>如此,我們完成了第一隻 Rust 程式。<br><del>超快!!</del><br><del>嘛、畢竟是 Hello World 嘛</del></p>
<br>
<h1 id="感想"><a href="#感想" class="headerlink" title="感想"></a>感想</h1><br>
<p>首先注意到的,是執行的指令拆成了兩個<br>分別是 <strong>編譯</strong> 的行為與 <strong>執行</strong> 的行為</p>
<p>編譯出來的檔案是 <code>.exe</code>,意味著寫好的程式不需要借助 Rust 就能運行<br>這在筆者之前的經驗中是比較少見的</p>
<p>同樣被編譯出來的還有一個 <code>main.pdb</code><br>暫時不知道是做甚麼用的,之後學到再回來更新</p>
<br>
<p><code>println!();</code><br>在這段酷似 JAVASCRIPT 風格的 JAVA 式命名輸出語法上,突兀的出現了個 <code>!</code></p>
<p>這是 Rust 的 <code>macro</code><br>比起 Rust 的 <code>function</code>,<code>macro</code> 更接近 JAVASCRIPT 的 <code>function</code></p>
<p>Rust 中,存在 <code>fn(function)</code> 跟 <code>macro_rules(macro)</code><br>他們的差別主要在於 <code>function(函式)</code> 的參數數量是固定的<br>而 <code>macro(巨集)</code> 則可以動態傳入參數</p>
<p><code>println</code> 預期要能夠傳入多個參數,當他要做格式化傳輸時</p>
<pre><code>println!(&quot;Hello, Macro! My name is &#123;&#125;!&quot;, &quot;Smilin&quot;)
</code></pre>
<p>比起 <code>fn</code>,<code>macro_rules</code> 顯然更符合需求。</p>
<br>
<h1 id="今日小結"><a href="#今日小結" class="headerlink" title="今日小結"></a>今日小結</h1><br>
<p><code>rustc --version</code> 驗證版本</p>
<p><code>rustup update</code> 更新 Rust</p>
<p><code>rustup self uninstall</code> 反安裝 Rust</p>
<p><code>rustup doc</code> 運行 Rust Local Doc</p>
<p><code>rustc main.rs</code> 編譯 rs 檔</p>
<p><code>.pdb</code> ???</p>
<p><code>macro</code> 巨集 &#x2F; 宏,可以傳入動態參數</p>
<p><code>function</code> 函式 &#x2F; 方法,宣告時就要規範好參數數量與型別</p>
<br>
<h1 id="資料參考"><a href="#資料參考" class="headerlink" title="資料參考"></a>資料參考</h1><br>
<p><a href="https://doc.rust-lang.org/book/">Rust 官方文檔</a></p>
<p><a href="https://www.rust-lang.org/tools/install">Window 安裝 rustup</a></p>
</content>
<category term="Rust" />
<updated>2023-10-27T10:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2023/10/27/rust_learning_00/</id>
<title>Rust 學習紀錄[0] = 前言</title>
<link rel="alternate" href="https://smilin.net/2023/10/27/rust_learning_00/"/>
<content type="html"><p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Rust_programming_language_black_logo.svg/216px-Rust_programming_language_black_logo.svg.png" alt="Rust"></p>
<br>
<p>2021 年 2 月,Rust 基金會成立</p>
<p>以 AWS、GOOGLE 等多家資訊巨頭為首<br>因為看好 Rust 兼顧了高效能 &amp; 安全性而投資<br>使得 Rust 這兩年有了巨大的成長。</p>
<p>這也是為什麼,近幾年工程師無論如何不願意<br>多少也會聽過 Rust 的名號,隱隱有與 C++ 並駕齊驅的勢頭。</p>
<span id="more"></span>
<p>筆者平常習慣 node.js or java 的開發,接觸 Rust 算是偶然<br>剛好想嘗試所謂能真正實現高效能程式碼(沒碰過 C++)</p>
<p>做為學習動力,一方面會將自己的學習過程發布在 blog<br>另一方面打算在學到一個階段後,試著用 Rust 構建一個微型社群平台,當作目標。</p>
<p>本次系列與其說是教學,更像是日記一類的東西,如果能激起看這篇文的你的興趣的話,我會很高興的。</p>
</content>
<category term="Rust" />
<updated>2023-10-27T04:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2023/09/15/deepCopyAndShallowCopy/</id>
<title>淺談 js 深拷貝與淺拷貝的差異</title>
<link rel="alternate" href="https://smilin.net/2023/09/15/deepCopyAndShallowCopy/"/>
<content type="html"><h1 id="Deep-copy-和-Shallow-copy"><a href="#Deep-copy-和-Shallow-copy" class="headerlink" title="Deep copy 和 Shallow copy"></a>Deep copy 和 Shallow copy</h1><br>
<p>先來個考題:</p>
<pre><code>a = &#123; foo: &quot;bar&quot; &#125;;
b = a;
b.foo = &quot;baz&quot;;
console.log(a.foo); // 印出?
</code></pre>
<span id="more"></span>
<details>
<summary>答案</summary>
<br>
baz
</details>
<p><br><br></p>
<p>下一題:</p>
<pre><code>a = &#123; foo: &quot;bar&quot; &#125;;
b = structuredClone(a); // 深拷貝
b.foo = &quot;baz&quot;;
console.log(a.foo); // 印出?
</code></pre>
<details>
<summary>答案</summary>
<br>
bar
<br><br>
深拷貝(Deep Copy) 可以將內層對象一併拷貝
</details>
<p><br><br></p>
<hr>
<br>
<h2 id="Shallow-copy"><a href="#Shallow-copy" class="headerlink" title="Shallow copy"></a>Shallow copy</h2><br>
<p>淺拷貝(Shallow Copy) 與深拷貝同樣是用來拷貝物件層級,避免指向同一記憶體位置</p>
<p>與深拷貝不同的是,淺拷貝只會複製第一層的對象,如果是 <code>Object.Object</code> 的結構就沒轍。</p>
<br>
<h3 id="Object-assign"><a href="#Object-assign" class="headerlink" title="Object.assign"></a>Object.assign</h3><br>
<p><code>Object.assign</code> 屬於淺拷貝(Shallow Copy)<br>在上述案例中,可以得到跟深拷貝一樣的結果</p>
<pre><code>a = &#123; foo: &#123; fpp: &quot;bar&quot; &#125; &#125;;
b = Object.assign(&#123;&#125;, a);
b.foo.fpp = &quot;baz&quot;;
console.log(a.foo.fpp); // 印出baz
</code></pre>
<br>
<h3 id="解構賦值"><a href="#解構賦值" class="headerlink" title="解構賦值"></a>解構賦值</h3><br>
<p>解構賦值是 <code>ES6</code> 以後的語法糖,同樣屬於淺拷貝</p>
<pre><code>const a = &#123; b: 1 &#125;;
const c = &#123; ...a &#125;; // 解構賦值
c.b = 2;
console.log(a); // &#123; b: 1 &#125;
</code></pre>
<p>得益於其精簡的代碼,實務上很常使用。</p>
<p><br><br></p>
<hr>
<br>
<h2 id="Deep-copy"><a href="#Deep-copy" class="headerlink" title="Deep copy"></a>Deep copy</h2><br>
<p>與前面提到的淺拷貝不同,深拷貝對於深層結構也能一併複製</p>
<br>
<h3 id="早期的深拷貝"><a href="#早期的深拷貝" class="headerlink" title="早期的深拷貝"></a>早期的深拷貝</h3><pre><code>JSON.parse(JSON.stringify());
</code></pre>
<p>這個寫法大致上有以下缺點:</p>
<ul>
<li>忽略 <code>function</code></li>
<li>忽略原形鏈</li>
<li>忽略 <code>undefined</code></li>
<li>子層太多會導致 <code>stack overflow</code></li>
</ul>
<p>儘管如此,由於已經可以處理大多狀況<br>如果不是為了性能或是特殊邏輯,此寫法已經夠用,是常見的深拷貝實現。</p>
<br>
<h3 id="structuredClone"><a href="#structuredClone" class="headerlink" title="structuredClone"></a>structuredClone</h3><p><code>structuredClone</code> 是 <code>node.js</code> 17 版以後支援的官方深拷貝實現</p>
<p>目前各大瀏覽器默認支援此語法</p>
<p><img src="https://i.imgur.com/tPXjO1o.png" alt="1"></p>
<br>
<p><code>structuredClone</code> 存在一些限制</p>
<p>不允許結構中存在 <code>Error</code> 、 <code>Function</code> 以及 <code>DOM</code> 對象</p>
<p>不保留 <code>RegExp</code> 對象的 <code>lastIndex</code></p>
<p>不保留 <code>read-only</code> 等描述符,即無法限制 <code>setters</code> <code>getters</code></p>
<p>不保留原形鏈</p>
</content>
<category term="javascript" />
<updated>2023-09-15T04:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2023/09/11/alist-file-error/</id>
<title>Alist 單檔太大上傳失敗,思路整理</title>
<link rel="alternate" href="https://smilin.net/2023/09/11/alist-file-error/"/>
<content type="html"><p><strong>註:本文並沒有完全解決遇到的上傳問題</strong><br><strong>筆者只想到替代方案,曲線救國</strong></p>
<br>
<p>筆者是自建雲端的愛用者,目前使用 Alist</p>
<p>前一陣子因為自身需求,添加了 Cloudflare 反向代理</p>
<p>原本一切看起來都很美好,但某天上傳檔案時才發現不對,只要檔案大於 100 MB 就有機會遇到 413 問題。</p>
<p><img src="https://i.imgur.com/rNNhTq5.png" alt="1"></p>
<p><a href="https://alist.nn.ci/zh/guide/install/reverse-proxy.html">官方的反向代理配置</a></p>
<p>可以看到,文檔下大多也是哀鴻遍野,看來只要配置了反代很容易就會碰到這個問題</p>
<p>尤其文檔不支援 Cloudflare,實在頭痛..</p>
<span id="more"></span>
<h1 id="問題排查"><a href="#問題排查" class="headerlink" title="問題排查"></a>問題排查</h1><h2 id="NGINX-設定-client-max-body-size"><a href="#NGINX-設定-client-max-body-size" class="headerlink" title="NGINX 設定 client_max_body_size"></a>NGINX 設定 client_max_body_size</h2><p>參考資料時,大多資料都指向是 NGINX 設定的問題<br>只要將 <code>client_max_body_size</code> 上限拉高即可解決</p>
<pre><code>server &#123;
.........
location / &#123;
....
client_max_body_size 10G;
....
&#125;
.........
&#125;
</code></pre>
<p>不過筆者並沒有使用到 NGINX,此解顯然並非這次遇到的問題</p>
<br>
<h2 id="Cloudflare-緩存問題"><a href="#Cloudflare-緩存問題" class="headerlink" title="Cloudflare 緩存問題"></a>Cloudflare 緩存問題</h2><p>爬文發現有人提到可能是 Cloudflare 緩存的問題</p>
<p>在 Rule -&gt; Page Rules -&gt; Create Page Rule</p>
<p><img src="https://i.imgur.com/N8gi01N.png" alt="2"></p>
<p>之後再到 Caching -&gt; Cache Rules -&gt; Create rule</p>
<p><img src="https://i.imgur.com/TAkvVl3.png" alt="3"></p>
<p>設定完後再上傳,成功迴避掉 413 問題!</p>
<br>
<h1 id="新的問題"><a href="#新的問題" class="headerlink" title="新的問題"></a>新的問題</h1><p>甜美的日子沒過多久<br>雖然照著上述配置後,不會再出現 413 了,但..</p>
<p><img src="https://i.imgur.com/hHjLAns.png" alt="4"></p>
<p>馬上就遇到新的錯誤了 QQ…</p>
<p>這個問題問 google 大神也沒甚麼好辦法<br>沒辦法囉,只好再次自己動手檢查</p>
<h2 id="測試過程"><a href="#測試過程" class="headerlink" title="測試過程"></a>測試過程</h2><p>Error Log 只寫了網路問題,偶而會提示</p>
<pre><code>&#123;&quot;message&quot;:&quot;A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received&quot;&#125;
</code></pre>
<p>猜測是 Cloudflare 提早關閉了連線</p>
<p>有趣的是只要同時下載檔案,上傳不會失敗</p>
<p>開啟 Cloudflare Development Mode ,上傳失敗</p>
<h2 id="Cloudflare-免費版限制"><a href="#Cloudflare-免費版限制" class="headerlink" title="Cloudflare 免費版限制"></a>Cloudflare 免費版限制</h2><p><img src="https://i.imgur.com/lm8M9jc.png" alt="5"></p>
<p>Cloudflare 免費版用戶上傳檔案時,有著 100MB 的上限</p>
<p>Alist 僅支援單檔上傳<br><a href="https://github.com/alist-org/alist/issues/5176">github issue</a></p>
<p>想來或許就是在這關上卡住了</p>
<p>如開發者所說, Alist 的上傳存在一定的缺陷</p>
<p>就算不使用 Cloudflare,直連上傳過大的檔案也有機會失敗</p>
<p>好在除此之外功能正常,頂多不透過網頁,自行額外實現上傳方法即可(Ex:webdav&#x2F;ftp&#x2F;nasGui&#x2F;local..)</p>
<br>
<hr>
<p>文章參考:<br><a href="https://lanwp.org/12-cloudreve-nextcloud-alist-and-cloudflare_cdn/">https://lanwp.org/12-cloudreve-nextcloud-alist-and-cloudflare_cdn/</a></p>
</content>
<category term="Alist" />
<category term="Cloudflare" />
<updated>2023-09-11T10:00:00.000Z</updated>
</entry>
<entry>
<id>https://smilin.net/2023/09/06/alist-started/</id>
<title>Alist 好用的自建雲端分享</title>
<link rel="alternate" href="https://smilin.net/2023/09/06/alist-started/"/>
<content type="html"><p>隨著 GOOGLE &#x2F; ONEDRIVE 等空間限制增多</p>
<p>筆者轉為使用自架雲端方案一段時間,其中特別中意 Alist 的畫面</p>
<p><img src="https://i.imgur.com/cwZF7fX.png" alt="1"></p>
<p>高自定義的 UI,強大的用戶管理<br>最重要的是在目錄下默認讀取 readme.md 做介紹!</p>
<p>整理雲端檔案,最常遇到的難題<br>就是多年後很難輕易在一堆檔案中找到自己需要的資料</p>
<p>除此以外還支援</p>
<ul>
<li>元數據(載入特定目錄會跳出的訊息)</li>
<li>文件搜索</li>
<li>雲端掛載(GD&#x2F;OD&#x2F;MEGA&#x2F;還有一堆..)</li>
</ul>
<p>使用 Alist 不僅能讓雲端變得美觀,還能很輕鬆的管理文件</p>
<span id="more"></span>
<h2 id="Alist-官方文檔"><a href="#Alist-官方文檔" class="headerlink" title="Alist 官方文檔"></a><a href="https://alist.nn.ci/zh/">Alist 官方文檔</a></h2><p><img src="https://i.imgur.com/pbxhpkZ.png" alt="2"></p>
<p>從文檔首頁可以感受到,Alist 有著強大的功能</p>
<p>因為支援中文,在閱讀文檔時不會遇到障礙</p>
<h2 id="環境建置"><a href="#環境建置" class="headerlink" title="環境建置"></a>環境建置</h2><p>筆者使用 Docker 運行 Alist</p>
<pre><code>docker pull xhofe/alist:v3.13.2
docker run -d --restart=always -v &#123;你的本機目錄&#125;:/opt/alist/data -p 5244:5244 -e PUID=0 -e PGID=0 -e UMASK=022 --name=&quot;alist&quot; xhofe/alist:v3.13.2
</code></pre>
<p>記得將上方的 {你的本機目錄} 替換成你的環境</p>
<p>Container run 起後使用這段指令查看預設帳號密碼</p>
<pre><code>docker exec -it alist ./alist admin
</code></pre>
<p><img src="https://i.imgur.com/sKMQUPf.png" alt="3"></p>
<p><img src="https://i.imgur.com/wvAH9Od.png" alt="4"></p>
<p>登入成功後我們會回到首頁,這裡目前甚麼都沒有</p>
<p>在網址後方加入 @manage 進入控制台</p>
<p><img src="https://i.imgur.com/8ziYJ8B.png" alt="5"></p>
<p>這邊先將管理員帳密改成你好記的樣子</p>
<p>在存儲可以添加需要加入到 Alist 的空間<br>從基本的本地環境到雲端都可以放在 Alist 管理</p>
<p>設置雲端掛載時記得根據 Alist 版本,查看對應的文檔,留意任何留言,記得備份~</p>
<p>筆者這邊以本地環境做示範</p>
<br>
<hr>
<br>
<p>首先到設定 {你的本機目錄} 的地方,創建一個資料夾</p>
<p>這會做為未來我們掛載本地檔案的路徑</p>
<p><img src="https://i.imgur.com/FKzeLks.png" alt="6"></p>
<ul>
<li>驅動選擇 本地存儲</li>
<li>掛載路徑 &#x2F;{資料夾名稱}</li>
<li>根資料夾路徑 &#x2F;opt&#x2F;alist&#x2F;data&#x2F;{資料夾名稱}</li>
</ul>
<p><img src="https://i.imgur.com/oCqbTCR.png" alt="7"><br><img src="https://i.imgur.com/mOr53lK.png" alt="8"></p>
<p>設定完大致如上</p>
<br>
<p><img src="https://i.imgur.com/ZimHdEW.png" alt="9"></p>
<p>回首頁看就會有空間了!</p>
<br>
<h2 id="實用-CSS"><a href="#實用-CSS" class="headerlink" title="實用 CSS"></a>實用 CSS</h2><p>Alist 後台的 “設置” ,可以調整絕大多數的 UI 畫面<br>不過如果想自定義一些細節,推薦使用 CSS 達成</p>
<p>設置 -&gt; 全域設定 -&gt; 自定義頭部</p>
<p>可以在這做自定義 CSS 的添加<br>以下提供一些不錯的樣式</p>
<br>
<h3 id="去除網站圖標與搜索"><a href="#去除網站圖標與搜索" class="headerlink" title="去除網站圖標與搜索"></a>去除網站圖標與搜索</h3><pre><code>&lt;style&gt;.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iiOacaA-css &#123;display: none!important;&#125;&lt;/style&gt;
</code></pre>
<h3 id="站點公告去除-X-關閉按鈕"><a href="#站點公告去除-X-關閉按鈕" class="headerlink" title="站點公告去除 X 關閉按鈕"></a>站點公告去除 X 關閉按鈕</h3><pre><code>&lt;style&gt;.notify-render .hope-close-button&#123;display: none;&#125;&lt;/style&gt;
</code></pre>
<h3 id="使用背景圖-亮色背景-GIF-可用"><a href="#使用背景圖-亮色背景-GIF-可用" class="headerlink" title="使用背景圖(亮色背景)(GIF 可用)"></a>使用背景圖(亮色背景)(GIF 可用)</h3><pre><code>&lt;style&gt;.hope-ui-light&#123;background-image: url(&quot;&quot;)!important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;&#125;&lt;/style&gt;
</code></pre>
<h3 id="使用背景圖-暗色背景-GIF-可用"><a href="#使用背景圖-暗色背景-GIF-可用" class="headerlink" title="使用背景圖(暗色背景)(GIF 可用)"></a>使用背景圖(暗色背景)(GIF 可用)</h3><pre><code>&lt;style&gt;.hope-ui-dark &#123;background-image: url(&quot;&quot;) !important;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;&#125;&lt;/style&gt;
</code></pre>
<h3 id="列表改透明-亮色背景"><a href="#列表改透明-亮色背景" class="headerlink" title="列表改透明(亮色背景)"></a>列表改透明(亮色背景)</h3><pre><code>&lt;style&gt;.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css&#123;background-color: rgba(255, 255, 255, 0.5) !important;&#125;&lt;/style&gt;
</code></pre>
<h3 id="列表改透明-暗色背景"><a href="#列表改透明-暗色背景" class="headerlink" title="列表改透明(暗色背景)"></a>列表改透明(暗色背景)</h3><pre><code>&lt;style&gt;.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css&#123;background-color:rgb(0 0 0 / 50%) !important;&#125;&lt;/style&gt;
</code></pre>
<h3 id="元信息改透明-亮色背景"><a href="#元信息改透明-亮色背景" class="headerlink" title="元信息改透明(亮色背景)"></a>元信息改透明(亮色背景)</h3><pre><code>&lt;style&gt;.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css&#123;background-color: rgba(255, 255, 255, 0.5)!important;&#125;&lt;/style&gt;
</code></pre>
<h3 id="元信息改透明-暗色背景"><a href="#元信息改透明-暗色背景" class="headerlink" title="元信息改透明(暗色背景)"></a>元信息改透明(暗色背景)</h3><pre><code>&lt;style&gt;.hope-c-PJLV.hope-c-PJLV-iiuDLME-css&#123;background-color:rgb(0 0 0 / 50%)!important;&#125;&lt;/style&gt;
</code></pre>
<h3 id="去除尾頁"><a href="#去除尾頁" class="headerlink" title="去除尾頁"></a>去除尾頁</h3><pre><code>&lt;style&gt;.footer &#123;display: none !important;&#125;]&lt;/style&gt;
</code></pre>
<h3 id="移除下載選項"><a href="#移除下載選項" class="headerlink" title="移除下載選項"></a>移除下載選項</h3><pre><code>&lt;style&gt;.hope-select__trigger.hope-c-kvTTWD.hope-c-huZphZ.hope-c-kvTTWD-hYRNAb-variant-filled.hope-c-kvTTWD-gfwxhr-size-md.hope-c-huZphZ-cIGthf-cv.hope-c-PJLV.hope-c-PJLV-ijSQbqe-css&#123;display: none !important;&#125;&lt;/style&gt;
</code></pre>
<br>
<p>推薦一些網站:<br><a href="https://anwen-anyi.github.io/">Alist 魔改代碼分享</a><br><a href="https://telegra.ph/AList-UI-01-11">CSS 參考</a></p>
</content>
<category term="Alist" />
<updated>2023-09-06T02:00:00.000Z</updated>