Blog/index.html at custom · Marvel-L/Blog · 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
<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <title>D-blog</title>
  <link rel="manifest" href="%BASE_URL%manifest.webmanifest" />
  <!-- 首屏 CSS 预取：入口样式表为内容哈希文件名（构建后才可知），preload 由
         vite.config.ts 的 inject-entry-css-preload 插件在构建时注入产物 index.html，
         与 Vite 注入的样式表（含 crossorigin）保持一致，避免重复下载。 -->
  <!-- 模板级兜底 meta：生产构建时会被 SSG 的 mergeHead 移除（每页以 Seo 组件的
         实际输出为准），仅作为开发模式 / 未跑 SSG 时的后备。文案与 siteConfig 保持一致。 -->
  <meta name="description" content="跑路的duck的技术分享和生活随笔" />
  <meta name="keywords" content="D-blog,跑路的duck,前端博客,技术分享,编程教程,React,TypeScript,Web开发" />
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f2f0e9" />
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a" />
  <!-- color-scheme：声明明暗双模式，让 UA 组件（滚动条/表单控件/默认 canvas 色）在 CSS 加载前适配深色，避免深色模式首帧闪白。mergeHead 不移除该标签，生产构建安全保留。 -->
  <meta name="color-scheme" content="light dark" />
  <script>
    (function () {
      try {
        var theme = localStorage.getItem('theme');
        var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (theme === 'dark' || (theme !== 'light' && prefersDark)) {
          document.documentElement.classList.add('dark');
        }
      } catch (_) { }
    })();
  </script>
  <script>
    (function () {
      try {
        var loveMode = localStorage.getItem('d-blog-love-mode') === 'true';
        if (loveMode) {
          document.documentElement.dataset.loveMode = 'true';
          document.documentElement.dataset.loveModeBoot = 'true';
        }
      } catch (_) { }
    })();
  </script>
  <style>
    #love-mode-preload {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s ease;
      z-index: 9999;
      background:
        radial-gradient(circle at 16% 14%, rgba(255, 228, 202, .22), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(250, 167, 194, .18), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(255, 119, 87, .24), transparent 36%),
        linear-gradient(180deg, #200815 0%, #3f0f24 38%, #6d1b37 72%, #1b0c14 100%);
    }

    #love-mode-preload::before,
    #love-mode-preload::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    #love-mode-preload::before {
      opacity: .16;
      background-image:
        linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
      background-size: 72px 72px;
    }

    #love-mode-preload::after {
      background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 22rem);
    }

    html[data-love-mode-boot='true'] #love-mode-preload {
      opacity: 1;
    }

    html[data-love-mode-boot='true'] #root {
      opacity: 0;
    }
  </style>

  <!-- DNS 预解析和预连接优化 -->
  <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <!-- 图床域名提前建连：文章封面图（LCP 元素）托管于 img.pldduck.com，
         移动端 4G 下提前完成 DNS→TCP→TLS 可显著缩短首张封面图下载延迟。
         crossorigin 与 SSG 注入的 <link rel=preload as=image> 及 <img> 的跨域
         请求保持一致，确保连接可被复用而非重新握手。 -->
  <link rel="preconnect" href="https://img.pldduck.com" crossorigin />
  <link rel="dns-prefetch" href="https://img.pldduck.com" />
  <!-- 不蒜子访问统计 API：提前完成 DNS/TLS，路由级统计请求由应用代码发起。 -->
  <link rel="preconnect" href="https://cdn.busuanzi.cc" crossorigin />
  <link rel="dns-prefetch" href="https://cdn.busuanzi.cc" />
  <!-- D-Umami 访问分析：提前完成 DNS/TLS，defer 脚本可更快加载。 -->
  <link rel="preconnect" href="https://umami.pldduck.com" crossorigin />
  <link rel="dns-prefetch" href="https://umami.pldduck.com" />

  <!-- 字体加载优化：异步加载避免阻塞渲染，减少不常用权重。
         preload 与正式 stylesheet 的 crossorigin 必须一致：浏览器按
         (URL, 请求模式, 凭据模式) 匹配 preload 缓存；不一致则 preload 作废、
         CSS 被下载两次（Chrome 报 "request credentials mode does not match"）。
         preload 默认 cors/anonymous，而 <link rel=stylesheet> 不带 crossorigin 时
         以 no-cors 请求——两者本不匹配，故 stylesheet 须显式加 crossorigin 对齐。
         Google Fonts CSS 返回 Access-Control-Allow-Origin: *，anonymous 跨域安全。 -->
  <link rel="preload" as="style"
    href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"
    crossorigin media="print" onload="this.media = 'all'" />
  <noscript>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"
      crossorigin />
  </noscript>

  <!-- D-Umami 访问分析：标准 defer 异步标签，解析后注入（不阻塞渲染）。
       统计代码与站点 ID 直接写死于此，不得拆到 config/ 或环境变量
       （见 ai-rules/umami-analytics.md）。 -->
  <script defer src="https://umami.pldduck.com/script.js" data-website-id="01a4a9ca-6dda-48c6-814a-f1cf912a0ee4"></script>
</head>

<body class="bg-paper text-ink dark:bg-void dark:text-gray-200 overflow-x-hidden">
  <div id="love-mode-preload" aria-hidden="true"></div>
  <div id="root"></div>
  <script type="module" src="/src/index.tsx"></script>
</body>

</html>