-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
120 lines (112 loc) · 6.98 KB
/
Copy pathindex.html
File metadata and controls
120 lines (112 loc) · 6.98 KB
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
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="从真实仓库出发，沿着代码路径读懂开源项目。" />
<meta name="theme-color" content="#FAF7F2" />
<meta property="og:title" content="Code Course Atlas · 开源项目课程图鉴" />
<meta property="og:description" content="从真实 GitHub 仓库出发，沿着代码路径读懂开源项目。" />
<meta property="og:type" content="website" />
<title>Code Course Atlas · 开源项目课程图鉴</title>
<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=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="portal.css?v=atlas2" />
<script src="portal.js" defer></script>
</head>
<body>
<header class="site-header">
<a class="wordmark" href="./" aria-label="Code Course Atlas home">code <em>course</em> atlas</a>
<div class="header-right">
<nav class="site-nav" aria-label="Primary navigation">
<a href="#projects" data-i18n="navProjects">项目</a>
<a href="#method" data-i18n="navMethod">方法</a>
</nav>
<a class="github-link" href="https://github.com/wangruofeng/github-course" target="_blank" rel="noreferrer" aria-label="View source on GitHub">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false"><path d="M12 .5a12 12 0 0 0-3.79 23.39c.6.11.82-.26.82-.58v-2.04c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.74.08-.74 1.2.09 1.84 1.23 1.84 1.23 1.07 1.84 2.8 1.31 3.49 1 .11-.78.42-1.31.76-1.61-2.67-.3-5.47-1.34-5.47-5.93 0-1.31.47-2.38 1.23-3.22-.12-.3-.53-1.52.12-3.18 0 0 1-.32 3.3 1.23a11.4 11.4 0 0 1 6 0c2.3-1.55 3.3-1.23 3.3-1.23.65 1.66.24 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.6-2.8 5.62-5.48 5.92.43.37.82 1.1.82 2.22v3.29c0 .32.22.69.83.57A12 12 0 0 0 12 .5Z"/></svg>
<span class="visually-hidden">GitHub</span>
</a>
<a class="language-switch" href="?lang=en" data-language-switch aria-label="Switch to English">
<span>中</span><span class="language-slash">/</span><span>EN</span>
</a>
</div>
</header>
<main>
<section class="hero" aria-labelledby="hero-title">
<div class="hero-copy">
<p class="eyebrow" data-i18n="heroKicker">EST. 2026 / OPEN-SOURCE CODE READING</p>
<h1 id="hero-title" data-i18n="heroTitle">从仓库出发，<br /><em>读懂系统。</em></h1>
<p class="hero-summary" data-i18n="heroSummary">
把真实的开源仓库拆成一条可跟随的代码路径。
</p>
<div class="hero-actions">
<a class="button button-accent" href="#projects">
<span data-i18n="heroCta">查看项目</span>
<span class="button-arrow" aria-hidden="true">→</span>
</a>
<p class="hero-footnote"><span data-i18n="heroFootnote">真实仓库 · 双语课程 · 可回到源码验证</span></p>
</div>
</div>
<figure class="hero-visual">
<div class="visual-frame">
<img src="assets/code-study.png" alt="Printed code pages and a repository map" data-i18n-alt="heroImageAlt" />
<span class="visual-tag">FIG. 01</span>
</div>
<figcaption>
<span data-i18n="heroImageCaption">把代码当作一张可以走进去的地图。</span>
<span class="mono">/ READ / TRACE / VERIFY</span>
</figcaption>
</figure>
</section>
<dl class="stats-row" id="stats-row" aria-label="Site statistics"></dl>
<section class="project-section" id="projects" aria-labelledby="projects-title">
<div class="section-heading">
<div>
<p class="eyebrow" data-i18n="projectsIndex">01 / 项目</p>
<h2 id="projects-title" data-i18n="projectsTitle">正在拆解的仓库</h2>
</div>
<p class="section-note" data-i18n="projectsNote">每个入口都从源码开始，先建立地图，再沿着关键路径把系统讲清楚。</p>
</div>
<div class="project-list" id="project-list"></div>
</section>
<section class="method-section paper-noise" id="method" aria-labelledby="method-title">
<p class="eyebrow" data-i18n="methodIndex">02 / 方法</p>
<h2 id="method-title" data-i18n="methodTitle">地图、路径，<br /><em>再回到源码。</em></h2>
<p class="method-copy" data-i18n="methodCopy">先看全貌，找到模块之间的边界，再沿着用户真正走过的路径进入代码。每一节都留下回到仓库的入口。</p>
<div class="method-steps">
<div class="method-step">
<p class="step-index mono">01</p>
<h3 class="step-title" data-i18n="methodStep1Title">建图 <span class="step-tag mono">MAP</span></h3>
<p class="step-copy" data-i18n="methodStep1Copy">先通读仓库结构，画出模块边界与依赖关系——在进入细节之前，先知道整张地图长什么样。</p>
</div>
<div class="method-step">
<p class="step-index mono">02</p>
<h3 class="step-title" data-i18n="methodStep2Title">沿路径 <span class="step-tag mono">TRACE</span></h3>
<p class="step-copy" data-i18n="methodStep2Copy">挑一条用户真正走过的路径——一次生成、一次构建、一次请求——沿着它逐文件深入，不停留在抽象层。</p>
</div>
<div class="method-step">
<p class="step-index mono">03</p>
<h3 class="step-title" data-i18n="methodStep3Title">回源码 <span class="step-tag mono">VERIFY</span></h3>
<p class="step-copy" data-i18n="methodStep3Copy">每个结论都给出文件与行号入口，随时可以跳回仓库亲自验证——课程是地图，源码才是疆域。</p>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-brand">
<div class="footer-wordmark">code <em>course</em> atlas</div>
<p class="footer-tagline" data-i18n="footerCopy">开源项目的代码导览</p>
</div>
<div class="footer-meta">
<nav class="footer-links" aria-label="Footer">
<a class="link-dotted" href="https://github.com/wangruofeng/github-course" target="_blank" rel="noreferrer">GitHub</a>
<a class="link-dotted" href="#projects" data-i18n="footerProjects">项目索引</a>
<a class="link-dotted" href="#method" data-i18n="footerMethod">方法</a>
</nav>
<span>2026</span>
</div>
</footer>
</body>
</html>