whwdzg.github.io/readme.html at main · whwdzg/whwdzg.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
<!DOCTYPE html>
<!--
  [站点注释 Site Note]
  文件: D:\Documents\GitHub\whwdzg.github.io\readme.html
  作用: 页面结构与内容容器，具体交互由对应 JS/CSS 增强。
  English: Defines page markup; behavior and styling are enhanced by JS/CSS.
-->
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>README</title>
  <meta name="description" content="whwdzg.github.io README">
  <link rel="manifest" href="/manifest.json">
  <link rel="icon" href="/resource/img/shell/favicon.ico" type="image/x-icon">
  <link rel="preload" href="/resource/img/shell/favicon.ico" as="image" type="image/x-icon">
  <link rel="preload" href="/resource/img/shell/shuiyu.avif" as="image" type="image/avif">
  <link rel="preload" href="/css/variables.css" as="style">
  <link rel="preload" href="/resource/font/FluentSystemIcons-Regular.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="/css/variables.css">
  <link rel="stylesheet" href="/css/input.css">
  <link rel="stylesheet" href="/css/header.css">
  <link rel="stylesheet" href="/css/sidebar.css">
  <link rel="stylesheet" href="/css/main-content.css">
  <link rel="stylesheet" href="/css/footer.css">
  <link rel="stylesheet" href="/css/lightbox.css">
  <link rel="stylesheet" href="/css/settings-modal.css">
  <link rel="stylesheet" href="/css/scroll-to-top.css">
  <link rel="stylesheet" href="/resource/font/FluentSystemIcons-Regular.css">
  <style>
    :root.readme-page body {
      background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(244,246,248,0.9)), url('/resource/img/shell/bg/bg-light-1.png') center/cover no-repeat fixed;
      color: var(--text, #111827);
    }
    .readme-shell-gap {
      min-height: 54px;
    }
    #page-root {
      max-width: 1024px;
      margin: 0 auto;
      padding: 24px 16px 48px;
    }
    .readme-card {
      background: var(--surface, #ffffff);
      border: 1px solid var(--border, #e5e7eb);
      border-radius: 16px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
      padding: 20px;
      margin: 0 0 16px;
    }
    .readme-hero {
      display: grid;
      grid-template-columns: 104px 1fr;
      gap: 16px;
      align-items: center;
    }
    .readme-hero img {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(0, 0, 0, 0.08);
    }
    .readme-kicker {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.8rem;
      margin: 0 0 4px;
      color: var(--text-subtle, #4b5563);
    }
    .readme-lead {
      margin: 8px 0 12px;
      font-size: 1rem;
      color: var(--text-subtle, #4b5563);
    }
    .readme-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .readme-badges img {
      height: 20px;
    }
    .readme-loader {
      font-size: 0.95rem;
      color: var(--text-subtle, #4b5563);
      margin-bottom: 12px;
    }
    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3 {
      color: var(--text, #111827);
      margin-top: 1.25em;
      margin-bottom: 0.5em;
      line-height: 1.2;
    }
    .markdown-body p,
    .markdown-body ul,
    .markdown-body ol {
      margin: 0.35em 0 0.5em;
      color: var(--text, #111827);
    }
    .markdown-body ul,
    .markdown-body ol {
      padding-left: 1.1em;
    }
    .markdown-body code,
    .markdown-body pre {
      background: #f3f4f6;
      border-radius: 6px;
      padding: 0.2em 0.4em;
      font-size: 0.95em;
    }
    .markdown-body pre {
      padding: 12px;
      overflow-x: auto;
    }
    @media (max-width: 640px) {
      .readme-hero {
        grid-template-columns: 72px 1fr;
      }
      .readme-hero img {
        width: 72px;
        height: 72px;
      }
      #page-root {
        padding: 16px 12px 32px;
      }
    }
  </style>
  <script src="/js/pwa/register-sw.js" defer></script>
  <script src="/js/theme.js" defer></script>
  <script src="/js/sidebar.js" defer></script>
  <script src="/js/lightbox.js" defer></script>
  <script src="/js/avatar.js" defer></script>
  <script src="/js/scroll-to-top.js" defer></script>
  <script src="/js/search.js" defer></script>
  <script src="/js/spa-router.js" defer type="module"></script>
  <script src="/js/settings-modal.js" defer></script>
  <script>
    document.documentElement.classList.add('readme-page');
  </script>
</head>
<body>
  <div id="shell-root"></div>
  <script src="/js/shell-loader.js"></script>

  <main id="page-root">
    <section class="readme-card readme-hero">
      <div class="readme-hero__media">
        <img src="/resource/img/shell/shuiyu.avif" alt="头像" loading="lazy" fetchpriority="high">
      </div>
      <div>
        <p class="readme-kicker">whwdzg.github.io</p>
        <h1>README</h1>
        <p class="readme-lead">个人向导览与存档站点的说明与快速导航。</p>
        <div class="readme-badges" aria-label="仓库状态">
          <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/whwdzg/whwdzg.github.io">
          <img alt="GitHub forks" src="https://img.shields.io/github/forks/whwdzg/whwdzg.github.io">
          <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/whwdzg/whwdzg.github.io">
          <img alt="GitHub release" src="https://img.shields.io/github/v/release/whwdzg/whwdzg.github.io">
        </div>
      </div>
    </section>

    <section class="readme-card">
      <div id="readme-loader" class="readme-loader" aria-live="polite">正文加载中…</div>
      <article id="readme-body" class="markdown-body" aria-live="polite"></article>
    </section>
  </main>

  <script src="/js/vendor/marked.min.js"></script>
  <script src="/js/vendor/purify.min.js"></script>
  <script>
    (function() {
      var readmePath = '/README.md';
      var bodyEl = document.getElementById('readme-body');
      var loaderEl = document.getElementById('readme-loader');
      var fallbackMarkdown = [
        '# whwdzg.github.io',
        '',
        '个人向导览与存档站点（2.0）。',
        '',
        '## 在线访问',
        '- 主页：https://whwdzg.github.io',
        '- README 页面：/readme.html',
        '- 旧版存档：/Legacy-1.0/',
        '',
        '## 功能概览',
        '- 单页导航：共享的 header/sidebar 壳层与轻量路由',
        '- 多语言与主题切换：预置多语种 JSON 与深浅色模式',
        '- 渐进式增强：懒加载图片、滚动返回顶部、设置面板',
        '- PWA：manifest、service worker 与简单离线缓存',
        '',
        '## 本地预览',
        'python serve.py',
        '',
        '## 许可',
        'MIT License，详见 LICENSE。'
      ].join('\n');

      function renderMarkdown(mdText) {
        var html = window.marked ? window.marked.parse(mdText || '') : (mdText || '').replace(/\n/g, '<br>');
        if (window.DOMPurify && window.DOMPurify.sanitize) {
          html = window.DOMPurify.sanitize(html);
        }
        bodyEl.innerHTML = html;
      }

      function setLoader(message) {
        if (!loaderEl) return;
        if (!message) {
          loaderEl.remove();
          return;
        }
        loaderEl.textContent = message;
      }

      function loadReadme() {
        // 直接使用内置内容，避免加载失败导致空白
        renderMarkdown(fallbackMarkdown);
        setLoader('');
      }

      window.addEventListener('spa:page:loaded', loadReadme);
      loadReadme();
    })();
  </script>
</body>
</html>