/
index.html
808 lines (540 loc) · 29 KB
/
index.html
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
<!DOCTYPE html>
<html lang="zh-Hant-TW" class="has-navbar-fixed-top">
<head><meta name="generator" content="Hexo 3.9.0">
<meta charset="utf-8">
<title>Askie's Coding Life</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="I am a front-end developer in Taiwan. Love to share things with others.">
<meta name="keywords" content="Web Developer,Front End,JavaScipt">
<meta name="description" content="I am a front-end developer in Taiwan. Love to share things with others.">
<meta name="keywords" content="Web Developer,Front End,JavaScipt">
<meta property="og:type" content="website">
<meta property="og:title" content="Askie's Coding Life">
<meta property="og:url" content="https://askie.today/index.html">
<meta property="og:site_name" content="Askie's Coding Life">
<meta property="og:description" content="I am a front-end developer in Taiwan. Love to share things with others.">
<meta property="og:locale" content="zh-tw">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Askie's Coding Life">
<meta name="twitter:description" content="I am a front-end developer in Taiwan. Love to share things with others.">
<meta name="twitter:creator" content="@askiebaby">
<meta name="twitter:site" content="https://twitter.com/askiebaby">
<meta property="fb:admins" content="1505678310">
<meta property="fb:app_id" content="326735094614431">
<link rel="icon" href="/assets/favicon.png">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ovo|Source+Code+Pro">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css">
<link rel="stylesheet" href="/css/style.css">
<script defer src="//use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132394454-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-132394454-1');
</script>
</head>
<body>
<nav class="navbar is-transparent is-fixed-top navbar-main" aria-label="主要導覽列">
<div class="container">
<h1 class="navbar-brand" aria-label="Askie's coding life">
<a class="navbar-item navbar-logo" title="Askie's coding life" href="/">
<img src="/assets/askiebaby.svg" alt="" height="28">
</a>
<div class="navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
</h1>
<div class="navbar-menu navbar-start">
<a class="navbar-item " href="/archives">Archives</a>
<a class="navbar-item " href="/categories">Categories</a>
<a class="navbar-item " href="/about">About</a>
</div>
<div class="navbar-menu navbar-end">
<a class="navbar-item search" title="搜尋" href="javascript:;">
<i class="fas fa-search"></i>
</a>
<a class="navbar-item" title="GitHub" href="https://github.com/askiebaby">
<i class="fab fa-github"></i>
</a>
<a class="navbar-item" title="Medium" href="https://medium.com/@askiebaby">
<i class="fab fa-medium-m"></i>
</a>
<a class="navbar-item" title="Twitter" href="https://twitter.com/askiebaby">
<i class="fab fa-twitter"></i>
</a>
<a class="navbar-item" title="Linkedin" href="https://www.linkedin.com/in/askie-lin-744985145/">
<i class="fab fa-linkedin"></i>
</a>
<a class="navbar-item" title="Instagram" href="https://www.instagram.com/askiebaby/">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</nav>
<section class="section">
<div class="container">
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/2021-retrospect/" itemprop="url">回顧 2021 必須的吧</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2022-01-02T14:46:21.000Z" itemprop="datePublished">1月 2 2022</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/diary/">diary</a>
</span>
<span class="column is-narrow">
9 分鐘 的閱讀時間 (約 1317 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<p><img src="../images/2021-retrospect.jpeg" alt="寬板滑水的船"></p>
<p>停更很久，一年又飛走，對 2021 的結論，曾以為是採著偏消極的態度過生活，仔細想似乎是因為太過堅持要把日子積極地過，那就把行程表塞滿，沒有給自己喘息的時間，所以前半年努力衝刺，後半年失去動力而萎糜不振，成長的幅度不如預期。</p>
<p>但我相信應該不至於如此不堪吧？那就一一羅列，實際上 2020 年也嘗試了很多事物，達成某些里程碑，因為每個經驗與經歷是如此重要，那就寫下來，讓我別忘記每個小小而堅定的決定，多麽好玩。明年再調整看看怎樣的步調，可以舒服地、不覺匆忙地繼續向前。</p>
<h3>第一次</h3>
<ul>
<li>第一次「志工帶國小營隊」，學著帶遊戲活動、回歸初心地與小孩們相處，嘗試帶給他們資訊素養和難忘的童年回憶。</li>
<li>第一次「浮潛與水肺深潛」，看到大自然的可貴、水有多清澈。</li>
<li>第一次「去綠島」，夜晚躺在沙灘上聽海聲看撒滿硬幣的星空，偶有流星落下。</li>
<li>第一次「在家工作」這麼久的時間，擁有很多必須得誠實面對自己的時間。</li>
<li>第一次「嘗試寬板滑水」，覺得自己很有潛力，很快就能站起來。</li>
<li>第一次「弄線上課程」，從溝通、備課、開講到影片剪輯都碰了一輪。</li>
<li>第一次「上美甲基礎課」，知道為指甲保養的原理和流程。</li>
<li>第一次「玩線上遊戲」，結交了不同類型的朋友，拿到了最強王國。</li>
<li>第一次「爬百岳」，清晨兩三點起床，在合歡北峰頂煮咖啡、吃早餐，穿梭雲海、欣賞日出。</li>
<li>第一次「穿和服」，解解從未出國而今年絕對不適合出國的饞。</li>
<li>第一次「使用沖牙機」，透過牙醫 Youtuber 了解正確的牙齒保健觀念，牙齒美白、刷牙順序、角度等等。</li>
<li>第一次「帶爸媽出去玩」，用單眼紀錄了爸媽難得開心的兩人合照。</li>
</ul>
<p class="article-more-link">
<a href="/2021-retrospect/#more">閱讀我吧！</a>
</p>
</div>
</article>
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/trendmicro-volunteer-club-2021/" itemprop="url">當趨勢志工社來到花蓮吉安國小 2021</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2021-04-11T06:51:27.000Z" itemprop="datePublished">4月 11 2021</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/Volunteer/">Volunteer</a>
</span>
<span class="column is-narrow">
6 分鐘 的閱讀時間 (約 958 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<p><img src="https://i.imgur.com/7SEEjcZ.png" alt="從台北出發到花蓮"><br>
2021 年 1 月 21 日～ 1 月 23 日，當我們這群魔法精靈們來到花蓮縣的吉安國小，和 21 個中高年級的魔法師們，一起進入魔法學校，從頭體驗魔法的冒險故事！</p>
<h2>魔法精靈們 = 志工</h2>
<p><img src="https://i.imgur.com/u6P5yCn.jpg" alt="第一次參與志工社說明會"></p>
<blockquote>
<p>第一次參與志工社說明會</p>
</blockquote>
<p>加入志工社的決定，那時，是進入趨勢接近一年的時間點。一直都知道公司有非常多元的社團，包含各種運動類型、理財、演講社等等，能文能武，而社團能成熟，全是由許多許多熱心的 Trenders 組織而成，無私付出，在有興趣的領域一同切磋、交流。</p>
<p class="article-more-link">
<a href="/trendmicro-volunteer-club-2021/#more">閱讀我吧！</a>
</p>
</div>
</article>
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/git-pgp-keys/" itemprop="url">新增 Git GPG Key 增加安全性</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2020-12-19T11:52:23.000Z" itemprop="datePublished">12月 19 2020</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/Git/">Git</a>
</span>
<span class="column is-narrow">
3 分鐘 的閱讀時間 (約 394 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<p>GPG Key 可以讓我們的 commit 都確定是我們本人所新增的。我覺得很不錯！！推薦大家使用。</p>
<p>可以照著這篇文章做：<a href="https://blog.keenthinker.com/github-signed-commits" target="_blank" rel="noopener">參考文章</a> from Peter。</p>
<p><img src="https://i.imgur.com/2M1kRmu.png" alt="a verified badge"></p>
<h2>Preparation</h2>
<ul>
<li>下載並安裝 GPG 的 CLI 工具：<a href="https://sourceforge.net/p/gpgosx/docu/Download/" target="_blank" rel="noopener">Mac OS X 下載處</a>，有兩個檔案，分別是 DMG 和 sigature。</li>
</ul>
<p class="article-more-link">
<a href="/git-pgp-keys/#more">閱讀我吧！</a>
</p>
</div>
</article>
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/suicide-explanind-episode-1/" itemprop="url">幸福捕手筆記：自殺的五大迷思</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2020-11-25T16:01:53.000Z" itemprop="datePublished">11月 26 2020</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/心理/">心理</a>
</span>
<span class="column is-narrow">
18 分鐘 的閱讀時間 (約 2657 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<blockquote>
<p>這篇文章是<a href="https://www.facebook.com/ntpchealth" target="_blank" rel="noopener">新北衛什麼</a>的<a href="https://www.facebook.com/ntpchealth/videos/751591689040840" target="_blank" rel="noopener">幸福捕手線上課程第 1 彈</a>的筆記。<br>
每次上網查詢關於求助的方式時，基本上會查到許多憂鬱症的量表，第一次看到免費的衛教課程講述得如此詳細，謝謝「諮商心理師許皓宜」解開了一些心裡的結、釐清了迷思、糾正錯誤的觀念，希望能分享給其他正處於迷惑的人們。</p>
</blockquote>
<p>近幾年自殺新聞頻傳，而這些自殺的人總是令人意外，平常不覺有異。如果這些人就在我們身邊，或者是自己可能也在自殺的一個想法跟困擾當中，那我們可以怎麼辦？如果你可以理解正確的概念，我們更能在及時的地去幫助這些人。</p>
<h2>迷思一：自殺是禁忌話題，最好不要談？</h2>
<p>那麼自殺的五大迷思有什麼呢？第一件事情，很多人會想說自殺是一個「禁忌的話題」，當事人應該不會主動提，所以我們最好也不要跟這個人去談？</p>
<p>研究顯示，其實超過 60% 的人在要自殺的時候，先前是有做口頭表達的，甚至高達 80% 的人，其實曾經留下過警訊；換句話說，其實如果我們仔細地辨別一些特徵，你會發現你周圍的人可能正處於這個自殺的疑惑當中。</p>
<p class="article-more-link">
<a href="/suicide-explanind-episode-1/#more">閱讀我吧！</a>
</p>
</div>
</article>
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/customize-hexo-blog-url-on-github-pages/" itemprop="url">客製化你的部落格網址：Hexo blog x GitHub Pages</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2020-08-30T16:01:22.000Z" itemprop="datePublished">8月 31 2020</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/Hexo/">Hexo</a>
</span>
<span class="column is-narrow">
5 分鐘 的閱讀時間 (約 681 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<p><img src="https://i.imgur.com/AkF90fa.jpg" alt="一起設定部落格的網域名稱"></p>
<blockquote>
<p>你有使用 Hexo 架設部落格嗎？可以透過我的經驗分享，一步一步教你如何設定你的個人網址，簡單擁有自己的網路識別唷！</p>
</blockquote>
<h2>必要 Prerequisites</h2>
<ul>
<li>先註冊好你的網址，比如說，我的部落格網址是 <code>askie.today</code>。</li>
<li>準備好透過 GitHub Pages 架的 Hexo 部落格與 Repository。</li>
</ul>
<h2>設定步驟 Configuration</h2>
<p class="article-more-link">
<a href="/customize-hexo-blog-url-on-github-pages/#more">閱讀我吧！</a>
</p>
</div>
</article>
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/web-accessibility-html-semantic-elements/" itemprop="url">無障礙網站：HTML 元素與客製化控制組件的語義</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2020-08-30T15:11:12.000Z" itemprop="datePublished">8月 30 2020</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/A11Y/">A11Y</a>
</span>
<span class="column is-narrow">
11 分鐘 的閱讀時間 (約 1702 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<h2>TL;DR</h2>
<p>本篇文章學習目的：</p>
<ul>
<li>理解 HTML 之於瀏覽器與的示能性</li>
<li>理解 HTML 元素與客製化控制組件的語義賦予方式之差異</li>
</ul>
<hr>
<h2>Affordance 示能性</h2>
<p class="article-more-link">
<a href="/web-accessibility-html-semantic-elements/#more">閱讀我吧！</a>
</p>
</div>
</article>
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/web-accessibility-certificate-tw/" itemprop="url">無障礙標章：WCAG 與 NCC 國家通訊傳播委員會的無障礙規範（申請流程與標章使用規定）</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2020-08-15T15:06:04.000Z" itemprop="datePublished">8月 15 2020</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/A11Y/">A11Y</a>
</span>
<span class="column is-narrow">
21 分鐘 的閱讀時間 (約 3148 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<h2>十個真實生活中的幫助</h2>
<p><a href="https://www.youtube.com/watch?v=3f31oufqFSM" target="_blank" rel="noopener"><img src="https://img.youtube.com/vi/3f31oufqFSM/0.jpg" alt="十個不同面向的幫助"></a></p>
<blockquote>
<p>Web Accessibility: Essential for some, useful for all. - W3C WAI</p>
</blockquote>
<p>一句話道出了重點，無障礙網站之於某些使用者是必需的，卻能使全部的使用者受益。</p>
<p>一個短短七分鐘的影片，也把生活情境融為其中，我們生活中不也是這樣子的嗎？</p>
<p class="article-more-link">
<a href="/web-accessibility-certificate-tw/#more">閱讀我吧！</a>
</p>
</div>
</article>
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/system-design-cdn-content-delivery-network/" itemprop="url">系統設計入門：內容傳遞網路 CDN</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2020-08-07T14:30:41.000Z" itemprop="datePublished">8月 7 2020</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/System-Design/">System Design</a>
</span>
<span class="column is-narrow">
8 分鐘 的閱讀時間 (約 1187 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<p><img src="https://i.imgur.com/wdkZYZb.png" alt="Content delivery network"></p>
<blockquote>
<p>本系列文並非自己心得記錄，而是讀 <a href="https://github.com/donnemartin/system-design-primer/" target="_blank" rel="noopener">System Design Primer</a> 的筆記，有蠻大部分節錄自該文章以及其補充連結。</p>
</blockquote>
<h2>CDN 的出現</h2>
<p>網站在流量不高時，使用者對伺服器的回應速度較沒有感覺，但流量漸漸增加時，latency 就會拉長，我們通常會採購新的 sever 來負擔網站流量。</p>
<h3>NGINX</h3>
<p class="article-more-link">
<a href="/system-design-cdn-content-delivery-network/#more">閱讀我吧！</a>
</p>
</div>
</article>
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/docker-dockerfile-dockercompose-intro/" itemprop="url">Docker 初探：基本指令與簡單介紹 Dockerfile 和 docker-compose</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2020-07-17T17:51:57.000Z" itemprop="datePublished">7月 18 2020</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/Docker/">Docker</a>
</span>
<span class="column is-narrow">
16 分鐘 的閱讀時間 (約 2328 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<p><img src="https://i.imgur.com/RmENBKv.jpg" alt="Docker 初探：基本指令與簡單介紹 Dockerfile 和 docker-compose"></p>
<h2>TL;DR</h2>
<p>本文不會有太多語法說明，打算介紹：</p>
<ul>
<li>Docker 的前世今生</li>
<li>Container 名稱由來</li>
<li>如何運行基本的 Docker 指令</li>
<li>簡單介紹 Dockerfile 和 docker-compose 的用途（新手常搞不清楚）</li>
</ul>
<p>一切內容僅是讀書紀錄，讀的書請參考本文最下方的 Reference，如果有錯誤請大家指正觀念。</p>
<p class="article-more-link">
<a href="/docker-dockerfile-dockercompose-intro/#more">閱讀我吧！</a>
</p>
</div>
</article>
<article class="article content gallery" itemscope="" itemprop="blogPost">
<h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
<a href="/nami-introduction/" itemprop="url">My love</a>
</h1>
<div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
<!-- <span class="column is-narrow">
<time datetime="2020-07-03T17:16:35.000Z" itemprop="datePublished">7月 4 2020</time>
</span> -->
<span class="column is-narrow article-category">
<i class="far fa-folder"></i>
<a class="article-category-link" href="/categories/Nami/">Nami</a>
</span>
<span class="column is-narrow">
1 分鐘 的閱讀時間 (約 175 字)
</span>
</div>
<div class="article-entry is-size-6-mobile" itemprop="articleBody">
<p><img src="https://imgur.com/ywjOfUi.jpg" alt="Nami 娜美"></p>
<p>2014 年 1 月 25 日 週六<br>
第一次遇見她的日子<br>
她才一個月大</p>
<p>誤打誤撞地推翻原本的計畫<br>
唸書的我能照顧她的餘生嗎？<br>
抱著無論如何都不讓她再受風吹雨淋的決心<br>
直到了現在都沒有停</p>
<p>貓咪的個性跟人很像<br>
因為，每隻貓咪個性都截然不同</p>
<p>喜歡黏我撒嬌加上強烈的佔有慾<br>
傲嬌的她，總是使出渾身解數的表演吸眼球<br>
她愛我就如同我愛她的深度</p>
<p class="article-more-link">
<a href="/nami-introduction/#more">閱讀我吧！</a>
</p>
</div>
</article>
<nav class="pagination is-centered is-rounded" role="navigation" aria-label="pagination">
<div class="pagination-previous is-invisible is-hidden-mobile">
<a href="/page/0/">上一頁</a>
</div>
<div class="pagination-next">
<a href="/page/2/">下一頁</a>
</div>
<ul class="pagination-list is-hidden-mobile">
<li><a class="pagination-link is-current" href="/">1</a></li>
<li><a class="pagination-link" href="/page/2/">2</a></li>
<li><a class="pagination-link" href="/page/3/">3</a></li>
<li><a class="pagination-link" href="/page/4/">4</a></li>
</ul>
</nav>
</div>
</section> <footer class="footer">
<div class="container">
<div class="columns content">
<div class="column is-narrow">
<!-- has-text-centered -->
Copyright © 2018-2022
<a href="/about/">Askie Lin</a>
All rights reserved.
<p>Powered by Hexo, and the blog background image was designed by <a href="https://blush.design/zh-CN/artists/FMLOP83HOx1JjUCPdk1n/elina-cecilia-giglio" target="_blank">Elina Cecilia Giglio</a>.</p>
</div>
<div class="column is-hidden-mobile"></div>
<div class="column is-narrow">
<div class="columns is-mobile is-multiline is-centered">
<a class="column is-narrow has-text-black" title="GitHub" href="https://github.com/askiebaby">
GitHub
</a>
</div>
</div>
</div>
</div>
</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<!-- test if the browser is outdated -->
<!-- <div id="outdated">
<h6>Your browser is out-of-date!</h6>
<p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p>
<p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">×</a></p>
</div> -->
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/outdated-browser/1.1.5/outdatedbrowser.min.js"></script> -->
<!-- <script>
$(document).ready(function () {
// plugin function, place inside DOM ready function
outdatedBrowser({
bgColor: '#f25648',
color: '#ffffff',
lowerThan: 'flex'
})
});
</script> -->
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
moment.locale("zh-CN");
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<style>
.hljs {
position: relative;
}
.hljs .clipboard-btn {
float: right;
color: #9a9a9a;
background: none;
border: none;
cursor: pointer;
}
.hljs .clipboard-btn:hover {
color: #8a8a8a;
}
.hljs > .clipboard-btn {
display: none;
position: absolute;
right: 4px;
top: 4px;
}
.hljs:hover > .clipboard-btn {
display: inline;
}
.hljs > figcaption > .clipboard-btn {
margin-right: 4px;
}
</style>
<script>
$(document).ready(function () {
$('figure.hljs').each(function(i, figure) {
var codeId = 'code-' + i;
var code = figure.querySelector('.code');
var copyButton = $('<button>Copy <i class="far fa-clipboard"></i></button>');
code.id = codeId;
copyButton.addClass('clipboard-btn');
copyButton.attr('data-clipboard-target-id', codeId);
var figcaption = figure.querySelector('figcaption');
if (figcaption) {
figcaption.append(copyButton[0]);
} else {
figure.prepend(copyButton[0]);
}
})
var clipboard = new ClipboardJS('.clipboard-btn', {
target: function(trigger) {
return document.getElementById(trigger.getAttribute('data-clipboard-target-id'));
}
});
clipboard.on('success', function(e) {
e.clearSelection();
})
})
</script>
<script src="/js/script.js"></script> <div class="searchbox ins-search">
<div class="searchbox-mask"></div>
<div class="searchbox-container ins-search-container">
<div class="searchbox-input-wrapper">
<input type="text" class="searchbox-input ins-search-input" placeholder="搜尋 Askie 的部落格" title="搜尋 Askie 的部落格">
<span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
</div>
<div class="searchbox-result-wrapper ins-section-wrapper">
<div class="ins-section-container"></div>
</div>
</div>
</div>
<script>
(function (window) {
var INSIGHT_CONFIG = {
TRANSLATION: {
POSTS: '文章',
PAGES: '頁面',
CATEGORIES: '分類',
TAGS: '標籤',
UNTITLED: '未命名文章',
},
CONTENT_URL: '/content.json',
};
window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>
</body>
</html>