├── nginx.conf
├── vercel.json
├── netlify.toml
├── LICENSE
├── README.md
├── index.html
└── index-en.html


/nginx.conf:
--------------------------------------------------------------------------------
1 | 、删了


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "version": 2,
3 |   "routes": [
4 |     { "src": "/", "dest": "/index.html" },
5 |     {"src": "/en","dest": "/index-en.html"},
6 |     {"src": "/(.*)(.pdf$)", "dest": "/", "status": 403},
7 |     { "src": "/(.*)", "dest": "https://cdn.jsdelivr.net" }
8 |     ]
9 | }


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [[redirects]]
 2 |   from = "/"
 3 |   to = "/index.html"
 4 |   status = 200
 5 |   force = true
 6 | 
 7 | [[redirects]]
 8 |   from = "/en"
 9 |   to = "/index-en.html"
10 |   status = 200
11 | 
12 | [[redirects]]
13 |   pattern = "/(.*)(.pdf$)"
14 |   to = "/"
15 |   status = 403
16 |   force = true
17 | 
18 | [[redirects]]
19 |   from = "/gemini"
20 |   to = "https://generativelanguage.googleapis.com/"
21 |   status = 200
22 |   force = true
23 | 
24 | [[redirects]]
25 |   from = "/turbofely"
26 |   to = "/npm/turbofely@1.0.0/src/turbofely.js"
27 |   status = 200
28 | 
29 | [[redirects]]
30 |   from = "/*"
31 |   to = "https://cdn.jsdelivr.net/:splat"
32 |   status = 200
33 |   force = true


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 云深
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Jsdelivr-Proxy
 2 | 
 3 | > [!TIP]
 4 | > 🚀 JsDeliv-CN 项目已上线！使用本套源码，提供长期免费的 JsDelivr 中国加速服务：  
 5 | > **[立即访问](https://cdn.mengze.vip/) ➡️**
 6 | 
 7 | 基于 Serverless 架构编写的 Jsdelivr 反向代理解决方案模板仓库，提供零成本、高可用的 CDN 加速服务，解决中国内陆地区因GFW拦截，Jsdelivr官方节点访问受限问题。
 8 | 
 9 | ![License](https://img.shields.io/badge/license-MIT-green)
10 | 
11 | [![Star History Chart](https://api.star-history.com/svg?repos=JanePHPDev/Vercel-Netlify-Jsdelivr-Mirror&type=Date)](https://star-history.com/#JanePHPDev/Vercel-Netlify-Jsdelivr-Mirror&Date) 
12 | 
13 | 
14 | ## 🚀 快速部署
15 | 
16 | ### Vercel 一键部署
17 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/JanePHPDev/Vercel-Netlify-JsDelivr-Mirror&project-name=jsd-mirror&repository-name=jsd-mirror)
18 | 
19 | ### Netlify 一键部署
20 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/JanePHPDev/Vercel-Netlify-JsDelivr-Mirror)
21 | 
22 | > [!WARNING]
23 | > **重要安全提醒**  
24 | > 1. 必须绑定自定义域名！Vercel 默认 `*.vercel.app` 域名在中国大陆无法访问  
25 | > 2. 推荐使用未被污染的域名（建议注册时间 >6 个月）  
26 | > 3. 新域名建议先进行 DNS 污染检测（可使用 [DNS Checker](https://dnschecker.org/)）
27 | 
28 | ## 🔧 配置指南
29 | 
30 | ### 域名解析设置
31 | 
32 | | 平台    | 记录类型 | 主机名       | 指向地址                     |
33 | |---------|----------|--------------|-----------------------------|
34 | | Vercel  | CNAME    | @ 或 www     | `cname-china.vercel-dns.com`|
35 | | Netlify | CNAME    | @ 或 www     | 自动分配的 xxx.netlify.app  |
36 | 
37 | ### 平台配置步骤
38 | 
39 | **Vercel 配置流程**：
40 | 1. 登录 [Vercel Dashboard](https://vercel.com/dashboard)
41 | 2. 进入项目 → Settings → Domains
42 | 3. 添加已解析的域名（如 `cdn.yourdomain.com`）
43 | 4. 等待 SSL 证书自动签发（约2分钟）
44 | 
45 | **Netlify 配置流程**：
46 | 1. 登录 [Netlify 控制台](https://app.netlify.com/)
47 | 2. 进入 Site configuration → Domain management
48 | 3. 添加自定义域名并验证所有权
49 | 4. 开启 [HTTPS 强制跳转](https://docs.netlify.com/domains-https/https-ssl/#automatic-https)
50 | 
51 | ## 💡 使用示例
52 | 
53 | 将原 jsDelivr 链接中的域名替换为你的镜像域名：
54 | 
55 | ```bash
56 | # 原链接
57 | https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js
58 | 
59 | # 替换后
60 | https://cdn.yourdomain.com/npm/vue@3/dist/vue.global.js
61 | ```
62 | 
63 | 支持所有 jsDelivr 资源类型：
64 | - npm 包：`/npm/包名@版本/文件路径`
65 | - GitHub 资源：`/gh/用户/仓库@版本/文件路径`
66 | - 组合加速：`/combine/...`
67 | 
68 | ## 🤝 参与贡献
69 | 
70 | 欢迎通过以下方式参与项目：
71 | 1. 提交 [Issue](https://github.com/JanePHPDev/Vercel-Netlify-Jsdelivr-Mirror/issues) 反馈问题
72 | 2. Fork 项目并提交 Pull Request
73 | 
74 | 贡献者名单：  
75 | ![Contributors](https://contrib.rocks/image?repo=JanePHPDev/Vercel-Netlify-Jsdelivr-Mirror)
76 | 
77 | ## 📜 开源协议
78 | 
79 | 本项目采用 [MIT License](LICENSE) 开源
80 | 
81 | ---
82 | 
83 | > 如果本项目对您有帮助，请点亮 ⭐ Star 支持！您的认可是我们持续优化的动力！
84 | 
85 | [![mm_reward_qrcode_1743497808845.png](https://cdn.mengze.vip/gh/YShenZe/Blog-Static-Resource@main/images/mm_reward_qrcode_1743497808845.png)](https://cdn.mengze.vip/gh/JanePHPDev/Blog-Static-Resource@main/images/mm_reward_qrcode_1743497808845.png)


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>JsDelivr中国镜像站</title>
  7 |   <meta name="description" content='由梦泽搭建的jsDelivr反代镜像站，样式来自tailwindcss可以使用Vercel搭建绑定自己的域名。有搜索npm包等多种功能https://cdn.mengze.vip/'>
  8 |   <meta name="keywords" content="jsDelivr,林梦泽,反代镜像站">
  9 |   <meta name="anthor" content="梦泽,yshenze123@gmail.com">
 10 |   <style>
 11 |     :root {
 12 |       --primary: #2A5C82;
 13 |       --secondary: #5BA4E6;
 14 |       --accent: #0d6efd;
 15 |       --light: #F8F9FA;
 16 |       --header-height: 70px;
 17 |       --shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 18 |       --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 19 |       --border-radius: 6px;
 20 |       --transition: 0.3s ease;
 21 |     }
 22 | 
 23 |     body.dark-mode {
 24 |       --primary: #1e1e1e;
 25 |       --secondary: #444;
 26 |       --accent: #0d6efd;
 27 |       --light: #121212;
 28 |     }
 29 | 
 30 |     body {
 31 |       font-family: 'Segoe UI', system-ui, sans-serif;
 32 |       line-height: 1.6;
 33 |       background: var(--light);
 34 |       color: #333;
 35 |       transition: background var(--transition), color var(--transition);
 36 |     }
 37 | 
 38 |     * {
 39 |       box-sizing: border-box;
 40 |       margin: 0;
 41 |       padding: 0;
 42 |     }
 43 | 
 44 |     /* 顶部导航 */
 45 |     header {
 46 |       background: rgba(42, 92, 130, 0.9);
 47 |       color: white;
 48 |       position: fixed;
 49 |       top: 0;
 50 |       left: 0;
 51 |       width: 100%;
 52 |       height: var(--header-height);
 53 |       z-index: 1000;
 54 |       box-shadow: var(--shadow);
 55 |       transition: background var(--transition);
 56 |     }
 57 | 
 58 |     body.dark-mode header {
 59 |       background: rgba(30, 30, 30, 0.9);
 60 |     }
 61 | 
 62 |     .nav-container {
 63 |       max-width: 1200px;
 64 |       margin: 0 auto;
 65 |       padding: 0 1rem;
 66 |       height: 100%;
 67 |       display: flex;
 68 |       justify-content: space-between;
 69 |       align-items: center;
 70 |     }
 71 | 
 72 |     .nav-logo {
 73 |       font-size: 1.6rem;
 74 |       font-weight: bold;
 75 |     }
 76 | 
 77 |     .nav-links {
 78 |       display: flex;
 79 |       gap: 1.5rem;
 80 |     }
 81 | 
 82 |     .nav-links a {
 83 |       color: white;
 84 |       text-decoration: none;
 85 |       font-size: 1rem;
 86 |       transition: color var(--transition);
 87 |     }
 88 | 
 89 |     .nav-links a:hover {
 90 |       color: var(--secondary);
 91 |     }
 92 | 
 93 |     body.dark-mode .nav-links a:hover {
 94 |       color: var(--accent);
 95 |     }
 96 | 
 97 |     .hamburger {
 98 |       display: none;
 99 |       flex-direction: column;
100 |       justify-content: space-between;
101 |       width: 25px;
102 |       height: 18px;
103 |       cursor: pointer;
104 |       transition: transform var(--transition);
105 |     }
106 | 
107 |     .hamburger span {
108 |       display: block;
109 |       height: 3px;
110 |       background: white;
111 |       border-radius: var(--border-radius);
112 |       transition: all var(--transition);
113 |     }
114 | 
115 |     .mobile-menu {
116 |       display: none;
117 |       flex-direction: column;
118 |       gap: 1rem;
119 |       background: rgba(42, 92, 130, 0.95);
120 |       padding: 1rem;
121 |       text-align: center;
122 |       transition: max-height var(--transition) ease;
123 |       overflow: hidden;
124 |     }
125 | 
126 |     .mobile-menu a {
127 |       color: white;
128 |       text-decoration: none;
129 |       font-size: 1.2rem;
130 |     }
131 | 
132 |     .mobile-menu.active {
133 |       display: flex;
134 |     }
135 | 
136 |     body.dark-mode .mobile-menu {
137 |       background: rgba(30, 30, 30, 0.95);
138 |     }
139 | 
140 |     .hero {
141 |       height: calc(100vh - var(--header-height));
142 |       padding-top: var(--header-height);
143 |       background: linear-gradient(rgba(42, 92, 130, 0.8), rgba(42, 92, 130, 0.8)),
144 |                   url('https://picsum.photos/1920/1080') center/cover no-repeat;
145 |       display: flex;
146 |       align-items: center;
147 |       justify-content: center;
148 |       text-align: center;
149 |       color: white;
150 |       transition: background var(--transition);
151 |     }
152 | 
153 |     body.dark-mode .hero {
154 |       background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(30, 30, 30, 0.8)),
155 |                   url('https://picsum.photos/1920/1080') center/cover no-repeat;
156 |     }
157 | 
158 |     .hero h1 {
159 |       font-size: 3rem;
160 |       margin-bottom: 1rem;
161 |       text-shadow: 0 2px 4px rgba(0,0,0,0.3);
162 |     }
163 | 
164 |     .hero p {
165 |       font-size: 1.2rem;
166 |       margin-bottom: 1.5rem;
167 |       line-height: 1.5;
168 |       text-shadow: 0 1px 3px rgba(0,0,0,0.3);
169 |     }
170 | 
171 |     .btn {
172 |       background: white;
173 |       color: var(--accent);
174 |       padding: 0.8rem 1.5rem;
175 |       border: none;
176 |       border-radius: var(--border-radius);
177 |       cursor: pointer;
178 |       font-weight: bold;
179 |       text-decoration: none;
180 |       transition: background var(--transition), transform var(--transition);
181 |     }
182 | 
183 |     .btn:hover {
184 |       background: #f0f0f0;
185 |       transform: translateY(-2px);
186 |     }
187 | 
188 |     .container {
189 |       max-width: 1200px;
190 |       margin: 2rem auto;
191 |       padding: 0 1rem;
192 |     }
193 | 
194 |     #about, #contact {
195 |       margin-bottom: 2rem;
196 |       transition: background var(--transition), color var(--transition);
197 |     }
198 | 
199 |     body.dark-mode #about,
200 |     body.dark-mode #contact {
201 |       color: #ddd;
202 |     }
203 | 
204 |     #about h2, #contact h2 {
205 |       color: var(--accent);
206 |       margin-bottom: 1rem;
207 |       text-align: center;
208 |     }
209 | 
210 |     #about p {
211 |       margin-bottom: 1rem;
212 |     }
213 | 
214 |     code{
215 |     background: #CFCFCF;
216 |     border-radius: 3px;
217 |     padding: 1px;
218 |     font-family: Consolas, monospace;
219 |     }
220 | 
221 |     pre {
222 |       background: #CFCFCF;
223 |       padding: 1rem;
224 |       border-radius: 4px;
225 |       overflow-x: auto;
226 |       font-family: Consolas, monospace;
227 |       margin: 1rem 0;
228 |       transition: background var(--transition), color var(--transition);
229 |     }
230 | 
231 |     body.dark-mode code{
232 |       background: #333;
233 |       border-radius: 3px;
234 |       padding: 1px;
235 |       font-family: Consolas, monospace;
236 |     }
237 | 
238 |     body.dark-mode pre {
239 |       background: #333;
240 |       color: #eee;
241 |     }
242 | 
243 |     form button {
244 |       background: var(--accent);
245 |       color: white;
246 |       padding: 0.8rem 1.5rem;
247 |       border: none;
248 |       border-radius: var(--border-radius);
249 |       cursor: pointer;
250 |       font-size: 1rem;
251 |       transition: background var(--transition);
252 |     }
253 | 
254 |     form button:hover {
255 |       background: #0056b3;
256 |     }
257 | 
258 |     footer {
259 |       background: #333;
260 |       color: white;
261 |       text-align: center;
262 |       padding: 1rem;
263 |       font-size: 0.9rem;
264 |     }
265 | 
266 |     body.dark-mode footer {
267 |       background: #222;
268 |     }
269 | 
270 |     .dark-mode-toggle {
271 |       background: none;
272 |       border: 1px solid white;
273 |       border-radius: var(--border-radius);
274 |       color: white;
275 |       padding: 0.3rem 0.6rem;
276 |       cursor: pointer;
277 |       font-size: 0.9rem;
278 |       transition: background var(--transition), transform var(--transition);
279 |     }
280 | 
281 |     .dark-mode-toggle:hover {
282 |       background: rgba(255, 255, 255, 0.2);
283 |       transform: translateY(-2px);
284 |     }
285 | 
286 |     @media (max-width: 768px) {
287 |       .nav-links {
288 |         display: none;
289 |       }
290 | 
291 |       .hamburger {
292 |         display: flex;
293 |       }
294 | 
295 |       .hero h1 {
296 |         font-size: 2rem;
297 |       }
298 | 
299 |       .hero p {
300 |         font-size: 1rem;
301 |       }
302 |     }
303 |   </style>
304 | </head>
305 | <body>
306 |   <header>
307 |     <div class="nav-container">
308 |       <div class="nav-logo">JsDelivr中国镜像站</div>
309 |       <nav class="nav-links">
310 | <a href="https://mengze.vip">站长博客</a> 
311 |       <a href="https://linexic.top">LineXic博客</a> 
312 | <a href="https://cdn.mengze.vip/en">English</a>  
313 |       <a href="mailto:yshenze123@gmail.com">联系站长</a>
314 |         <button class="dark-mode-toggle" id="darkModeToggle">暗色模式</button>
315 |       </nav>
316 |       <div class="hamburger" id="hamburger">
317 |         <span></span>
318 |         <span></span>
319 |         <span></span>
320 |       </div>
321 |     </div>
322 |     <div class="mobile-menu" id="mobileMenu">
323 |       <a href="https://mengze.vip">站长博客</a> 
324 |       <a href="https://linexic.top">LineXic博客</a> 
325 | <a href="https://cdn.mengze.vip/en">English</a>
326 |       <a href="mailto:yshenze123@gmail.com">联系站长</a>
327 |       <!-- 移动端也添加切换按钮 -->
328 |       <button class="dark-mode-toggle" id="darkModeToggleMobile">暗色模式</button>
329 |     </div>
330 |   </header>
331 | 
332 |   <section class="hero">
333 |     <div>
334 |       <h1>JsDelivr China Proxy</h1>
335 |       <p>
336 |         中国大陆地区优化的 jsDelivr CDN 加速服务<br>
337 |         由 <a href="https://mengze.vip" style="color: white; text-decoration: underline;">@梦泽</a>提供
338 |       </p>
339 |       <a href="#contact" class="btn">立即使用</a>
340 |     </div>
341 |   </section>
342 | 
343 |   <div class="container">
344 |     <section id="about">
345 |       <h1>如何使用本镜像站？</h1>
346 |       <p>若您需要使用加速服务，只需将 jsDelivr 链接中的 <code>cdn.jsdelivr.net</code> 替换为 <code>cdn.mengze.vip</code>即可。比如：</p>
347 |       <p><pre>https://cdn.jsdelivr.net/npm/jquery@4.0.0-beta.2/dist/jquery.min.js</pre></p>
348 |       <p>替换后变为：</p>
349 |       <p><pre>https://cdn.mengze.vip/npm/jquery@4.0.0-beta.2/dist/jquery.min.js</pre></p>
350 |       <p>若想访问项目文件夹，请使用如下格式：</p>
351 |       <p><pre>https://cdn.mengze.vip/npm/包名@版本/</pre></p>
352 |       <p>示例：</p>
353 |       <p><pre>https://cdn.mengze.vip/npm/jquery@4.0.0-beta.2/</pre></p>
354 |       <hr>
355 |       <br>
356 |       <p>为了确保服务的稳定性与合规性，使用本镜像站时请遵守以下规定：</p>
357 |       <ul class="list-disc pl-6">
358 |         <li><b>不得 </b> 加速或传播违反中国大陆法律法规的内容，包括但不限于色情、暴力、政治敏感信息等。</li>
359 |         <li>镜像站提供 <b>稳定加速服务</b>，但不对长期可用性做保证。</li>
360 |         <li>如需清除缓存，请参考 <a href="https://www.jsdelivr.com" class="text-blue-500 hover:underline">jsDelivr 官方指南</a>。</li>
361 |       </ul>
362 |       <p>项目开源地址：<a href="https://github.com/YShenZe/vercel-jsdelivr-mirror" target="_blank" style="color: var(--accent); text-decoration: underline;">GitHub 仓库</a></p>
363 |     </section>
364 | 
365 |   </div>
366 | 
367 |   <footer>
368 |     <p>&copy; 2024 梦泽的 jsDelivr 镜像站 · 基于开源项目运行</p>
369 |   </footer>
370 | 
371 |   <script>
372 |     const hamburger = document.getElementById('hamburger');
373 |     const mobileMenu = document.getElementById('mobileMenu');
374 |     hamburger.addEventListener('click', () => {
375 |       mobileMenu.classList.toggle('active');
376 |       hamburger.classList.toggle('open');
377 |     });
378 | 
379 |     const darkModeToggle = document.getElementById('darkModeToggle');
380 |     const darkModeToggleMobile = document.getElementById('darkModeToggleMobile');
381 | 
382 |     if (localStorage.getItem('darkMode') === 'enabled') {
383 |       document.body.classList.add('dark-mode');
384 |       darkModeToggle.textContent = '亮色模式';
385 |       darkModeToggleMobile.textContent = '亮色模式';
386 |     }
387 | 
388 |     function toggleDarkMode() {
389 |       document.body.classList.toggle('dark-mode');
390 |       const isDark = document.body.classList.contains('dark-mode');
391 |       darkModeToggle.textContent = isDark ? '亮色模式' : '暗色模式';
392 |       darkModeToggleMobile.textContent = isDark ? '亮色模式' : '暗色模式';
393 |       localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
394 |     }
395 | 
396 |     darkModeToggle.addEventListener('click', toggleDarkMode);
397 |     darkModeToggleMobile.addEventListener('click', () => {
398 |       mobileMenu.classList.remove('active');
399 |       toggleDarkMode();
400 |     });
401 |   </script>
402 | <script defer src="https://u.linexic.top/script.js" data-website-id="a65d7910-4945-4632-ad13-b5f65c378919"></script>
403 | </body>
404 | </html>


--------------------------------------------------------------------------------
/index-en.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>JsDelivr China Proxy</title>
  7 |   <meta name="description" content='A jsDelivr proxy mirror site built by Mengze, styled with Tailwind CSS. It can be hosted on Vercel with your custom domain. Features include searching npm packages and more. https://cdn.mengze.vip/'>
  8 |   <meta name="keywords" content="jsDelivr, Mengze, Proxy Mirror Site">
  9 |   <meta name="author" content="Mengze, yshenze123@gmail.com">
 10 |   <style>
 11 |     :root {
 12 |       --primary: #2A5C82;
 13 |       --secondary: #5BA4E6;
 14 |       --accent: #0d6efd;
 15 |       --light: #F8F9FA;
 16 |       --header-height: 70px;
 17 |       --shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 18 |       --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 19 |       --border-radius: 6px;
 20 |       --transition: 0.3s ease;
 21 |     }
 22 | 
 23 |     body.dark-mode {
 24 |       --primary: #1e1e1e;
 25 |       --secondary: #444;
 26 |       --accent: #0d6efd;
 27 |       --light: #121212;
 28 |     }
 29 | 
 30 |     body {
 31 |       font-family: 'Segoe UI', system-ui, sans-serif;
 32 |       line-height: 1.6;
 33 |       background: var(--light);
 34 |       color: #333;
 35 |       transition: background var(--transition), color var(--transition);
 36 |     }
 37 | 
 38 |     * {
 39 |       box-sizing: border-box;
 40 |       margin: 0;
 41 |       padding: 0;
 42 |     }
 43 | 
 44 |     /* Top Navigation */
 45 |     header {
 46 |       background: rgba(42, 92, 130, 0.9);
 47 |       color: white;
 48 |       position: fixed;
 49 |       top: 0;
 50 |       left: 0;
 51 |       width: 100%;
 52 |       height: var(--header-height);
 53 |       z-index: 1000;
 54 |       box-shadow: var(--shadow);
 55 |       transition: background var(--transition);
 56 |     }
 57 | 
 58 |     body.dark-mode header {
 59 |       background: rgba(30, 30, 30, 0.9);
 60 |     }
 61 | 
 62 |     .nav-container {
 63 |       max-width: 1200px;
 64 |       margin: 0 auto;
 65 |       padding: 0 1rem;
 66 |       height: 100%;
 67 |       display: flex;
 68 |       justify-content: space-between;
 69 |       align-items: center;
 70 |     }
 71 | 
 72 |     .nav-logo {
 73 |       font-size: 1.6rem;
 74 |       font-weight: bold;
 75 |     }
 76 | 
 77 |     .nav-links {
 78 |       display: flex;
 79 |       gap: 1.5rem;
 80 |     }
 81 | 
 82 |     .nav-links a {
 83 |       color: white;
 84 |       text-decoration: none;
 85 |       font-size: 1rem;
 86 |       transition: color var(--transition);
 87 |     }
 88 | 
 89 |     .nav-links a:hover {
 90 |       color: var(--secondary);
 91 |     }
 92 | 
 93 |     body.dark-mode .nav-links a:hover {
 94 |       color: var(--accent);
 95 |     }
 96 | 
 97 |     .hamburger {
 98 |       display: none;
 99 |       flex-direction: column;
100 |       justify-content: space-between;
101 |       width: 25px;
102 |       height: 18px;
103 |       cursor: pointer;
104 |       transition: transform var(--transition);
105 |     }
106 | 
107 |     .hamburger span {
108 |       display: block;
109 |       height: 3px;
110 |       background: white;
111 |       border-radius: var(--border-radius);
112 |       transition: all var(--transition);
113 |     }
114 | 
115 |     .mobile-menu {
116 |       display: none;
117 |       flex-direction: column;
118 |       gap: 1rem;
119 |       background: rgba(42, 92, 130, 0.95);
120 |       padding: 1rem;
121 |       text-align: center;
122 |       transition: max-height var(--transition) ease;
123 |       overflow: hidden;
124 |     }
125 | 
126 |     .mobile-menu a {
127 |       color: white;
128 |       text-decoration: none;
129 |       font-size: 1.2rem;
130 |     }
131 | 
132 |     .mobile-menu.active {
133 |       display: flex;
134 |     }
135 | 
136 |     body.dark-mode .mobile-menu {
137 |       background: rgba(30, 30, 30, 0.95);
138 |     }
139 | 
140 |     .hero {
141 |       height: calc(100vh - var(--header-height));
142 |       padding-top: var(--header-height);
143 |       background: linear-gradient(rgba(42, 92, 130, 0.8), rgba(42, 92, 130, 0.8)),
144 |                   url('https://picsum.photos/1920/1080') center/cover no-repeat;
145 |       display: flex;
146 |       align-items: center;
147 |       justify-content: center;
148 |       text-align: center;
149 |       color: white;
150 |       transition: background var(--transition);
151 |     }
152 | 
153 |     body.dark-mode .hero {
154 |       background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(30, 30, 30, 0.8)),
155 |                   url('https://picsum.photos/1920/1080') center/cover no-repeat;
156 |     }
157 | 
158 |     .hero h1 {
159 |       font-size: 3rem;
160 |       margin-bottom: 1rem;
161 |       text-shadow: 0 2px 4px rgba(0,0,0,0.3);
162 |     }
163 | 
164 |     .hero p {
165 |       font-size: 1.2rem;
166 |       margin-bottom: 1.5rem;
167 |       line-height: 1.5;
168 |       text-shadow: 0 1px 3px rgba(0,0,0,0.3);
169 |     }
170 | 
171 |     .btn {
172 |       background: white;
173 |       color: var(--accent);
174 |       padding: 0.8rem 1.5rem;
175 |       border: none;
176 |       border-radius: var(--border-radius);
177 |       cursor: pointer;
178 |       font-weight: bold;
179 |       text-decoration: none;
180 |       transition: background var(--transition), transform var(--transition);
181 |     }
182 | 
183 |     .btn:hover {
184 |       background: #f0f0f0;
185 |       transform: translateY(-2px);
186 |     }
187 | 
188 |     .container {
189 |       max-width: 1200px;
190 |       margin: 2rem auto;
191 |       padding: 0 1rem;
192 |     }
193 | 
194 |     #about, #contact {
195 |       margin-bottom: 2rem;
196 |       transition: background var(--transition), color var(--transition);
197 |     }
198 | 
199 |     body.dark-mode #about,
200 |     body.dark-mode #contact {
201 |       color: #ddd;
202 |     }
203 | 
204 |     #about h2, #contact h2 {
205 |       color: var(--accent);
206 |       margin-bottom: 1rem;
207 |       text-align: center;
208 |     }
209 | 
210 |     #about p {
211 |       margin-bottom: 1rem;
212 |     }
213 | 
214 |     code{
215 |       background: #CFCFCF;
216 |       border-radius: 3px;
217 |       padding: 1px;
218 |       font-family: Consolas, monospace;
219 |     }
220 | 
221 |     pre {
222 |       background: #CFCFCF;
223 |       padding: 1rem;
224 |       border-radius: 4px;
225 |       overflow-x: auto;
226 |       font-family: Consolas, monospace;
227 |       margin: 1rem 0;
228 |       transition: background var(--transition), color var(--transition);
229 |     }
230 | 
231 |     body.dark-mode code{
232 |       background: #333;
233 |       border-radius: 3px;
234 |       padding: 1px;
235 |       font-family: Consolas, monospace;
236 |     }
237 | 
238 |     body.dark-mode pre {
239 |       background: #333;
240 |       color: #eee;
241 |     }
242 | 
243 |     form button {
244 |       background: var(--accent);
245 |       color: white;
246 |       padding: 0.8rem 1.5rem;
247 |       border: none;
248 |       border-radius: var(--border-radius);
249 |       cursor: pointer;
250 |       font-size: 1rem;
251 |       transition: background var(--transition);
252 |     }
253 | 
254 |     form button:hover {
255 |       background: #0056b3;
256 |     }
257 | 
258 |     footer {
259 |       background: #333;
260 |       color: white;
261 |       text-align: center;
262 |       padding: 1rem;
263 |       font-size: 0.9rem;
264 |     }
265 | 
266 |     body.dark-mode footer {
267 |       background: #222;
268 |     }
269 | 
270 |     .dark-mode-toggle {
271 |       background: none;
272 |       border: 1px solid white;
273 |       border-radius: var(--border-radius);
274 |       color: white;
275 |       padding: 0.3rem 0.6rem;
276 |       cursor: pointer;
277 |       font-size: 0.9rem;
278 |       transition: background var(--transition), transform var(--transition);
279 |     }
280 | 
281 |     .dark-mode-toggle:hover {
282 |       background: rgba(255, 255, 255, 0.2);
283 |       transform: translateY(-2px);
284 |     }
285 | 
286 |     @media (max-width: 768px) {
287 |       .nav-links {
288 |         display: none;
289 |       }
290 | 
291 |       .hamburger {
292 |         display: flex;
293 |       }
294 | 
295 |       .hero h1 {
296 |         font-size: 2rem;
297 |       }
298 | 
299 |       .hero p {
300 |         font-size: 1rem;
301 |       }
302 |     }
303 |   </style>
304 | </head>
305 | <body>
306 |   <header>
307 |     <div class="nav-container">
308 |       <div class="nav-logo">JsDelivr China Mirror Site</div>
309 |       <nav class="nav-links">
310 |         <a href="https://yzeblog.dev.tc">Owner's Blog</a>
311 |         <a href="https://linexic.top">LineXic Blog</a>
312 | <a href="https://cdn.mengze.vip">Chinese</a>
313 |         <a href="https://blogecho.zeimg.top">BlogEcho</a>
314 |         <a href="mailto:yshenze123@gmail.com">Contact Owner</a>
315 |         <button class="dark-mode-toggle" id="darkModeToggle">Dark Mode</button>
316 |       </nav>
317 |       <div class="hamburger" id="hamburger">
318 |         <span></span>
319 |         <span></span>
320 |         <span></span>
321 |       </div>
322 |     </div>
323 |     <div class="mobile-menu" id="mobileMenu">
324 |       <a href="https://yzeblog.dev.tc">Owner's Blog</a>
325 |       <a href="https://linexic.top">LineXic Blog</a>
326 |       <a href="https://blogecho.zeimg.top">BlogEcho</a>
327 |       <a href="https://cdn.mengze.vip">Chinese</a>
328 |       <a href="mailto:yshenze123@gmail.com">Contact Owner</a>
329 |       <button class="dark-mode-toggle" id="darkModeToggleMobile">Dark Mode</button>
330 |     </div>
331 |   </header>
332 | 
333 |   <section class="hero">
334 |     <div>
335 |       <h1>JsDelivr China Proxy</h1>
336 |       <p>
337 |         Optimized jsDelivr CDN acceleration service for Mainland China<br>
338 |         Provided by <a href="https://mengze.vip" style="color: white; text-decoration: underline;">@Mengze</a>
339 |       </p>
340 |       <a href="#contact" class="btn">Use Now</a>
341 |     </div>
342 |   </section>
343 | 
344 |   <div class="container">
345 |     <section id="about">
346 |       <h1>How to Use This Mirror Site?</h1>
347 |       <p>If you want to use the acceleration service, simply replace <code>cdn.jsdelivr.net</code> with <code>cdn.mengze.vip</code> in the jsDelivr link. For example:</p>
348 |       <p><pre>https://cdn.jsdelivr.net/npm/jquery@4.0.0-beta.2/dist/jquery.min.js</pre></p>
349 |       <p>After replacement, it becomes:</p>
350 |       <p><pre>https://cdn.mengze.vip/npm/jquery@4.0.0-beta.2/dist/jquery.min.js</pre></p>
351 |       <p>To access the project folder, use the following format:</p>
352 |       <p><pre>https://cdn.mengze.vip/npm/package-name@version/</pre></p>
353 |       <p>Example:</p>
354 |       <p><pre>https://cdn.mengze.vip/npm/jquery@4.0.0-beta.2/</pre></p>
355 |       <hr>
356 |       <br>
357 |       <p>To ensure the stability and compliance of the service, please adhere to the following regulations when using this mirror site:</p>
358 |       <ul class="list-disc pl-6">
359 |         <li><b>Do not</b> accelerate or distribute content that violates the laws and regulations of Mainland China, including but not limited to pornography, violence, and politically sensitive information.</li>
360 |         <li>The mirror site provides <b>stable acceleration services</b>, but does not guarantee long-term availability.</li>
361 |         <li>If you need to clear the cache, please refer to the <a href="https://www.jsdelivr.com" class="text-blue-500 hover:underline">jsDelivr official guide</a>.</li>
362 |       </ul>
363 |       <p>Project source code: <a href="https://github.com/YShenZe/vercel-jsdelivr-mirror" target="_blank" style="color: var(--accent); text-decoration: underline;">GitHub Repository</a></p>
364 |     </section>
365 | 
366 |   </div>
367 | 
368 |   <footer>
369 |     <p>&copy; 2024 Mengze's JsDelivr Mirror Site · Running on an open-source project</p>
370 |   </footer>
371 | 
372 |   <script>
373 |     const hamburger = document.getElementById('hamburger');
374 |     const mobileMenu = document.getElementById('mobileMenu');
375 |     hamburger.addEventListener('click', () => {
376 |       mobileMenu.classList.toggle('active');
377 |       hamburger.classList.toggle('open');
378 |     });
379 | 
380 |     const darkModeToggle = document.getElementById('darkModeToggle');
381 |     const darkModeToggleMobile = document.getElementById('darkModeToggleMobile');
382 | 
383 |     if (localStorage.getItem('darkMode') === 'enabled') {
384 |       document.body.classList.add('dark-mode');
385 |       darkModeToggle.textContent = 'Light Mode';
386 |       darkModeToggleMobile.textContent = 'Light Mode';
387 |     }
388 | 
389 |     function toggleDarkMode() {
390 |       document.body.classList.toggle('dark-mode');
391 |       const isDark = document.body.classList.contains('dark-mode');
392 |       darkModeToggle.textContent = isDark ? 'Light Mode' : 'Dark Mode';
393 |       darkModeToggleMobile.textContent = isDark ? 'Light Mode' : 'Dark Mode';
394 |       localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
395 |     }
396 | 
397 |     darkModeToggle.addEventListener('click', toggleDarkMode);
398 |     darkModeToggleMobile.addEventListener('click', () => {
399 |       mobileMenu.classList.remove('active');
400 |       toggleDarkMode();
401 |     });
402 |   </script>
403 | <script defer src="https://u.linexic.top/script.js" data-website-id="a65d7910-4945-4632-ad13-b5f65c378919"></script>
404 | </body>
405 | </html>
406 | 


--------------------------------------------------------------------------------