书架拆成「在读」和「书籍」两个独立页面
问题:两块内容挤在 /bookshelf/ 一页里,往下滚就从「在读」滑进「书籍」,
不像两个分类该有的样子。
拆法
- src/pages/bookshelf.astro -> src/pages/bookshelf/index.astro(书籍页)
- 新增 src/pages/bookshelf/reading.astro(在读页)
- 两页共用 bookshelf-content.astro,只多收一个 view: "reading" | "books",
决定渲染哪一块;外壳(页眉/侧栏/页脚/样式)完全同一份,样式不会跑偏
- 在读页标题带真实本数:「在读 20 本 | 时之刃的小站」
侧栏「馆藏」改成真导航
- 在读 -> /bookshelf/reading/,数量 = 未读完本数(20)
- 书籍 -> /bookshelf/,数量 = 手工书单 + 微信读书已读完(0 + 6 = 6)
原来这里只算 books.json 的 total,所以显示 0,正是截图里的问题
- 当前页用 aria-current="page" + 主色底高亮
页面互相不串
- /bookshelf/ : id=books、搜索框、已读完分组 6 张、无在读区块、0 条进度条
- /bookshelf/reading/: id=reading、在读卡片 20 张、20 条进度条、无书籍区块、
无搜索框、无已读完分组、0 张 data-weread-card
顺带更正 README 首段还写着的「读书/论文/漫画书架」。
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
个人博客源码 —— [tianxuetao.top](https://tianxuetao.top)
|
||||
|
||||
一个基于 Astro 的静态博客,主题为 [VermilionVoid](https://github.com/Lapis0x0/VermilionVoid)。除了常规的文章系统,还有碎碎念、读书/论文/漫画书架、学习追踪与加密文章。
|
||||
一个基于 Astro 的静态博客,主题为 [VermilionVoid](https://github.com/Lapis0x0/VermilionVoid)。除了常规的文章系统,还有碎碎念、读书页(微信读书同步)、学习追踪与加密文章。
|
||||
|
||||
站点配置集中在两个文件,改站名或换域名通常只需要动第一个:
|
||||
|
||||
@@ -275,7 +275,14 @@ prose-p:leading-[1.78] md:prose-p:leading-[1.85]
|
||||
|
||||
## 书架与「最近在读」
|
||||
|
||||
书架页(`/bookshelf/`)有两块内容:
|
||||
书架是**两个独立页面**,由侧栏「馆藏」互相导航(`src/components/bookshelf-content.astro` 一个组件,靠 `view` 属性决定渲染哪一块):
|
||||
|
||||
| 页面 | 路径 | 内容 | 侧栏数量 |
|
||||
|---|---|---|---|
|
||||
| 书籍 | `/bookshelf/` | 手工书单(`books.json`)+ 微信读书已读完 | 两者相加 |
|
||||
| 在读 | `/bookshelf/reading/` | 微信读书里没读完的 | 未读完本数 |
|
||||
|
||||
两块内容:
|
||||
|
||||
**1. 最近在读** —— 来自微信读书,构建时抓取,页面本身不发任何请求。
|
||||
|
||||
@@ -321,6 +328,8 @@ src/components/bookshelf-content.astro
|
||||
|
||||
**2. 书籍** —— 来自 `public/data/books.json`,由 `bookshelf-content.astro` 在构建时 import(文件必须存在)。另外两个文件 `papers.json` / `comics.json` 对应的漫画、论文分类已经移除,文件保留但不再被引用。
|
||||
|
||||
**两个页面共用同一个组件**,不会出现样式跑偏:`bookshelf-content.astro` 收一个 `view: "reading" | "books"`,只是决定渲染哪一块。侧栏那两行是**真链接**(带 `aria-current` 和主色高亮表示当前页),不再是页内锚点。
|
||||
|
||||
## 部署
|
||||
|
||||
主用 `./deploy.sh`,构建后 rsync 到树莓派和云服务器:
|
||||
|
||||
Reference in New Issue
Block a user