hsiangfeng.github.io/404.html at master · hsiangfeng/hsiangfeng.github.io · GitHub

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

<!DOCTYPE html>
<html lang="zh-TW" class="scroll-smooth dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 Not Found | 是 Ray 不是 Array</title>


    <link rel="icon" href="/images/favicon.png">


  <!-- Canonical URL -->
  <link rel="canonical" href="https://israynotarray.com/404.html">

  <!-- Agent Discovery Link Relations -->
  <link rel="api-catalog" href="/.well-known/api-catalog" type="application/linkset+json">
  <link rel="alternate" type="application/atom+xml" title="RSS Feed" href="/atom.xml">
  <link rel="sitemap" type="application/xml" href="/sitemap.xml">

  <!-- SEO & Meta -->
  <meta name="description" content="👨‍💻 嗨！我是 Ray，一個不想被當成 Array 的軟體工程師。這裡匯集了我的技術筆記與實戰心得。我相信透過分享不僅能幫助他人，也能讓自己在軟體開發的路上更加堅定。">
  <meta name="author" content="Ray">
  <meta name="keywords" content="前端, 後端, 全端, 網頁, 開發, 技術, 網頁開發, 前端開發, 後端開發, 全端開發, JavaScript, HTML, CSS, 經驗分享, 手札, 筆記">
  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="404 Not Found">
  <meta property="og:url" content="https://israynotarray.com/404.html">
  <meta property="og:site_name" content="是 Ray 不是 Array">
  <meta property="og:description" content="👨‍💻 嗨！我是 Ray，一個不想被當成 Array 的軟體工程師。這裡匯集了我的技術筆記與實戰心得。我相信透過分享不僅能幫助他人，也能讓自己在軟體開發的路上更加堅定。">
  <meta property="og:locale" content="zh-TW">


    <meta property="og:image" content="https://israynotarray.com/images/default-og-image.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">


  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="404 Not Found">
  <meta name="twitter:description" content="👨‍💻 嗨！我是 Ray，一個不想被當成 Array 的軟體工程師。這裡匯集了我的技術筆記與實戰心得。我相信透過分享不僅能幫助他人，也能讓自己在軟體開發的路上更加堅定。">

    <meta name="twitter:image" content="https://israynotarray.com/images/default-og-image.png">


  <!-- JSON-LD Structured Data: WebSite -->
  <script type="application/ld+json">
  {"@context":"https://schema.org","@type":"WebSite","name":"是 Ray 不是 Array","url":"https://israynotarray.com","description":"👨‍💻 嗨！我是 Ray，一個不想被當成 Array 的軟體工程師。這裡匯集了我的技術筆記與實戰心得。我相信透過分享不僅能幫助他人，也能讓自己在軟體開發的路上更加堅定。","publisher":{"@type":"Organization","name":"是 Ray 不是 Array","logo":{"@type":"ImageObject","url":"https://israynotarray.com/images/logo.png"}}}
  </script>


  <!-- JSON-LD Structured Data: WebPage / ProfilePage -->
  <script type="application/ld+json">

  {"@context":"https://schema.org","@type":"WebPage","mainEntityOfPage":{"@type":"WebPage","@id":"https://israynotarray.com/404.html"},"name":"404 Not Found | 是 Ray 不是 Array","description":"👨‍💻 嗨！我是 Ray，一個不想被當成 Array 的軟體工程師。這裡匯集了我的技術筆記與實戰心得。我相信透過分享不僅能幫助他人，也能讓自己在軟體開發的路上更加堅定。","url":"https://israynotarray.com/404.html"}
  </script>


  <!-- JSON-LD Structured Data: BreadcrumbList -->
  <script type="application/ld+json">

  {"@context":"https://schema.org","@type":"BreadcrumbList","name":"404 Not Found | 是 Ray 不是 Array","itemListElement":[{"@type":"ListItem","position":1,"name":"首頁","item":"https://israynotarray.com"}]}
  </script>

  <!-- Google Fonts (Non-blocking, display=optional to eliminate font swap CLS) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=optional" rel="stylesheet" media="print" onload="this.media='all'">
  <noscript><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=optional" rel="stylesheet"></noscript>
  <!-- Press Start 2P (8-bit font for terminal easter egg, low priority) -->
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=optional" rel="stylesheet" media="print" onload="this.media='all'">
  <noscript><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=optional" rel="stylesheet"></noscript>

  <!-- Bootstrap Icons (CDN, preloaded to reduce CLS from icon font swap) -->
  <link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" crossorigin="anonymous">

  <!-- Dark Mode & Color Palette Script (Prevent FOUC) - MUST run before CSS loads -->
  <script>
    (function() {
      var savedTheme = localStorage.getItem('theme');
      var isLight = savedTheme === 'light';

      if (isLight) {
        document.documentElement.classList.remove('dark');
        document.documentElement.style.backgroundColor = '#fafafa';
      } else {
        document.documentElement.classList.add('dark');
        document.documentElement.style.backgroundColor = '#18181b';
      }

      // Apply saved color palette immediately to prevent color flash
      var palette = localStorage.getItem('color-palette');
      if (palette) {
        document.documentElement.setAttribute('data-palette', palette);
      }
    })();
  </script>

  <!-- Styles - Page Specific CSS -->


<link rel="stylesheet" href="/css/css-core-CGCLvKO9.css">


  <!-- Remove inline background after CSS loads -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.documentElement.style.backgroundColor = '';
    });
  </script>

  <!-- Scripts -->
  <script defer src="/js/main-Bs_9ZI5Y.js"></script>

  <!-- Google AdSense -->

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4319471747130190" crossorigin="anonymous"></script>


  <!-- Google Analytics 4 -->


      <!-- GA4 Script (Respects DNT) -->
      <script>
        (function() {
          // Check for Do Not Track setting
          const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
          const doNotTrack = (dnt === "1" || dnt === "yes");

          if (!doNotTrack) {
            // Load GA4 script
            const script = document.createElement('script');
            script.async = true;
            script.src = 'https://www.googletagmanager.com/gtag/js?id=G-FC8R6QFRC3';
            document.head.appendChild(script);

            // Initialize GA4
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-FC8R6QFRC3', {
              'anonymize_ip': true,
              'cookie_flags': 'SameSite=None;Secure'
            });

            // Store gtag function globally
            window.gtag = gtag;
          } else {
            console.log('Google Analytics disabled due to Do Not Track setting');
          }
        })();
      </script>


  <!-- Microsoft Clarity -->

    <script type="text/javascript">
      (function(c,l,a,r,i,t,y){
          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
      })(window, document, "clarity", "script", "h46z900dov");
    </script>


  <!-- Math Support -->


    <script>
      MathJax = {
        tex: {
          inlineMath: [['$', '$'], ['\\(', '\\)']]
        },
        svg: {
          fontCache: 'global'
        }
      };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>


<meta name="generator" content="Hexo 8.1.1"></head>


<script defer src="https://cdn.jsdelivr.net/npm/algoliasearch@4.20.0/dist/algoliasearch-lite.umd.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.60.0/dist/instantsearch.production.min.js"></script>


<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans antialiased transition-colors duration-300">

  <!-- Mobile Top Navbar -->
  <div id="mobile-navbar" class="lg:hidden fixed top-0 left-0 w-full z-30 transition-all duration-300">
  <div class="flex items-center justify-between px-4 py-3">
    <!-- Site Title -->
    <a href="/" class="text-lg font-bold text-gray-900 dark:text-white font-sans">
      是 Ray 不是 Array
    </a>

    <!-- Mobile Actions -->
    <div class="flex items-center gap-2">

      <!-- Mobile Search Button -->
      <button id="mobile-search-trigger" aria-label="Open search" class="p-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
        <i class="bi bi-search text-xl"></i>
      </button>


      <!-- Mobile Menu Button -->
      <button id="mobile-menu-btn" aria-label="Toggle mobile menu" class="p-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
        <i class="bi bi-list text-2xl"></i>
      </button>
    </div>
  </div>
</div>


  <!-- Mobile Menu Overlay -->
  <div id="mobile-menu-overlay" class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm z-30 hidden transition-opacity duration-300 lg:hidden"></div>

  <div class="min-h-screen flex flex-col lg:flex-row max-w-[1600px] mx-auto pt-16 lg:pt-0">

    <!-- Left Sidebar (Navigation & Bio) -->
    <aside class="fixed inset-y-0 left-0 z-40 w-64 h-screen overflow-y-auto bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-transform duration-300 ease-in-out transform -translate-x-full lg:translate-x-0 lg:static lg:w-1/5 lg:h-screen lg:sticky lg:top-0 lg:flex lg:flex-col">
      <div class="p-6 pb-32 lg:pb-6">

<!-- 完整版（非文章頁） -->
<div class="flex flex-col items-center lg:items-start space-y-8">
  <!-- Avatar -->
  <div class="relative group">
    <a href="/">
      <img src="/images/octocat.webp" alt="Ray" class="w-32 h-32 rounded-full border-4 border-primary-100 dark:border-primary-900 shadow-md object-cover transition-all duration-300 group-hover:shadow-xl group-hover:scale-105">
    </a>
  </div>

  <!-- Bio -->
  <div class="text-center lg:text-left w-full space-y-4">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white leading-tight">是 Ray 不是 Array</h1>
    <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">I'm a Software Engineer, and blogger.</p>

    <!-- Personal Tags -->

      <div class="flex flex-wrap justify-center lg:justify-start gap-2 pt-2">


          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
            <i class="bi bi-code-slash mr-1.5"></i> F2E Engineer
          </span>

          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
            <i class="bi bi-cup-hot-fill mr-1.5"></i> Coffee Powered
          </span>

          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800">
            <i class="bi bi-bug-fill mr-1.5"></i> Bug Hunter
          </span>

          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800">
            <i class="bi bi-pen-fill mr-1.5"></i> 900+ Articles
          </span>

      </div>


    <!-- Random Quote -->
    <div class="mt-6 p-4 bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-900/20 dark:to-primary-800/20 rounded-xl border border-primary-200 dark:border-primary-800 shadow-sm min-h-[72px]">
      <p id="random-quote" class="text-xs leading-loose text-gray-700 dark:text-gray-300" style="font-family: 'Press Start 2P', monospace; line-height: 2;">
        &nbsp;
      </p>
    </div>
  </div>

  <!-- Navigation -->
  <nav class="w-full pt-4">
    <ul class="space-y-1">


        <li>
          <a href="/" class="flex items-center px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-600 dark:hover:text-primary-400 transition-all duration-200 group">
            <i class="bi bi-house-fill w-6 text-center mr-3 text-gray-400 group-hover:text-primary-500 transition-colors"></i>
            <span class="font-medium">首頁</span>
          </a>
        </li>


        <li>
          <a href="/tags/" class="flex items-center px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-600 dark:hover:text-primary-400 transition-all duration-200 group">
            <i class="bi bi-tags-fill w-6 text-center mr-3 text-gray-400 group-hover:text-primary-500 transition-colors"></i>
            <span class="font-medium">標籤</span>
          </a>
        </li>


        <li>
          <a href="/categories/" class="flex items-center px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-600 dark:hover:text-primary-400 transition-all duration-200 group">
            <i class="bi bi-grid-fill w-6 text-center mr-3 text-gray-400 group-hover:text-primary-500 transition-colors"></i>
            <span class="font-medium">分類</span>
          </a>
        </li>


        <li>
          <a href="/archives/" class="flex items-center px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-600 dark:hover:text-primary-400 transition-all duration-200 group">
            <i class="bi bi-archive-fill w-6 text-center mr-3 text-gray-400 group-hover:text-primary-500 transition-colors"></i>
            <span class="font-medium">歸檔</span>
          </a>
        </li>


        <li>
          <a href="/atom.xml" class="flex items-center px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-600 dark:hover:text-primary-400 transition-all duration-200 group">
            <i class="bi bi-rss-fill w-6 text-center mr-3 text-gray-400 group-hover:text-primary-500 transition-colors"></i>
            <span class="font-medium">RSS</span>
          </a>
        </li>


        <li>
          <a href="/links/" class="flex items-center px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-600 dark:hover:text-primary-400 transition-all duration-200 group">
            <i class="bi bi-link-45deg w-6 text-center mr-3 text-gray-400 group-hover:text-primary-500 transition-colors"></i>
            <span class="font-medium">更多</span>
          </a>
        </li>

    </ul>
  </nav>

  <!-- Social Links -->
  <div class="w-full pt-4 space-y-1">


      <a href="https://www.buymeacoffee.com/israynotarray"
         target="_blank"
         rel="noopener noreferrer"
         class="flex items-center justify-between px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-600 dark:hover:text-primary-400 transition-all duration-200 group">
        <div class="flex items-center gap-3 flex-1 min-w-0">
          <i class="bi bi-cash-coin w-6 text-center text-gray-400 group-hover:text-primary-500 transition-colors"></i>
          <div class="flex-1 min-w-0">
            <div class="font-medium">Buy Me a Coffee</div>

              <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">給 Ray 一杯咖啡 ☕</div>

          </div>
        </div>
        <i class="bi bi-box-arrow-up-right text-xs text-gray-400 dark:text-gray-500 flex-shrink-0"></i>
      </a>


      <a href="https://store.line.me/search/zh-Hant?q=israynotarray"
         target="_blank"
         rel="noopener noreferrer"
         class="flex items-center justify-between px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-600 dark:hover:text-primary-400 transition-all duration-200 group">
        <div class="flex items-center gap-3 flex-1 min-w-0">
          <i class="bi bi-line w-6 text-center text-gray-400 group-hover:text-primary-500 transition-colors"></i>
          <div class="flex-1 min-w-0">
            <div class="font-medium">LINE 貼圖</div>

              <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">我的 LINE 貼圖 🧩</div>

          </div>
        </div>
        <i class="bi bi-box-arrow-up-right text-xs text-gray-400 dark:text-gray-500 flex-shrink-0"></i>
      </a>


      <a href="https://portaly.cc/israynotarray"
         target="_blank"
         rel="noopener noreferrer"
         class="flex items-center justify-between px-4 py-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-600 dark:hover:text-primary-400 transition-all duration-200 group">
        <div class="flex items-center gap-3 flex-1 min-w-0">
          <i class="bi bi-link-45deg w-6 text-center text-gray-400 group-hover:text-primary-500 transition-colors"></i>
          <div class="flex-1 min-w-0">
            <div class="font-medium">Portaly</div>

              <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">更多關於我的連結 🔗</div>

          </div>
        </div>
        <i class="bi bi-box-arrow-up-right text-xs text-gray-400 dark:text-gray-500 flex-shrink-0"></i>
      </a>

  </div>

  <!-- Color Palette Selector -->
  <div class="palette-selector relative w-full mt-4">
    <button data-palette-select class="flex items-center justify-between px-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-800/50 w-full transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-700/50 cursor-pointer border-none text-left" aria-label="Select color palette" aria-expanded="false" aria-haspopup="listbox">
      <div class="flex items-center gap-3">
        <span class="palette-swatch w-5 h-5 rounded-full border border-gray-300 dark:border-gray-600 flex-shrink-0" style="background-color: rgb(var(--color-primary-500))"></span>
        <span class="palette-label font-medium text-gray-700 dark:text-gray-300">Theme</span>
      </div>
      <i class="bi bi-chevron-down text-xs text-gray-400"></i>
    </button>
    <div class="palette-dropdown hidden absolute bottom-full left-0 w-full mb-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden z-50 py-1" role="listbox" aria-label="Color palette options">
      <button data-palette-value="teal" role="option" aria-selected="true" tabindex="-1" class="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:outline-none transition-colors text-left cursor-pointer border-none bg-transparent">
        <span class="w-5 h-5 rounded-full flex-shrink-0" style="background-color: #2da39e"></span>
        <span class="palette-option-label text-sm text-gray-700 dark:text-gray-300 flex-1">經典青</span>
        <i class="bi bi-check2 text-sm text-primary-500 palette-check"></i>
      </button>
      <button data-palette-value="amber" role="option" aria-selected="false" tabindex="-1" class="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:outline-none transition-colors text-left cursor-pointer border-none bg-transparent">
        <span class="w-5 h-5 rounded-full flex-shrink-0" style="background-color: #d97706"></span>
        <span class="palette-option-label text-sm text-gray-700 dark:text-gray-300 flex-1">琥珀橘</span>
        <i class="bi bi-check2 text-sm text-primary-500 palette-check invisible"></i>
      </button>
      <button data-palette-value="indigo" role="option" aria-selected="false" tabindex="-1" class="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:outline-none transition-colors text-left cursor-pointer border-none bg-transparent">
        <span class="w-5 h-5 rounded-full flex-shrink-0" style="background-color: #6366f1"></span>
        <span class="palette-option-label text-sm text-gray-700 dark:text-gray-300 flex-1">靛藍紫</span>
        <i class="bi bi-check2 text-sm text-primary-500 palette-check invisible"></i>
      </button>
      <button data-palette-value="rose" role="option" aria-selected="false" tabindex="-1" class="flex items-center gap-3 w-full px-4 py-2.5 hover:bg-gray-100 dark:hover:bg-gray-700 focus:bg-gray-100 dark:focus:bg-gray-700 focus:outline-none transition-colors text-left cursor-pointer border-none bg-transparent">
        <span class="w-5 h-5 rounded-full flex-shrink-0" style="background-color: #f43f5e"></span>
        <span class="palette-option-label text-sm text-gray-700 dark:text-gray-300 flex-1">玫瑰紅</span>
        <i class="bi bi-check2 text-sm text-primary-500 palette-check invisible"></i>
      </button>
    </div>
  </div>

  <!-- Dark Mode Toggle -->
  <button id="theme-toggle" class="flex items-center justify-between px-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-800/50 w-full transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-700/50 cursor-pointer border-none text-left" role="switch" aria-label="Toggle dark mode" aria-checked="false">
    <div class="flex items-center gap-3">
      <i class="bi bi-moon-stars-fill w-6 text-center text-gray-600 dark:text-gray-400 transition-colors"></i>
      <span class="font-medium text-gray-700 dark:text-gray-300">Dark Mode</span>
    </div>

    <span class="theme-switch pointer-events-none">
      <span class="theme-switch-slider">
        <i class="theme-switch-icon bi bi-moon-stars-fill"></i>
      </span>
    </span>
  </button>
</div>

<script>
  {
    // Random Quote System - Load from theme configuration
    const hexoConfig = window.hexo_config || {};
    const themeConfig = hexoConfig.theme || {};
    const terminalConfig = themeConfig.terminal || {};

    const quotes = terminalConfig.quotes || [
      'Code is like humor. When you have to explain it, it\'s bad.',
      'Debug 是我的 cardio。',
      'Software and cathedrals are much the same — first we build them, then we pray.',
      'Experience is the name everyone gives to their mistakes.',
      'In order to understand recursion, one must first understand recursion.'
    ];

    const quoteElement = document.getElementById('random-quote');
    if (quoteElement) {
      const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
      quoteElement.textContent = randomQuote;
    }
  }
</script>


      </div>
    </aside>

    <!-- Main Content -->
    <main class="w-full lg:w-3/5 px-4 lg:px-8 py-8 min-h-screen">
      <!-- BSOD 404 Page -->
<div class="fixed inset-0 z-[9999] bg-[#0078D7] text-white font-sans p-10 md:p-20 flex flex-col select-none overflow-hidden">

  <!-- Sad Face -->
  <div class="text-[8rem] md:text-[10rem] leading-none mb-8 font-light">
    :(
  </div>

  <!-- Error Message -->
  <div class="text-xl md:text-2xl font-light mb-8 max-w-4xl leading-normal space-y-4">
    <p>The page you are looking for ran into a problem and cannot be found. We're just collecting some error info, and then we'll return you to the homepage.</p>
    <p class="text-lg md:text-xl">您正在尋找的頁面遇到問題，無法顯示。我們正在收集錯誤資訊，稍後將帶您返回首頁。</p>
  </div>

  <!-- Percentage Counter -->
  <div class="text-xl md:text-2xl font-light mb-12">
    <span id="percentage">0</span>% complete / 完成
  </div>

  <!-- Technical Info -->
  <div class="mt-auto flex flex-col md:flex-row items-start gap-6">
    <!-- QR Code (Simulated with CSS) -->
    <div class="bg-white p-2 w-24 h-24 md:w-32 md:h-32 flex-shrink-0">
      <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://israynotarray.com" alt="QR Code" class="w-full h-full object-contain">
    </div>

    <!-- Stop Code Info -->
    <div class="font-light text-sm md:text-base space-y-1">
      <p>For more information about this issue and possible fixes, visit <a href="https://israynotarray.com" class="underline hover:text-gray-200">https://israynotarray.com</a></p>
      <p>如需更多資訊和可能的解決方案，請訪問 <a href="https://israynotarray.com" class="underline hover:text-gray-200">https://israynotarray.com</a></p>
      <div class="mt-4 space-y-1">
        <p>If you call a support person, give them this info:</p>
        <p>如果您致電支援人員，請提供此資訊：</p>
        <p class="mt-2">Stop code / 終止代碼: <span class="font-mono">ARRAY_INDEX_OUT_OF_BOUNDS</span></p>
      </div>
    </div>
  </div>

</div>

<script>
  // Auto-redirect logic
  const percentageElement = document.getElementById('percentage');
  let percentage = 0;

  const interval = setInterval(() => {
    percentage += Math.floor(Math.random() * 10) + 1;
    if (percentage > 100) percentage = 100;
    percentageElement.textContent = percentage;

    if (percentage === 100) {
      clearInterval(interval);
      setTimeout(() => {
        window.location.href = "/";
      }, 500);
    }
  }, 800);

  // Press any key to return home
  document.addEventListener('keydown', () => {
    window.location.href = "/";
  });

  // Click to return home
  document.addEventListener('click', () => {
    window.location.href = "/";
  });
</script>

      <div class="mt-16">
        <footer class="mt-12 py-8 border-t border-gray-200 dark:border-gray-800 text-center text-sm text-gray-500 dark:text-gray-400">


  <p>&copy; 2026 Ray. All rights reserved.</p>


  <p class="mt-2">
    Powered by


      <a href="https://israynotarray.com/" target="_blank" rel="noopener" class="hover:text-primary-500">Ray Theme</a>


  </p>

</footer>

      </div>
    </main>

    <!-- Right Sidebar (Widgets & TOC) -->
    <aside class="w-full lg:w-1/5 p-5 lg:h-screen lg:sticky lg:top-0 hidden lg:flex flex-col overflow-y-auto border-l border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 z-10">
      <div class="space-y-6">

  <!-- Search Widget (Placeholder) -->
  <!-- Search Widget -->
  <div class="relative cursor-pointer" id="search-trigger">
    <input type="text" readonly placeholder="Search..." class="w-full bg-gray-100 dark:bg-gray-800 border-none rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-primary-500 outline-none transition-all cursor-pointer">
    <i class="bi bi-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
  </div>

  <!-- Table of Contents (Only on Post pages) -->


  <!-- Ad Widget (Google Ads) -->

    <!-- 外層固定高度防止 AdSense 注入 height:auto!important 造成 CLS -->
    <div class="rounded-xl border border-gray-100 dark:border-gray-700" style="height: 600px; max-height: 600px; overflow: hidden;">
    <div class="bg-white dark:bg-gray-800 p-4 shadow-sm h-[600px] overflow-hidden relative" style="contain: layout style paint;">
      <!-- Fallback Text (Visible when AdBlock is on) -->
      <div class="absolute inset-0 flex items-center justify-center p-4 text-center">
        <p class="text-xs text-gray-400 dark:text-gray-500 leading-relaxed">
          整理這些技術筆記真的很花時間，如果你願意 <strong>關閉 Adblock</strong> 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ
        </p>
      </div>
      <!-- Ad Unit (z-index higher than fallback) -->
      <div class="relative z-10 w-full h-[580px]">
        <span class="text-xs text-gray-400 uppercase tracking-wider block mb-2">Advertisement</span>
        <!-- ArrayException_Sidebar -->
        <ins class="adsbygoogle"
             style="display:block;min-width:300px;width:100%;min-height:600px;max-height:600px;"
             data-ad-client="ca-pub-4319471747130190"
             data-ad-slot="9970366113"
             data-ad-format="auto"></ins>
        <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </div>
    </div>


  <!-- Recent Posts -->
  <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-primary-100 dark:border-primary-900/30">
    <h3 class="font-bold text-gray-900 dark:text-white mb-4 flex items-center text-base">
      <i class="bi bi-newspaper w-5 text-center mr-2 text-primary-500"></i> 最新文章
    </h3>
    <div class="space-y-2">


        <a href="/ai/20260429/8473628195/"
           class="block p-3 rounded-lg border border-transparent hover:border-primary-200 dark:hover:border-primary-800 hover:bg-primary-50/50 dark:hover:bg-primary-900/10 transition-all duration-300 group hover:-translate-y-0.5 hover:shadow-md">

          <h4 class="text-sm font-medium text-gray-800 dark:text-gray-200 line-clamp-2 leading-snug mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
            Claude Code 內建 Tools 在做什麼？看懂它怎麼選工具，Prompt 才寫得準
          </h4>

          <!-- Meta Info -->
          <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2026-04-29" title="發布日期: 2026-04-29" class="flex items-center gap-1">
              <i class="bi bi-calendar3 w-3 text-center text-[10px]"></i>
              04/29
            </time>
            <span class="text-gray-300 dark:text-gray-600">•</span>
            <span class="flex items-center gap-1">
              <i class="bi bi-clock w-3 text-center text-[10px]"></i>
              15 分鐘
            </span>
          </div>
        </a>


        <a href="/ai/20260427/1657384902/"
           class="block p-3 rounded-lg border border-transparent hover:border-primary-200 dark:hover:border-primary-800 hover:bg-primary-50/50 dark:hover:bg-primary-900/10 transition-all duration-300 group hover:-translate-y-0.5 hover:shadow-md">

          <h4 class="text-sm font-medium text-gray-800 dark:text-gray-200 line-clamp-2 leading-snug mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
            想開始 Vibe Coding？新手推薦先搞懂的這些基礎知識
          </h4>

          <!-- Meta Info -->
          <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2026-04-27" title="發布日期: 2026-04-27" class="flex items-center gap-1">
              <i class="bi bi-calendar3 w-3 text-center text-[10px]"></i>
              04/27
            </time>
            <span class="text-gray-300 dark:text-gray-600">•</span>
            <span class="flex items-center gap-1">
              <i class="bi bi-clock w-3 text-center text-[10px]"></i>
              18 分鐘
            </span>
          </div>
        </a>


        <a href="/ai/20260422/3847291056/"
           class="block p-3 rounded-lg border border-transparent hover:border-primary-200 dark:hover:border-primary-800 hover:bg-primary-50/50 dark:hover:bg-primary-900/10 transition-all duration-300 group hover:-translate-y-0.5 hover:shadow-md">

          <h4 class="text-sm font-medium text-gray-800 dark:text-gray-200 line-clamp-2 leading-snug mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
            看懂 AI 規格表：Token、Context Window、算力，這些數字到底在講什麼？
          </h4>

          <!-- Meta Info -->
          <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2026-04-22" title="發布日期: 2026-04-22" class="flex items-center gap-1">
              <i class="bi bi-calendar3 w-3 text-center text-[10px]"></i>
              04/22
            </time>
            <span class="text-gray-300 dark:text-gray-600">•</span>
            <span class="flex items-center gap-1">
              <i class="bi bi-clock w-3 text-center text-[10px]"></i>
              18 分鐘
            </span>
          </div>
        </a>


        <a href="/other/20260421/3921847205/"
           class="block p-3 rounded-lg border border-transparent hover:border-primary-200 dark:hover:border-primary-800 hover:bg-primary-50/50 dark:hover:bg-primary-900/10 transition-all duration-300 group hover:-translate-y-0.5 hover:shadow-md">

          <h4 class="text-sm font-medium text-gray-800 dark:text-gray-200 line-clamp-2 leading-snug mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
            Mac 上裝軟體到底該用哪種方式？Homebrew、官網下載、curl 完整比較
          </h4>

          <!-- Meta Info -->
          <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2026-04-21" title="發布日期: 2026-04-21" class="flex items-center gap-1">
              <i class="bi bi-calendar3 w-3 text-center text-[10px]"></i>
              04/21
            </time>
            <span class="text-gray-300 dark:text-gray-600">•</span>
            <span class="flex items-center gap-1">
              <i class="bi bi-clock w-3 text-center text-[10px]"></i>
              6 分鐘
            </span>
          </div>
        </a>


        <a href="/ai/20260421/2847193056/"
           class="block p-3 rounded-lg border border-transparent hover:border-primary-200 dark:hover:border-primary-800 hover:bg-primary-50/50 dark:hover:bg-primary-900/10 transition-all duration-300 group hover:-translate-y-0.5 hover:shadow-md">

          <h4 class="text-sm font-medium text-gray-800 dark:text-gray-200 line-clamp-2 leading-snug mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
            從 3 分到滿分！讓你的網站通過 isitagentready AI Agent Readiness 完整攻略
          </h4>

          <!-- Meta Info -->
          <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
            <time datetime="2026-04-21" title="發布日期: 2026-04-21" class="flex items-center gap-1">
              <i class="bi bi-calendar3 w-3 text-center text-[10px]"></i>
              04/21
            </time>
            <span class="text-gray-300 dark:text-gray-600">•</span>
            <span class="flex items-center gap-1">
              <i class="bi bi-clock w-3 text-center text-[10px]"></i>
              10 分鐘
            </span>
          </div>
        </a>

    </div>
  </div>


  <!-- Fake Login Trigger -->
  <div class="text-center mt-8 pb-4">
    <a href="#" id="fake-login-trigger" class="text-[10px] text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors font-mono tracking-widest hover:opacity-100">
      ADMIN_ACCESS
    </a>
  </div>

</div>

    </aside>

  </div>


  <!-- Search Modal -->
  <div id="search-modal" class="fixed inset-0 z-[100] hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <!-- Background overlay -->
    <div id="search-overlay" class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm transition-opacity pointer-events-none"></div>

    <!-- Modal panel -->
    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div class="flex min-h-full items-start justify-center p-4 sm:p-6 md:p-20">
        <div class="relative w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white dark:bg-gray-900 shadow-2xl transition-all border border-gray-100 dark:border-gray-800">

          <!-- Header -->
          <div class="relative px-6 pt-6 pb-4 border-b border-gray-100 dark:border-gray-800">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                <i class="bi bi-search text-primary-500"></i>
                搜尋文章
              </h3>
              <button id="close-search" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition-colors p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
                <span class="sr-only">Close</span>
                <i class="bi bi-x-lg text-lg"></i>
              </button>
            </div>
            <div id="search-box" class="w-full"></div>
          </div>

          <!-- Results Area -->
          <div class="px-6 py-4 min-h-[300px] max-h-[60vh] overflow-y-auto custom-scrollbar bg-white dark:bg-gray-900">
            <div id="hits" class="space-y-4"></div>
            <div id="pagination" class="mt-8 flex justify-center pb-4"></div>
          </div>

          <!-- Footer -->
          <div class="bg-gray-50 dark:bg-gray-800/50 px-6 py-3 flex items-center justify-between border-t border-gray-100 dark:border-gray-800">
            <div id="stats" class="text-xs text-gray-500 dark:text-gray-400"></div>
            <div class="flex items-center gap-4">
              <div class="hidden sm:flex items-center gap-2 text-xs text-gray-400">
                <span class="px-1.5 py-0.5 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">Esc</span> to close
                <span class="px-1.5 py-0.5 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">Cmd K</span> to open
              </div>
              <div class="flex items-center gap-1 text-xs text-gray-400">
                <span>Powered by</span>
                <i class="bi bi-algolia text-blue-500"></i>
                <span>Algolia</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Load Search Script -->
  <script>

    window.algoliaConfig = {
      appId: 'MU7N4K4R36',
      apiKey: '110ed15d0a4842310bafc6fdfda119c4',
      indexName: 'blog'
    };


    window.themeConfig = {
      reading_progress: {
        enable: true,
        position: 'top',
        color: '#37c6c0',
        height: '3px'
      },
      back2top: {
        enable: true,
        scrollpercent: true
      }
    };
  </script>

  <script defer src="/js/search-BWjLIi5W.js"></script>


<!-- WebMCP: Expose site tools to AI agents -->
<script>
if (navigator.modelContext) {
  navigator.modelContext.provideContext({
    tools: [
      {
        name: "search-articles",
        description: "Search technical articles on isRayNotArray blog. Topics include JavaScript, TypeScript, Vue.js, React, Node.js, CSS, Git, Docker, and more.",
        inputSchema: {
          type: "object",
          properties: {
            query: {
              type: "string",
              description: "Search query for finding articles"
            }
          },
          required: ["query"]
        },
        execute: async ({ query }) => {
          window.location.href = `/?s=${encodeURIComponent(query)}`;
          return { status: "redirecting", query };
        }
      },
      {
        name: "get-site-info",
        description: "Get information about the isRayNotArray blog, including the author, topics covered, and site structure.",
        inputSchema: {
          type: "object",
          properties: {}
        },
        execute: async () => {
          return {
            name: "isRayNotArray",
            author: "Ray",
            description: "A Traditional Chinese technical blog covering frontend development, JavaScript, TypeScript, Vue.js, React, and more.",
            url: "https://israynotarray.com",
            feed: "https://israynotarray.com/atom.xml",
            sitemap: "https://israynotarray.com/sitemap.xml"
          };
        }
      }
    ]
  });
}
</script>

</body>
</html>