wordpress-theme-development-lab/index.html at main · coowinit/wordpress-theme-development-lab · 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
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="WordPress Theme Development Lab：20 章 Classic Theme 与 WP_Query 静态 Markdown 知识库。">
  <title>WordPress 主题开发实验室</title>

  <link rel="stylesheet" href="./assets/css/vendor/highlight-github.min.css">
  <link rel="stylesheet" href="./assets/css/knowledge-viewer.css">

  <script src="./assets/js/vendor/marked.js" defer></script>
  <script src="./assets/js/vendor/highlight.min.js" defer></script>
  <script src="./assets/js/knowledge-viewer.js" defer></script>
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar" id="sidebar" aria-label="WordPress 知识文档导航">
      <div class="sidebar__header">
        <a class="brand" href="#knowledge-map" aria-label="返回知识地图">
          <span class="brand__mark">W</span>
          <span class="brand__text">
            <strong>WordPress 主题开发实验室</strong>
            <small>20 章 Classic Theme / WP_Query</small>
          </span>
        </a>
        <button class="icon-button sidebar__close" id="closeSidebar" type="button" aria-label="关闭导航">
          <span aria-hidden="true">×</span>
        </button>
      </div>

      <nav class="doc-nav" id="docNav" aria-label="知识文档列表">
        <div class="nav-loading">正在加载文档列表……</div>
      </nav>

      <div class="sidebar__footer">
        <span>v1.1.0 · 静态 Markdown 阅读器</span>
      </div>
    </aside>

    <button class="sidebar-overlay" id="sidebarOverlay" type="button" aria-label="关闭导航"></button>

    <main class="main-panel">
      <header class="topbar">
        <button class="icon-button menu-button" id="openSidebar" type="button" aria-label="打开导航">
          <span aria-hidden="true">☰</span>
        </button>
        <div class="topbar__titles">
          <span class="topbar__category" id="currentCategory">项目总览</span>
          <strong class="topbar__title" id="currentTitle">20 章 WordPress 知识地图</strong>
        </div>
      </header>

      <section class="content-scroll" id="contentScroll">
        <article class="markdown-body" id="markdownContent" aria-live="polite">
          <div class="state-card">
            <div class="state-card__spinner" aria-hidden="true"></div>
            <h1>正在加载 WordPress 知识库</h1>
            <p>请稍候，页面正在读取 Markdown 文档配置。</p>
          </div>
        </article>
      </section>
    </main>
  </div>

  <noscript>
    <div class="noscript-message">此页面需要启用 JavaScript 才能读取 Markdown 文档。</div>
  </noscript>
</body>
</html>