PageSourceSearch

https://chinachinese1.github.io/

html chinachinese1.github.io collected 2026-10-03 08:47:20 UTC 164,697 bytes, 1,286 lines download raw bytes

1<!DOCTYPE html><html lang="zh-CN" class="bg-[var(--page-bg)] text-[14px] md:text-[16px]" data-overlayscrollbars-initialize data-astro-cid-sckkx6r4 style="--bannerOffset: 15vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 0;--page-width: 90rem;"> <head><!-- 第三方分析脚本 - 延迟加载优化 -->
1<script>
2			// 使用 requestIdleCallback 延迟加载第三方脚本
3			function loadAnalytics() {
4				// Google Tag Manager
vendor: 328 bytes, lines 4-5
4
5				(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','
5GTM-KRX3XGVH
vendor: 13 bytes, lines 5-7
5');
6				
7				
7// Clarity
8				(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);})(window, document, "clarity", "script", "tjr3vkhj8i");
9			}
10			
11			// 在浏览器空闲时加载,或者在 3 秒后加载
12			if ('requestIdleCallback' in window) {
13				requestIdleCallback(loadAnalytics, { timeout: 3000 });
14			} else {
15				setTimeout(loadAnalytics, 3000);
16			}
17		</script>
17<title>小鱼仔娱乐 - 现在开始大卖画材!</title><meta charset="UTF-8"><meta name="description" content="小鱼仔娱乐 - 现在开始大卖画材!"><meta name="author" content="小鱼仔娱乐"><meta property="og:site_name" content="小鱼仔娱乐"><meta property="og:url" content="https://www.fishyflicks.ggff.net/"><meta property="og:title" content="小鱼仔娱乐 - 现在开始大卖画材!"><meta property="og:description" content="小鱼仔娱乐 - 现在开始大卖画材!"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://www.fishyflicks.ggff.net/"><meta name="twitter:title" content="小鱼仔娱乐 - 现在开始大卖画材!"><meta name="twitter:description" content="小鱼仔娱乐 - 现在开始大卖画材!"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.16.2"><link rel="icon" href="/favicon/favicon.ico" sizes="64x64" media="(prefers-color-scheme: light)"><link rel="icon" href="/favicon/favicon.ico" sizes="64x64" media="(prefers-color-scheme: dark)"><!-- Set the theme before the page is rendered to avoid a flash -->
17<script>(function(){const DEFAULT_THEME = "light";
18const LIGHT_MODE = "light";
19const DARK_MODE = "dark";
20const BANNER_HEIGHT_EXTEND = 30;
21const PAGE_WIDTH = 90;
22const configHue = 0;
23
24			// Load the theme from local storage
25			const theme = localStorage.getItem('theme') || DEFAULT_THEME;
26			let isDark = false;
27			switch (theme) {
28				case LIGHT_MODE:
29					document.documentElement.classList.remove('dark');
30					isDark = false;
31					break
32				case DARK_MODE:
33					document.documentElement.classList.add('dark');
34					isDark = true;
35					break
36			}
37			
38			// Set the theme for Expressive Code based on current mode
39			const expressiveTheme = isDark ? "github-dark" : "github-light";
40			const currentTheme = document.documentElement.getAttribute("data-theme");
41			
42			// 只在主题不同时才更新,避免触发不必要的重绘
43			if (currentTheme !== expressiveTheme) {
44				document.documentElement.setAttribute("data-theme", expressiveTheme);
45			}
46
47			// Load the hue from local storage
48			const hue = localStorage.getItem('hue') || configHue;
49			document.documentElement.style.setProperty('--hue', hue);
50
51			// calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text
52			let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100));
53			offset = offset - offset % 4;
54			document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
55		})();</script>
55<!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why --><!-- Pio 看板娘样式 - 仅在启用时加载 --><link rel="stylesheet" href="/pio/static/pio.css"><link rel="alternate" type="application/rss+xml" title="小鱼仔娱乐" href="https://www.fishyflicks.ggff.net/rss.xml"><!-- Umami Analytics --><link rel="stylesheet" href="/_astro/Layout.y4KPJ9hc.css">
56<link rel="stylesheet" href="/_astro/Layout.DRe9SoLl.css">
57<link rel="stylesheet" href="/_astro/_page_.BPCGGl2w.css">
58<link rel="stylesheet" href="/_astro/_page_.BTWZx1co.css">
59<link rel="stylesheet" href="/_astro/about.CLMvY_Mt.css">
60<link rel="stylesheet" href="/_astro/_page_.DTLOFCja.css">
61<style>.line-clamp-2[data-astro-cid-b6yaaygw]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.album-card[data-astro-cid-b6yaaygw]:hover{transform:translateY(-2px)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.album-card[data-astro-cid-b6yaaygw]{animation:fadeInUp .3s ease-out}
62.grid-layout[data-astro-cid-rgidg7mq]{display:grid;gap:1rem}.grid-layout[data-astro-cid-rgidg7mq][data-columns="2"]{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-layout[data-astro-cid-rgidg7mq][data-columns="3"]{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.grid-layout[data-astro-cid-rgidg7mq][data-columns="4"]{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.masonry-layout[data-astro-cid-rgidg7mq]{-moz-columns:2;columns:2;-moz-column-gap:1rem;column-gap:1rem}@media(min-width:768px){.masonry-layout[data-astro-cid-rgidg7mq]{-moz-columns:3;columns:3}}@media(min-width:1024px){.masonry-layout[data-astro-cid-rgidg7mq][data-columns="4"]{-moz-columns:4;columns:4}}.masonry-layout[data-astro-cid-rgidg7mq] .photo-item[data-astro-cid-rgidg7mq]{-moz-column-break-inside:avoid;break-inside:avoid;margin-bottom:1rem}.grid-layout[data-astro-cid-rgidg7mq] .photo-container[data-astro-cid-rgidg7mq]{aspect-ratio:1}
63.card-base[data-astro-cid-fepk5tcl]{container-type:inline-size}.anime-grid-container[data-astro-cid-fepk5tcl]{display:grid;grid-template-columns:repeat(2,1fr);transition:all .5s cubic-bezier(.4,0,.2,1)}@container (min-width: 900px){.anime-grid-container[data-astro-cid-fepk5tcl].single-sidebar{grid-template-columns:repeat(5,1fr)}}@container (min-width: 600px) and (max-width: 899px){.anime-grid-container[data-astro-cid-fepk5tcl].single-sidebar{grid-template-columns:repeat(3,1fr)}}@container (max-width: 599px){.anime-grid-container[data-astro-cid-fepk5tcl].single-sidebar{grid-template-columns:repeat(2,1fr)}}@container (min-width: 950px){.anime-grid-container[data-astro-cid-fepk5tcl].both-sidebar{grid-template-columns:repeat(5,1fr)}}@container (min-width: 650px) and (max-width: 949px){.anime-grid-container[data-astro-cid-fepk5tcl].both-sidebar{grid-template-columns:repeat(4,1fr)}}@container (min-width: 480px) and (max-width: 649px){.anime-grid-container[data-astro-cid-fepk5tcl].both-sidebar{grid-template-columns:repeat(3,1fr)}}@container (max-width: 479px){.anime-grid-container[data-astro-cid-fepk5tcl].both-sidebar{grid-template-columns:repeat(2,1fr)}}.filter-container[data-astro-cid-fepk5tcl]{display:flex;flex-wrap:wrap;gap:.5rem}.filter-tag[data-astro-cid-fepk5tcl]{padding:.5rem 1rem;border:1px solid var(--line-divider);border-radius:var(--radius-large);background:var(--btn-regular-bg);color:var(--btn-content);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.filter-tag[data-astro-cid-fepk5tcl]:hover:not(.active){background:var(--btn-hover-bg);border-color:var(--primary);transform:translateY(-1px)}.filter-tag[data-astro-cid-fepk5tcl].active{background:var(--primary);color:#fff;border-color:var(--primary)}.filter-tag[data-astro-cid-fepk5tcl].active:hover{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;transform:translateY(-1px)}[data-astro-cid-fepk5tcl][data-anime-status]{transition:all .5s cubic-bezier(.4,0,.2,1)}
63#anime-list-container[data-astro-cid-fepk5tcl].grid-mode [data-astro-cid-fepk5tcl][data-anime-status]:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 24px #00000026;z-index:10;transition:all .3s cubic-bezier(.4,0,.2,1)}#anime-list-container[data-astro-cid-fepk5tcl].list-mode [data-astro-cid-fepk5tcl][data-anime-status]:hover{transform:translate(8px) scale(1.01);box-shadow:0 8px 16px #0000001a;z-index:10;transition:all .3s cubic-bezier(.4,0,.2,1)}[data-astro-cid-fepk5tcl][data-anime-status].anime-hidden{display:none}[data-astro-cid-fepk5tcl][data-anime-status].anime-animating{transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1)}[data-astro-cid-fepk5tcl][data-anime-status].anime-fade-out{opacity:0;transform:scale(.8);pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}[data-astro-cid-fepk5tcl][data-anime-status].anime-fade-in{opacity:0;transform:scale(.8)}[data-astro-cid-fepk5tcl][data-anime-status].anime-fade-in-active{opacity:1;transform:scale(1)}
64.filter-container[data-astro-cid-komnyuwm]{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.filter-tag[data-astro-cid-komnyuwm]{padding:.625rem 1.25rem;border:1px solid var(--line-divider);border-radius:var(--radius-large);background:var(--btn-regular-bg);color:var(--btn-content);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative;overflow:hidden}.filter-tag[data-astro-cid-komnyuwm]:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary);opacity:0;transition:opacity .3s ease;z-index:-1}.filter-tag[data-astro-cid-komnyuwm]:hover:not(.active){background:var(--btn-hover-bg);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.filter-tag[data-astro-cid-komnyuwm].active{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--color-primary-rgb),.3)}.filter-tag[data-astro-cid-komnyuwm].active:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(var(--color-primary-rgb),.4)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.onload-animation[data-astro-cid-komnyuwm]{animation:fadeInUp .6s cubic-bezier(.25,.1,.25,1) forwards;opacity:0}
64.line-clamp-2[data-astro-cid-komnyuwm]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.device-card[data-astro-cid-komnyuwm]:after{content:"";position:absolute;inset:0;border-radius:.75rem;background:linear-gradient(135deg,rgba(var(--color-primary-rgb),.05),transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.device-card[data-astro-cid-komnyuwm]:hover:after{opacity:1}.device-card[data-astro-cid-komnyuwm] h3[data-astro-cid-komnyuwm]{text-shadow:0 1px 2px rgba(0,0,0,.05)}@media(max-width:640px){.filter-container[data-astro-cid-komnyuwm]{gap:.5rem}.filter-tag[data-astro-cid-komnyuwm]{padding:.5rem 1rem;font-size:.8rem}.device-card[data-astro-cid-komnyuwm] .relative[data-astro-cid-komnyuwm].p-6.pb-0{padding:1rem 1rem 0}.device-card[data-astro-cid-komnyuwm] .p-6[data-astro-cid-komnyuwm].pt-4{padding:1rem}}@media(prefers-color-scheme:dark){.device-card[data-astro-cid-komnyuwm]:hover{box-shadow:0 4px 12px #00000026}}
65.card-base[data-astro-cid-pyfuvgrx]{background:var(--card-bg);border:1px solid var(--line-divider);transition:all .3s ease}.moments-header[data-astro-cid-pyfuvgrx]{padding:1rem;border-radius:8px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark, var(--primary)) 100%);color:#fff;position:relative;overflow:hidden}.header-content[data-astro-cid-pyfuvgrx]{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.moments-title[data-astro-cid-pyfuvgrx]{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.1)}.moments-subtitle[data-astro-cid-pyfuvgrx]{color:#ffffffe6}.stat-number[data-astro-cid-pyfuvgrx]{color:#fff}.stat-label[data-astro-cid-pyfuvgrx]{color:#fffc}.image-item[data-astro-cid-pyfuvgrx] img[data-astro-cid-pyfuvgrx]{transition:transform .3s ease}.image-item[data-astro-cid-pyfuvgrx]:hover img[data-astro-cid-pyfuvgrx]{transform:scale(1.05)}.action-btn[data-astro-cid-pyfuvgrx]{background:none;border:none;cursor:pointer;color:var(--text-muted)}.action-btn[data-astro-cid-pyfuvgrx]:hover{color:var(--primary)}@media(max-width:640px){.moments-header[data-astro-cid-pyfuvgrx]{padding:.75rem}.header-content[data-astro-cid-pyfuvgrx]{flex-direction:column;text-align:center;gap:.75rem}.moment-images[data-astro-cid-pyfuvgrx]{grid-template-columns:repeat(2,1fr)}.moment-footer[data-astro-cid-pyfuvgrx]{flex-direction:column;align-items:flex-start;gap:.5rem}}@media(min-width:641px)and (max-width:900px){.moments-header[data-astro-cid-pyfuvgrx]{padding:1.25rem}.header-content[data-astro-cid-pyfuvgrx]{display:flex;justify-content:space-between;align-items:center}.moment-item[data-astro-cid-pyfuvgrx]{padding:1.5rem}.moment-images[data-astro-cid-pyfuvgrx]{grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:500px}.moment-text[data-astro-cid-pyfuvgrx]{font-size:1rem;line-height:1.7}.moment-footer[data-astro-cid-pyfuvgrx]{margin-top:1rem}}@media(min-width:901px){.moments-header[data-astro-cid-pyfuvgrx]{padding:1.5rem}.moment-item[data-astro-cid-pyfuvgrx]{padding:2rem}.moment-images[data-astro-cid-pyfuvgrx]{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:600px;gap:1rem}.moment-text[data-astro-cid-pyfuvgrx]{font-size:1.1rem;line-height:1.8}}@media(max-width:480px){.moment-item[data-astro-cid-pyfuvgrx]{border-radius:8px}.moments-header[data-astro-cid-pyfuvgrx]{border-radius:6px}}
66.friend-card[data-astro-cid-spp2p3no]{animation:fadeInUp .5s ease-out forwards;opacity:0}
66.friend-card[data-astro-cid-spp2p3no]:nth-child(1){animation-delay:.05s}.friend-card[data-astro-cid-spp2p3no]:nth-child(2){animation-delay:.1s}.friend-card[data-astro-cid-spp2p3no]:nth-child(3){animation-delay:.15s}.friend-card[data-astro-cid-spp2p3no]:nth-child(4){animation-delay:.2s}.friend-card[data-astro-cid-spp2p3no]:nth-child(5){animation-delay:.25s}.friend-card[data-astro-cid-spp2p3no]:nth-child(6){animation-delay:.3s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#friend-search[data-astro-cid-spp2p3no]:focus{box-shadow:0 0 0 3px var(--primary) / .1}.filter-container[data-astro-cid-spp2p3no]{display:flex;flex-wrap:wrap;gap:.5rem}.filter-tag[data-astro-cid-spp2p3no]{padding:.5rem 1rem;border:1px solid var(--line-divider);border-radius:var(--radius-large);background:var(--btn-regular-bg);color:var(--btn-content);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.filter-tag[data-astro-cid-spp2p3no]:hover:not(.active){background:var(--btn-hover-bg);border-color:var(--primary);transform:translateY(-1px)}.filter-tag[data-astro-cid-spp2p3no].active{background:var(--primary);color:#fff;border-color:var(--primary)}.filter-tag[data-astro-cid-spp2p3no].active:hover{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;transform:translateY(-1px)}
67.password-protection[data-astro-cid-732embm3]{display:flex;justify-content:center;align-items:center;min-height:60vh;padding:2rem}.password-container[data-astro-cid-732embm3]{text-align:center;max-width:400px;width:100%;padding:2rem;border-radius:12px;background:transparent;border:1px solid var(--line-divider);box-shadow:none}.lock-icon[data-astro-cid-732embm3]{margin-bottom:1rem;color:var(--primary)}.password-container[data-astro-cid-732embm3] h2[data-astro-cid-732embm3]{margin-bottom:.5rem;color:#000000d9;font-size:1.5rem}.dark .password-container[data-astro-cid-732embm3] h2[data-astro-cid-732embm3]{color:#ffffffd9}.password-container[data-astro-cid-732embm3] p[data-astro-cid-732embm3]{margin-bottom:1.5rem;color:#000000bf;opacity:.8}.dark .password-container[data-astro-cid-732embm3] p[data-astro-cid-732embm3]{color:#ffffffbf}.password-input-group[data-astro-cid-732embm3]{display:flex;gap:.5rem;margin-bottom:1rem;align-items:stretch}.password-input[data-astro-cid-732embm3]{flex:1;min-width:0;padding:.75rem 1rem;border:1px solid var(--line-divider);border-radius:8px;background:transparent;color:#000000d9;font-size:1rem;transition:border-color .2s ease}.dark .password-input[data-astro-cid-732embm3]{color:#ffffffd9}.password-input[data-astro-cid-732embm3]::-moz-placeholder{color:#00000080}.password-input[data-astro-cid-732embm3]::placeholder{color:#00000080}.dark .password-input[data-astro-cid-732embm3]::-moz-placeholder{color:#ffffff80}.dark .password-input[data-astro-cid-732embm3]::placeholder{color:#ffffff80}.password-input[data-astro-cid-732embm3]:focus{outline:none;border-color:var(--primary)}.unlock-button[data-astro-cid-732embm3]{padding:.75rem 1.5rem;background:transparent;color:var(--primary);border:1px solid var(--primary);border-radius:8px;font-size:1rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s;white-space:nowrap;flex-shrink:0;min-width:-moz-fit-content;min-width:fit-content;max-width:-moz-max-content;max-width:max-content}.unlock-button[data-astro-cid-732embm3]:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.unlock-button[data-astro-cid-732embm3]:disabled{opacity:.6;cursor:not-allowed}.error-message[data-astro-cid-732embm3]{color:#ef4444;font-size:.875rem;margin-top:.5rem}.decrypted-content[data-astro-cid-732embm3]{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(min-width:769px){.password-input-group[data-astro-cid-732embm3]{flex-wrap:nowrap}.unlock-button[data-astro-cid-732embm3]{max-width:40%}}@media(max-width:768px){.password-protection[data-astro-cid-732embm3]{padding:1rem;min-height:50vh}.password-container[data-astro-cid-732embm3]{max-width:none;width:100%;padding:1.5rem;margin:0 .5rem}.password-container[data-astro-cid-732embm3] h2[data-astro-cid-732embm3]{font-size:1.25rem;margin-bottom:.75rem}.password-container[data-astro-cid-732embm3] p[data-astro-cid-732embm3]{font-size:.9rem;margin-bottom:1.25rem}.password-input-group[data-astro-cid-732embm3]{flex-direction:column;gap:.75rem}.password-input[data-astro-cid-732embm3]{padding:.875rem 1rem;font-size:1rem;width:100%}.unlock-button[data-astro-cid-732embm3]{padding:.875rem 1rem;font-size:1rem;max-width:100%;width:100%;white-space:nowrap}.error-message[data-astro-cid-732embm3]{font-size:.8rem;text-align:center}}@media(max-width:480px){.password-protection[data-astro-cid-732embm3]{padding:.75rem}.password-container[data-astro-cid-732embm3]{padding:1.25rem;margin:0 .25rem}.password-container[data-astro-cid-732embm3] h2[data-astro-cid-732embm3]{font-size:1.125rem}.password-container[data-astro-cid-732embm3] p[data-astro-cid-732embm3]{font-size:.85rem}.password-input[data-astro-cid-732embm3],.unlock-button[data-astro-cid-732embm3]{padding:.75rem .875rem;font-size:.95rem}}
68.line-clamp-1[data-astro-cid-aid3sr62]{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2[data-astro-cid-aid3sr62]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
69.line-clamp-2[data-astro-cid-qlh7ngej]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #6366f166}70%{transform:scale(1.05);box-shadow:0 0 0 10px #6366f100}to{transform:scale(1);box-shadow:0 0 #6366f100}}.timeline-node[data-astro-cid-qlh7ngej]{animation:pulse 2s infinite}.timeline-horizontal-scroll[data-astro-cid-qlh7ngej]::-webkit-scrollbar{height:8px}.timeline-horizontal-scroll[data-astro-cid-qlh7ngej]::-webkit-scrollbar-track{background:#e5e7eb;border-radius:4px}.timeline-horizontal-scroll[data-astro-cid-qlh7ngej]::-webkit-scrollbar-thumb{background:hsl(var(--hue),70%,60%);border-radius:4px}
70.skills-container[data-astro-cid-xahix5fp]{position:relative}.skills-grid-container[data-astro-cid-xahix5fp]{grid-template-columns:1fr;transition:grid-template-columns .3s ease}@container (min-width: 640px){.skills-grid-container[data-astro-cid-xahix5fp]{grid-template-columns:repeat(2,1fr)}}@container (min-width: 900px){.skills-grid-container[data-astro-cid-xahix5fp]{grid-template-columns:repeat(3,1fr)}}
71</style>
72<link rel="stylesheet" href="/_astro/_page_.DodusQ_4.css">
72<script type="module" src="/_astro/page.BUqocEu6.js"></script>
72</head> <body class=" min-h-screen  lg:is-home enable-banner" style="font-family: ZenMaruGothic-Medium, &#34;手写体 第二版&#34;, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; --bannerOffset: 15vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 0;--page-width: 90rem;" data-overlayscrollbars-initialize data-astro-cid-sckkx6r4> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KRX3XGVH" height="0" width="0" style="display:none;visibility:hidden; --bannerOffset: 15vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 0;--page-width: 90rem;" data-astro-cid-sckkx6r4></iframe></noscript> <!-- 页面顶部渐变高光效果 - 只在full和semifull模式下显示 --> <div class="top-gradient-highlight" data-astro-cid-sckkx6r4 style="--bannerOffset: 15vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 0;--page-width: 90rem;"></div> <!-- 全局配置载体 --><div id="config-carrier" data-hue="0" data-hide-code-blocks-during-transition="true"></div> 
72<script>(function(){const tocEnable = true;
73const tocDepth = 2;
74const tocUseJapaneseBadge = true;
75
76  // 将TOC配置传递到前端
77  window.siteConfig = window.siteConfig || {};
78  window.siteConfig.toc = {
79    enable: tocEnable,
80    depth: tocDepth,
81    useJapaneseBadge: tocUseJapaneseBadge
82  };
83  
84  // 添加调试信息
85  console.log('TOC Config:', window.siteConfig.toc);
86})();</script>
86 <!-- 引入Umami Share工具脚本 --> 
86<script src="/js/umami-share.js"></script>
86  
86<script>(function(){const navbarTransparentMode = "semifull";
87const defaultWallpaperMode = "banner";
88const defaultPostListLayout = "list";
89
90	// 立即执行,在页面渲染前应用壁纸模式和布局模式,避免闪烁
91	(function() {
92		const wallpaperMode = localStorage.getItem('wallpaperMode') || defaultWallpaperMode;
93		const body = document.body;
94		
95		// 定义 banner 高度常量(与 constants.ts 保持一致)
96		// const BANNER_HEIGHT = 35;
97		// const BANNER_HEIGHT_EXTEND = 30;
98		// const BANNER_HEIGHT_HOME = BANNER_HEIGHT + BANNER_HEIGHT_EXTEND;
99		// const MAIN_PANEL_OVERLAPS_BANNER_HEIGHT = 3.5;
100		
101		// 立即应用 body 类,确保首次渲染就是正确的状态
102		switch(wallpaperMode) {
103			case 'banner':
104				body.classList.add('enable-banner');
105				body.classList.remove('wallpaper-transparent', 'no-banner-mode');
106				break;
107			case 'fullscreen':
108				body.classList.remove('enable-banner');
109				body.classList.add('wallpaper-transparent', 'no-banner-mode');
110				break;
111			case 'none':
112				body.classList.remove('enable-banner', 'wallpaper-transparent');
113				body.classList.add('no-banner-mode');
114				break;
115		}
116		
117		// 立即调整主内容区域位置和布局模式(避免闪烁和位置错误)
118		// 使用 requestAnimationFrame 确保 DOM 准备好
119		requestAnimationFrame(function() {
120			const mainContent = document.querySelector('.absolute.w-full.z-30.pointer-events-none');
121			if (mainContent) {
122				if (wallpaperMode === 'banner') {
123					// 让主内容区域从banner顶部开始,这样波浪线会自然覆盖内容上部
124					mainContent.style.top = `${BANNER_HEIGHT}vh`;
125				} else {
126					// fullscreen 或 none 模式
127					mainContent.style.top = '5.5rem';
128				}
129			}
130			
131			// 立即应用布局模式,避免闪烁
132			const mainGrid = document.getElementById('main-grid');
133			if (mainGrid) {
134				const savedLayout = localStorage.getItem('postListLayout');
135				const currentLayout = savedLayout || defaultPostListLayout;
136				mainGrid.setAttribute('data-layout-mode', currentLayout);
137				
138				// 根据布局模式显示或隐藏右侧边栏
139				const rightSidebar = document.querySelector('.right-sidebar-container');
140				if (rightSidebar) {
141					if (currentLayout === 'grid') {
142						rightSidebar.classList.add('hidden-in-grid-mode');
143					} else {
144						rightSidebar.classList.remove('hidden-in-grid-mode');
145					}
146				}
147				
148				// 同时更新文章列表容器的CSS类
149				const postListContainer = document.getElementById('post-list-container');
150				if (postListContainer) {
151					postListContainer.classList.remove('list-mode', 'grid-mode');
152					
153					if (currentLayout === 'grid') {
154						postListContainer.classList.add('grid-mode');
155						postListContainer.classList.add('grid', 'grid-cols-1', 'lg:grid-cols-2', 'gap-6');
156						postListContainer.classList.remove('flex', 'flex-col');
157					} else {
158						postListContainer.classList.add('list-mode');
159						postListContainer.classList.add('flex', 'flex-col');
160						postListContainer.classList.remove('grid', 'grid-cols-1', 'lg:grid-cols-2', 'gap-6');
161					}
162				}
163			}
164		});
165	})();
166	
167	// 根据壁纸模式动态设置 banner 和全屏壁纸的显示
168	// const wallpaperMode = localStorage.getItem('wallpaperMode') || defaultWallpaperMode;
169	
170	// 在 DOM 加载后执行
171	if (document.readyState === 'loading') {
172		document.addEventListener('DOMContentLoaded', applyWallpaperMode);
173	} else {
174		applyWallpaperMode();
175	}
176	
177	function applyWallpaperMode() {
178		var wallpaperMode = localStorage.getItem('wallpaperMode') || defaultWallpaperMode;
179		var bannerWrapper = document.getElementById('banner-wrapper');
180		var fullscreenWallpaper = document.querySelector('[data-fullscreen-wallpaper]');
181		var navbar = document.getElementById('navbar');
182		var body = document.body;
183		var mainContent = document.querySelector('.absolute.w-full.z-30.pointer-events-none');
184		
185		// 强制重排以确保样式正确应用
186		var forceReflow = function() {
187			void document.body.offsetHeight;
188		};
189		
190		switch(wallpaperMode) {
191			case 'banner':
192				// 显示 banner,隐藏全屏壁纸
193				if (bannerWrapper) {
194					bannerWrapper.style.display = 'block';
195				}
196				if (fullscreenWallpaper) {
197					fullscreenWallpaper.style.display = 'none';
198				}
199				// 先移除body类,避免CSS冲突
200				body.classList.remove('wallpaper-transparent');
201				body.classList.remove('no-banner-mode');
202				// 强制重排
203				forceReflow();
204				// 移除内联样式,让CSS完全接管
205				if (mainContent) {
206					mainContent.style.removeProperty('top');
207				}
208				// 再添加enable-banner类
209				body.classList.add('enable-banner');
210				// navbar 恢复原始透明模式(从 config 读取)
211				if (navbar) {
212					navbar.removeAttribute('data-dynamic-transparent');
213					// 恢复 config 中设置的 data-transparent-mode
214					navbar.setAttribute('data-transparent-mode', navbarTransparentMode);
215					// 如果是 semifull 模式,重新初始化滚动检测
216					if (navbarTransparentMode === 'semifull' && window.initSemifullScrollDetection) {
217						window.initSemifullScrollDetection();
218					}
219				}
220				// 强制重排以确保CSS变量正确更新
221				forceReflow();
222				break;
223				
224			case 'fullscreen':
225				// 隐藏 banner,显示全屏壁纸
226				if (bannerWrapper) {
227					bannerWrapper.style.display = 'none';
228				}
229				if (fullscreenWallpaper) {
230					fullscreenWallpaper.style.display = 'block';
231				}
232				// 先移除body类,避免CSS冲突
233				body.classList.remove('enable-banner');
234				// 强制重排
235				forceReflow();
236				// 移除内联样式,让CSS完全接管
237				if (mainContent) {
238					mainContent.style.removeProperty('top');
239				}
240				// 再添加wallpaper-transparent和no-banner-mode类
241				body.classList.add('wallpaper-transparent');
242				body.classList.add('no-banner-mode');
243				// navbar 强制设置为 semi 透明模式(忽略 config 配置)
244				if (navbar) {
245					navbar.setAttribute('data-dynamic-transparent', 'semi');
246					// 强制移除 config 中的 data-transparent-mode 影响
247					navbar.removeAttribute('data-transparent-mode');
248				}
249				// 强制重排以确保CSS变量正确更新
250				forceReflow();
251				break;
252				
253			case 'none':
254				// 隐藏所有壁纸
255				if (bannerWrapper) {
256					bannerWrapper.style.display = 'none';
257				}
258				if (fullscreenWallpaper) {
259					fullscreenWallpaper.style.display = 'none';
260				}
261				// 先移除body类,避免CSS冲突
262				body.classList.remove('enable-banner');
263				body.classList.remove('wallpaper-transparent');
264				// 强制重排
265				forceReflow();
266				// 移除内联样式,让CSS完全接管
267				if (mainContent) {
268					mainContent.style.removeProperty('top');
269				}
270				// 再添加no-banner-mode类
271				body.classList.add('no-banner-mode');
272				// navbar 强制设置为不透明(忽略 config 配置)
273				if (navbar) {
274					navbar.setAttribute('data-dynamic-transparent', 'none');
275					// 强制移除 config 中的 data-transparent-mode 影响
276					navbar.removeAttribute('data-transparent-mode');
277				}
278				// 强制重排以确保CSS变量正确更新
279				forceReflow();
280				break;
281		}
282	}
283	
284	// 监听壁纸模式变化,立即应用(不重载页面)
285	window.addEventListener('wallpaper-mode-change', function(_event) {
286		applyWallpaperMode();
287	});
288	
289	// 支持 Swup 页面过渡 - 在内容替换之前就应用布局,避免闪烁
290	function setupSwupLayoutSync() {
291		// @ts-ignore
292		if (typeof window !== 'undefined' && window.swup) {
293			// 关键:在 content:replace 之前(animation:out:start)就准备好布局状态
294			// @ts-ignore
295			window.swup.hooks.on('animation:out:start', function() {
296				// 保存当前布局状态,以便在新页面中立即应用
297				const savedLayout = localStorage.getItem('postListLayout');
298				if (savedLayout) {
299					// @ts-ignore
300					window.__pendingLayoutMode = savedLayout;
301				}
302			});
303			
304			// 在内容替换后立即应用布局,不等待其他脚本
305			// @ts-ignore
306			window.swup.hooks.on('content:replace', function() {
307				const mainGrid = document.getElementById('main-grid');
308				if (mainGrid) {
309					// @ts-ignore
310					const currentLayout = window.__pendingLayoutMode || localStorage.getItem('postListLayout') || defaultPostListLayout;
311					mainGrid.setAttribute('data-layout-mode', currentLayout);
312					
313					const rightSidebar = document.querySelector('.right-sidebar-container');
314					if (rightSidebar) {
315						if (currentLayout === 'grid') {
316							rightSidebar.classList.add('hidden-in-grid-mode');
317						} else {
318							rightSidebar.classList.remove('hidden-in-grid-mode');
319						}
320					}
321					
322					// 关键:同时更新文章列表容器的CSS类
323					const postListContainer = document.getElementById('post-list-container');
324					if (postListContainer) {
325						// 移除现有布局类
326						postListContainer.classList.remove('list-mode', 'grid-mode');
327						
328						if (currentLayout === 'grid') {
329							postListContainer.classList.add('grid-mode');
330							postListContainer.classList.add('grid', 'grid-cols-1', 'lg:grid-cols-2', 'gap-6');
331							postListContainer.classList.remove('flex', 'flex-col');
332						} else {
333							postListContainer.classList.add('list-mode');
334							postListContainer.classList.add('flex', 'flex-col');
335							postListContainer.classList.remove('grid', 'grid-cols-1', 'lg:grid-cols-2', 'gap-6');
336						}
337					}
338					
339					// 清除临时状态
340					// @ts-ignore
341					delete window.__pendingLayoutMode;
342				}
343			});
344			
345			return true;
346		}
347		return false;
348	}
349	
350	// 尝试立即设置,如果失败则延迟重试
351	if (!setupSwupLayoutSync()) {
352		const checkSwup = setInterval(function() {
353			if (setupSwupLayoutSync()) {
354				clearInterval(checkSwup);
355			}
356		}, 50);
357		
358		setTimeout(function() {
359			clearInterval(checkSwup);
360		}, 2000);
361	}
362	
363	// 支持 Swup 页面过渡
364	document.addEventListener('swup:page:view', function() {
365		applyWallpaperMode();
366		
367		// 在Swup页面切换时也要重新应用布局模式
368		requestAnimationFrame(function() {
369			const mainGrid = document.getElementById('main-grid');
370			if (mainGrid) {
371				const savedLayout = localStorage.getItem('postListLayout');
372				const currentLayout = savedLayout || defaultPostListLayout;
373				mainGrid.setAttribute('data-layout-mode', currentLayout);
374				
375				if (currentLayout === 'grid') {
376					const rightSidebar = document.querySelector('.right-sidebar-container');
377					if (rightSidebar) {
378						rightSidebar.classList.add('hidden-in-grid-mode');
379					}
380				} else {
381					const rightSidebar = document.querySelector('.right-sidebar-container');
382					if (rightSidebar) {
383						rightSidebar.classList.remove('hidden-in-grid-mode');
384					}
385				}
386			}
387		});
388	});
389	// 在页面完全加载后,再次确认布局模式是否正确
390	if (document.readyState === 'loading') {
391		document.addEventListener('DOMContentLoaded', function() {
392			const mainGrid = document.getElementById('main-grid');
393			if (mainGrid) {
394				const savedLayout = localStorage.getItem('postListLayout');
395				const currentLayout = savedLayout || defaultPostListLayout;
396				mainGrid.setAttribute('data-layout-mode', currentLayout);
397				
398				if (currentLayout === 'grid') {
399					const rightSidebar = document.querySelector('.right-sidebar-container');
400					if (rightSidebar) {
401						rightSidebar.classList.add('hidden-in-grid-mode');
402					}
403				}
404			}
405		});
406	}
407})();</script>
407  <div class="fixed inset-0 w-full h-full overflow-hidden pointer-events-none" style="z-index: -1; opacity: 0.8;" data-fullscreen-wallpaper> 
407<script>
408// 根据 localStorage 立即设置全屏壁纸初始显示状态,避免闪烁
409(function() {
410	const wallpaperMode = localStorage.getItem('wallpaperMode') || 'banner';
411	const fullscreenWallpaper = document.currentScript.parentElement;
412	if (wallpaperMode !== 'fullscreen') {
413		fullscreenWallpaper.style.display = 'none';
414	}
415})();
416</script>
416 <!-- 桌面端壁纸 --> <div class="hidden lg:block w-full h-full relative"> <img src="/assets/desktop-banner/1.webp" alt="Desktop wallpaper 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="0" style="filter: blur(1px);"><img src="/assets/desktop-banner/2.webp" alt="Desktop wallpaper 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="1" style="filter: blur(1px);"><img src="/assets/desktop-banner/3.webp" alt="Desktop wallpaper 3" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="2" style="filter: blur(1px);"><img src="/assets/desktop-banner/4.webp" alt="Desktop wallpaper 4" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="3" style="filter: blur(1px);"><img src="/assets/desktop-banner/5.webp" alt="Desktop wallpaper 5" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="4" style="filter: blur(1px);"><img src="/assets/desktop-banner/6.webp" alt="Desktop wallpaper 6" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="5" style="filter: blur(1px);"> </div> <!-- 移动端壁纸 --> <div class="block lg:hidden w-full h-full relative"> <img src="/assets/mobile-banner/1.webp" alt="Mobile wallpaper 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="0" style="filter: blur(1px);"><img src="/assets/mobile-banner/2.webp" alt="Mobile wallpaper 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="1" style="filter: blur(1px);"><img src="/assets/mobile-banner/3.webp" alt="Mobile wallpaper 3" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="2" style="filter: blur(1px);"><img src="/assets/mobile-banner/4.webp" alt="Mobile wallpaper 4" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="3" style="filter: blur(1px);"><img src="/assets/mobile-banner/5.webp" alt="Mobile wallpaper 5" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="4" style="filter: blur(1px);"><img src="/assets/mobile-banner/6.webp" alt="Mobile wallpaper 6" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 object-center" data-carousel-item="5" style="filter: blur(1px);"> </div> </div> 
416<script>(function(){const carouselInterval = 5;
417
418		// 全屏壁纸轮播逻辑
419		function initFullscreenWallpaperCarousel() {
420			const wallpaperContainer = document.querySelector('[data-fullscreen-wallpaper]');
421			if (!wallpaperContainer) return;
422
423			const desktopItems = wallpaperContainer.querySelectorAll('.hidden.lg\\:block [data-carousel-item]');
424			const mobileItems = wallpaperContainer.querySelectorAll('.block.lg\\:hidden [data-carousel-item]');
425
426			function startCarousel(items) {
427				if (items.length <= 1) return;
428
429				let currentIndex = 0;
430				
431				// 初始化:显示第一张,隐藏其他
432				items.forEach((item, index) => {
433					item.style.opacity = index === 0 ? '1' : '0';
434				});
435
436				// 开始轮播
437				setInterval(() => {
438					// 隐藏当前图片
439					items[currentIndex].style.opacity = '0';
440					
441					// 切换到下一张
442					currentIndex = (currentIndex + 1) % items.length;
443					
444					// 显示下一张图片
445					items[currentIndex].style.opacity = '1';
446				}, carouselInterval * 1000);
447			}
448
449			// 分别为桌面端和移动端启动轮播
450			if (desktopItems.length > 0) {
451				startCarousel(desktopItems);
452			}
453			if (mobileItems.length > 0) {
454				startCarousel(mobileItems);
455			}
456		}
457
458		// 页面加载完成后初始化轮播
459		if (document.readyState === 'loading') {
460			document.addEventListener('DOMContentLoaded', initFullscreenWallpaperCarousel);
461		} else {
462			initFullscreenWallpaperCarousel();
463		}
464	})();</script>
464  <!-- Iconify图标库加载器 -->
464<script>(function(){const preloadIcons = [];
465const timeout = 10000;
466const retryCount = 3;
467
468  // 全局图标加载逻辑
469  (function() {
470    'use strict';
471    
472    // 避免重复加载
473    if (window.__iconifyLoaderInitialized) {
474      return;
475    }
476    window.__iconifyLoaderInitialized = true;
477
478    // 图标加载器类
479    class IconifyLoader {
480      constructor() {
481        this.isLoaded = false;
482        this.isLoading = false;
483        this.loadPromise = null;
484        this.observers = new Set();
485        this.preloadQueue = new Set();
486      }
487
488      async load(options = {}) {
489        const { timeout: loadTimeout = timeout, retryCount: maxRetries = retryCount } = options;
490        
491        if (this.isLoaded) {
492          return Promise.resolve();
493        }
494
495        if (this.isLoading && this.loadPromise) {
496          return this.loadPromise;
497        }
498
499        this.isLoading = true;
500        this.loadPromise = this.loadWithRetry(loadTimeout, maxRetries);
501
502        try {
503          await this.loadPromise;
504          this.isLoaded = true;
505          this.notifyObservers();
506          await this.processPreloadQueue();
507        } catch (error) {
508          console.error('Failed to load Iconify:', error);
509          throw error;
510        } finally {
511          this.isLoading = false;
512        }
513      }
514
515      async loadWithRetry(timeout, retryCount) {
516        for (let attempt = 1; attempt <= retryCount; attempt++) {
517          try {
518            await this.loadScript(timeout);
519            return;
520          } catch (error) {
521            console.warn(`Iconify load attempt ${attempt} failed:`, error);
522            
523            if (attempt === retryCount) {
524              throw new Error(`Failed to load Iconify after ${retryCount} attempts`);
525            }
526            
527            await new Promise(resolve => setTimeout(resolve, 1000));
528          }
529        }
530      }
531
532      loadScript(timeout) {
533        return new Promise((resolve, reject) => {
534          // 检查是否已经存在
535          if (this.isIconifyReady()) {
536            resolve();
537            return;
538          }
539
540          const existingScript = document.querySelector('script[src*="iconify-icon"]');
541          if (existingScript) {
542            this.waitForIconifyReady().then(resolve).catch(reject);
543            return;
544          }
545
546          const script = document.createElement('script');
547          script.src = 'https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js';
548          script.async = true;
549          script.crossOrigin = 'anonymous';
550
551          const timeoutId = setTimeout(() => {
552            script.remove();
553            reject(new Error('Script load timeout'));
554          }, timeout);
555
556          script.onload = () => {
557            clearTimeout(timeoutId);
558            this.waitForIconifyReady().then(resolve).catch(reject);
559          };
560
561          script.onerror = () => {
562            clearTimeout(timeoutId);
563            script.remove();
564            reject(new Error('Script load error'));
565          };
566
567          document.head.appendChild(script);
568        });
569      }
570
571      waitForIconifyReady(maxWait = 5000) {
572        return new Promise((resolve, reject) => {
573          const startTime = Date.now();
574          
575          const checkReady = () => {
576            if (this.isIconifyReady()) {
577              resolve();
578              return;
579            }
580            
581            if (Date.now() - startTime > maxWait) {
582              reject(new Error('Iconify initialization timeout'));
583              return;
584            }
585            
586            setTimeout(checkReady, 50);
587          };
588          
589          checkReady();
590        });
591      }
592
593      isIconifyReady() {
594        return typeof window !== 'undefined' && 
595               'customElements' in window && 
596               customElements.get('iconify-icon') !== undefined;
597      }
598
599      onLoad(callback) {
600        if (this.isLoaded) {
601          callback();
602        } else {
603          this.observers.add(callback);
604        }
605      }
606
607      notifyObservers() {
608        this.observers.forEach(callback => {
609          try {
610            callback();
611          } catch (error) {
612            console.error('Error in icon load observer:', error);
613          }
614        });
615        this.observers.clear();
616      }
617
618      addToPreloadQueue(icons) {
619        if (Array.isArray(icons)) {
620          icons.forEach(icon => this.preloadQueue.add(icon));
621        } else {
622          this.preloadQueue.add(icons);
623        }
624        
625        if (this.isLoaded) {
626          this.processPreloadQueue();
627        }
628      }
629
630      async processPreloadQueue() {
631        if (this.preloadQueue.size === 0) return;
632        
633        const iconsToLoad = Array.from(this.preloadQueue);
634        this.preloadQueue.clear();
635        
636        await this.preloadIcons(iconsToLoad);
637      }
638
639      async preloadIcons(icons) {
640        if (!this.isLoaded || icons.length === 0) return;
641
642        return new Promise((resolve) => {
643          let loadedCount = 0;
644          const totalIcons = icons.length;
645          const tempElements = [];
646
647          const cleanup = () => {
648            tempElements.forEach(el => {
649              if (el.parentNode) {
650                el.parentNode.removeChild(el);
651              }
652            });
653          };
654
655          const checkComplete = () => {
656            loadedCount++;
657            if (loadedCount >= totalIcons) {
658              cleanup();
659              resolve();
660            }
661          };
662
663          icons.forEach(icon => {
664            const tempIcon = document.createElement('iconify-icon');
665            tempIcon.setAttribute('icon', icon);
666            tempIcon.style.cssText = 'position:absolute;top:-9999px;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;';
667            
668            tempIcon.addEventListener('load', checkComplete);
669            tempIcon.addEventListener('error', checkComplete);
670            
671            tempElements.push(tempIcon);
672            document.body.appendChild(tempIcon);
673          });
674
675          // 设置超时清理
676          setTimeout(() => {
677            cleanup();
678            resolve();
679          }, 3000);
680        });
681      }
682    }
683
684    // 创建全局实例
685    window.__iconifyLoader = new IconifyLoader();
686
687    // 立即开始加载
688    window.__iconifyLoader.load().catch(error => {
689      console.error('Failed to initialize Iconify:', error);
690    });
691
692    // 如果有预加载图标,添加到队列
693    if (preloadIcons && preloadIcons.length > 0) {
694      window.__iconifyLoader.addToPreloadQueue(preloadIcons);
695    }
696
697    // 导出便捷函数到全局
698    window.loadIconify = () => window.__iconifyLoader?.load();
699    window.preloadIcons = (icons) => window.__iconifyLoader?.addToPreloadQueue(icons);
700    window.onIconifyReady = (callback) => {
701      return window.__iconifyLoader?.onLoad ? window.__iconifyLoader.onLoad(callback) : null;
702    };
703
704    // 页面可见性变化时重新检查
705    document.addEventListener('visibilitychange', () => {
706      if (!document.hidden && !window.__iconifyLoader.isLoaded) {
707        window.__iconifyLoader.load().catch(console.error);
708      }
709    });
710
711  })();
712})();</script>
712 <!-- 为不支持JavaScript的情况提供备用方案 --><noscript><style>
713    iconify-icon {
714      display: none;
715    }
716    .icon-fallback {
717      display: inline-block;
718    }
719  </style></noscript>   <div id="top-row" class="z-50 pointer-events-none relative transition-all duration-700 max-w-[var(--page-width)] px-0 md:px-4 mx-auto" data-astro-cid-haiuh7kc> <div id="navbar-wrapper" class="pointer-events-auto sticky top-0 transition-all" data-astro-cid-haiuh7kc> <div id="navbar" class="z-50 onload-animation" data-transparent-mode="semifull" data-is-home="true"> <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation --> <div class="!overflow-visible max-w-[var(--page-width)] h-[4.5rem] mx-auto flex items-center justify-between px-4"> <a href="/" class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95"> <div class="flex flex-row items-center text-md">   <img src="/assets/home/home.png" alt="小鱼仔娱乐" class="h-[1.75rem] w-[1.75rem] mb-1 mr-2 object-contain" loading="lazy"> <span class="dark:text-white text-black">小鱼仔娱乐</span>  </div> </a> <div class="hidden md:flex items-center space-x-1"> <div class="dropdown-container" data-dropdown data-astro-cid-qou34bit> <a aria-label="主页" href="/" class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1.1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:home">   <symbol id="ai:material-symbols:home" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21V9l8-6l8 6v12h-6v-7h-4v7z"/></symbol><use href="#ai:material-symbols:home"></use>  </svg> 主页  </div> </a> </div>  
719<script type="module">document.addEventListener("DOMContentLoaded",function(){const s=document.querySelectorAll("[data-dropdown]");s.forEach(t=>{const e=t.querySelector("[data-dropdown-trigger]"),o=t.querySelector("[data-dropdown-menu]"),n=t.querySelectorAll(".dropdown-item");!e||!o||(e.addEventListener("keydown",function(i){const r=i;r.key==="Enter"||r.key===" "?(i.preventDefault(),f(t,e,o)):r.key==="ArrowDown"?(i.preventDefault(),d(t,e,o),n.length>0&&n[0].focus()):r.key==="Escape"&&a(t,e,o)}),n.forEach((i,r)=>{i.addEventListener("keydown",function(c){const l=c;if(l.key==="ArrowDown"){c.preventDefault();const u=(r+1)%n.length;n[u].focus()}else if(l.key==="ArrowUp"){c.preventDefault();const u=(r-1+n.length)%n.length;n[u].focus()}else l.key==="Escape"&&(a(t,e,o),e.focus())})}))}),document.addEventListener("click",function(t){s.forEach(e=>{if(!e.contains(t.target)){const o=e.querySelector("[data-dropdown-trigger]"),n=e.querySelector("[data-dropdown-menu]");o&&n&&a(e,o,n)}})})});function f(s,t,e){t.getAttribute("aria-expanded")==="true"?a(s,t,e):d(s,t,e)}function d(s,t,e){t.setAttribute("aria-expanded","true"),e.classList.remove("opacity-0","invisible","pointer-events-none","translate-y-[-8px]"),e.classList.add("opacity-100","visible","pointer-events-auto","translate-y-0")}function a(s,t,e){t.setAttribute("aria-expanded","false"),e.classList.add("opacity-0","invisible","pointer-events-none","translate-y-[-8px]"),e.classList.remove("opacity-100","visible","pointer-events-auto","translate-y-0")}</script>
719<div class="dropdown-container" data-dropdown data-astro-cid-qou34bit> <a aria-label="归档" href="/archive/" class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1.1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:archive">   <symbol id="ai:material-symbols:archive" viewBox="0 0 24 24"><path fill="currentColor" d="m12 18l4-4l-1.4-1.4l-1.6 1.6V10h-2v4.2l-1.6-1.6L8 14zm-7 3q-.825 0-1.412-.587T3 19V6.525q0-.35.113-.675t.337-.6L4.7 3.725q.275-.35.687-.538T6.25 3h11.5q.45 0 .863.188t.687.537l1.25 1.525q.225.275.338.6t.112.675V19q0 .825-.587 1.413T19 21zm.4-15h13.2l-.85-1H6.25z"/></symbol><use href="#ai:material-symbols:archive"></use>  </svg> 归档  </div> </a> </div>  <div class="dropdown-container" data-dropdown data-astro-cid-qou34bit> <button class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95 dropdown-trigger" aria-expanded="false" aria-haspopup="true" data-dropdown-trigger data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1.1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:link">   <symbol id="ai:material-symbols:link" viewBox="0 0 24 24"><path fill="currentColor" d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z"/></symbol><use href="#ai:material-symbols:link"></use>  </svg> 链接 <svg width="1em" height="1em" class="text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1" data-astro-cid-qou34bit="true" data-icon="material-symbols:keyboard-arrow-down-rounded">   <symbol id="ai:material-symbols:keyboard-arrow-down-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="M12 14.975q-.2 0-.375-.062T11.3 14.7l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062"/></symbol><use href="#ai:material-symbols:keyboard-arrow-down-rounded"></use>  </svg> </div> </button>
720		<div class="dropdown-menu" data-dropdown-menu data-astro-cid-qou34bit> <div class="dropdown-content" data-astro-cid-qou34bit> <a href="/https:/space.bilibili.com/1481001535" class="dropdown-item" aria-label="Bilibli" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" viewBox="0 0 512 512" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="fa6-brands:bilibili">   <use href="#ai:fa6-brands:bilibili"></use>  </svg> <span data-astro-cid-qou34bit>Bilibli</span> </div>  </a><a href="/https:/qm.qq.com/q/c0kzbnHMg8" class="dropdown-item" aria-label="QQ" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="0.88em" height="1em" viewBox="0 0 448 512" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="fa6-brands:qq">   <use href="#ai:fa6-brands:qq"></use>  </svg> <span data-astro-cid-qou34bit>QQ</span> </div>  </a><a href="/https:/github.com/matsuzaka-yuki" class="dropdown-item" aria-label="GitHub" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="0.97em" height="1em" viewBox="0 0 496 512" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="fa6-brands:github">   <use href="#ai:fa6-brands:github"></use>  </svg> <span data-astro-cid-qou34bit>GitHub</span> </div>  </a> </div> </div> </div>  <div class="dropdown-container" data-dropdown data-astro-cid-qou34bit> <button class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95 dropdown-trigger" aria-expanded="false" aria-haspopup="true" data-dropdown-trigger data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1.1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:person">
720   <symbol id="ai:material-symbols:person" viewBox="0 0 24 24"><path fill="currentColor" d="M12 12q-1.65 0-2.825-1.175T8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12m-8 8v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20z"/></symbol><use href="#ai:material-symbols:person"></use>  </svg> 我的 <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1" data-astro-cid-qou34bit="true" data-icon="material-symbols:keyboard-arrow-down-rounded">   <use href="#ai:material-symbols:keyboard-arrow-down-rounded"></use>  </svg> </div> </button>
721		<div class="dropdown-menu" data-dropdown-menu data-astro-cid-qou34bit> <div class="dropdown-content" data-astro-cid-qou34bit> <a href="/anime/" class="dropdown-item" aria-label="Anime" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:draw">   <symbol id="ai:material-symbols:draw" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21v-4.25L17.175 3.6q.3-.3.675-.45T18.6 3q.4 0 .763.15T20 3.6L21.4 5q.3.275.45.638T22 6.4q0 .375-.15.75t-.45.675L8.25 21zM18.65 7.775L20 6.425L18.575 5l-1.35 1.35zM14 21q1.85 0 3.425-.925T19 17.5q0-.9-.475-1.55t-1.275-1.125L15.775 16.3q.575.25.9.55t.325.65q0 .575-.913 1.038T14 19q-.425 0-.712.288T13 20t.288.713T14 21m-9.425-7.65l1.5-1.5q-.5-.2-.788-.412T5 11q0-.3.45-.6t1.9-.925q2.2-.95 2.925-1.725T11 6q0-1.375-1.1-2.187T7 3q-1.125 0-2.013.4t-1.362.975Q3.35 4.7 3.4 5.1t.375.65q.325.275.725.225t.675-.325q.35-.35.775-.5T7 5q1.025 0 1.513.3T9 6q0 .35-.437.637T6.55 7.65q-2 .875-2.775 1.588T3 11q0 .8.425 1.363t1.15.987"/></symbol><use href="#ai:material-symbols:draw"></use>  </svg> <span data-astro-cid-qou34bit>画材</span> </div>  </a><a href="/diary/" class="dropdown-item" aria-label="Diary" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:book">
721   <symbol id="ai:material-symbols:book" viewBox="0 0 24 24"><path fill="currentColor" d="M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h12q.825 0 1.413.588T20 4v16q0 .825-.587 1.413T18 22zm5-11l2.5-1.5L16 11V4h-5z"/></symbol><use href="#ai:material-symbols:book"></use>  </svg> <span data-astro-cid-qou34bit>日记</span> </div>  </a><a href="/albums/" class="dropdown-item" aria-label="Gallery" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:photo-library">   <symbol id="ai:material-symbols:photo-library" viewBox="0 0 24 24"><path fill="currentColor" d="M9 14h10l-3.45-4.5l-2.3 3l-1.55-2zm-1 4q-.825 0-1.412-.587T6 16V4q0-.825.588-1.412T8 2h12q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18zm-4 4q-.825 0-1.412-.587T2 20V6h2v14h14v2z"/></symbol><use href="#ai:material-symbols:photo-library"></use>  </svg> <span data-astro-cid-qou34bit>相册</span> </div>  </a><a href="/devices/" class="dropdown-item" aria-label="Devices" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:devices">   <symbol id="ai:material-symbols:devices" viewBox="0 0 24 24"><path fill="currentColor" d="M5 17q-.825 0-1.412-.587T3 15V6q0-.825.588-1.412T5 4h14q.825 0 1.413.588T21 6h-5.5q-1.45 0-2.475 1.025T12 9.5V17zm10.5 3q-.625 0-1.062-.437T14 18.5v-9q0-.625.438-1.062T15.5 8h5q.625 0 1.063.438T22 9.5v9q0 .625-.437 1.063T20.5 20zM2 20v-2h10v2zm16-7.5q.325 0 .538-.225t.212-.525q0-.325-.213-.537T18 11q-.3 0-.525.213t-.225.537q0 .3.225.525T18 12.5"/></symbol><use href="#ai:material-symbols:devices"></use>  </svg> <span data-astro-cid-qou34bit>我的设备</span> </div>  </a> </div> </div> </div>  <div class="dropdown-container" data-dropdown data-astro-cid-qou34bit> <button class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95 dropdown-trigger" aria-expanded="false" aria-haspopup="true" data-dropdown-trigger data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1.1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:info">   <symbol id="ai:material-symbols:info" viewBox="0 0 24 24"><path fill="currentColor" d="M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></symbol><use href="#ai:material-symbols:info"></use>  </svg> 关于 <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1" data-astro-cid-qou34bit="true" data-icon="material-symbols:keyboard-arrow-down-rounded">   <use href="#ai:material-symbols:keyboard-arrow-down-rounded"></use>  </svg> </div> </button>
722		<div class="dropdown-menu" data-dropdown-menu data-astro-cid-qou34bit> <div class="dropdown-content" data-astro-cid-qou34bit> <a href="/about/" class="dropdown-item" aria-label="About" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:person">   <use href="#ai:material-symbols:person"></use>  </svg> <span data-astro-cid-qou34bit>关于</span> </div>  </a><a href="/friends/" class="dropdown-item" aria-label="Friends" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:group">   <symbol id="ai:material-symbols:group" viewBox="0 0 24 24"><path fill="currentColor" d="M1 20v-2.8q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2V20zm18 0v-3q0-1.1-.612-2.113T16.65 13.15q1.275.15 2.4.513t2.1.887q.9.5 1.375 1.112T23 17v3zM9 12q-1.65 0-2.825-1.175T5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12m10-4q0 1.65-1.175 2.825T15 12q-.275 0-.7-.062t-.7-.138q.675-.8 1.038-1.775T15 8t-.362-2.025T13.6 4.2q.35-.125.7-.163T15 4q1.65 0 2.825 1.175T19 8"/></symbol><use href="#ai:material-symbols:group"></use>  </svg> <span data-astro-cid-qou34bit>友链</span> </div>  </a> </div> </div> </div>  <div class="dropdown-container" data-dropdown data-astro-cid-qou34bit> <button class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95 dropdown-trigger" aria-expanded="false" aria-haspopup="true" data-dropdown-trigger data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1.1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:more-horiz">   <symbol id="ai:material-symbols:more-horiz" viewBox="0 0 24 24">
722<path fill="currentColor" d="M6 14q-.825 0-1.412-.587T4 12t.588-1.412T6 10t1.413.588T8 12t-.587 1.413T6 14m6 0q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m6 0q-.825 0-1.412-.587T16 12t.588-1.412T18 10t1.413.588T20 12t-.587 1.413T18 14"/></symbol><use href="#ai:material-symbols:more-horiz"></use>  </svg> 其他 <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1" data-astro-cid-qou34bit="true" data-icon="material-symbols:keyboard-arrow-down-rounded">   <use href="#ai:material-symbols:keyboard-arrow-down-rounded"></use>  </svg> </div> </button>
723		<div class="dropdown-menu" data-dropdown-menu data-astro-cid-qou34bit> <div class="dropdown-content" data-astro-cid-qou34bit> <a href="/projects/" class="dropdown-item" aria-label="Projects" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:work">   <symbol id="ai:material-symbols:work" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21q-.825 0-1.412-.587T2 19V8q0-.825.588-1.412T4 6h4V4q0-.825.588-1.412T10 2h4q.825 0 1.413.588T16 4v2h4q.825 0 1.413.588T22 8v11q0 .825-.587 1.413T20 21zm6-15h4V4h-4z"/></symbol><use href="#ai:material-symbols:work"></use>  </svg> <span data-astro-cid-qou34bit>项目展示</span> </div>  </a><a href="/skills/" class="dropdown-item" aria-label="Skills" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:psychology">   <symbol id="ai:material-symbols:psychology" viewBox="0 0 24 24"><path fill="currentColor" d="M11 15h2l.15-1.25q.2-.075.363-.175t.287-.225l1.15.5l1-1.7l-1-.75q.05-.2.05-.4t-.05-.4l1-.75l-1-1.7l-1.15.5q-.125-.125-.288-.225t-.362-.175L13 7h-2l-.15 1.25q-.2.075-.363.175t-.287.225l-1.15-.5l-1 1.7l1 .75Q9 10.8 9 11t.05.4l-1 .75l1 1.7l1.15-.5q.125.125.288.225t.362.175zm1-2.5q-.625 0-1.062-.437T10.5 11t.438-1.062T12 9.5t1.063.438T13.5 11t-.437 1.063T12 12.5M6 22v-4.3q-1.425-1.3-2.212-3.037T3 11q0-3.75 2.625-6.375T12 2q3.125 0 5.538 1.838t3.137 4.787l1.3 5.125q.125.475-.175.863T21 15h-2v3q0 .825-.587 1.413T17 20h-2v2z"/></symbol><use href="#ai:material-symbols:psychology"></use>  </svg> <span data-astro-cid-qou34bit>技能展示</span> </div>  </a><a href="/timeline/" class="dropdown-item" aria-label="Timeline" data-astro-cid-qou34bit> <div class="flex items-center" data-astro-cid-qou34bit> <svg width="1em" height="1em" class="text-[1rem] mr-2" data-astro-cid-qou34bit="true" data-icon="material-symbols:timeline">   <symbol id="ai:material-symbols:timeline" viewBox="0 0 24 24"><path fill="currentColor" d="M3 18q-.825 0-1.412-.587T1 16t.588-1.412T3 14h.263q.112 0 .237.05L8.05 9.5Q8 9.375 8 9.262V9q0-.825.588-1.412T10 7t1.413.588T12 9q0 .05-.05.5l2.55 2.55q.125-.05.238-.05h.525q.112 0 .237.05l3.55-3.55Q19 8.375 19 8.262V8q0-.825.588-1.412T21 6t1.413.588T23 8t-.587 1.413T21 10h-.262q-.113 0-.238-.05l-3.55 3.55q.05.125.05.238V14q0 .825-.587 1.413T15 16t-1.412-.587T13 14v-.262q0-.113.05-.238l-2.55-2.55q-.125.05-.238.05H10q-.05 0-.5-.05L4.95 15.5q.05.125.05.238V16q0 .825-.587 1.413T3 18"/></symbol><use href="#ai:material-symbols:timeline"></use>  </svg> <span data-astro-cid-qou34bit>时间线</span> </div>  </a> </div> </div> </div>   </div> <div class="flex"> <!--<SearchPanel client:load>--> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
723<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script>
723<script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
723<astro-island uid="19Udvn" component-url="/_astro/Search.CjkRobwo.js" component-export="default" renderer-url="/_astro/client.svelte.Kd9eTfLd.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;Search&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island> <astro-island uid="2nzTj9" component-url="/_astro/MobileTOC.cuRLLyc6.js" component-export="default" renderer-url="/_astro/client.svelte.Kd9eTfLd.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;MobileTOC&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island> <button aria-label="Display Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="display-settings-switch"> <svg width="1em" height="1em" class="text-[1.25rem]" data-icon="material-symbols:palette-outline">   <symbol id="ai:material-symbols:palette-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.813-3.9t2.2-3.175T8.25 2.788T12.2 2q2 0 3.775.688t3.113 1.9t2.125 2.875T22 11.05q0 2.875-1.75 4.413T16 17h-1.85q-.225 0-.312.125t-.088.275q0 .3.375.863t.375 1.287q0 1.25-.687 1.85T12 22m-5.5-9q.65 0 1.075-.425T8 11.5t-.425-1.075T6.5 10t-1.075.425T5 11.5t.425 1.075T6.5 13m3-4q.65 0 1.075-.425T11 7.5t-.425-1.075T9.5 6t-1.075.425T8 7.5t.425 1.075T9.5 9m5 0q.65 0 1.075-.425T16 7.5t-.425-1.075T14.5 6t-1.075.425T13 7.5t.425 1.075T14.5 9m3 4q.65 0 1.075-.425T19 11.5t-.425-1.075T17.5 10t-1.075.425T16 11.5t.425 1.075T17.5 13M12 20q.225 0 .363-.125t.137-.325q0-.35-.375-.825T11.75 17.3q0-1.05.725-1.675T14.25 15H16q1.65 0 2.825-.962T20 11.05q0-3.025-2.312-5.038T12.2 4Q8.8 4 6.4 6.325T4 12q0 3.325 2.338 5.663T12 20"/></symbol><use href="#ai:material-symbols:palette-outline"></use>  </svg> </button> <astro-island uid="oNSAh" component-url="/_astro/LayoutSwitchButton.208b1ixy.js" component-export="default" renderer-url="/_astro/client.svelte.Kd9eTfLd.js" props="{&quot;currentLayout&quot;:[0,&quot;list&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;LayoutSwitchButton&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island> <!-- 整体布局方案切换按钮:根据配置决定在哪些设备上显示 --> <div class="hidden md:block"> <astro-island uid="Z1NGCdO" component-url="/_astro/WallpaperSwitch.B1Xv6tUn.js" component-export="default" renderer-url="/_astro/client.svelte.Kd9eTfLd.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;WallpaperSwitch&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island> </div> <astro-island uid="ZueD66" component-url="/_astro/LightDarkSwitch.BaOh_Sin.js" component-export="default" renderer-url="/_astro/client.svelte.Kd9eTfLd.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;LightDarkSwitch&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island> <button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:!hidden" id="nav-menu-switch"> <svg width="1em" height="1em" class="text-[1.25rem]" data-icon="material-symbols:menu-rounded">   <symbol id="ai:material-symbols:menu-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z"/></symbol><use href="#ai:material-symbols:menu-rounded"></use>  </svg> </button> </div> <div id="nav-menu-panel" class="float-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2 max-h-[80vh] overflow-y-auto" data-astro-cid-h5lvqo6o> <div class="mobile-menu-item" data-astro-cid-h5lvqo6o> <!-- 普通链接项目 -->
724                <a href="/" class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
725                    hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
726                " data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:home">   <use href="#ai:material-symbols:home"></use>  </svg> 主页 </div> <svg width="1em" height="1em" class="transition text-[1.25rem] text-[var(--primary)]" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:chevron-right-rounded">
726   <symbol id="ai:material-symbols:chevron-right-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"/></symbol><use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg>  </a> </div><div class="mobile-menu-item" data-astro-cid-h5lvqo6o> <!-- 普通链接项目 -->
727                <a href="/archive/" class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
728                    hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
729                " data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:archive">   <use href="#ai:material-symbols:archive"></use>  </svg> 归档 </div> <svg width="1em" height="1em" viewBox="0 0 24 24" class="transition text-[1.25rem] text-[var(--primary)]" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg>  </a> </div><div class="mobile-menu-item" data-astro-cid-h5lvqo6o> <!-- 有子菜单的项目 -->
730                <div class="mobile-dropdown" data-mobile-dropdown data-astro-cid-h5lvqo6o> <button class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8 w-full text-left
731                            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-mobile-dropdown-trigger aria-expanded="false" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:link">   <use href="#ai:material-symbols:link"></use>  </svg> 链接 </div> <svg width="1em" height="1em" viewBox="0 0 24 24" class="transition text-[1.25rem] text-[var(--primary)] mobile-dropdown-arrow duration-200" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:keyboard-arrow-down-rounded">   <use href="#ai:material-symbols:keyboard-arrow-down-rounded"></use>  </svg> </button> <div class="mobile-submenu" data-mobile-submenu data-astro-cid-h5lvqo6o> <a href="/https:/space.bilibili.com/1481001535" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
732                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 512 512" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="fa6-brands:bilibili">   <use href="#ai:fa6-brands:bilibili"></use>  </svg> Bilibli </div>  </a><a href="/https:/qm.qq.com/q/c0kzbnHMg8" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
733                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="0.88em" height="1em" viewBox="0 0 448 512" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="fa6-brands:qq">   <use href="#ai:fa6-brands:qq"></use>  </svg> QQ </div>  </a><a href="/https:/github.com/matsuzaka-yuki" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
734                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="0.97em" height="1em" viewBox="0 0 496 512" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="fa6-brands:github">   <use href="#ai:fa6-brands:github"></use>  </svg> GitHub </div>  </a> </div> </div> </div><div class="mobile-menu-item" data-astro-cid-h5lvqo6o> <!-- 有子菜单的项目 -->
735                <div class="mobile-dropdown" data-mobile-dropdown data-astro-cid-h5lvqo6o> <button class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8 w-full text-left
736                            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-mobile-dropdown-trigger aria-expanded="false" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:person">   <use href="#ai:material-symbols:person"></use>  </svg> 我的 </div> <svg width="1em" height="1em" viewBox="0 0 24 24" class="transition text-[1.25rem] text-[var(--primary)] mobile-dropdown-arrow duration-200" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:keyboard-arrow-down-rounded">   <use href="#ai:material-symbols:keyboard-arrow-down-rounded"></use>  </svg> </button> <div class="mobile-submenu" data-mobile-submenu data-astro-cid-h5lvqo6o> <a href="/anime/" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
737                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:draw">   <use href="#ai:material-symbols:draw"></use>  </svg> 画材 </div>  </a><a href="/diary/" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
738                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:book">   <use href="#ai:material-symbols:book"></use>  </svg> 日记 </div>  </a><a href="/albums/" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
739                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:photo-library">   <use href="#ai:material-symbols:photo-library"></use>  </svg> 相册 </div>  </a><a href="/devices/" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
740                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:devices">   <use href="#ai:material-symbols:devices"></use>  </svg> 我的设备 </div>  </a> </div> </div> </div><div class="mobile-menu-item" data-astro-cid-h5lvqo6o> <!-- 有子菜单的项目 -->
741                <div class="mobile-dropdown" data-mobile-dropdown data-astro-cid-h5lvqo6o> <button class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8 w-full text-left
742                            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-mobile-dropdown-trigger aria-expanded="false" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:info">   <use href="#ai:material-symbols:info"></use>  </svg> 关于 </div> <svg width="1em" height="1em" viewBox="0 0 24 24" class="transition text-[1.25rem] text-[var(--primary)] mobile-dropdown-arrow duration-200" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:keyboard-arrow-down-rounded">   <use href="#ai:material-symbols:keyboard-arrow-down-rounded"></use>  </svg> </button> <div class="mobile-submenu" data-mobile-submenu data-astro-cid-h5lvqo6o> <a href="/about/" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
743                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:person">   <use href="#ai:material-symbols:person"></use>  </svg> 关于 </div>  </a><a href="/friends/" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
744                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:group">   <use href="#ai:material-symbols:group"></use>  </svg> 友链 </div>  </a> </div> </div> </div><div class="mobile-menu-item" data-astro-cid-h5lvqo6o> <!-- 有子菜单的项目 -->
745                <div class="mobile-dropdown" data-mobile-dropdown data-astro-cid-h5lvqo6o> <button class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8 w-full text-left
746                            hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-mobile-dropdown-trigger aria-expanded="false" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:more-horiz">   <use href="#ai:material-symbols:more-horiz"></use>  </svg> 其他 </div> <svg width="1em" height="1em" viewBox="0 0 24 24" class="transition text-[1.25rem] text-[var(--primary)] mobile-dropdown-arrow duration-200" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:keyboard-arrow-down-rounded">   <use href="#ai:material-symbols:keyboard-arrow-down-rounded"></use>  </svg> </button> <div class="mobile-submenu" data-mobile-submenu data-astro-cid-h5lvqo6o> <a href="/projects/" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
747                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:work">   <use href="#ai:material-symbols:work"></use>  </svg> 项目展示 </div>  </a><a href="/skills/" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
748                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:psychology">   <use href="#ai:material-symbols:psychology"></use>  </svg> 技能展示 </div>  </a><a href="/timeline/" class="group flex justify-between items-center py-2 pl-6 pr-1 rounded-lg gap-8
749                                   hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition" data-astro-cid-h5lvqo6o> <div class="flex items-center transition text-black/60 dark:text-white/60 font-medium group-hover:text-[var(--primary)] group-active:text-[var(--primary)]" data-astro-cid-h5lvqo6o> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.1rem] mr-2" data-astro-cid-h5lvqo6o="true" data-icon="material-symbols:timeline">   <use href="#ai:material-symbols:timeline"></use>  </svg> 时间线 </div>  </a> </div> </div> </div> </div>  
749<script type="module">document.addEventListener("DOMContentLoaded",function(){const r=document.querySelectorAll("[data-mobile-dropdown]");r.forEach(e=>{const t=e.querySelector("[data-mobile-dropdown-trigger]"),d=e.querySelector("[data-mobile-submenu]");!t||!d||t.addEventListener("click",function(o){o.preventDefault();const u=e.getAttribute("data-expanded")==="true";r.forEach(a=>{if(a!==e){a.setAttribute("data-expanded","false");const i=a.querySelector("[data-mobile-dropdown-trigger]");i&&i.setAttribute("aria-expanded","false")}});const n=!u;e.setAttribute("data-expanded",n.toString()),t.setAttribute("aria-expanded",n.toString())})})});</script>
749 <astro-island uid="ZhmRQN" component-url="/_astro/DisplaySettings.CPsCuDsc.js" component-export="default" renderer-url="/_astro/client.svelte.Kd9eTfLd.js" props="{}" ssr client="only" opts="{&quot;name&quot;:&quot;DisplaySettings&quot;,&quot;value&quot;:&quot;svelte&quot;}"></astro-island> </div> </div> 
749<script type="module" src="/_astro/Navbar.astro_astro_type_script_index_0_lang.CjFOzVWH.js"></script>
749 
749<script>(function(){const scriptUrl = "/pagefind/pagefind.js";
750
751async function loadPagefind() {
752    try {
753        const response = await fetch(scriptUrl, { method: 'HEAD' });
754        if (!response.ok) {
755            throw new Error(`Pagefind script not found: ${response.status}`);
756        }
757
758        const pagefind = await import(scriptUrl);
759
760        await pagefind.options({
761            excerptLength: 20
762        });
763
764        window.pagefind = pagefind;
765
766        document.dispatchEvent(new CustomEvent('pagefindready'));
767        console.log('Pagefind loaded and initialized successfully, event dispatched.');
768    } catch (error) {
769        console.error('Failed to load Pagefind:', error);
770        window.pagefind = {
771            search: () => Promise.resolve({ results: [] }),
772            options: () => Promise.resolve(),
773        };
774        document.dispatchEvent(new CustomEvent('pagefindloaderror'));
775        console.log('Pagefind load error, event dispatched.');
776    }
777}
778
779if (document.readyState === 'loading') {
780    document.addEventListener('DOMContentLoaded', loadPagefind);
781} else {
782    loadPagefind();
783}
784})();</script>
784 </div> </div>  <div id="banner-wrapper" class="absolute z-10 w-full transition duration-700 overflow-hidden " style="top: -30vh" data-astro-cid-haiuh7kc> <!-- Carousel mode for multiple images -->
785        <div id="banner-carousel" class="relative h-full w-full" data-astro-cid-haiuh7kc> <ul class="carousel-list h-full w-full" data-astro-cid-haiuh7kc> <li class="carousel-item absolute inset-0 transition-all duration-500 opacity-100 scale-100" data-astro-cid-haiuh7kc> <!-- Mobile: use mobile-specific images with same logic as desktop --> <div class="block lg:hidden object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/mobile-banner/1.webp" alt="Mobile banner image 1" class="w-full h-full object-cover" style="object-position: center"> </div> <!-- Desktop: use desktop-specific images --> <div class="hidden lg:block object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/desktop-banner/1.webp" alt="Desktop banner image 1" class="w-full h-full object-cover" style="object-position: center"> </div> </li><li class="carousel-item absolute inset-0 transition-all duration-500 opacity-0 scale-110" data-astro-cid-haiuh7kc> <!-- Mobile: use mobile-specific images with same logic as desktop --> <div class="block lg:hidden object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/mobile-banner/2.webp" alt="Mobile banner image 2" class="w-full h-full object-cover" style="object-position: center"> </div> <!-- Desktop: use desktop-specific images --> <div class="hidden lg:block object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/desktop-banner/2.webp" alt="Desktop banner image 2" class="w-full h-full object-cover" style="object-position: center"> </div> </li><li class="carousel-item absolute inset-0 transition-all duration-500 opacity-0 scale-110" data-astro-cid-haiuh7kc> <!-- Mobile: use mobile-specific images with same logic as desktop --> <div class="block lg:hidden object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/mobile-banner/3.webp" alt="Mobile banner image 3" class="w-full h-full object-cover" style="object-position: center"> </div> <!-- Desktop: use desktop-specific images --> <div class="hidden lg:block object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/desktop-banner/3.webp" alt="Desktop banner image 3" class="w-full h-full object-cover" style="object-position: center"> </div> </li><li class="carousel-item absolute inset-0 transition-all duration-500 opacity-0 scale-110" data-astro-cid-haiuh7kc> <!-- Mobile: use mobile-specific images with same logic as desktop --> <div class="block lg:hidden object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/mobile-banner/4.webp" alt="Mobile banner image 4" class="w-full h-full object-cover" style="object-position: center"> </div> <!-- Desktop: use desktop-specific images --> <div class="hidden lg:block object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/desktop-banner/4.webp" alt="Desktop banner image 4" class="w-full h-full object-cover" style="object-position: center"> </div> </li><li class="carousel-item absolute inset-0 transition-all duration-500 opacity-0 scale-110" data-astro-cid-haiuh7kc> <!-- Mobile: use mobile-specific images with same logic as desktop --> <div class="block lg:hidden object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/mobile-banner/5.webp" alt="Mobile banner image 5" class="w-full h-full object-cover" style="object-position: center"> </div> <!-- Desktop: use desktop-specific images --> <div class="hidden lg:block object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/desktop-banner/5.webp" alt="Desktop banner image 5" class="w-full h-full object-cover" style="object-position: center"> </div> </li><li class="carousel-item absolute inset-0 transition-all duration-500 opacity-0 scale-110" data-astro-cid-haiuh7kc> <!-- Mobile: use mobile-specific images with same logic as desktop --> <div class="block lg:hidden object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/mobile-banner/6.webp" alt="Mobile banner image 6" class="w-full h-full object-cover" style="object-position: center"> </div> <!-- Desktop: use desktop-specific images --> <div class="hidden lg:block object-cover h-full w-full transition-transform duration-500 ease-out overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>  <img src="/assets/desktop-banner/6.webp" alt="Desktop banner image 6" class="w-full h-full object-cover" style="object-position: center"> </div> </li> </ul> </div> <!-- Home page text overlay --> <div class="banner-text-overlay absolute inset-0 z-20 flex items-center justify-center " data-astro-cid-haiuh7kc> <div class="w-4/5 lg:w-3/4 text-center mb-0" data-astro-cid-haiuh7kc> <div class="flex flex-col" data-astro-cid-haiuh7kc> <h1 class="banner-title text-6xl lg:text-8xl text-white drop-shadow-lg mb-2 lg:mb-4" data-astro-cid-haiuh7kc> 小鱼仔娱乐的博客 </h1> <h2 class="banner-subtitle text-xl lg:text-3xl text-white/90 drop-shadow-md" data-astro-cid-haiuh7kc> <span class="inline-block min-h-[1.2em]" data-astro-cid-haiuh7kc> <span class="typewriter " data-text="[&#34;欢迎来到小鱼仔娱乐的博客!&#34;,&#34;现在画材大卖特卖!&#34;,&#34;商店不止卖画材,还有各种实用资料!&#34;,&#34;我的世界服务器1.21.8正式开服!&#34;,&#34;超多地形等待探索!&#34;]" data-speed="100" data-delete-speed="50" data-pause-time="2000" data-astro-cid-4iv2rnoh></span> 
785<script type="module">class n{element;texts;currentTextIndex=0;speed;deleteSpeed;pauseTime;currentIndex=0;isDeleting=!1;timeoutId=null;constructor(t){this.element=t;const e=t.dataset.text||"";try{const i=JSON.parse(e);this.texts=Array.isArray(i)?i:[e]}catch{this.texts=[e]}this.speed=parseInt(t.dataset.speed||"100"),this.deleteSpeed=parseInt(t.dataset.deleteSpeed||"50"),this.pauseTime=parseInt(t.dataset.pauseTime||"2000"),this.texts.length>1&&!this.isTypewriterEnabled()?this.showRandomText():this.start()}isTypewriterEnabled(){return this.element.dataset.speed!==void 0||this.element.dataset.deleteSpeed!==void 0||this.element.dataset.pauseTime!==void 0}showRandomText(){const t=Math.floor(Math.random()*this.texts.length);this.element.textContent=this.texts[t]}start(){this.texts.length!==0&&this.type()}getCurrentText(){return this.texts[this.currentTextIndex]||""}type(){const t=this.getCurrentText();this.isDeleting?this.currentIndex>0?(this.currentIndex--,this.element.textContent=t.substring(0,this.currentIndex),this.timeoutId=window.setTimeout(()=>this.type(),this.deleteSpeed)):(this.isDeleting=!1,this.currentTextIndex=(this.currentTextIndex+1)%this.texts.length,this.timeoutId=window.setTimeout(()=>this.type(),this.speed)):this.currentIndex<t.length?(this.currentIndex++,this.element.textContent=t.substring(0,this.currentIndex),this.timeoutId=window.setTimeout(()=>this.type(),this.speed)):this.texts.length>1?(this.isDeleting=!0,this.timeoutId=window.setTimeout(()=>this.type(),this.pauseTime)):this.texts.length===1&&this.texts[0]===""&&(this.element.innerHTML="&nbsp;")}destroy(){this.timeoutId&&clearTimeout(this.timeoutId)}}document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll(".typewriter").forEach(t=>{new n(t)})});document.addEventListener("swup:contentReplaced",()=>{document.querySelectorAll(".typewriter").forEach(t=>{new n(t)})});</script>
785  </span> </h2> </div> </div> </div> <!-- Water waves effect --> <div class="waves absolute -bottom-[1px] h-[10vh] max-h-[9.375rem] min-h-[3.125rem] w-full md:h-[15vh]" id="header-waves" style="transform: translateZ(0); will-change: fill;" data-astro-cid-haiuh7kc> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 150 32" preserveAspectRatio="none" shape-rendering="auto" style="transform: translateZ(0); backface-visibility: hidden;" data-astro-cid-haiuh7kc> <defs data-astro-cid-haiuh7kc> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v48h-352z" data-astro-cid-haiuh7kc></path> </defs> <g class="parallax" style="transform: translateZ(0);" data-astro-cid-haiuh7kc> <use xlink:href="#gentle-wave" x="48" y="0" class="opacity-25 fill-[var(--page-bg)]" style="animation-delay: -2s; animation-duration: 7s; will-change: transform;" data-astro-cid-haiuh7kc></use> <use xlink:href="#gentle-wave" x="48" y="3" class="opacity-50 fill-[var(--page-bg)]" style="animation-delay: -3s; animation-duration: 10s; will-change: transform;" data-astro-cid-haiuh7kc></use> <use xlink:href="#gentle-wave" x="48" y="5" class="opacity-75 fill-[var(--page-bg)]" style="animation-delay: -4s; animation-duration: 13s; will-change: transform;" data-astro-cid-haiuh7kc></use> <use xlink:href="#gentle-wave" x="48" y="7" class="fill-[var(--page-bg)]" style="animation-delay: -5s; animation-duration: 20s; will-change: transform;" data-astro-cid-haiuh7kc></use> </g> </svg> </div> </div>  <div class="absolute w-full z-30 pointer-events-none   " style="top: 35vh" data-astro-cid-haiuh7kc> <!-- The pointer-events-none here prevent blocking the click event of the TOC --> <div class="relative max-w-[var(--page-width)] mx-auto pointer-events-auto" data-astro-cid-haiuh7kc> <div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-1 grid-cols-1 lg:grid-cols-[17.5rem_1fr] lg:grid-cols-[17.5rem_1fr_17.5rem] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto] mx-auto gap-4 px-2 md:px-4  mobile-both-sidebar" data-layout-mode="list" data-astro-cid-haiuh7kc> <!-- Banner image credit -->  <div id="sidebar" class="mb-4 row-start-2 row-end-3 col-span-1 onload-animation block block row-start-2 row-end-3 col-span-1 lg:block lg:row-start-1 lg:row-end-2 lg:max-w-[17.5rem] lg:col-start-1 lg:col-end-2  w-full" data-astro-cid-gfmxq3pg> <!-- 顶部固定组件区域 --> <div class="flex flex-col w-full gap-4 mb-4" data-astro-cid-gfmxq3pg> <div class="card-base p-3"> <a aria-label="Go to About Page" href="/about/" class="group block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3
786       max-w-[12rem] lg:max-w-none overflow-hidden rounded-xl active:scale-95"> <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
787        w-full h-full z-50 flex items-center justify-center"> <svg width="1.13em" height="1em" class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl" data-icon="fa6-regular:address-card">   <symbol id="ai:fa6-regular:address-card" viewBox="0 0 576 512"><path fill="currentColor" d="M512 80c8.8 0 16 7.2 16 16v320c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16zM64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm144 224a64 64 0 1 0 0-128a64 64 0 1 0 0 128m-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80zm200-144c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24z"/></symbol><use href="#ai:fa6-regular:address-card"></use>  </svg> </div> <div class="mx-auto lg:w-full h-full lg:mt-0  overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div> <img src="/_astro/%E5%B0%8F%E9%B1%BC%E4%BB%94%E5%A8%B1%E4%B9%90.DQOuLenT_ZLbJCL.webp" alt="Profile Image of the Author" style="object-position: center" loading="lazy" decoding="async" fetchpriority="auto" width="800" height="800" class="w-full h-full object-cover">  </div> </a> <div class="px-2"> <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">小鱼仔娱乐</div> <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div> <div class="text-center text-neutral-400 mb-2.5 transition"> <span class="typewriter inline-block" data-text="搭好一个网站,何尝不是一种享受生活的方式呢?" data-speed="80" data-delete-speed="50" data-pause-time="2000" data-astro-cid-4iv2rnoh></span>   </div> <div class="flex gap-2 justify-center mb-1"> <a rel="me" aria-label="Bilibli" href="https://space.bilibili.com/1481001535" target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90"> <svg width="1em" height="1em" class="text-[1.5rem]" data-icon="fa6-brands:bilibili">   <symbol id="ai:fa6-brands:bilibili" viewBox="0 0 512 512">
787<path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0q13.2 0 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0q13.2 0 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1m-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8s9.7-14.3 10.1-23.5zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5s-17.5-3.2-23.6-9.5s-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2s13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10m191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2s-14 9.5-23.6 9.5s-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2s14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10"/></symbol><use href="#ai:fa6-brands:bilibili"></use>  </svg> </a><a rel="me" aria-label="GitHub" href="https://github.com/matsuzaka-yuki" target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90"> <svg width="0.97em" height="1em" class="text-[1.5rem]" data-icon="fa6-brands:github">   <symbol id="ai:fa6-brands:github" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2"/></symbol><use href="#ai:fa6-brands:github"></use>  </svg> </a><a rel="me" aria-label="QQ" href="https://qm.qq.com/q/c0kzbnHMg8" target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90"> <svg width="0.88em" height="1em" class="text-[1.5rem]" data-icon="fa6-brands:qq">   <symbol id="ai:fa6-brands:qq" viewBox="0 0 448 512"><path fill="currentColor" d="M433.754 420.445c-11.526 1.393-44.86-52.741-44.86-52.741c0 31.345-16.136 72.247-51.051 101.786c16.842 5.192 54.843 19.167 45.803 34.421c-7.316 12.343-125.51 7.881-159.632 4.037c-34.122 3.844-152.316 8.306-159.632-4.037c-9.045-15.25 28.918-29.214 45.783-34.415c-34.92-29.539-51.059-70.445-51.059-101.792c0 0-33.334 54.134-44.859 52.741c-5.37-.65-12.424-29.644 9.347-99.704c10.261-33.024 21.995-60.478 40.144-105.779C60.683 98.063 108.982.006 224 0c113.737.006 163.156 96.133 160.264 214.963c18.118 45.223 29.912 72.85 40.144 105.778c21.768 70.06 14.716 99.053 9.346 99.704"/></symbol><use href="#ai:fa6-brands:qq"></use>  </svg> </a>  </div>  </div> </div> <!-- 组件显示现在由sidebarLayoutConfig统一控制,无需检查config.enable --><widget-layout data-id="announcement" data-is-collapsed="undefined" class="pb-4 card-base onload-animation" style="animation-delay: 50ms; " data-astro-cid-ucso7hve="true"> <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2 flex items-center
788        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
789        before:absolute before:left-[-16px] before:top-[5.5px]" data-astro-cid-ucso7hve style=""> 最新公告  </div> <div id="announcement" class="collapse-wrapper px-4 overflow-hidden" data-astro-cid-ucso7hve style="">  <div> <!-- 公告栏内容 -->
789 <div class="text-neutral-600 dark:text-neutral-300 leading-relaxed mb-3"> 画材大卖,可前往“我的-画材”进行购买,100%不坑人! </div> <!-- 可选链接和关闭按钮 --> <div class="flex items-center justify-between gap-3"> <div> <a href="/about/" target="_self" class="btn-regular rounded-lg px-3 py-1.5 text-sm font-medium active:scale-95 transition-transform"> 阅读更多 </a> </div> <button class="btn-regular rounded-lg h-8 w-8 text-sm hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors" onclick="closeAnnouncement()" aria-label="关闭"> <svg width="0.75em" height="1em" class="text-sm" data-icon="fa6-solid:xmark">   <symbol id="ai:fa6-solid:xmark" viewBox="0 0 384 512"><path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7L86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256L41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256z"/></symbol><use href="#ai:fa6-solid:xmark"></use>  </svg> </button> </div> </div>  </div>  </widget-layout>  
789<script type="module">class d extends HTMLElement{constructor(){if(super(),this.dataset.isCollapsed!=="true")return;const e=this.dataset.id,t=this.querySelector(".expand-btn"),s=this.querySelector(`#${e}`);t.addEventListener("click",()=>{s.classList.remove("collapsed"),t.classList.add("hidden")})}}customElements.get("widget-layout")||customElements.define("widget-layout",d);</script>
789 
789<script type="module">function n(){const e=document.querySelector('widget-layout[data-id="announcement"]');e&&(e.style.display="none",localStorage.setItem("announcementClosed","true"))}document.addEventListener("DOMContentLoaded",function(){const e=document.querySelector('widget-layout[data-id="announcement"]');e&&localStorage.getItem("announcementClosed")==="true"&&(e.style.display="none")});window.closeAnnouncement=n;</script>
789<widget-layout data-id="tags" data-is-collapsed="false" class="pb-4 card-base onload-animation" style="animation-delay: 250ms; --collapsedHeight: 7.5rem;" data-astro-cid-ucso7hve="true"> <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2 flex items-center
790        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
791        before:absolute before:left-[-16px] before:top-[5.5px]" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;"> 标签  </div> <div id="tags" class="collapse-wrapper px-4 overflow-hidden" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;">  <div class="flex gap-2 flex-wrap"> <a href="/archive/?tag=%E5%8D%9A%E5%AE%A2" aria-label="View all posts with the 博客 tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  博客 </a><a href="/archive/?tag=%E5%95%86%E5%BA%97" aria-label="View all posts with the 商店 tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  商店 </a><a href="/archive/?tag=%E6%95%99%E7%A8%8B" aria-label="View all posts with the 教程 tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  教程 </a><a href="/archive/?tag=%E7%94%A9%E5%8D%96" aria-label="View all posts with the 甩卖 tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  甩卖 </a><a href="/archive/?tag=%E7%94%BB%E6%9D%90" aria-label="View all posts with the 画材 tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  画材 </a><a href="/archive/?tag=%E7%BD%91%E7%AB%99" aria-label="View all posts with the 网站 tag" class="btn-regular h-8 text-sm px-3 rounded-lg">  网站 </a> </div>  </div>  </widget-layout>   </div> <!-- 粘性组件区域 --> <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4" data-astro-cid-gfmxq3pg> <widget-layout data-id="categories" data-is-collapsed="false" class="pb-4 card-base onload-animation" style="animation-delay: 150ms; --collapsedHeight: 7.5rem;" data-astro-cid-ucso7hve="true"> <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2 flex items-center
792        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
793        before:absolute before:left-[-16px] before:top-[5.5px]" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;"> 分类  </div> <div id="categories" class="collapse-wrapper px-4 overflow-hidden" data-astro-cid-ucso7hve style="--collapsedHeight: 7.5rem;"> <a href="/archive/?category=Guides" aria-label="View all posts in the Guides category"> <button class="
794            w-full
795            h-10
796            rounded-lg
797            bg-none
798            hover:bg-[var(--btn-plain-bg-hover)]
799            active:bg-[var(--btn-plain-bg-active)]
800            transition-all
801            pl-2
802            hover:pl-3
803            
804            text-neutral-700
805            hover:text-[var(--primary)]
806            dark:text-neutral-300
807            dark:hover:text-[var(--primary)]
808        "> <div class="flex items-center justify-between relative mr-2"> <div class="overflow-hidden text-left whitespace-nowrap overflow-ellipsis  "> Guides </div> <div class="transition px-2 h-7 ml-4 min-w-[2rem] rounded-lg text-sm font-bold
809                    text-[var(--btn-content)] dark:text-[var(--deep-text)]
810                    bg-[oklch(0.95_0.025_var(--hue))] dark:bg-[var(--primary)]
811                    flex items-center justify-center"> 2 </div> </div> </button> </a> </div>  </widget-layout>   </div> </div> <!-- 响应式样式和JavaScript -->  
811<script>
812	import { widgetManager } from "../../utils/widget-manager";
813	
814	// 响应式布局管理
815	class SidebarManager {
816		constructor() {
817			this.init();
818		}
819		
820		init() {
821			this.updateResponsiveDisplay();
822			window.addEventListener('resize', () => this.updateResponsiveDisplay());
823			
824			// 监听SWUP内容替换事件
825			if (typeof window !== 'undefined' && window.swup) {
826				window.swup.hooks.on('content:replace', () => {
827					// 延迟执行以确保DOM已更新
828					setTimeout(() => {
829						this.updateResponsiveDisplay();
830					}, 100);
831				});
832			}
833		}
834		
835		updateResponsiveDisplay() {
836			const breakpoints = widgetManager.getBreakpoints();
837			const width = window.innerWidth;
838			
839			let deviceType;
840			if (width < breakpoints.mobile) {
841				deviceType = 'mobile';
842			} else if (width < breakpoints.tablet) {
843				deviceType = 'tablet';
844			} else {
845				deviceType = 'desktop';
846			}
847			
848			const shouldShow = widgetManager.shouldShowSidebar(deviceType);
849			const sidebar = document.getElementById('sidebar');
850			
851			if (sidebar) {
852				sidebar.style.setProperty(
853					`--sidebar-${deviceType}-display`, 
854					shouldShow ? 'block' : 'none'
855				);
856			}
857		}
858	}
859	
860	// 初始化侧边栏管理器
861	new SidebarManager();
862</script>
862  <div class="right-sidebar-container mb-4 col-span-1 onload-animation block row-start-3 row-end-4 lg:block lg:row-start-1 lg:row-end-2 lg:max-w-[17.5rem] lg:col-start-3 lg:col-end-4 " data-astro-cid-haiuh7kc><div id="right-sidebar" class="w-full" data-astro-cid-dnkjr6w2> <!-- 顶部固定组件区域 --> <div class="flex flex-col w-full gap-4 mb-4" data-astro-cid-dnkjr6w2> <widget-layout data-id="site-stats" data-is-collapsed="undefined" class="pb-4 card-base onload-animation hidden lg:block" style="animation-delay: 200ms; " data-astro-cid-ucso7hve="true"> <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2 flex items-center
863        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
864        before:absolute before:left-[-16px] before:top-[5.5px]" data-astro-cid-ucso7hve style=""> 站点统计  </div> <div id="site-stats" class="collapse-wrapper px-4 overflow-hidden" data-astro-cid-ucso7hve style="">  <div class="flex flex-col gap-2"> <div class="flex items-center justify-between px-3 py-1.5"> <div class="flex items-center gap-2.5"> <div class="text-[var(--primary)] text-xl"> <svg width="1em" height="1em" data-icon="material-symbols:article-outline">   <symbol id="ai:material-symbols:article-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z"/></symbol><use href="#ai:material-symbols:article-outline"></use>  </svg> </div> <span class="text-neutral-700 dark:text-neutral-300 font-medium text-sm"> 文章 </span> </div> <div class="flex items-center"> <span class="text-base font-bold text-neutral-900 dark:text-neutral-100"> 2 </span>  </div> </div><div class="flex items-center justify-between px-3 py-1.5"> <div class="flex items-center gap-2.5"> <div class="text-[var(--primary)] text-xl"> <svg width="1em" height="1em" data-icon="material-symbols:folder-outline">   <symbol id="ai:material-symbols:folder-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h6l2 2h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20zm0-2h16V8h-8.825l-2-2H4zm0 0V6z"/></symbol><use href="#ai:material-symbols:folder-outline"></use>  </svg> </div> <span class="text-neutral-700 dark:text-neutral-300 font-medium text-sm"> 分类 </span> </div> <div class="flex items-center"> <span class="text-base font-bold text-neutral-900 dark:text-neutral-100"> 1 </span>  </div> </div><div class="flex items-center justify-between px-3 py-1.5"> <div class="flex items-center gap-2.5"> <div class="text-[var(--primary)] text-xl"> <svg width="1em" height="1em" data-icon="material-symbols:label-outline">   <symbol id="ai:material-symbols:label-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h11q.475 0 .9.213t.7.587L22 12l-5.4 7.2q-.275.375-.7.588T15 20zm0-2h11l4.5-6L15 6H4zm5.5-6"/></symbol><use href="#ai:material-symbols:label-outline"></use>  </svg> </div> <span class="text-neutral-700 dark:text-neutral-300 font-medium text-sm"> 标签 </span> </div> <div class="flex items-center"> <span class="text-base font-bold text-neutral-900 dark:text-neutral-100"> 6 </span>  </div> </div><div class="flex items-center justify-between px-3 py-1.5"> <div class="flex items-center gap-2.5"> <div class="text-[var(--primary)] text-xl"> <svg width="1em" height="1em" data-icon="material-symbols:text-ad-outline-rounded">   <symbol id="ai:material-symbols:text-ad-outline-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-2h16V6H4zm0 0V6zm2-1h12q.425 0 .713-.288T19 16t-.288-.712T18 15H6q-.425 0-.712.288T5 16t.288.713T6 17m0-4h12q.425 0 .713-.288T19 12t-.288-.712T18 11H6q-.425 0-.712.288T5 12t.288.713T6 13m0-4h8q.425 0 .713-.288T15 8t-.288-.712T14 7H6q-.425 0-.712.288T5 8t.288.713T6 9"/></symbol><use href="#ai:material-symbols:text-ad-outline-rounded"></use>  </svg> </div> <span class="text-neutral-700 dark:text-neutral-300 font-medium text-sm"> 总字数 </span> </div> <div class="flex items-center"> <span class="text-base font-bold text-neutral-900 dark:text-neutral-100"> 1,898 </span>  </div> </div><div class="flex items-center justify-between px-3 py-1.5"> <div class="flex items-center gap-2.5"> <div class="text-[var(--primary)] text-xl"> <svg width="1em" height="1em" data-icon="material-symbols:calendar-clock-outline">   <symbol id="ai:material-symbols:calendar-clock-outline" viewBox="0 0 24 24">
864<path fill="currentColor" d="M5 8h14V6H5zm0 0V6zm0 14q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V2h2v2h8V2h2v2h1q.825 0 1.413.588T21 6v5.675q-.475-.225-.975-.375T19 11.075V10H5v10h6.3q.175.55.413 1.05t.562.95zm13 1q-2.075 0-3.537-1.463T13 18t1.463-3.537T18 13t3.538 1.463T23 18t-1.463 3.538T18 23m1.675-2.625l.7-.7L18.5 17.8V15h-1v3.2z"/></symbol><use href="#ai:material-symbols:calendar-clock-outline"></use>  </svg> </div> <span class="text-neutral-700 dark:text-neutral-300 font-medium text-sm"> 运行时长 </span> </div> <div class="flex items-center"> <span class="text-base font-bold text-neutral-900 dark:text-neutral-100" data-stat-id="running-days"> 0 </span> <span class="text-sm text-neutral-500 dark:text-neutral-400 ml-1">  天 </span> </div> </div><div class="flex items-center justify-between px-3 py-1.5"> <div class="flex items-center gap-2.5"> <div class="text-[var(--primary)] text-xl"> <svg width="1em" height="1em" data-icon="material-symbols:ecg-heart-outline">   <symbol id="ai:material-symbols:ecg-heart-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-.45 0-.862-.162t-.738-.488l-6.7-6.725q-.875-.875-1.287-2T2 9.275Q2 6.7 3.675 4.85T7.85 3q1.2 0 2.263.475T12 4.8q.8-.85 1.863-1.325T16.125 3q2.5 0 4.188 1.85T22 9.25q0 1.225-.425 2.35t-1.275 2l-6.725 6.75q-.325.325-.725.488T12 21m1-13q.25 0 .475.125t.35.325l1.7 2.55h4.15q.175-.425.263-.862t.087-.888q-.05-1.725-1.15-2.963t-2.75-1.237q-.775 0-1.487.3t-1.238.875l-.675.725q-.125.15-.325.238t-.4.087t-.4-.087t-.35-.238l-.675-.725q-.525-.575-1.225-.9T7.85 5Q6.2 5 5.1 6.263T4 9.25q0 .45.075.888t.25.862H9q.25 0 .475.125t.35.325l.875 1.3l1.35-4.05q.1-.3.362-.5T13 8m.3 3.25l-1.35 4.05q-.1.3-.375.5t-.6.2q-.25 0-.475-.125t-.35-.325L8.45 13H5.9l5.925 5.925q.05.05.088.063T12 19t.088-.012t.087-.063l5.9-5.925H15q-.25 0-.475-.125t-.375-.325z"/></symbol><use href="#ai:material-symbols:ecg-heart-outline"></use>  </svg> </div> <span class="text-neutral-700 dark:text-neutral-300 font-medium text-sm"> 最后活动 </span> </div> <div class="flex items-center"> <span class="text-base font-bold text-neutral-900 dark:text-neutral-100" data-stat-id="last-update"> 0 </span> <span class="text-sm text-neutral-500 dark:text-neutral-400 ml-1">  天前 </span> </div> </div> </div>  </div>  </widget-layout>   
864<script>(function(){const siteStartDate = "2025-08-01";
865const lastPostDate = "2025-12-08T00:00:00.000Z";
866
867  function updateDynamicStats() {
868    const today = new Date();
869    
870    // 更新运行天数
871    const startDate = new Date(siteStartDate);
872    const diffTime = Math.abs(today.getTime() - startDate.getTime());
873    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
874    
875    const runningDaysElement = document.querySelector('[data-stat-id="running-days"]');
876    if (runningDaysElement) {
877      runningDaysElement.textContent = diffDays.toString();
878    }
879    
880    // 更新最后活动时间
881    if (lastPostDate) {
882      const lastPost = new Date(lastPostDate);
883      const timeSinceLastPost = Math.abs(today.getTime() - lastPost.getTime());
884      const daysSinceLastUpdate = Math.floor(timeSinceLastPost / (1000 * 60 * 60 * 24));
885      
886      const lastUpdateElement = document.querySelector('[data-stat-id="last-update"]');
887      if (lastUpdateElement) {
888        lastUpdateElement.textContent = daysSinceLastUpdate.toString();
889      }
890    }
891  }
892  
893  // 页面加载时更新
894  updateDynamicStats();
895  
896  // 每小时更新一次(可选,因为天数变化较慢)
897  setInterval(updateDynamicStats, 60 * 60 * 1000);
898})();</script>
898<widget-layout data-id="calendar-widget" data-is-collapsed="undefined" class="pb-4 card-base hidden md:block onload-animation hidden lg:block" style="animation-delay: 250ms; " data-astro-cid-ucso7hve="true"> <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2 flex items-center
899        before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
900        before:absolute before:left-[-16px] before:top-[5.5px]" data-astro-cid-ucso7hve style="">  <span id="calendar-widget-title" class="flex-1 text-left" data-astro-cid-o3b4delr></span> </div> <div id="calendar-widget" class="collapse-wrapper px-4 overflow-hidden" data-astro-cid-ucso7hve style="">   <div class="calendar-container" data-astro-cid-o3b4delr> <!-- 星期标题 --> <div class="weekdays grid grid-cols-7 gap-1 mb-2" data-astro-cid-o3b4delr> <div class="text-center text-xs text-neutral-500 dark:text-neutral-400 font-medium" data-astro-cid-o3b4delr> 日 </div><div class="text-center text-xs text-neutral-500 dark:text-neutral-400 font-medium" data-astro-cid-o3b4delr> 一 </div><div class="text-center text-xs text-neutral-500 dark:text-neutral-400 font-medium" data-astro-cid-o3b4delr> 二 </div><div class="text-center text-xs text-neutral-500 dark:text-neutral-400 font-medium" data-astro-cid-o3b4delr> 三 </div><div class="text-center text-xs text-neutral-500 dark:text-neutral-400 font-medium" data-astro-cid-o3b4delr> 四 </div><div class="text-center text-xs text-neutral-500 dark:text-neutral-400 font-medium" data-astro-cid-o3b4delr> 五 </div><div class="text-center text-xs text-neutral-500 dark:text-neutral-400 font-medium" data-astro-cid-o3b4delr> 六 </div> </div> <!-- 日历格子(由客户端动态生成) --> <div class="calendar-grid grid grid-cols-7 gap-1" id="calendar-grid" data-astro-cid-o3b4delr> <!-- 将由 JavaScript 填充 --> </div> <!-- 文章列表 --> <div id="calendar-posts" class="mt-3" data-astro-cid-o3b4delr> <div class="border-t border-neutral-200 dark:border-neutral-700 mb-2" id="calendar-posts-divider" style="display: none;" data-astro-cid-o3b4delr></div> <div class="flex flex-col gap-1" id="calendar-posts-list" data-astro-cid-o3b4delr> <!-- 将由 JavaScript 填充 --> </div> </div> </div>  </div>  </widget-layout>   
900<script>(function(){const postDateMap = {"2025-12-08":[{"id":"huacai","title":"画材大卖!","published":"2025-12-08T00:00:00.000Z"}],"2024-04-01":[{"id":"guide","title":"教程文本","published":"2024-04-01T00:00:00.000Z"}]};
901const allPostsData = [{"id":"huacai","title":"画材大卖!","published":"2025-12-08T00:00:00.000Z"},{"id":"guide","title":"教程文本","published":"2024-04-01T00:00:00.000Z"}];
902const monthNames = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
903const weekDays = ["日","一","二","三","四","五","六"];
904const yearSuffix = "å¹´";
905
906  // 客户端动态渲染日历
907  function renderCalendar() {
908    const now = new Date();
909    const currentYear = now.getFullYear();
910    const currentMonth = now.getMonth();
911    const currentDate = now.getDate();
912    
913    // 更新 Widget 标题
914    const titleElement = document.getElementById('calendar-widget-title');
915    if (titleElement) {
916      titleElement.textContent = `${currentYear}${yearSuffix}${monthNames[currentMonth]}`;
917    }
918    
919    // 获取月份的第一天是星期几
920    const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();
921    
922    // 获取当月天数
923    const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
924    
925    // 生成日历格子
926    const calendarGrid = document.getElementById('calendar-grid');
927    if (!calendarGrid) return;
928    
929    const calendarDays = [];
930    
931    // 添加空白格子(月初空白)
932    for (let i = 0; i < firstDayOfMonth; i++) {
933      calendarDays.push({ day: null, hasPost: false, count: 0, dateKey: "" });
934    }
935    
936    // 添加每一天
937    for (let day = 1; day <= daysInMonth; day++) {
938      const dateKey = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
939      const posts = postDateMap[dateKey] || [];
940      const count = posts.length;
941      calendarDays.push({
942        day,
943        hasPost: count > 0,
944        count,
945        dateKey
946      });
947    }
948    
949    // 渲染日历格子
950    calendarGrid.innerHTML = calendarDays.map(({day, hasPost, count, dateKey}) => {
951      const isToday = day === currentDate;
952      const classes = [
953        "calendar-day aspect-square flex items-center justify-center rounded text-sm relative cursor-pointer"
954      ];
955      
956      if (!day) {
957        classes.push("text-neutral-400 dark:text-neutral-600");
958      } else if (!hasPost) {
959        classes.push("text-neutral-700 dark:text-neutral-300");
960      } else {
961        classes.push("text-neutral-900 dark:text-neutral-100 font-bold");
962      }
963      
964      if (isToday) {
965        classes.push("ring-2 ring-[var(--primary)]");
966      }
967      
968      return `
969        <div
970          class="${classes.join(' ')}"
971          data-date="${dateKey}"
972          data-has-post="${hasPost}"
973        >
974          ${day || ''}
975          ${hasPost ? '<span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-[var(--primary)]"></span>' : ''}
976          ${hasPost && count > 1 ? `<span class="absolute top-0 right-0 text-[10px] text-[var(--primary)] font-bold">${count}</span>` : ''}
977        </div>
978      `;
979    }).join('');
980    
981    // 获取当月所有文章
982    const currentMonthPosts = allPostsData.filter(post => {
983      const date = new Date(post.published);
984      return date.getFullYear() === currentYear && date.getMonth() === currentMonth;
985    });
986    
987    // 显示当月文章列表
988    showMonthlyPosts(currentMonthPosts);
989    
990    // 添加点击事件监听
991    setupClickHandlers(currentMonthPosts);
992  }
993  
994  // 显示当月所有文章
995  function showMonthlyPosts(currentMonthPosts) {
996    const postsList = document.getElementById('calendar-posts-list');
997    const divider = document.getElementById('calendar-posts-divider');
998    
999    if (postsList) {
1000      postsList.innerHTML = currentMonthPosts.map(post => `
1001        <a href="/posts/${post.id}/" class="block text-sm text-neutral-700 dark:text-neutral-300 hover:text-[var(--primary)] dark:hover:text-[var(--primary)] transition-colors truncate px-2 py-1 rounded hover:bg-[var(--btn-plain-bg-hover)]">
1002          ${post.title}
1003        </a>
1004      `).join('');
1005      
1006      // 显示/隐藏分割线
1007      if (divider) {
1008        divider.style.display = currentMonthPosts.length > 0 ? 'block' : 'none';
1009      }
1010    }
1011  }
1012  
1013  // 设置日历格子点击事件
1014  function setupClickHandlers(currentMonthPosts) {
1015    const calendarDays = document.querySelectorAll('.calendar-day[data-date]');
1016    const postsList = document.getElementById('calendar-posts-list');
1017    const divider = document.getElementById('calendar-posts-divider');
1018    
1019    let currentSelectedDay = null;
1020    
1021    calendarDays.forEach(dayElement => {
1022      dayElement.addEventListener('click', () => {
1023        const dateKey = dayElement.getAttribute('data-date');
1024        const hasPost = dayElement.getAttribute('data-has-post') === 'true';
1025        
1026        if (!hasPost || !dateKey) return;
1027        
1028        // 切换选中状态
1029        if (currentSelectedDay === dayElement) {
1030          // 取消选中,恢复显示当月所有文章
1031          dayElement.classList.remove('bg-[var(--primary)]', 'bg-opacity-10');
1032          currentSelectedDay = null;
1033          showMonthlyPosts(currentMonthPosts);
1034          return;
1035        }
1036        
1037        // 移除之前选中的样式
1038        if (currentSelectedDay) {
1039          currentSelectedDay.classList.remove('bg-[var(--primary)]', 'bg-opacity-10');
1040        }
1041        
1042        // 添加选中样式
1043        dayElement.classList.add('bg-[var(--primary)]', 'bg-opacity-10');
1044        currentSelectedDay = dayElement;
1045        
1046        // 获取该日期的文章
1047        const posts = postDateMap[dateKey] || [];
1048        
1049        if (posts.length > 0 && postsList) {
1050          // 渲染文章列表
1051          postsList.innerHTML = posts.map(post => `
1052            <a href="/posts/${post.id}/" class="block text-sm text-neutral-700 dark:text-neutral-300 hover:text-[var(--primary)] dark:hover:text-[var(--primary)] transition-colors truncate px-2 py-1 rounded hover:bg-[var(--btn-plain-bg-hover)]">
1053              ${post.title}
1054            </a>
1055          `).join('');
1056          
1057          // 显示分割线
1058          if (divider) {
1059            divider.style.display = 'block';
1060          }
1061        }
1062      });
1063    });
1064  }
1065  
1066  // 页面加载时渲染日历
1067  renderCalendar();
1068  
1069  // 每天午夜更新一次日历(可选)
1070  const now = new Date();
1071  const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
1072  const msUntilMidnight = tomorrow.getTime() - now.getTime();
1073  
1074  setTimeout(() => {
1075    renderCalendar();
1076    // 之后每24小时更新一次
1077    setInterval(renderCalendar, 24 * 60 * 60 * 1000);
1078  }, msUntilMidnight);
1079})();</script>
1079  </div> <!-- 粘性组件区域 -->  </div> <!-- 响应式样式和JavaScript -->  
1079<script type="module" src="/_astro/RightSideBar.astro_astro_type_script_index_0_lang.BtC9LsI_.js"></script>
1079</div> <main id="swup-container" class="transition-swup-fade overflow-hidden w-full col-span-1 row-start-1 row-end-2 col-span-1 row-start-1 row-end-2 lg:col-start-2 lg:col-end-3 lg:col-start-2 lg:col-end-3 transition-main" data-astro-cid-haiuh7kc> <div id="content-wrapper" class="onload-animation transition-leaving" data-astro-cid-haiuh7kc> <!-- the overflow-hidden here prevent long text break the layout--> <!-- make id different from windows.swup global property -->  <div id="post-list-container" class="transition-all duration-500 ease-in-out rounded-[var(--radius-large)] bg-[var(--card-bg)] py-0 md:py-0 md:bg-transparent mb-4 flex flex-col gap-2 md:gap-4 list-mode" data-default-layout="list" data-both-sidebars="true" data-astro-cid-l6a6buid> <div class="card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative onload-animation" style="animation-delay: calc(var(--content-delay) + 0ms);; --coverWidth: 28%;" data-astro-cid-iyiqi2so> <div class="pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <a href="/posts/huacai/" class="transition group w-full block font-bold mb-3 text-3xl text-90
1080        hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
1081        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
1082        before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
1083        before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
1084        " data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <svg width="1em" height="1em" class="inline text-[var(--primary)] text-2xl mr-2 -translate-y-0.5" data-astro-cid-iyiqi2so="true" data-icon="mdi:pin">   <symbol id="ai:mdi:pin" viewBox="0 0 24 24"><path fill="currentColor" d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2z"/></symbol><use href="#ai:mdi:pin"></use>  </svg> 画材大卖! <svg width="1em" height="1em" viewBox="0 0 24 24" class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" data-astro-cid-iyiqi2so="true" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" data-astro-cid-iyiqi2so="true" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg> </a> <!-- metadata (without tags) --> <div class="flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2 mb-4"> <!-- publish date --> <div class="flex items-center"> <div class="meta-icon"> <svg width="1em" height="1em" class="text-xl" data-icon="material-symbols:calendar-today-outline-rounded">   <symbol id="ai:material-symbols:calendar-today-outline-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></symbol><use href="#ai:material-symbols:calendar-today-outline-rounded"></use>  </svg> </div> <span class="text-50 text-sm font-medium">2025-12-08</span> </div> <!-- update date -->  <!-- categories --> <div class="flex items-center"> <div class="meta-icon"> <svg width="1em" height="1em" class="text-xl" data-icon="material-symbols:book-2-outline-rounded">   <symbol id="ai:material-symbols:book-2-outline-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="M6 15.325q.35-.175.725-.25T7.5 15H8V4h-.5q-.625 0-1.062.438T6 5.5zM10 15h8V4h-8zm-4 .325V4zM7.5 22q-1.45 0-2.475-1.025T4 18.5v-13q0-1.45 1.025-2.475T7.5 2H18q.825 0 1.413.587T20 4v12.525q0 .2-.162.363t-.588.362q-.35.175-.55.5t-.2.75t.2.763t.55.487t.55.413t.2.562v.25q0 .425-.288.725T19 22zm0-2h9.325q-.15-.35-.237-.712T16.5 18.5q0-.4.075-.775t.25-.725H7.5q-.65 0-1.075.438T6 18.5q0 .65.425 1.075T7.5 20"/></symbol><use href="#ai:material-symbols:book-2-outline-rounded"></use>  </svg> </div> <div class="flex flex-row flex-nowrap items-center"> <a href="/archive/?category=Guides" aria-label="View all posts in the Guides category" class="link-lg transition text-50 text-sm font-medium
1085                            hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap"> Guides </a> </div> </div> <!-- word count --> <div class="flex items-center"> <div class="meta-icon"> <svg width="1em" height="1em" class="text-xl" data-icon="material-symbols:article-outline-rounded">   <symbol id="ai:material-symbols:article-outline-rounded" viewB
1085ox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14zm3 12h5q.425 0 .713-.288T14 16t-.288-.712T13 15H8q-.425 0-.712.288T7 16t.288.713T8 17m0-4h8q.425 0 .713-.288T17 12t-.288-.712T16 11H8q-.425 0-.712.288T7 12t.288.713T8 13m0-4h8q.425 0 .713-.288T17 8t-.288-.712T16 7H8q-.425 0-.712.288T7 8t.288.713T8 9"/></symbol><use href="#ai:material-symbols:article-outline-rounded"></use>  </svg> </div> <span class="text-50 text-sm font-medium"> 1688 字 </span> </div> <!-- tags (只有在不显示基本元数据时才显示) -->  <!-- 访问量(首页不显示,且umami.enabled为true时显示) -->  </div> <!-- 只有在非首页且启用umami且有slug时才加载脚本 -->  <!-- description --> <div class="transition text-75 mb-3.5 pr-4" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> 文章转载自&#39;关于我&#39; </div> <!-- tags (moved to bottom) --> <div class="flex flex-wrap gap-2 mt-2" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <a href="/archive/?tag=%E5%95%86%E5%BA%97" class="btn-regular h-6 text-xs px-2 rounded-lg" aria-label="View all posts tagged with 商店" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <span class="transition-transform group-hover/tag:translate-x-0.5" data-astro-cid-iyiqi2so style="--coverWidth: 28%;">
1086# 商店 </span> </a><a href="/archive/?tag=%E7%94%BB%E6%9D%90" class="btn-regular h-6 text-xs px-2 rounded-lg" aria-label="View all posts tagged with 画材" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <span class="transition-transform group-hover/tag:translate-x-0.5" data-astro-cid-iyiqi2so style="--coverWidth: 28%;">
1087# 画材 </span> </a><a href="/archive/?tag=%E7%94%A9%E5%8D%96" class="btn-regular h-6 text-xs px-2 rounded-lg" aria-label="View all posts tagged with 甩卖" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <span class="transition-transform group-hover/tag:translate-x-0.5" data-astro-cid-iyiqi2so style="--coverWidth: 28%;">
1088# 甩卖 </span> </a> </div> </div> <a href="/posts/huacai/" aria-label="画材大卖!" class="group max-h-[20vh] md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0 md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"></div> <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center " data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="transition opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl" data-astro-cid-iyiqi2so="true" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg> </div> <div class="w-full h-full overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div> <img src="/_astro/cover.EWNAjR85_Z168uo6.webp" alt="Cover Image of the Post" style="object-position: center" loading="lazy" decoding="async" fetchpriority="auto" width="300" height="300" class="w-full h-full object-cover">  </div> </a>  </div> <div class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"></div> <div class="card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative onload-animation" style="animation-delay: calc(var(--content-delay) + 50ms);; --coverWidth: 28%;" data-astro-cid-iyiqi2so> <div class="pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <a href="/posts/guide/" class="transition group w-full block font-bold mb-3 text-3xl text-90
1089        hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
1090        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
1091        before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
1092        before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
1093        " data-astro-cid-iyiqi2so style="--coverWidth: 28%;">  教程文本 <svg width="1em" height="1em" viewBox="0 0 24 24" class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" data-astro-cid-iyiqi2so="true" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" data-astro-cid-iyiqi2so="true" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg> </a> <!-- metadata (without tags) --> <div class="flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2 mb-4"> <!-- publish date --> <div class="flex items-center"> <div class="meta-icon"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-xl" data-icon="material-symbols:calendar-today-outline-rounded">   <use href="#ai:material-symbols:calendar-today-outline-rounded"></use>  </svg> </div> <span class="text-50 text-sm font-medium">2024-04-01</span> </div> <!-- update date -->  <!-- categories --> <div class="flex items-center"> <div class="meta-icon"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-xl" data-icon="material-symbols:book-2-outline-rounded">   <use href="#ai:material-symbols:book-2-outline-rounded"></use>  </svg> </div> <div class="flex flex-row flex-nowrap items-center"> <a href="/archive/?category=Guides" aria-label="View all posts in the Guides category" class="link-lg transition text-50 text-sm font-medium
1094                            hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap"> Guides </a> </div> </div> <!-- word count --> <div class="flex items-center"> <div class="meta-icon"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-xl" data-icon="material-symbols:article-outline-rounded">   <use href="#ai:material-symbols:article-outline-rounded"></use>  </svg> </div> <span class="text-50 text-sm font-medium"> 186 字 </span> </div> <!-- tags (只有在不显示基本元数据时才显示) -->  <!-- 访问量(首页不显示,且umami.enabled为true时显示) -->  </div> <!-- 只有在非首页且启用umami且有slug时才加载脚本 -->  <!-- description --> <div class="transition text-75 mb-3.5 pr-4" data-astro-cid-iyiqi2so style="--coverWidth: 28%;">
1094 防止我忘记 </div> <!-- tags (moved to bottom) --> <div class="flex flex-wrap gap-2 mt-2" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <a href="/archive/?tag=%E7%BD%91%E7%AB%99" class="btn-regular h-6 text-xs px-2 rounded-lg" aria-label="View all posts tagged with 网站" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <span class="transition-transform group-hover/tag:translate-x-0.5" data-astro-cid-iyiqi2so style="--coverWidth: 28%;">
1095# 网站 </span> </a><a href="/archive/?tag=%E5%8D%9A%E5%AE%A2" class="btn-regular h-6 text-xs px-2 rounded-lg" aria-label="View all posts tagged with 博客" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <span class="transition-transform group-hover/tag:translate-x-0.5" data-astro-cid-iyiqi2so style="--coverWidth: 28%;">
1096# 博客 </span> </a><a href="/archive/?tag=%E6%95%99%E7%A8%8B" class="btn-regular h-6 text-xs px-2 rounded-lg" aria-label="View all posts tagged with 教程" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <span class="transition-transform group-hover/tag:translate-x-0.5" data-astro-cid-iyiqi2so style="--coverWidth: 28%;">
1097# 教程 </span> </a> </div> </div> <a href="/posts/guide/" aria-label="教程文本" class="group max-h-[20vh] md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0 md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"></div> <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center " data-astro-cid-iyiqi2so style="--coverWidth: 28%;"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="transition opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl" data-astro-cid-iyiqi2so="true" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg> </div> <div class="w-full h-full overflow-hidden relative"> <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div> <img src="/_astro/cover.B0ZkOonL_2j0veS.webp" alt="Cover Image of the Post" style="object-position: center" loading="lazy" decoding="async" fetchpriority="auto" width="1920" height="1080" class="w-full h-full object-cover">  </div> </a>  </div> <div class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden" data-astro-cid-iyiqi2so style="--coverWidth: 28%;"></div>  </div> 
1097<script type="module">function n(){setTimeout(()=>{const e=document.getElementById("post-list-container");if(!e){console.debug("post-list-container not found, skipping layout initialization (not a post list page)");return}const t=e.getAttribute("data-both-sidebars")==="true",i=localStorage.getItem("postListLayout"),o=e.getAttribute("data-default-layout")||"list";let s=i||o;console.debug("Initializing layout:",{savedLayout:i,defaultLayout:o,currentLayout:s,isBothSidebars:t});const a=document.getElementById("main-grid");if(a&&a.getAttribute("data-layout-mode")===s){console.debug("Layout already correct, skipping update to avoid flicker"),e.classList.add("js-initialized"),l();return}window.innerWidth>=769?r(s):e.classList.add("js-initialized"),l()},50)}function r(e){const t=document.getElementById("post-list-container");if(t){if(t.classList.add("layout-switching"),t.classList.remove("list-mode","grid-mode"),e==="grid"){t.classList.add("grid-mode"),t.classList.add("grid","grid-cols-1","md:grid-cols-2","gap-6"),t.classList.remove("flex","flex-col");const i=document.querySelector(".right-sidebar-container");i&&i.classList.add("hidden-in-grid-mode");const o=document.getElementById("main-grid");o&&o.setAttribute("data-layout-mode","grid")}else{t.classList.add("list-mode"),t.classList.add("flex","flex-col"),t.classList.remove("grid","grid-cols-1","md:grid-cols-2","gap-6");const i=document.querySelector(".right-sidebar-container");i&&i.classList.remove("hidden-in-grid-mode");const o=document.getElementById("main-grid");o&&o.setAttribute("data-layout-mode","list")}t.classList.add("js-initialized"),setTimeout(()=>{t.classList.remove("layout-switching")},500)}}window.addEventListener("layoutChange",e=>{document.getElementById("post-list-container")&&r(e.detail.layout)});window.addEventListener("resize",()=>{const e=window.innerWidth>=769,t=localStorage.getItem("postListLayout"),i=document.getElementById("post-list-container")?.getAttribute("data-default-layout")||"list";e&&r(t||i)});document.addEventListener("DOMContentLoaded",n);document.readyState==="loading"?document.addEventListener("DOMContentLoaded",n):n();function u(){function e(){if(typeof window<"u"&&window.swup){const t=window.swup;return t.hooks.on("content:replace",()=>{setTimeout(()=>{console.debug("Swup content:replace - reinitializing layout"),n()},100)}),t.hooks.on("page:view",()=>{setTimeout(()=>{console.debug("Swup page:view - reinitializing layout"),n()},100)}),t.hooks.on("animation:in:end",()=>{setTimeout(()=>{console.debug("Swup animation:in:end - reinitializing layout"),n()},50)}),console.debug("Swup layout listeners registered"),!0}return!1}if(!e()){let t=0;const i=10,o=setInterval(()=>{if(e())clearInterval(o);else if(++t>=i){if(clearInterval(o),window.addEventListener("popstate",()=>{setTimeout(()=>{console.debug("Popstate - reinitializing layout"),n()},100)}),window.location){const s=history.pushState,a=history.replaceState;history.pushState=function(...d){s.apply(this,d),setTimeout(()=>{console.debug("PushState - reinitializing layout"),n()},100)},history.replaceState=function(...d){a.apply(this,d),setTimeout(()=>{console.debug("ReplaceState - reinitializing layout"),n()},100)}}console.debug("Fallback layout listeners registered")}},100)}}setTimeout(u,200);function l(){const e=document.getElementById("post-list-container");if(e){const i=e.classList.contains("grid-mode")?"grid":"list",o=new CustomEvent("layoutInit",{detail:{layout:i}});window.dispatchEvent(o)}}setTimeout(l,150);</script>
1097  <div class="mx-auto onload-animation flex flex-row gap-3 justify-center" style="animation-delay: calc(var(--content-delay) + 100ms)"> <a href class="btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11 disabled"> <svg width="1em" height="1em" class="text-[1.75rem]" data-icon="material-symbols:chevron-left-rounded">   <symbol id="ai:material-symbols:chevron-left-rounded" viewBox="0 0 24 24"><path fill="currentColor" d="m10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z"/></symbol><use href="#ai:material-symbols:chevron-left-rounded"></use>  </svg> </a> <div class="bg-[var(--card-bg)] flex flex-row rounded-lg items-center text-neutral-700 dark:text-neutral-300 font-bold"> <div class="h-11 w-11 rounded-lg bg-[var(--primary)] flex items-center justify-center
1098                    font-bold text-white dark:text-black/70"> 1 </div> </div> <a href class="btn-card overflow-hidden rounded-lg text-[var(--primary)] w-11 h-11 disabled"> <svg width="1em" height="1em" viewBox="0 0 24 24" class="text-[1.75rem]" data-icon="material-symbols:chevron-right-rounded">   <use href="#ai:material-symbols:chevron-right-rounded"></use>  </svg> </a> </div>  <div class="footer col-span-2 onload-animation hidden lg:block" data-astro-cid-haiuh7kc> <!--<div class="border-t border-[var(&#45;&#45;primary)] mx-16 border-dashed py-8 max-w-[var(&#45;&#45;page-width)] flex flex-col items-center justify-center px-6">--><div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div> <!--<div class="transition bg-[oklch(92%_0.01_var(&#45;&#45;hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">--> <div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6"> <div class="transition text-50 text-sm text-center"> 
1099&copy; <span id="copyright-year">2025</span> 小鱼仔娱乐. All Rights Reserved. <br>
1100Powered by
1101<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
1102<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">Mizuki</a>&nbsp; Version <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">7.6</a><br> </div> </div> </div> </div> </main> <div class="footer col-span-2 onload-animation block lg:hidden" data-astro-cid-haiuh7kc> <!--<div class="border-t border-[var(&#45;&#45;primary)] mx-16 border-dashed py-8 max-w-[var(&#45;&#45;page-width)] flex flex-col items-center justify-center px-6">--><div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div> <!--<div class="transition bg-[oklch(92%_0.01_var(&#45;&#45;hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">--> <div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6"> <div class="transition text-50 text-sm text-center"> 
1103&copy; <span id="copyright-year">2025</span> 小鱼仔娱乐. All Rights Reserved. <br>
1104Powered by
1105<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
1106<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">Mizuki</a>&nbsp; Version <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">7.6</a><br> </div> </div> </div> </div> <!-- There can't be a filter on parent element, or it will break `fixed` --><div class="back-to-top-wrapper block" data-astro-cid-eymb5ayk> <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="backToTop()" data-astro-cid-eymb5ayk> <button aria-label="Back to Top" class="btn-card h-[3.75rem] w-[3.75rem]" data-astro-cid-eymb5ayk> <svg width="1em" height="1em" class="mx-auto" data-astro-cid-eymb5ayk="true" data-icon="material-symbols:keyboard-arrow-up-rounded">   <symbol id="ai:material-symbols:keyboard-arrow-up-rounded" viewB
1106ox="0 0 24 24"><path fill="currentColor" d="m12 10.8l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6 4.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></symbol><use href="#ai:material-symbols:keyboard-arrow-up-rounded"></use>  </svg> </button> </div> </div>  
1106<script>
1107    function backToTop() {
1108        // 直接使用原生滚动,避免OverlayScrollbars冲突
1109        window.scroll({top: 0, behavior: 'smooth'});
1110    }
1111</script>
1111 </div> </div>  <div class="absolute w-full z-0 hidden 2xl:block" data-astro-cid-haiuh7kc> <div class="relative max-w-[var(--page-width)] mx-auto" data-astro-cid-haiuh7kc> <!-- TOC component --> <div id="toc-wrapper" class="hidden lg:block transition absolute top-0 w-[var(--toc-width)] items-center -right-[var(--toc-width)] toc-hide" data-astro-cid-haiuh7kc> <div id="toc-inner-wrapper" class="fixed top-14 w-[var(--toc-width)] h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar" data-astro-cid-haiuh7kc> <div id="toc" class="w-full h-full transition-swup-fade " data-astro-cid-haiuh7kc> <table-of-contents id="toc" data-astro-cid-7ckeuxew="true" class="group"> <!-- TOC内容将由JavaScript动态生成 --> </table-of-contents> 
1111<script type="module" src="/_astro/TOC.astro_astro_type_script_index_0_lang.h7KfX3Q5.js"></script>
1111  </div> </div> </div> <!-- #toc needs to exist for Swup to work normally -->  </div> </div>  <!-- Music Player - 仅在启用时加载 --> 
1111<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script>
1111<astro-island uid="Z2bDTKi" component-url="/_astro/MusicPlayer.6Ex5fZPK.js" component-export="default" renderer-url="/_astro/client.svelte.Kd9eTfLd.js" props="{&quot;data-astro-cid-sckkx6r4&quot;:[0,true]}" ssr client="load" opts="{&quot;name&quot;:&quot;MusicPlayer&quot;,&quot;value&quot;:true}" await-children><!--[--><!--[--><!--[!--><!--]--> <div class="music-player fixed bottom-4 right-4 z-50 transition-all duration-300 ease-in-out"><div class="orb-player w-12 h-12 bg-[var(--primary)] rounded-full shadow-lg cursor-pointer transition-all duration-500 ease-in-out flex items-center justify-center hover:scale-110 active:scale-95 opacity-0 scale-0 pointer-events-none" role="button" tabindex="0" aria-label="显示音乐播放器"><!--[!--><!--[!--><!--[!--><!--]--><!--]--><!--]--></div> <div class="mini-player card-base bg-[var(--float-panel-bg)] shadow-xl rounded-2xl p-3 transition-all duration-500 ease-in-out"><div class="flex items-center gap-3"><div class="cover-container relative w-12 h-12 rounded-full overflow-hidden cursor-pointer" role="button" tabindex="0" aria-label="播放"><img src="/favicon/小鱼仔娱乐.png" alt="封面" class="w-full h-full object-cover transition-transform duration-300"/> <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity"><!--[!--><!--[!--><!--[!--><!--]--><!--]--><!--]--></div></div> <div class="flex-1 min-w-0 cursor-pointer" role="button" tabindex="0" aria-label="展开音乐播放器"><div class="text-sm font-medium text-90 truncate">小鱼仔娱乐</div> <div class="text-xs text-50 truncate">准备好听歌了吗</div></div> <div class="flex items-center gap-1"><button class="btn-plain w-8 h-8 rounded-lg flex items-center justify-center" title="隐藏播放器"><!--[!--><!--]--><!----></button> <button class="btn-plain w-8 h-8 rounded-lg flex items-center justify-center"><!--[!--><!--]--><!----></button></div></div></div> <div class="expanded-player card-base bg-[var(--float-panel-bg)] shadow-xl rounded-2xl p-4 transition-all duration-500 ease-in-out opacity-0 scale-95 pointer-events-none"><div class="flex items-center gap-4 mb-4"><div class="cover-container relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0"><img src="/favicon/小鱼仔娱乐.png" alt="封面" class="w-full h-full object-cover transition-transform duration-300"/></div> <div class="flex-1 min-w-0"><div class="song-title text-lg font-bold text-90 truncate mb-1">小鱼仔娱乐</div> <div class="song-artist text-sm text-50 truncate">准备好听歌了吗</div> <div class="text-xs text-30 mt-1">0:00 / 0:00</div></div> <div class="flex items-center gap-1"><button class="btn-plain w-8 h-8 rounded-lg flex items-center justify-center" title="隐藏播放器"><!--[!--><!--]--><!----></button> <button class="btn-plain w-8 h-8 rounded-lg flex items-center justify-center"><!--[!--><!--]--><!----></button></div></div> <div class="progress-section mb-4"><div class="progress-bar flex-1 h-2 bg-[var(--btn-regular-bg)] rounded-full cursor-pointer" role="slider" tabindex="0" aria-label="播放进度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="h-full bg-[var(--primary)] rounded-full transition-all duration-100" style="width: 0%"></div></div></div> <div class="controls flex items-center justify-center gap-2 mb-4"><button class="w-10 h-10 rounded-lg btn-plain" disabled><!--[!--><!--]--><!----></button> <button class="btn-plain w-10 h-10 rounded-lg" disabled><!--[!--><!--]--><!----></button> <button class="btn-regular w-12 h-12 rounded-full"><!--[!--><!--[!--><!--[!--><!--]--><!--]--><!--]--></button> <button class="btn-plain w-10 h-10 rounded-lg" disabled><!--[!--><!--]--><!----></button> <button class="w-10 h-10 rounded-lg btn-plain"><!--[!--><!--[!--><!--[!--><!--]--><!--]--><!--]--></button></div> <div class="bottom-controls flex items-center gap-2"><button class="btn-plain w-8 h-8 rounded-lg"><!--[!--><!--[!--><!--[!--><!--]--><!--]--><!--]--></button> <div class="flex-1 h-2 bg-[var(--btn-regular-bg)] rounded-full cursor-pointer" role="slider" tabindex="0" aria-label="音量控制" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70"><div class="h-full bg-[var(--primary)] rounded-full transition-all duration-100" style="width: 70%"></div></div> <button class="btn-plain w-8 h-8 rounded-lg"><!--[!--><!--]--><!----></button></div></div> <!--[!--><!--]--></div> <style>
1112.orb-player {
1113	position: relative;
1114	backdrop-filter: blur(10px);
1115	-webkit-backdrop-filter: blur(10px);
1116}
1117.orb-player::before {
1118	content: '';
1119	position: absolute;
1120	inset: -2px;
1121	background: linear-gradient(45deg, var(--primary), transparent, var(--primary));
1122	border-radius: 50%;
1123	z-index: -1;
1124	opacity: 0;
1125	transition: opacity 0.3s ease;
1126}
1127.orb-player:hover::before {
1128	opacity: 0.3;
1129	animation: rotate 2s linear infinite;
1130}
1131.orb-player .animate-pulse {
1132	animation: musicWave 1.5s ease-in-out infinite;
1133}
1134@keyframes rotate {
1135	from { transform: rotate(0deg); }
1136	to { transform: rotate(360deg); }
1137}
1138@keyframes musicWave {
1139	0%, 100% { transform: scaleY(0.5); }
1140	50% { transform: scaleY(1); }
1141}
1142.music-player.hidden-mode {
1143	width: 48px;
1144	height: 48px;
1145}
1146.music-player {
1147    max-width: 320px;
1148    -webkit-user-select: none;
1149       -moz-user-select: none;
1150            user-select: none;
1151}
1152.mini-player {
1153    width: 280px;
1154    position: absolute;
1155    bottom: 0;
1156    right: 0;
1157    /*left: 0;*/
1158}
1159.expanded-player {
1160    width: 320px;
1161    position: absolute;
1162    bottom: 0;
1163    right: 0;
1164}
1165.animate-pulse {
1166    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1167}
1168@keyframes pulse {
1169    0%, 100% {
1170        opacity: 1;
1171    }
1172    50% {
1173        opacity: 0.5;
1174    }
1175}
1176.progress-section div:hover,
1177.bottom-controls > div:hover {
1178    transform: scaleY(1.2);
1179    transition: transform 0.2s ease;
1180}
1181@media (max-width: 768px) {
1182    .music-player {
1183        max-width: 280px;
1184        /*left: 8px !important;*/
1185        bottom: 8px !important;
1186        right: 8px !important;
1187    }
1188    .music-player.expanded {
1189        width: calc(100vw - 16px);
1190        max-width: none;
1191        /*left: 8px !important;*/
1192        right: 8px !important;
1193    }
1194    .playlist-panel {
1195        width: calc(100vw - 16px) !important;
1196        /*left: 8px !important;*/
1197        right: 8px !important;
1198        max-width: none;
1199    }
1200    .controls {
1201        gap: 8px;
1202    }
1203    .controls button {
1204        width: 36px;
1205        height: 36px;
1206    }
1207    .controls button:nth-child(3) {
1208        width: 44px;
1209        height: 44px;
1210    }
1211}
1212@media (max-width: 480px) {
1213    .music-player {
1214        max-width: 260px;
1215    }
1216    .song-title {
1217        font-size: 14px;
1218    }
1219    .song-artist {
1220        font-size: 12px;
1221    }
1222    .controls {
1223        gap: 6px;
1224        margin-bottom: 12px;
1225    }
1226    .controls button {
1227        width: 32px;
1228        height: 32px;
1229    }
1230    .controls button:nth-child(3) {
1231        width: 40px;
1232        height: 40px;
1233    }
1234    .playlist-item {
1235        padding: 8px 12px;
1236    }
1237    .playlist-item .w-10 {
1238        width: 32px;
1239        height: 32px;
1240    }
1241}
1242@keyframes slide-up {
1243    from {
1244        transform: translateY(100%);
1245        opacity: 0;
1246    }
1247    to {
1248        transform: translateY(0);
1249        opacity: 1;
1250    }
1251}
1252.animate-slide-up {
1253    animation: slide-up 0.3s ease-out;
1254}
1255@media (hover: none) and (pointer: coarse) {
1256    .music-player button,
1257    .playlist-item {
1258        min-height: 44px;
1259    }
1260    .progress-section > div,
1261    .bottom-controls > div:nth-child(2) {
1262        height: 12px;
1263    }
1264}
1265/* 自定义旋转动画,停止时保持当前位置 */
1266@keyframes spin-continuous {
1267    from {
1268        transform: rotate(0deg);
1269    }
1270    to {
1271        transform: rotate(360deg);
1272    }
1273}
1274.cover-container img {
1275    animation: spin-continuous 3s linear infinite;
1276    animation-play-state: paused;
1277}
1278.cover-container img.spinning {
1279    animation-play-state: running;
1280}
1281/* 让主题色按钮更有视觉反馈 */
1282button.bg-\[var\(--primary\)\] {
1283    box-shadow: 0 0 0 2px var(--primary);
1284    border: none;
1285}
1286</style><!--]--><!--]--><!--astro:end--></astro-island> <!-- Pio 看板娘组件 - 仅在启用时加载 --> <astro-island uid="1OlTF2" component-url="/_astro/Pio.CLYI02yp.js" component-export="default" renderer-url="/_astro/client.svelte.Kd9eTfLd.js" props="{&quot;data-astro-cid-sckkx6r4&quot;:[0,true]}" ssr client="load" opts="{&quot;name&quot;:&quot;Pio&quot;,&quot;value&quot;:true}" await-children><!--[--><!--[--><div class="pio-container left"><div class="pio-action"></div>
1286 <canvas id="pio" width="280" height="250"></canvas></div><!--]--><!--]--><!--astro:end--></astro-island> <!-- increase the page height during page transition to prevent the scrolling animation from jumping --> <div id="page-height-extend" class="hidden h-[300vh]" data-astro-cid-sckkx6r4 style="--bannerOffset: 15vh;--banner-height-home: 65vh;--banner-height: 35vh;--configHue: 0;--page-width: 90rem;"></div>  
1286<script type="module" src="/_astro/Layout.astro_astro_type_script_index_0_lang.KY7KK_U5.js"></script>
1286 <!-- 代码块折叠功能 --> 
1286<script type="module" src="/_astro/Layout.astro_astro_type_script_index_1_lang._R4ib5TO.js"></script>
1286 <!-- 主题切换综合性能优化器(包含代码块优化、重型元素优化、性能诊断) --> 
1286<script type="module" src="/_astro/Layout.astro_astro_type_script_index_2_lang.BMyF9r-v.js"></script>
1286 
1286<script type="module" src="/_astro/Layout.astro_astro_type_script_index_3_lang.CZJPyahf.js"></script>
1286</body></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.