TyperBody.github.io/index.html at main · TyperBody/TyperBody.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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TYPERBODY // 超频空间 </title>

    <!-- SEO Meta Tags -->
    <meta name="description" content="TYPERBODY超频空间 - 深度LangBot教程，与Astrbot和OpenClaw相比的最佳AI助手指南。探索数字边界、网络空间与前沿技术的前沿博客。">
    <meta name="keywords" content="LangBot教程,Astrbot教程,OpenClaw教程,AI编程助手,人工智能教程,ChatGPT替代,大语言模型,LLM教程,开源AI工具,编程辅助">
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
    <link rel="canonical" href="https://typerbody.xyz/" />

    <!-- Open Graph Tags (Social Media) -->
    <meta property="og:title" content="TYPERBODY // 超频空间">
    <meta property="og:description" content="深度LangBot教程，与Astrbot和OpenClaw相比最佳AI助手指南">
    <meta property="og:url" content="https://typerbody.xyz/">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://typerbody.xyz/images/social.png">
    <meta property="og:locale" content="zh_CN">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="TYPERBODY // 超频空间">
    <meta name="twitter:description" content="深度LangBot教程，与Astrbot和OpenClaw相比最佳AI助手指南">
    <meta name="twitter:image" content="https://typerbody.xyz/images/social.png">

    <!-- Website Structured Data (Schema.org) -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "TYPERBODY // 超频空间",
        "alternateName": "TYPERBODY BLOG",
        "url": "https://typerbody.xyz/",
        "description": "深度LangBot教程，与Astrbot和OpenClaw相比最佳AI助手指南。探索数字边界、网络空间与前沿技术的前沿博客。",
        "keywords": "LangBot教程,Astrbot教程,OpenClaw教程,AI编程助手,人工智能教程,ChatGPT替代,大语言模型,LLM教程,开源AI工具,编程辅助",
        "publisher": {
            "@type": "Organization",
            "name": "TYPERBODY",
            "logo": {
                "@type": "ImageObject",
                "url": "https://typerbody.xyz/images/social.png",
                "width": 1200,
                "height": 630
            }
        },
        "mainEntity": {
            "@type": "Blog",
            "name": "TYPERBODY BLOG",
            "description": "专注于AI编程助手、LangBot教程的技术博客",
            "publisher": {
                "@type": "Organization",
                "name": "TYPERBODY"
            }
        }
    }
    </script>

    <!-- Local Business/Organization Structured Data -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "TYPERBODY",
        "alternateName": "超频空间",
        "url": "https://typerbody.xyz/",
        "logo": "https://typerbody.xyz/images/social.png",
        "description": "专注于AI编程助手和LangBot教程的技术博客",
        "sameAs": [],
        "contactPoint": {
            "@type": "ContactPoint",
            "contactType": "customer service",
            "availableLanguage": ["Chinese", "English"]
        }
    }
    </script>

    <!-- Existing Stylesheets -->
    <link rel="stylesheet" href="css/style.css">
    <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=Orbitron:wght@400;700;900&family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 动态背景 -->
    <div class="bg-container">
        <!-- 中心爆发光源 -->
        <div class="light-burst">
            <div class="light-core"></div>
            <div class="cross-beam-h"></div>
            <div class="cross-beam-v"></div>
            <div class="diagonal-beam"></div>
            <div class="diagonal-beam"></div>
            <div class="diagonal-beam"></div>
            <div class="diagonal-beam"></div>
            <div class="diagonal-beam"></div>
            <div class="diagonal-beam"></div>
            <div class="radial-rays" id="radial-rays"></div>
        </div>
        <div class="noise-overlay"></div>
        <div class="interference-lines" id="interference-lines"></div>
        <div class="scan-lines"></div>
        <div class="stars" id="stars"></div>
        <div class="floating-shapes" id="shapes"></div>
    </div>

    <!-- 故障效果覆盖层 -->
    <div class="glitch-overlay"></div>

    <!-- 首页 Hero - 独占一页 -->
    <section class="hero-fullpage">
        <div class="hero-center">
            <h1 class="hero-title" data-text="TYPERBODY">TYPERBODY</h1>
            <div class="hero-cn-title">超 频 空 间</div>
            <div class="hero-line"></div>
            <p class="hero-tagline">DIGITAL BOUNDARY // CYBER SPACE // 2024</p>
        </div>
        <div class="scroll-hint">
            <span class="scroll-text">SCROLL</span>
            <div class="scroll-arrow">▼</div>
        </div>
    </section>

    <!-- 导航栏 - 滚动后显示 -->
    <nav class="nav-bar nav-hidden" id="navbar">
        <div class="nav-logo">
            <span class="logo-text" data-text="TYPERBODY">TYPERBODY</span>
        </div>
        <div class="nav-links">
            <a href="#articles" class="nav-link">POSTS</a>
            <a href="#about" class="nav-link">ABOUT</a>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="main-content">
        <!-- 合集展示区 - 最上方 -->
        <section class="collections-section" id="collections">
            <div class="section-header">
                <h2 class="section-title">
                    <span class="title-bracket">[</span>
                    COLLECTIONS
                    <span class="title-bracket">]</span>
                </h2>
            </div>
            <div class="collections-grid" id="collections-grid">
                <div class="loading-indicator">
                    <div class="loading-spinner"></div>
                    <span>LOADING...</span>
                </div>
            </div>
        </section>

        <!-- 文章列表区域 -->
        <section class="articles-section" id="articles">
            <div class="section-header">
                <h2 class="section-title">
                    <span class="title-bracket">[</span>
                    LATEST_POSTS
                    <span class="title-bracket">]</span>
                </h2>
            </div>

            <!-- 搜索容器 -->
            <div class="search-container" id="search-container">
                <div class="search-input-wrapper">
                    <span class="search-icon">◉</span>
                    <input type="text" id="search-input" placeholder="搜索文章... (Ctrl+K)" autocomplete="off">
                    <span class="search-shortcut">Ctrl+K</span>
                    <button class="search-clear" id="search-clear" style="display: none;">×</button>
                </div>
                <div class="search-results" id="search-results" style="display: none;">
                    <div class="search-results-header">
                        <span class="results-count" id="results-count"></span>
                        <span class="search-hint">按 Enter 查看全部 · ↑↓ 选择</span>
                    </div>
                    <div class="search-results-list" id="search-results-list">
                        <!-- 动态生成搜索结果 -->
                    </div>
                    <div class="search-no-results" id="search-no-results" style="display: none;">
                        <span class="no-results-icon">🔮</span>
                        <span class="no-results-text">未找到相关文章</span>
                    </div>
                    <div class="recent-searches" id="recent-searches" style="display: none;">
                        <div class="recent-title">最近搜索</div>
                        <div class="recent-list" id="recent-list">
                            <!-- 动态生成最近搜索 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分类筛选导航 -->
            <nav class="category-filter" id="category-filter">
                <!-- 动态渲染分类按钮 -->
            </nav>

            <!-- 文章网格 -->
            <div class="articles-grid" id="articles-grid">
                <div class="loading-indicator">
                    <div class="loading-spinner"></div>
                    <span>LOADING...</span>
                </div>
            </div>
        </section>

        <!-- 关于区域 -->
        <section class="about-section" id="about">
            <div class="section-header">
                <h2 class="section-title">
                    <span class="title-bracket">[</span>
                    ABOUT
                    <span class="title-bracket">]</span>
                </h2>
            </div>
            <div class="about-content">
                <div class="about-avatar">
                    <div class="avatar-frame">
                        <img src="https://github.com/TyperBody.png" alt="TyperBody" class="avatar-img">
                    </div>
                    <div class="avatar-name">TyperBody</div>
                </div>
                <div class="about-text">
                    <p class="about-desc">
                        Y2K HYPERTRANCE STYLE BLOG<br>
                        INSPIRED BY ELECTRONIC MUSIC AESTHETICS
                    </p>
                    <div class="about-links">
                        <a href="https://github.com/TyperBody" class="social-link" target="_blank">GITHUB</a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-line"></div>
        <div class="footer-content">
            <span>TYPERBODY 2026</span>
            <span class="footer-sep">//</span>
            <span>GITHUB PAGES</span>
        </div>
    </footer>

    <!-- 鼠标跟随效果 -->
    <div class="cursor-glow" id="cursor-glow"></div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>