统一 Paper 风格的站点标题与提交信息

astro.config.mjs

@@ -2,14 +2,21 @@ import { defineConfig } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
 import sitemap from "@astrojs/sitemap";
 import svelte from "@astrojs/svelte";
+import { execSync } from "node:child_process";
 
 const site = process.env.SITE_URL;
+const commitHash =
+  (process.env.CF_PAGES_COMMIT_SHA || process.env.GITHUB_SHA || process.env.GIT_COMMIT_HASH || "").trim().slice(0, 7) ||
+  execSync("git rev-parse --short HEAD").toString().trim();
 
 export default defineConfig({
   site,
   output: "static",
   vite: {
     plugins: [tailwindcss()],
+    define: {
+      "import.meta.env.GIT_COMMIT_HASH": JSON.stringify(commitHash),
+    },
   },
   integrations: [svelte(), ...(site ? [sitemap()] : [])],
 });

src/components/Footer.astro

@@ -1,34 +1,71 @@
 ---
 import Logo from "@/components/Logo.astro";
 import { siteConfig } from "@/config";
+
+const hash = import.meta.env.GIT_COMMIT_HASH;
 ---
 
-<footer class="bg-background-light-0 dark:bg-background-dark-80 mt-16 border-t">
+<footer class="footer bg-background-dark-80 mt-8 border-t py-12">
-  <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 md:grid-cols-4">
+  <div class="m-auto max-w-7xl px-4">
-    <div class="md:col-span-2">
+    <div class="grid gap-10 text-sm text-white sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-      <a href="/" class="inline-flex text-gray-950 dark:text-white"><Logo size={40} /></a>
+      <div>
-      <p class="mt-4 max-w-xl text-sm text-gray-700 dark:text-gray-300">{siteConfig.description}</p>
+        <span class="font-semibold">开始使用</span>
-      <p class="mt-3 max-w-xl text-xs text-gray-500 dark:text-gray-400">
+        <ul class="mt-4 space-y-2 leading-5 text-gray-400">
-        社区维护项目，与 Mojang Studios、Microsoft 和 PaperMC 均无隶属关系。
+          <li><a href="/downloads">下载</a></li>
-      </p>
+          <li><a href="/guide">快速开始</a></li>
+        </ul>
       </div>
-    <div class="flex flex-col gap-2 text-sm">
+      <div>
-      <h2 class="mb-2 font-semibold">项目</h2>
+        <span class="font-semibold">项目</span>
-      <a class="hover:text-green-600" href="/downloads">下载</a>
+        <ul class="mt-4 space-y-2 leading-5 text-gray-400">
-      <a class="hover:text-green-600" href="/guide">快速开始</a>
+          <li><a href="/about">项目介绍</a></li>
-      <a class="hover:text-green-600" href="/about">项目介绍</a>
+          <li><a href={siteConfig.releases} target="_blank" rel="noreferrer">发行版本</a></li>
+        </ul>
       </div>
-    <div class="flex flex-col gap-2 text-sm">
+      <div>
-      <h2 class="mb-2 font-semibold">开发</h2>
+        <span class="font-semibold">开发</span>
-      <a class="hover:text-green-600" href={siteConfig.repository} target="_blank" rel="noreferrer">源代码</a>
+        <ul class="mt-4 space-y-2 leading-5 text-gray-400">
-      <a class="hover:text-green-600" href={siteConfig.issues} target="_blank" rel="noreferrer">问题反馈</a>
+          <li><a href={siteConfig.repository} target="_blank" rel="noreferrer">核心源代码</a></li>
-      <a class="hover:text-green-600" href={siteConfig.actions} target="_blank" rel="noreferrer">构建状态</a>
+          <li><a href={siteConfig.issues} target="_blank" rel="noreferrer">问题反馈</a></li>
+          <li><a href={siteConfig.actions} target="_blank" rel="noreferrer">构建状态</a></li>
+        </ul>
+      </div>
+      <div>
+        <span class="font-semibold">网站</span>
+        <ul class="mt-4 space-y-2 leading-5 text-gray-400">
+          <li><a href={siteConfig.websiteRepository} target="_blank" rel="noreferrer">网站源代码</a></li>
+          <li><a href="/404.html">状态页面</a></li>
+        </ul>
       </div>
     </div>
-  <div
+
-    class="mx-auto flex max-w-7xl flex-col justify-between gap-2 border-t px-4 py-5 text-xs text-gray-500 md:flex-row dark:text-gray-400"
+    <div class="mt-8 flex flex-row items-center gap-2 border-t border-gray-600/50 pt-10">
-  >
+      <a href="/" class="inline-flex text-white" aria-label="Uranium 首页"><Logo size={48} showName={false} /></a>
-    <span>© {new Date().getFullYear()} Uranium 维护者与贡献者</span>
+      <div class="flex-1"></div>
-    <span>网站代码采用 MIT 许可证，保留 PaperMC Website 原始版权声明。</span>
+      <div class="flex flex-col">
+        <span class="text-right text-sm text-gray-300">© {new Date().getFullYear()} Uranium 维护者与贡献者</span>
+        <span class="commit text-sm text-gray-300">
+          <a class="text-sm font-medium" href={siteConfig.websiteRepository} target="_blank" rel="noreferrer">UraniumMC/website</a>
+          {" @ "}
+          <a class="text-sm font-medium" href={`${siteConfig.websiteRepository}/commit/${hash}`} target="_blank" rel="noreferrer">{hash}</a>
+        </span>
+      </div>
+    </div>
+
+    <div class="mt-4 flex flex-row items-center gap-2 pt-4">
+      <span class="text-sm text-gray-300">
+        本网站不是 Minecraft 官方网站，与 Mojang Studios 或 Microsoft 没有关联。所有产品和公司名称均为其各自所有者的商标或注册商标。
+      </span>
+    </div>
   </div>
 </footer>
+
+<style>
+  @reference "tailwindcss";
+  .footer a {
+    @apply transition hover:text-gray-200;
+  }
+  .commit a {
+    @apply text-green-500 hover:text-green-400;
+  }
+</style>

src/components/Header.astro

@@ -48,7 +48,7 @@ const links = [
 
     <button
       id="theme-toggle"
-      class="rounded-sm p-2 text-gray-600 hover:bg-gray-200/60 dark:text-gray-300 dark:hover:bg-gray-800"
+      class="inline-block h-min w-min rounded-full p-2 leading-0 text-gray-600 transition-colors hover:bg-gray-800/20 dark:text-gray-300 dark:hover:bg-gray-400/20"
       title="切换主题"
       aria-label="切换主题"
     >
@@ -59,7 +59,7 @@ const links = [
       >
     </button>
     <a
-      class="rounded-sm p-2 text-gray-600 hover:bg-gray-200/60 dark:text-gray-300 dark:hover:bg-gray-800"
+      class="inline-block h-min w-min rounded-full p-2 leading-0 text-gray-600 transition-colors hover:bg-gray-800/20 dark:text-gray-300 dark:hover:bg-gray-400/20"
       href={siteConfig.repository}
       target="_blank"
       rel="noreferrer"

src/components/Logo.astro

@@ -9,7 +9,7 @@ const { size = 42, showName = true } = Astro.props;
 
 <span class="brand" aria-label="Uranium">
   <img src="/uranium-logo.png" width={size} height={size} alt="" class="brand-icon" aria-hidden="true" />
-  {showName && <span class="brand-name">Uranium</span>}
+  {showName && <span class="brand-name">URANIUM</span>}
 </span>
 
 <style>
@@ -28,7 +28,7 @@ const { size = 42, showName = true } = Astro.props;
 
   .brand-name {
     font-family: Poppins, "Microsoft YaHei", sans-serif;
-    font-size: 1.25rem;
+    font-size: 1.125rem;
     font-weight: 700;
     letter-spacing: -0.025em;
   }

src/config.ts

@@ -5,6 +5,7 @@ export const siteConfig = {
   releases: "https://github.com/Coldsmiles/Uranium/releases",
   actions: "https://github.com/Coldsmiles/Uranium/actions",
   issues: "https://github.com/Coldsmiles/Uranium/issues",
+  websiteRepository: "https://git.infstar.cn/UraniumMC/website",
   minecraftVersion: "1.7.10",
   javaVersion: "64 位 JDK 8",
 };

src/layouts/Layout.astro

@@ -11,7 +11,7 @@ interface Props {
 }
 
 const { title = siteConfig.name, description = siteConfig.description, canonical = Astro.url.pathname } = Astro.props;
-const pageTitle = title === siteConfig.name ? title : `${title} | ${siteConfig.name}`;
+const pageTitle = `${title} | ${siteConfig.name}`;
 const canonicalUrl = Astro.site ? new URL(canonical, Astro.site) : undefined;
 ---
 
@@ -24,10 +24,15 @@ const canonicalUrl = Astro.site ? new URL(canonical, Astro.site) : undefined;
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <meta name="description" content={description} />
-    <meta property="og:title" content={pageTitle} />
+    <meta property="og:title" content={title} />
     <meta property="og:type" content="website" />
     <meta property="og:description" content={description} />
     <meta property="og:site_name" content={siteConfig.name} />
+    <meta property="og:image" content="/og-image.svg" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content="/uranium-logo.png" />
     {canonicalUrl && <meta property="og:url" content={canonicalUrl.toString()} />}
     {canonicalUrl && <link rel="canonical" href={canonicalUrl.toString()} />}
     <link rel="icon" type="image/png" href="/uranium-logo.png" />