PageSourceSearch

https://kemeow0815.github.io/post/

html kemeow0815.github.io collected 2026-10-03 09:27:10 UTC 26,273 bytes, 632 lines download raw bytes

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<meta http-equiv="X-UA-Compatible" content="ie=edge">
7<link rel="stylesheet" href="/styles/main.min.css">
8
9
10<link rel="icon" href="/favicon.ico" type="image/x-icon">
11
12
13<script>
14(function() {
15  // Check for saved theme preference
16  var savedTheme = localStorage.getItem('theme');
17  
18  if (savedTheme) {
19    // Use saved preference
20    document.documentElement.setAttribute('data-theme', savedTheme);
21  } else {
22    // Check system preference
23    var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
24    var theme = prefersDark ? 'dark' : 'light';
25    document.documentElement.setAttribute('data-theme', theme);
26  }
27})();
28</script>
28
29
30
31<meta name="description" content="每一段旅行,都有终点。">
32<meta property="og:site_name" content="喵洛阁">
33<meta property="og:title" content="喵洛阁">
34<meta property="og:description" content="每一段旅行,都有终点。">
35
36<meta property="og:image" content="/images/avatar.png">
37
38<meta property="og:url" content="https://kemeow0815.github.io">
39<meta property="og:type" content="website">
40<meta name="twitter:card" content="summary_large_image">
41<meta name="twitter:title" content="喵洛阁">
42<meta name="twitter:description" content="每一段旅行,都有终点。">
43
44<meta name="twitter:image" content="/images/avatar.png">
45
46
47  <meta name="generator" content="Gridea Pro 1.1.1">
48  <title>全部文章 | 喵洛阁</title>
49  
50<meta name="description" content="每一段旅行,都有终点。">
51<link rel="canonical" href="https://kemeow0815.github.io/post/">
52<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"喵洛阁","url":"https://kemeow0815.github.io","description":"每一段旅行,都有终点。","potentialAction":{"@type":"SearchAction","query-input":"required name=search_term_string","target":"https://kemeow0815.github.io/search?q={search_term_string}"}}</script>
52
53<meta property="og:title" content="喵洛阁">
54<meta property="og:description" content="每一段旅行,都有终点。">
55<meta property="og:url" content="https://kemeow0815.github.io/post/">
56<meta property="og:type" content="website">
57<meta property="og:site_name" content="喵洛阁">
58<meta property="og:image" content="/images/avatar.png">
59<meta name="twitter:card" content="summary_large_image">
60<meta name="twitter:url" content="https://kemeow0815.github.io/post/">
61<meta name="twitter:title" content="喵洛阁">
62<meta name="twitter:description" content="每一段旅行,都有终点。">
63<meta name="twitter:image" content="/images/avatar.png">
64</head>
65<body class="flavor-theme">
66
67  <!-- 加载页面 -->
68  
69  <div id="loading-overlay" class="loading-overlay">
70    <div class="loading-content">
71      
72      <div class="loading-spinner"></div>
73      
74      <div class="loading-title">加载中...</div>
75    </div>
76  </div>
77  
78
79  <!-- 流星背景 -->
80  <div class="bg-container">
81    <div class="bg-stars" id="bg-stars"></div>
82  </div>
83
84  <header class="site-header" id="siteHeader">
85  <div class="header-inner">
86    <div class="top-bar">
87
88      
89      <div class="top-bar__left">
90        
91        <a href="https://kemeow0815.github.io" class="site-avatar-link" aria-label="返回首页">
92          <img class="site-avatar" src="https://jsd.268682.xyz/gh/Kemeow0815/img@main/img/kemeow0815.webp" alt="喵洛阁" />
93        </a>
94        
95        <a href="https://kemeow0815.github.io" class="site-name-link">喵洛阁</a>
96      </div>
97
98      
99      <nav class="top-bar__nav" id="sectionBar">
100        
101        
102          
103          
104          <a class="nav-item" href="https://kemeow0815.github.io/">🏠首页</a>
105          
106        
107          
108          
109          <div class="nav-item-wrapper">
110            <div class="nav-item nav-item--has-children" data-menu-id="menu-2">
111              <a class="nav-item__link" href="javascript:void(0);">📖文章</a>
112              <svg class="nav-item__arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
113                <polyline points="6 9 12 15 18 9"></polyline>
114              </svg>
115            </div>
116            <div class="nav-submenu" id="submenu-menu-2">
117              
118              <a class="nav-submenu__item" href="/post">📚全部文章</a>
119              
120              <a class="nav-submenu__item" href="/archives">📦归档</a>
121              
122              <a class="nav-submenu__item" href="/tags">🔖标签</a>
123              
124            </div>
125          </div>
126          
127        
128          
129          
130          <a class="nav-item" href="/memos">📝闪念</a>
131          
132        
133          
134          
135          <div class="nav-item-wrapper">
136            <div class="nav-item nav-item--has-children" data-menu-id="menu-4">
137              <a class="nav-item__link" href="javascript:void(0);">🔗链接</a>
138              <svg class="nav-item__arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
139                <polyline points="6 9 12 15 18 9"></polyline>
140              </svg>
141            </div>
142            <div class="nav-submenu" id="submenu-menu-4">
143              
144              <a class="nav-submenu__item" href="/links">🧑‍🤝‍🧑友链</a>
145              
146              <a class="nav-submenu__item" href="/post/fcircle">💬朋友圈</a>
147              
148            </div>
149          </div>
150          
151        
152          
153          
154          <div class="nav-item-wrapper">
155            <div class="nav-item nav-item--has-children" data-menu-id="menu-5">
156              <a class="nav-item__link" href="javascript:void(0);">📔页面</a>
157              <svg class="nav-item__arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
158                <polyline points="6 9 12 15 18 9"></polyline>
159              </svg>
160            </div>
161            <div class="nav-submenu" id="submenu-menu-5">
162              
163              <a class="nav-submenu__item" href="/post/sponsor">💗赞助</a>
164              
165              <a class="nav-submenu__item" href="/post/timetable">🗓️课程表</a>
166              
167            </div>
168          </div>
169          
170        
171          
172          
173          <a class="nav-item" href="/post/about">🫠关于</a>
174          
175        
176        
177      </nav>
178
179      
180      <div class="top-bar__right">
181        <button class="btn-icon btn-theme" id="btnTheme" type="button" aria-label="切换主题">
182          
183          <svg class="theme-icon-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
184            <path d="M20.742 13.045a8 8 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.03 8.03 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10 10 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.94 9.94 0 0 0 7.072 2.93a9.93 9.93 0 0 0 7.07-2.929a10 10 0 0 0 2.583-4.491a1 1 0 0 0-1.224-1.224m-2.772 4.301a7.95 7.95 0 0 1-5.656 2.343a7.95 7.95 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a8 8 0 0 1 2.06-1.483a10.03 10.03 0 0 0 2.89 7.848a9.97 9.97 0 0 0 7.848 2.891a8 8 0 0 1-1.484 2.059"/>
185          </svg>
186          
187          <svg class="theme-icon-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
188            <circle cx="12" cy="12" r="4"/>
189            <path d="M12 2v2"/>
190            <path d="M12 20v2"/>
191            <path d="m4.93 4.93 1.41 1.41"/>
192            <path d="m17.66 17.66 1.41 1.41"/>
193            <path d="M2 12h2"/>
194            <path d="M20 12h2"/>
195            <path d="m6.34 17.66-1.41 1.41"/>
196            <path d="m19.07 4.93-1.41 1.41"/>
197          </svg>
198        </button>
199        <button class="btn-icon btn-search search-btn" id="btnSearch" type="button" aria-label="搜索">
200          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
201            stroke-linecap="round" stroke-linejoin="round">
202            <circle cx="11" cy="11" r="8"></circle>
203            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
204          </svg>
205        </button>
206        <button class="btn-icon btn-nav-toggle mobile-only" id="btnNavToggle" type="button" aria-label="切换导航">
207          <div class="hamburger" id="hamburger">
208            <span class="hamburger__line hamburger__line--top"></span>
209            <span class="hamburger__line hamburger__line--bottom"></span>
210          </div>
211        </button>
212      </div>
213
214    </div>
215  </div>
216</header>
217
218
219<div class="header-spacer"></div>
220
221<script>
222(function(){
223  // Mobile nav toggle
224  var btn = document.getElementById('btnNavToggle');
225  var nav = document.getElementById('sectionBar');
226  var hamburger = document.getElementById('hamburger');
227  if (!btn || !nav) return;
228  btn.addEventListener('click', function(){
229    nav.classList.toggle('top-bar__nav--open');
230    if (hamburger) hamburger.classList.toggle('is-active');
231  });
232
233  // Submenu toggle for mobile
234  var navItemsWithChildren = document.querySelectorAll('.nav-item--has-children');
235  navItemsWithChildren.forEach(function(item) {
236    item.addEventListener('click', function(e) {
237      // Only handle click on mobile
238      if (window.innerWidth > 768) return;
239      
240      e.preventDefault();
241      e.stopPropagation();
242      
243      var menuId = this.getAttribute('data-menu-id');
244      var submenu = document.getElementById('submenu-' + menuId);
245      
246      // Close other open submenus
247      navItemsWithChildren.forEach(function(otherItem) {
248        if (otherItem !== item) {
249          var otherMenuId = otherItem.getAttribute('data-menu-id');
250          var otherSubmenu = document.getElementById('submenu-' + otherMenuId);
251          if (otherSubmenu && otherSubmenu.classList.contains('nav-submenu--open')) {
252            otherSubmenu.classList.remove('nav-submenu--open');
253            otherItem.classList.remove('nav-item--expanded');
254          }
255        }
256      });
257      
258      // Toggle current submenu
259      if (submenu) {
260        submenu.classList.toggle('nav-submenu--open');
261        this.classList.toggle('nav-item--expanded');
262      }
263    });
264  });
265
266  // Close mobile nav when clicking on simple nav items
267  nav.querySelectorAll('.nav-item:not(.nav-item--has-children)').forEach(function(item){
268    item.addEventListener('click', function(){
269      nav.classList.remove('top-bar__nav--open');
270      if (hamburger) hamburger.classList.remove('is-active');
271    });
272  });
273
274  // Theme toggle with performance optimization
275  var themeBtn = document.getElementById('btnTheme');
276  if (themeBtn) {
277    themeBtn.addEventListener('click', function() {
278      var currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
279      var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
280      
281      // Add class to disable transitions during theme change
282      document.body.classList.add('theme-changing');
283      
284      // Use requestAnimationFrame for smooth theme switch
285      requestAnimationFrame(function() {
286        document.documentElement.setAttribute('data-theme', newTheme);
287        localStorage.setItem('theme', newTheme);
288        
289        // Remove the class after theme change is complete
290        requestAnimationFrame(function() {
291          document.body.classList.remove('theme-changing');
292        });
293      });
294    });
295  }
296})();
297</script>
297
298
299
300  <main class="site-main" role="main">
301    
302<div class="container">
303  <div class="page-header">
304    <h1 class="page-title">全部文章</h1>
305    
306    <p class="page-subtitle">每一段旅行,都有终点。</p>
307    
308  </div>
309
310  
311  <div class="post-list">
312    
313    <article class="post-card post-card--list">
314  <div class="post-card__body">
315    <a href="/post/timetable-guide/" class="post-card__title-link">
316      <h3 class="post-card__title clamp-3">Astro 博客课程表页面实现教程</h3>
317    </a>
318    <a href="/post/timetable-guide/" class="post-card__excerpt clamp-2">
319      Astro 博客课程表页面实现教程
320前言
321本文详细讲解如何使用 Astro + TypeScript 构建一个功能完整的课程表页面,包括数据结构设计、数据解析、组件架构等核心知识点。
322整体架构
323课程表页面采用分层设计:
324
325数据层 - ...
326    </a>
327    <div class="post-card__meta meta-text">
328      2026-04-13
329      
330    </div>
331  </div>
332  
333  <a href="/post/timetable-guide/" class="post-card__thumb-link">
334    <img class="post-card__thumb" src="https://imgbed.050815.xyz/file/cover/timetable/timetable__1_.webp" alt="Astro 博客课程表页面实现教程" loading="lazy" />
335  </a>
336  
337</article>
338
339    
340    <article class="post-card post-card--list">
341  <div class="post-card__body">
342    <a href="/post/use-neon-database-with-waline-on-vercel/" class="post-card__title-link">
343      <h3 class="post-card__title clamp-3">waline使用neon数据库和在vercel部署</h3>
344    </a>
345    <a href="/post/use-neon-database-with-waline-on-vercel/" class="post-card__excerpt clamp-2">
346      文章介绍了使用Waline和neon数据库在Vercel上部署博客的过程。首先,需要创建数据库并配置存储服务,然后定义数据库名称并执行创建表操作。接下来,通过点击顶部按钮重新部署,使数据库服务生效。最后,添加环境变量并进入项目页面进行...
347    </a>
348    <div class="post-card__meta meta-text">
349      2026-04-11
350      
351    </div>
352  </div>
353  
354  <a href="/post/use-neon-database-with-waline-on-vercel/" class="post-card__thumb-link">
355    <img class="post-card__thumb" src="https://jsd.268682.xyz/gh/zsxcoder/github-img@main/img/waline-neon-deploy.avif" alt="waline使用neon数据库和在vercel部署" loading="lazy" />
356  </a>
357  
358</article>
359
360    
361    <article class="post-card post-card--list">
362  <div class="post-card__body">
363    <a href="/post/post-diff-guide/" class="post-card__title-link">
364      <h3 class="post-card__title clamp-3">新文章通知记录</h3>
365    </a>
366    <a href="/post/post-diff-guide/" class="post-card__excerpt clamp-2">
367      文章介绍了博客新文章通知功能的实现原理,包括 RSS 数据获取、IndexedDB 存储、文章变更检测、差异对比算法等核心逻辑。通过对比新旧文章数据,自动检测新增和更新的文章,并以动画弹窗形式通知用户。
368
369新文章通知记录
370
371有时候,...
372    </a>
373    <div class="post-card__meta meta-text">
374      2026-04-11
375      
376    </div>
377  </div>
378  
379  <a href="/post/post-diff-guide/" class="post-card__thumb-link">
380    <img class="post-card__thumb" src="https://jsd.268682.xyz/gh/zsxcoder/github-img@main/img/post-diff-update.avif" alt="新文章通知记录" loading="lazy" />
381  </a>
382  
383</article>
384
385    
386  </div>
387  
388
389  
390  
391</div>
392
393  </main>
394
395  <footer class="site-footer">
396  <div class="footer-inner">
397
398    
399    
400    
401    <nav class="footer-nav" aria-label="页脚导航" id="footer-nav-custom">
402    </nav>
403    
403<script>
404      (function() {
405        var navData = [
406  {"name": "主页", "link": "https://www.kemiaosw.top"},
407  {"name": "BLog", "link": "https://kemeow0815.github.io/blog"},
408  {"name": "友链屋", "link": "https://www.268682.xyz"}, {"name": "Gwitter", "link": "https://gwitter.268682.xyz"}
409];
410        if (Array.isArray(navData)) {
411          var navHtml = '';
412          navData.forEach(function(item) {
413            navHtml += '<a class="footer-nav__link" href="' + item.link + '">' + item.name + '</a>';
414          });
415          document.getElementById('footer-nav-custom').innerHTML = navHtml;
416        }
417      })();
418    </script>
418
419    
420
421    
422    <div class="footer-social">
423      
424      <a class="footer-social__link" href="https://github.com/Kemeow0815" target="_blank" rel="noopener noreferrer"
425        aria-label="GitHub">
426        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
427          <path
428            d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
429        </svg>
430      </a>
431      
432      
433      
434      
435      <a class="footer-social__link" href="https://t.me/Kemeow0815" target="_blank" rel="noopener noreferrer"
436        aria-label="Telegram">
437        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
438          <path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.95 8.24l-2.17 10.24c-.16.73-.6.9-1.22.56l-3.37-2.48-1.63 1.56c-.18.18-.33.33-.68.33l.24-3.44 6.25-5.65c.27-.24-.06-.37-.42-.13l-7.72 4.86-3.33-1.04c-.72-.23-.74-.72.15-1.06l13.02-5.02c.6-.22 1.12.14.93 1.03z"/>
439        </svg>
440      </a>
441      
442      
443      <a class="footer-social__link" href="https://qm.qq.com/q/kz5EuEimk0" target="_blank" rel="noopener noreferrer"
444        aria-label="QQ">
445        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
446          <path d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29.43 2.21 0 6.288.256 6.288-.43 0-.687-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"/>
447        </svg>
448      </a>
449      
450      
451      <a class="footer-social__link" href="https://space.bilibili.com/3546643173477234" target="_blank" rel="noopener noreferrer"
452        aria-label="Bilibili">
453        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
454          <path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"/>
455        </svg>
456      </a>
457      
458      
459      <a class="footer-social__link" href="https://web.okjike.com/u/07152f0c-0f65-4501-855b-031f3e20e4a5" target="_blank" rel="noopener noreferrer"
460        aria-label="即刻">
461        <svg width="20" height="20" viewBox="0 0 1024 1024" fill="currentColor">
462          <path d="M660.39 123.63v463.59S645.04 726.4 558.98 771.43c-53.12 31.21-128.85 67.54-228.63 70.61l58.33 58.33s175-15.35 254.82-87.5 82.89-159.9 82.89-194.31V172.75l-66-49.12z" fill="#62B2E4"/>
463          <path d="M660.39 123.63v463.58s-15.36 139.17-101.41 184.21c-53.12 31.22-128.85 67.54-228.62 70.62L297.6 702.85s70.62-13.31 117.71-28.64c47.07-15.36 72-95.19 72-95.19V123.63h173.08z" fill="#F3DB2B"/>
464        </svg>
465      </a>
466      
467      
468      <a class="footer-social__link" href="mailto:[email protected]" aria-label="邮箱">
469        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
470          <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
471        </svg>
472      </a>
473      
474      <a class="footer-social__link" href="/feed.xml" aria-label="RSS">
475        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
476          <path d="M6.18 15.64a2.18 2.18 0 110 4.36 2.18 2.18 0 010-4.36zM4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44zm0 5.66a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z"/>
477        </svg>
478      </a>
479    </div>
480
481    
482    <div class="footer-copyright">
483      <p>&copy; 2026 喵洛阁. All rights reserved.</p>
484    </div>
485
486    
487    
488    <div class="footer-custom">
489      <span id="runtime_span" style="text-align: center;"></span>
490<br>
491<script defer src="https://busuanzi.9420.ltd/js"></script>
491
492<div style="text-align: center;">
493    本站总访问量 <span id="busuanzi_site_pv"></span> 次
494    本站总访客数 <span id="busuanzi_site_uv"></span> 人
495</div>
496<!-- 引入 CSS (HEAD标签内) -->
497<link rel="stylesheet" href="https://cdn.268682.xyz/music/netease-mini-player-v2.css">
498
499<!-- 引入 JS (BODY标签底部) -->
500<script src="https://cdn.268682.xyz/music/netease-mini-player-v2.js"></script>
500
501<div class="netease-mini-player"
502     data-playlist-id="13681647281"
503     data-embed="false"
504     data-position="bottom-left"
505     data-lyric="true"
506     data-theme="auto"
507     data-default-minimized="true"
508></div>
509    </div>
510    
511
512    
513    <div class="footer-powered">
514      <span>Powered by <a href="https://gridea.pro" target="_blank" rel="noopener noreferrer">Gridea Pro</a></span>
515    </div>
516
517  </div>
518</footer>
519
520  
521  <div class="search-overlay" id="searchOverlay" style="display:none;">
522  <div class="search-modal">
523    <div class="search-header">
524      <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
525        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
526        <circle cx="11" cy="11" r="8"></circle>
527        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
528      </svg>
529      <input type="text" class="search-input" id="searchInput" placeholder="搜索文章..." autocomplete="off" />
530      <span class="search-kbd">&#8984;K</span>
531      <button class="search-close" id="searchClose" type="button" aria-label="关闭搜索">
532        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
533          stroke-linecap="round" stroke-linejoin="round">
534          <line x1="18" y1="6" x2="6" y2="18"></line>
535          <line x1="6" y1="6" x2="18" y2="18"></line>
536        </svg>
537      </button>
538    </div>
539    <div class="search-results" id="searchResults"></div>
540  </div>
541</div>
542
543<script src="/scripts/search.js"></script>
543
544  
545
546  
547
548  
549
550  
551  
551<script>function show_runtime() {
552  var X = new Date("2024/11/1 12:00:00");
553  var Y = new Date();
554  var T = Y.getTime() - X.getTime();
555  var M = 24 * 60 * 60 * 1000;
556  var a = T / M;
557  var A = Math.floor(a);
558  var b = (a - A) * 24;
559  var B = Math.floor(b);
560  var c = (b - B) * 60;
561  var C = Math.floor((b - B) * 60);
562  var D = Math.floor((c - C) * 60);
563  document.getElementById("runtime_span").innerHTML = "⏱️本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒";
564  setTimeout(show_runtime, 1000);
565}
566show_runtime();</script>
566
567  
568
569  <!-- 加载页面脚本 -->
570  
571  
571<script>
572  (function() {
573    // 页面加载完成后隐藏加载动画
574    function hideLoadingOverlay() {
575      const overlay = document.getElementById('loading-overlay');
576      if (overlay) {
577        overlay.classList.add('fade-out');
578        setTimeout(function() {
579          overlay.style.display = 'none';
580        }, 600);
581      }
582    }
583    
584    // 等待页面完全加载
585    if (document.readyState === 'complete') {
586      hideLoadingOverlay();
587    } else {
588      window.addEventListener('load', hideLoadingOverlay);
589    }
590  })();
591  </script>
591
592  
593
594  <!-- 流星背景脚本 - 性能优化 -->
595  
595<script>
596  (function() {
597    const starsContainer = document.getElementById('bg-stars');
598    if (!starsContainer) return;
599    
600    // 检测移动端和性能模式
601    const isMobile = window.matchMedia('(max-width: 750px)').matches;
602    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
603    
604    // 根据设备调整流星数量
605    const starCount = isMobile ? 15 : (prefersReducedMotion ? 0 : 25);
606    
607    // 使用 DocumentFragment 批量添加
608    const fragment = document.createDocumentFragment();
609    
610    for (let i = 0; i < starCount; i++) {
611      const star = document.createElement('div');
612      star.className = 'bg-star';
613      
614      // 随机参数 - 使用整数避免过多重绘
615      const topOffset = Math.floor(Math.random() * 130) + 'vh';
616      const fallDuration = (Math.floor(Math.random() * 8) + 6) + 's';
617      const fallDelay = (Math.floor(Math.random() * 15)) + 's';
618      
619      star.style.setProperty('--top-offset', topOffset);
620      star.style.setProperty('--fall-duration', fallDuration);
621      star.style.setProperty('--fall-delay', fallDelay);
622      
623      fragment.appendChild(star);
624    }
625    
626    starsContainer.appendChild(fragment);
627  })();
628  </script>
628
629
630<script>console.log("\n%c ✦ Gridea Pro v1.1.1 %c · Theme: flavor-theme v1.0.0 · https://gridea.pro %c\n","color:#fadfa3;background:#111111;padding:9px 14px;border-radius:4px 0 0 4px;font-weight:500;font-size:12px","color:#e05c00;background:#fff3ec;padding:9px 14px;border-radius:0 4px 4px 0;font-size:11px","")</script>
630
631</body>
632</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.