网页优化

2026-10-31 15:26:22 +08:00
1 parent 49dd3b9472
commit f4e69707c3
@@ -8,10 +8,10 @@
 <meta property="og:title" content="SpineThumbnails — Eagle 插件">
 <meta property="og:description" content="识别、配对、渲染一次完成。为 Eagle 中的 Spine 导出资源自动生成静态或动态缩略图。">
 <meta property="og:type" content="website">
-<meta property="og:image" content="assets/promo-banner.jpg">
+<meta property="og:image" content="assets/promo-banner.jpg?v=2">
 <meta name="theme-color" content="#16161b">
-<link rel="icon" href="assets/logo.png">
-<link rel="stylesheet" href="style.css">
+<link rel="icon" href="assets/logo.png?v=2">
+<link rel="stylesheet" href="style.css?v=4">
 <noscript><style>.reveal { opacity: 1; transform: none; }</style></noscript>
 <script>
 	try {
@@ -19,13 +19,47 @@
 		document.documentElement.dataset.theme = savedTheme || 'dark';
 	} catch (error) {}
 </script>
+<!-- Matomo -->
+<script>
+	(function() {
+		var host = location.hostname.toLowerCase();
+		var localHost = location.protocol === 'file:' ||
+			host === 'localhost' ||
+			host === '127.0.0.1' ||
+			host === '0.0.0.0' ||
+			host === '::1' ||
+			host === '[::1]' ||
+			host.endsWith('.localhost') ||
+			host.endsWith('.local') ||
+			/^10\./.test(host) ||
+			/^192\.168\./.test(host) ||
+			/^172\.(1[6-9]|2\d|3[01])\./.test(host);
+		if (localHost) return;
+
+		var _paq = window._paq = window._paq || [];
+		_paq.push(['trackPageView']);
+		_paq.push(['enableLinkTracking']);
+		var u = "//web-analysis.yeomai.site/";
+		_paq.push(['setTrackerUrl', u + 'matomo.php']);
+		_paq.push(['setSiteId', '3']);
+		var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+		g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
+		document.addEventListener('click', function(event) {
+			var link = event.target.closest && event.target.closest('a[download]');
+			if (!link) return;
+			var file = (link.getAttribute('href') || '').split('/').pop();
+			_paq.push(['trackEvent', 'Download', 'direct', file]);
+		});
+	})();
+</script>
+<!-- End Matomo Code -->
 </head>
 <body>

 <header class="topbar">
 	<div class="wrap topbar-inner">
 		<a class="brand" href="#top">
-			<img src="assets/logo.png" alt="SpineThumbnails 图标" width="30" height="30">
+			<img src="assets/logo.png?v=2" alt="SpineThumbnails 图标" width="30" height="30">
 			<span class="brand-name">SpineThumbnails</span>
 			<span class="brand-ver">v1.0.0</span>
 		</a>
@@ -41,7 +75,7 @@
 				<svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v2.4M12 19.1v2.4M2.5 12h2.4M19.1 12h2.4M5.2 5.2l1.7 1.7M17.1 17.1l1.7 1.7M18.8 5.2l-1.7 1.7M6.9 17.1l-1.7 1.7"/></svg>
 				<svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.2A8.2 8.2 0 0 1 9.8 4a8.4 8.4 0 1 0 10.2 10.2z"/></svg>
 			</button>
-			<a class="btn btn-primary btn-sm" href="https://community-cn.eagle.cool/plugins?search=Spine%E7%BC%A9%E7%95%A5%E5%9B%BE" target="_blank" rel="noopener">获取插件</a>
+			<a class="btn btn-primary btn-sm" href="https://community-cn.eagle.cool/plugins?search=Spine%E7%BC%A9%E7%95%A5%E5%9B%BE" target="_blank" rel="noopener">前往Eagle社区获取插件</a>
 		</div>
 	</div>
 </header>
@@ -51,7 +85,7 @@
 		<div class="hero-glow" aria-hidden="true"></div>
 		<div class="wrap hero-grid">
 			<div class="hero-copy">
-				<span class="pill"><i class="dot" aria-hidden="true"></i>Eagle 插件 · 自动资源配对</span>
+				<span class="pill"><i class="dot" aria-hidden="true"></i>Eagle 插件</span>
 				<h1>导入完成，<br><span class="grad">缩略图自动就位</span></h1>
 				<p class="hero-sub">
 					SpineThumbnails 识别 Eagle 中导入的 Spine 骨骼、Atlas 与贴图，
@@ -59,8 +93,9 @@
 					从版本识别到渲染、写入、进度反馈，一次完成。
 				</p>
 				<div class="hero-cta">
-					<a class="btn btn-primary" href="https://community-cn.eagle.cool/plugins?search=Spine%E7%BC%A9%E7%95%A5%E5%9B%BE" target="_blank" rel="noopener">前往插件页</a>
-					<a class="link-arrow" href="#workflow">了解工作流程 →</a>
+					<a class="btn btn-primary" href="https://community-cn.eagle.cool/plugins?search=Spine%E7%BC%A9%E7%95%A5%E5%9B%BE" target="_blank" rel="noopener">前往Eagle社区获取插件</a>
+					<a class="btn btn-download" href="assets/download/SpineThumbnailGenerateServer.eagleplugin" download>直接下载</a>
+					<a class="btn btn-ghost" href="#workflow">了解工作流程</a>
 				</div>
 				<ul class="stats">
 					<li><b>9</b><span>Spine 版本<br>3.4 – 4.3</span></li>
@@ -74,7 +109,7 @@
 					<figcaption>SpineThumbnails 1.0.0 · 插件主界面</figcaption>
 				</figure>
 				<div class="badge-chip reveal">
-					<img src="assets/logo.png" alt="" width="24" height="24">
+					<img src="assets/logo.png?v=2" alt="" width="24" height="24">
 					<span>首次使用默认关闭自动生成，只有主动开启后才会处理新导入的素材。</span>
 				</div>
 			</div>
@@ -144,7 +179,7 @@
 				<article class="feature-card reveal">
 					<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 3.5v11"/><circle cx="18" cy="6" r="2.6"/><circle cx="6" cy="17.5" r="2.6"/><path d="M18 8.6a9 9 0 0 1-9 8.9"/></svg></div>
 					<h3>9 个运行版本</h3>
-					<p>从 JSON 版本字段或 SKEL 二进制头部识别 Spine 版本，自动匹配 3.4–4.3 对应的本地运行时。</p>
+					<p>从 JSON 版本字段或 SKEL 二进制头部识别 Spine 版本，自动匹配 3.4–4.3 对应的运行时。</p>
 				</article>
 				<article class="feature-card reveal">
 					<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z"/><path d="M8 9h8M8 13h5"/><path d="M16 15l2 2 3-4"/></svg></div>
@@ -211,13 +246,6 @@
 			</div>
 			<div class="mode-grid">
 				<article class="mode-card reveal">
-					<div class="mode-visual static" aria-hidden="true">
-						<span class="pose-ring"></span>
-						<span class="pose-bone b1"></span>
-						<span class="pose-bone b2"></span>
-						<span class="pose-bone b3"></span>
-						<span class="mode-file">PNG</span>
-					</div>
 					<div class="mode-copy">
 						<span class="mode-label">STATIC</span>
 						<h3>静帧 · setup pose</h3>
@@ -230,13 +258,6 @@
 					</div>
 				</article>
 				<article class="mode-card reveal">
-					<div class="mode-visual animated" aria-hidden="true">
-						<span class="motion-dot d1"></span>
-						<span class="motion-dot d2"></span>
-						<span class="motion-dot d3"></span>
-						<span class="motion-line"></span>
-						<span class="mode-file">WEBP</span>
-					</div>
 					<div class="mode-copy">
 						<span class="mode-label">ANIMATED</span>
 						<h3>动态 · 首个动画</h3>
@@ -257,7 +278,7 @@
 			<div class="section-head reveal">
 				<span class="kicker">SUPPORTED</span>
 				<h2>覆盖 Spine 3.4 – 4.3</h2>
-				<p class="section-lead">支持 JSON、SKEL、SKEL.BYTES、ATLAS 与 ATLAS.TXT，使用与皮肤和约束相匹配的本地运行时渲染。</p>
+				<p class="section-lead">支持 JSON、SKEL、SKEL.BYTES、ATLAS 与 ATLAS.TXT，使用与皮肤和约束相匹配的运行时渲染。</p>
 			</div>
 			<ul class="v-chips reveal" aria-label="支持的 Spine 版本">
 				<li>3.4</li><li>3.5</li><li>3.6</li><li>3.7</li><li class="sep" aria-hidden="true">·</li>
@@ -312,7 +333,7 @@
 					<strong>在 Eagle 插件社区获取 SpineThumbnails</strong>
 					<span class="dl-meta">搜索“Spine缩略图”，或直接打开 Eagle 插件社区。</span>
 				</span>
-				<span class="btn btn-primary">前往插件页 →</span>
+				<span class="btn btn-primary">前往Eagle社区获取插件</span>
 			</a>
 			<ol class="install-steps reveal">
 				<li>
@@ -366,7 +387,7 @@
 <footer class="footer">
 	<div class="wrap footer-inner">
 		<div class="foot-brand">
-			<img src="assets/logo.png" alt="" width="34" height="34">
+			<img src="assets/logo.png?v=2" alt="" width="34" height="34">
 			<div>
 				<strong>SpineThumbnails</strong>
 					<span>Eagle 插件 · v1.0.0</span>
@@ -211,6 +211,14 @@ html[data-theme="dark"] .icon-moon { display: none; }

 .btn-ghost:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--border)); transform: translateY(-1px); }

+.btn-download {
+	background: linear-gradient(135deg, #1976d2, #4fc1ff);
+	color: #fff;
+	box-shadow: 0 10px 26px rgba(25, 118, 210, .28);
+}
+
+.btn-download:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(25, 118, 210, .36); }
+
 .btn-sm { padding: 8px 15px; font-size: 13px; border-radius: 9px; }

 .link-arrow {
@@ -1282,123 +1290,6 @@ html[data-theme="light"] .viewer {
 	box-shadow: var(--card-shadow);
 }

-.mode-visual {
-	position: relative;
-	height: 190px;
-	overflow: hidden;
-	border-bottom: 1px solid var(--border);
-	background:
-		linear-gradient(130deg, color-mix(in srgb, var(--accent) 15%, var(--panel-2)), transparent 62%),
-		radial-gradient(240px 180px at 78% 22%, color-mix(in srgb, var(--cyan) 15%, transparent), transparent 70%),
-		var(--panel-2);
-}
-
-.mode-visual::before {
-	content: "";
-	position: absolute;
-	inset: 0;
-	opacity: .32;
-	background-image:
-		linear-gradient(color-mix(in srgb, var(--text-dim) 12%, transparent) 1px, transparent 1px),
-		linear-gradient(90deg, color-mix(in srgb, var(--text-dim) 12%, transparent) 1px, transparent 1px);
-	background-size: 28px 28px;
-	mask-image: linear-gradient(to bottom right, #000, transparent 78%);
-}
-
-.pose-ring {
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	width: 112px;
-	height: 112px;
-	border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
-	border-radius: 50%;
-	transform: translate(-50%, -50%);
-	box-shadow: 0 0 44px color-mix(in srgb, var(--accent) 18%, transparent);
-}
-
-.pose-bone {
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	height: 7px;
-	width: 138px;
-	border-radius: 999px;
-	background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-2) 75%, #fff));
-	transform-origin: 12% 50%;
-	box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
-}
-
-.pose-bone::before,
-.pose-bone::after {
-	content: "";
-	position: absolute;
-	top: 50%;
-	width: 18px;
-	height: 18px;
-	border-radius: 50%;
-	border: 5px solid var(--panel);
-	background: #fff;
-	transform: translateY(-50%);
-	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
-}
-
-.pose-bone::before { left: -8px; }
-.pose-bone::after { right: -8px; }
-.pose-bone.b1 { transform: translate(-46px, -48px) rotate(24deg); }
-.pose-bone.b2 { transform: translate(-18px, 3px) rotate(-28deg); }
-.pose-bone.b3 { transform: translate(-56px, -21px) rotate(67deg); }
-
-.motion-line {
-	position: absolute;
-	left: 18%;
-	right: 18%;
-	top: 50%;
-	height: 2px;
-	transform: rotate(-9deg);
-	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
-	opacity: .7;
-}
-
-.motion-dot {
-	position: absolute;
-	width: 58px;
-	height: 58px;
-	border-radius: 17px;
-	border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--border));
-	background: color-mix(in srgb, var(--panel) 86%, transparent);
-	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
-}
-
-.motion-dot::after {
-	content: "";
-	position: absolute;
-	left: 13px;
-	top: 14px;
-	width: 28px;
-	height: 28px;
-	border-radius: 8px;
-	background: linear-gradient(135deg, var(--accent), var(--accent-2));
-	box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .12);
-}
-
-.motion-dot.d1 { left: 18%; top: 24px; transform: rotate(-14deg) scale(.72); opacity: .45; }
-.motion-dot.d2 { left: 42%; top: 64px; transform: rotate(6deg); }
-.motion-dot.d3 { right: 18%; top: 34px; transform: rotate(16deg) scale(.78); opacity: .55; }
-
-.mode-file {
-	position: absolute;
-	right: 16px;
-	bottom: 14px;
-	padding: 5px 10px;
-	border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--border));
-	border-radius: 999px;
-	background: color-mix(in srgb, var(--panel) 86%, transparent);
-	color: var(--cyan);
-	font: 700 10.5px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
-	letter-spacing: .12em;
-}
-
 .mode-copy { padding: 24px; }

 .mode-label {
@@ -1458,6 +1349,5 @@ html[data-theme="light"] .viewer {
@media (max-width: 520px) {
 	.safety-band { padding: 42px 0; }
 	.safety-grid li { padding: 18px 18px 18px 54px; }
-	.mode-visual { height: 170px; }
 	.mode-copy { padding: 20px; }
 }