博客搭建历程：从框架选择到精细打磨#

刀盾小狗的诞生#

因为最近实在喜欢刀盾小狗，找遍全网却没有相应的live2d模型（这理应是个商机啊，奈何自己还不会相关技术，且AI在此方面的能力还有待提升）只好将表情包.GIF抠出背景先凑合凑合。

• 模型优化：为了配合博客的简洁风格，我使用了处理后的透明模型文件 dog_transparent.webp。
• 交互配置：在 src/config.ts 中，我为它配置了专属的对话：“我的刀盾！”、“下次再见~”等，让它成为了我网站最忠实的”看门修勾“。

1
// src/config.ts 中的 Pio 配置
2
export const pioConfig: PioConfig = {
3
  enable: true,
4
  models: ["/pio/models/dog_transparent.webp"],
5
  position: "left",
6
  width: 150,
7
  height: 150,
8
  dialog: {
9
    welcome: "Welcome to Darwin's world!",
10
    touch: ["What's the dog doing?", "我的刀盾！"],
11
  },
12
};

Logo 设计#

Logo 是个人品牌的基石。我设计了以 Darwin 为核心的图标。

• 适配性：为了兼容深浅主题，我准备了 Darwin.png 和 Darwin-white.png 两个版本。
• 图标集成：在顶栏中，通过 navbarTitle 配置实现了 Logo 的优雅展示。

视觉体验#

• 动态交互：集成了 Swup 实现页面间的平滑过渡动画，消除切换时的割裂感。
• 滚动布局：通过侧边栏和主网格的错落排布，保证了信息密度的平衡。

图2：页面滚动后的视觉呈现，看板狗与侧边栏完美融合

笔记与日记的聚合#

日历挂件会自动索引我的所有文章和日记（Diary）。

• 即时预览：点击日历上的日期，下方列表会立即显示当天记录的随笔或发布的文章。
• 可视化标记：有内容的日期会显示小圆点，方便快速回顾。

利物浦比赛实时同步 (LFC Real-time Update)#

作为一个死忠红军球迷，我为日历加入了一个酷炫的功能：LFC 赛程自动更新。

• 自动化脚本：我编写了 scripts/update-lfc.mjs，通过 Axios 抓取 fixtur.es 的 ICS 赛程数据，并解析为本地 JSON。
• 更新指令：只需在终端执行以下命令，即可一键同步最新赛程：

  1
  pnpm update-lfc

• 动态图标：在利物浦的比赛日，日历上会出现显眼的 Liverbird (小鸟) 图标。
• 多维度信息：点击图标即可看到比赛时间（北京时间）、对手、赛事类型（欧冠、英超等）以及实时比分（若比赛已结束）。

图4：2026年4月的日历，可以看到多个利物浦比赛标记

图5：点击比赛日后显示的利物浦 vs PSG 欧冠比赛详情