简介#

本次改造涉及以下方面：

• 把笔者之前所有的文章全部同步
• 新建 公告系统
• 新建 展板系统
• 新建 开屏预加载动画(仅首次打开时加载资源，刷新不会再出现)
• 新增 主页底部的“过了多久”组件
• 新建 鼠标悬停展示知识库
• 新建 文章集显示一条微新闻(集成)
• 修复 深色模式下，部分文本显示不正常的情况
• 修复 那糟糕的License.astro
• 修复 Footer的若干问题

1. 公告系统#

功能特性：

• 支持一般公告（主题色）和特殊公告（红色）
• 可配置图标、颜色、是否可关闭

核心文件：

• /src/components/Announcement.svelte - 公告组件
• /src/components/AnnouncementWrapper.astro - 公告容器
• /public/announcement.json - 公告数据配置

数据格式：

1
{
2
  "id": "1",
3
  "message": "公告内容",
4
  "type": "info",
5
  "closable": true
6
}

2. 微新闻系统#

功能特性：

• 主页显示最新一条微新闻
• 展板页面支持筛选（发送者、优先级、日期）、分页
• 自动计算相对时间（今天、昨天、N天前）
• 支持四种优先级：重要、一般、普通、正在做

核心文件：

• /src/components/MicroNewsAnnouncement.svelte - 主页微新闻展示
• /src/components/dashboard/MicroNewsModule.svelte - 展板完整模块
• /public/micro-news.json - 微新闻数据

数据格式：

1
{
2
  "id": "1",
3
  "title": "标题",
4
  "content": "内容",
5
  "date": "2026-01-30",
6
  "time": "14:30",
7
  "sender": "发送者",
8
  "priority": "high"
9
}

技术要点：

• 按 ID 倒序排列显示最新内容(你猜为什么)
• 使用 Svelte transition 实现模态框动画
• CSS Grid 实现响应式筛选器布局

3. 关键字提示系统#

功能特性：

• 文章中关键字自动添加下划虚线
• 鼠标悬停显示解释提示框
• 智能定位防止被父容器截断

核心文件：

• /src/components/KeywordTooltip.svelte - 提示组件
• /public/glossary.json - 关键字词典

数据格式：

1
{
2
  "SiiWay": "关键字解释内容"
3
}

技术要点：

• 文本加载完成后通过 DOM 操作插入组件
• CSS 定位 + JS 控制防止溢出
• 强烈建议使用 getBoundingClientRect() 精确计算位置并做防溢出，否则你的时间=最大浪费。

4. 开屏预加载动画(by Claude Sonnet4.5)#

功能特性：

• 仅首次访问显示（使用 sessionStorage）
• 2秒后自动淡出

核心文件：

• /src/components/SplashScreen.svelte

技术要点：

• sessionStorage.getItem('hasVisited') 判断是否首次访问
• CSS 渐变背景 + SVG 图标旋转动画
• 进度条使用 CSS animation 模拟加载

5. 时间进度组件#

功能特性：

• 显示今日、本周、本月、今年已过去的时间百分比
• 每分钟自动更新

核心文件：

• /src/components/TimeProgress.svelte

技术要点：

• 使用 Date 对象精确计算时间差
• setInterval 每60秒更新一次

6. 展板系统其他模块#

鸣谢#

• 万年历API - 日历数据
• 小小API - 每日英语、答案之书
• hitokoto - 诗词API
• Fuwari 主题及社区二开项目

联系方式：xhc861@siiway.org