NickJerome.github.io/about.html at main · NickJerome/NickJerome.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
<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>欢迎来到我的小站 - WangJerome 的 blog</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="/assets/styles.css" />
        <link
            rel="preload"
            href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/github.min.css"
            as="style"
            onload="this.onload=null;this.rel='stylesheet'"
            id="hljs-light"
        />
        <link
            rel="preload"
            href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/github-dark.min.css"
            as="style"
            id="hljs-dark"
            disabled
        />
        <noscript>
            <link
                rel="stylesheet"
                href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/github.min.css"
            />
        </noscript>
        <script
            src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js"
            defer
        ></script>
    </head>
    <body>
        <div class="container">
            <header>
                <div class="header-content">
                    <h1 class="site-name">WangJerome 的 blog</h1>
                    <button class="theme-toggle" onclick="toggleTheme()" aria-label="切换主题">
                        <span class="theme-icon">🌙</span>
                    </button>
                </div>
                <nav>
                    <a href="/" class="">首页</a>
                    <a href="/categories.html" class="">分类</a>
                    <a href="/about.html" class="active">关于</a>
                </nav>
            </header>

            <article>
                <h1 class="post-title">欢迎来到我的小站</h1>
                <div class="post-meta">
                    <span class="post-date">2026-01-25</span>
                </div>
                <hr />
                <div class="content"><p>你好，我是 WangJerome 👋</p>
<p>这个博客的整体结构大概是这样的：</p>
<ul>
<li>写作在一个私有仓库 <strong>docs</strong> 中完成，所有内容都是 Markdown。</li>
<li><code>scripts/build.js</code> 会把 Markdown 解析成 HTML，并套上 <code>templates/</code> 里的模板。</li>
<li>构建产物会被推送到公开仓库 <strong><a href="http://nickjerome.github.io">nickjerome.github.io</a></strong>，用来对外提供访问。</li>
<li>最终再交给 Cloudflare 做 CDN 分发。</li>
</ul>
<p>这样做的好处是：</p>
<ol>
<li><strong>写作体验简单</strong>：只需要关心 Markdown，不用碰前端框架。</li>
<li><strong>源码是私有的</strong>：草稿、笔记、脚本都可以随便放在 docs 里。</li>
<li><strong>对外只暴露静态 HTML</strong>：公开仓库存储的是构建后的页面，更干净，也利于缓存。</li>
</ol>
<hr>
<h2>写作约定</h2>
<p>以后每篇文章大致会长这样：</p>
<pre><code class="language-markdown">---
title: &quot;文章标题&quot;
description: &quot;一句简短的摘要，可选。&quot;
---

这里是正文，用 Markdown 书写。

- 支持列表
- 支持代码块
- 支持引用等 Markdown 特性
</code></pre>
</div>
            </article>

            <footer>© 2026 WangJerome 的 blog. 保留所有权利。</footer>
        </div>

        <script>
            function toggleTheme() {
                const html = document.documentElement;
                const icon = document.querySelector('.theme-icon');
                const isDark = html.classList.contains('dark');
                const lightLink = document.getElementById('hljs-light');
                const darkLink = document.getElementById('hljs-dark');

                if (isDark) {
                    html.classList.remove('dark');
                    icon.textContent = '🌙';
                    if (lightLink && darkLink) {
                        lightLink.disabled = false;
                        darkLink.disabled = true;
                    }
                    localStorage.setItem('theme', 'light');
                } else {
                    html.classList.add('dark');
                    icon.textContent = '☀️';
                    if (lightLink && darkLink) {
                        lightLink.disabled = true;
                        darkLink.disabled = false;
                        if (!darkLink.href) {
                            darkLink.rel = 'stylesheet';
                            darkLink.href = 'https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/github-dark.min.css';
                        }
                    }
                    localStorage.setItem('theme', 'dark');
                }
            }

            // 初始化主题
            (function() {
                const savedTheme = localStorage.getItem('theme');
                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                const icon = document.querySelector('.theme-icon');
                const lightLink = document.getElementById('hljs-light');
                const darkLink = document.getElementById('hljs-dark');

                if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
                    document.documentElement.classList.add('dark');
                    icon.textContent = '☀️';
                    if (lightLink && darkLink) {
                        lightLink.disabled = true;
                        darkLink.disabled = false;
                        darkLink.rel = 'stylesheet';
                        darkLink.href = 'https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/github-dark.min.css';
                    }
                } else {
                    icon.textContent = '🌙';
                }
            })();

            // 代码高亮
            document.addEventListener("DOMContentLoaded", function () {
                if (typeof hljs !== "undefined") hljs.highlightAll();
            });
        </script>
    </body>
</html>