diff --git a/README.md b/README.md index acf4d08..827f463 100644 --- a/README.md +++ b/README.md @@ -168,7 +168,7 @@ epigraph: 题记 # 可选 | 评论(twikoo) | `src/data/comments.ts` | | 友链列表 | `src/data/friends.json` | | 首页打字机文案 | `src/components/hero.tsx` 顶部的 `phrases` | -| 导航栏、页脚 | `src/components/site-header.astro`、`src/components/footer.tsx` | +| 导航栏、页脚 | `src/components/site-header.astro`、`src/components/footer.astro` | | 配色与全局样式 | `src/styles/global.css` | | 代码块主题 | `astro.config.mjs` 里 `expressiveCode` 的 `themes` | | 免责声明模板 | `src/data/disclaimers.ts` | @@ -233,6 +233,29 @@ prose-p:leading-[1.78] md:prose-p:leading-[1.85] `--header-h: 69px` 是固定页眉的实测高度,移动端菜单和这条胶囊条都靠它定位。**改页眉内边距或头像尺寸时记得同步改它**,否则吸附位置会错。 +### 页脚 + +`src/components/footer.astro`(原来是个 React 组件 `footer.tsx`,为了能在构建期 `await` 统计数据改成了 Astro 组件;引用方式随之从 `import { Footer } from "@/components/footer"` 变成 `import Footer from "@/components/footer.astro"`)。 + +结构: + +| 区块 | 内容 | 显示范围 | +|---|---|---| +| 我的介绍 | 头像 + 站名 + 签名,**整块可点去 `/about/`** | 全部 | +| 最新文章 | 最近 4 篇(按发布时间倒序,不把置顶提前) | 桌面 | +| 联系 | 社交图标 + 订阅 RSS | 全部 | +| 站点信息 | 建站时间 / 已运行 / 文章 / 偶得 / 总字数 / 最近更新 | 全部(想只在桌面显示就给它加 `hidden md:grid`) | +| 底栏 | 版权 / 备案 / 主题署名 | 全部 | + +**原来的「导航」栏已删除** —— 它是顶部导航的逐项复制(9 条名字和目标完全一样),手机上白占 312px。桌面端改用「最新文章」,把重复变成发现。不影响 SEO:顶部导航和移动端菜单里的链接在每页 HTML 里都还在。 + +两点需要注意: + +- **「我的介绍」整块包 `` 是合法的**,因为这一块里没有别的链接。但**侧栏的作者卡片不行** —— 它下面有社交图标(本身是 ``),`` 不能嵌套。所以那里只包到签名那一段。 +- 整块链接要给 `aria-label`,否则读屏会把「头像 alt + 站名 + 签名」整段念成链接名。 + +统计数据在 `src/lib/site-stats.ts`:文章数/偶得数/分类数/标签数/总字数在构建时算,「已运行 N 天」和「最近更新」由页脚里的内联脚本按**真实时间**刷新(站点久不重建也不会停在构建那天),服务端会先渲染一份构建时兜底值,关 JS 也不空。加减统计项改 `footer.astro` 里的 `statCells` 数组即可。 + ### 磨砂玻璃 `global.css` 里有四个 token: diff --git a/src/components/bookshelf-content.astro b/src/components/bookshelf-content.astro index fd27ae5..23a2dcf 100644 --- a/src/components/bookshelf-content.astro +++ b/src/components/bookshelf-content.astro @@ -1,6 +1,6 @@ --- import SiteHeader from "@/components/site-header.astro" -import { Footer } from "@/components/footer" +import Footer from "@/components/footer.astro" import { cn } from "@/lib/utils" import booksData from "../../public/data/books.json" import comicsData from "../../public/data/comics.json" diff --git a/src/components/footer.astro b/src/components/footer.astro new file mode 100644 index 0000000..6f46f67 --- /dev/null +++ b/src/components/footer.astro @@ -0,0 +1,188 @@ +--- +import type { ComponentType, SVGProps } from "react" +import { ArrowRight, Github, Mail, Music, Rss } from "lucide-react" +import { QqIcon } from "@/components/icons/qq-icon" +import { profile, type ExternalProfileLink, type ExternalProfileLinkType } from "@/data/profile" +import { site } from "@/data/site" +import { formatWords, getSiteStats } from "@/lib/site-stats" + +const iconMap: Record>> = { + qq: QqIcon, + music: Music, + github: Github, + email: Mail, +} + +const stats = await getSiteStats() +const contactLinks = profile.links.filter( + (link): link is ExternalProfileLink => link.type !== "wechat", +) + +const statCells = [ + { label: "建站时间", value: stats.startDate, live: undefined }, + { label: "已运行", value: String(stats.runningDays), unit: "天", live: "running-days" }, + { label: "文章", value: String(stats.postCount), unit: "篇", live: undefined }, + { label: "偶得", value: String(stats.thoughtCount), unit: "条", live: undefined }, + { label: "总字数", value: formatWords(stats.totalWords), unit: "字", live: undefined }, + { label: "最近更新", value: stats.lastUpdatedText, live: "last-update" }, +] +--- + + + + diff --git a/src/components/footer.tsx b/src/components/footer.tsx deleted file mode 100644 index db3a80d..0000000 --- a/src/components/footer.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import type { ComponentType, SVGProps } from "react" -import { Github, Mail, Music, Rss } from "lucide-react" -import { profile, type ExternalProfileLink, type ExternalProfileLinkType } from "@/data/profile" -import { site } from "@/data/site" -import { QqIcon } from "@/components/icons/qq-icon" - -const iconMap: Record>> = { - qq: QqIcon, - music: Music, - github: Github, - email: Mail, -} - -export function Footer() { - return ( - - ) -} diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index aaef068..bb846a5 100644 --- a/src/components/sidebar.tsx +++ b/src/components/sidebar.tsx @@ -2,7 +2,7 @@ import { useState, type ReactNode } from "react" import { cn } from "@/lib/utils" -import { Calendar } from "lucide-react" +import { ArrowRight, Calendar } from "lucide-react" import { profile } from "@/data/profile" import { ProfileContactLink } from "@/components/profile-contact-link" @@ -39,23 +39,33 @@ export function Sidebar({ return (