页脚

2026-05-03 08:26:15 +08:00
parent cc40ff3a38
commit 4d7802348b
3 changed files with 179 additions and 4 deletions
@@ -1,12 +1,23 @@
 ---
 import "../styles/global.css";
-import { navItems, site } from "../data/site";
+import packageJson from "../../package.json";
+import { contactLinks, navItems, site } from "../data/site";

 interface Props {
  title?: string;
 }

 const { title = site.title } = Astro.props;
+const buildTime = new Intl.DateTimeFormat("zh-CN", {
+  timeZone: "Asia/Shanghai",
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hour12: false
+}).format(new Date());
 ---

 <!doctype html>
@@ -19,6 +30,10 @@ const { title = site.title } = Astro.props;
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    />
  </head>
  <body>
    <header class="site-header" aria-label="网站导航">
@@ -41,7 +56,35 @@ const { title = site.title } = Astro.props;

    <slot />

-    <footer>{site.footer}</footer>
+    <footer class="site-footer">
+      <p>{site.footer}</p>
+      <p class="footer-meta">v{packageJson.version} · 构建于 {buildTime}</p>
+      <nav class="footer-contacts" aria-label="联系方式">
+        {
+          contactLinks.map((item) => (
+            <a
+              href={item.href}
+              class:list={[item.qrImage && "has-qr"]}
+              aria-label={item.label}
+              title={item.label}
+              target={item.href.startsWith("http") ? "_blank" : undefined}
+              rel={item.href.startsWith("http") ? "noreferrer" : undefined}
+            >
+              <i class={item.icon} aria-hidden="true"></i>
+              <span>{item.label}</span>
+              {
+                item.qrImage && (
+                  <span class="contact-qr" aria-hidden="true">
+                    <img src={item.qrImage} alt="" loading="lazy" />
+                    <small>{item.label}</small>
+                  </span>
+                )
+              }
+            </a>
+          ))
+        }
+      </nav>
+    </footer>
    <script>
      const header = document.querySelector(".site-header");
      const toggle = document.querySelector(".nav-toggle");