返回博客列表
约 9 分钟阅读

不仅是好看：揭秘“PC 状态同步”与“GitHub 留言板”配置

Tutorial Astro Giscus AI
不仅是好看：揭秘“PC 状态同步”与“GitHub 留言板”配置

🚀 代码声明：本站所有代码均由 Antigravity (Google DeepMind 的 AI 编程助手) 全程辅助生成。

很多访客问我：“Suxinnai，你博客首页那个显示当前活动和媒体状态的卡片是真的吗？” 答案是：是真的！

今天这篇教程就来揭秘本站两个最有趣的功能：Digital Twin（数字孪生）组件和GitHub 留言板的配置方法。

💻 一、Digital Twin 组件配置

在首页右侧，那个科技感十足的浮动卡片就是 DigitalTwin 组件。它能实时同步你的 PC 运行状态——包括当前活跃的应用、正在播放的音乐，以及 AI 根据你的状态生成的俏皮吐槽。

1. 组件结构

这个组件位于 src/components/DigitalTwinReact.jsx。它主要由三个部分组成：

  • 状态指示灯：头部那个带呼吸效果的 Online 标识。
  • 立绘：中间的 Q 版角色立绘 (Mascot)。
  • 数据面板：右下角的悬浮磨砂玻璃面板，展示具体活动。

2. 如何修改数据（基础版）

目前这些数据是自动同步的。如果你想修改静态信息（如设备名称），可以在 src/components/DigitalTwinReact.jsx 或 scripts/pc_sync.py 中寻找相关字符串：

// src/components/DigitalTwinReact.jsx
<span className="text-[10px] uppercase tracking-tight">
    {data.device || "RedmiBook Pro 15 2021"}
</span>

3. 如何接入真实数据 (PC 端同步)

现在我们不再通过外部 App，而是直接将你的主力生产力工具——电脑的状态同步到博客。

核心架构图

数据源 (PC)：通过 Python 脚本获取当前前台窗口标题 + Windows 媒体会话(获取音乐) + AI 吐槽生成 → 发送 POST 请求到 Vercel。

具体配置流程

第一步：配置同步脚本

项目根目录下已经为你准备好了脚本 scripts/pc_sync.py。

  1. 环境：确保电脑安装了 Python 3。
  2. 依赖：安装必要库。 
    pip install requests psutil openai winrt-runtime winrt-Windows.Media.Control
  3. 配置：打开 scripts/pc_sync.py，配置你的 API_URL、SECRET 以及 AI SDK 的 API Key。
  4. 运行： 
    python scripts/pc_sync.py
    脚本运行后，它会每隔 3 秒同步状态。如果检测到你在听歌（QQ音乐/网易云/Spotify），它会自动获取歌名和歌手。
第二步：自动分类与 AI 吐槽

脚本内置了应用分类逻辑。如果你在写代码，它会标记为 “Coding”；如果你在冲浪，它会标记为 “Browsing”。同时，它会自动调用 AI 接口，生成一句符合当前意境的吐槽。

这种方案算“实时”吗？

  • 延迟：约 3 秒（受脚本轮询频率影响）。
  • 隐私：脚本在本地运行，你可以根据需要随时修改过滤列表，保护敏感信息。

对于个人博客，Vercel KV + 短轮询 是性价比最高、维护成本最低的方案。

💬 二、GitHub 留言板 (Giscus) 配置

你可能在 留言板 页面看到了一个“前往 GitHub”的按钮。其实，我们可以直接在页面内嵌入评论框！ 这里推荐使用 Giscus。

1. 什么是 Giscus？

Giscus 是一个基于 GitHub Discussions 的评论系统。

  • 无数据库：数据全存在 GitHub 上。
  • 免费：蹭 GitHub 的服务器。
  • 无广告：干净清爽。

2. 配置步骤

第一步：准备 GitHub 仓库 确保你的博客代码仓库是 Public 的，并且在仓库设置中开启了 Discussions 功能。

第二步：获取配置 访问 giscus.app，按照引导输入你的仓库地址。它会自动生成一段配置 ID。

第三步：集成到 Astro 在组件中填入你的 repo-id 等参数即可启用。

3. 为什么我现在用的是跳转按钮？

因为作为一套开源模板，直接嵌入脚本需要你的 Repo ID。同时，这种“传送”式的设计也更符合 RPG 酒馆的设定。

结语

无论是实时的 PC 状态同步，还是借力的 Git 评论，核心都是在有限的静态资源下，创造无限的动态交互感。 这就是 Astro 的魅力，也是 Web 开发的乐趣。

🎨 致敬作者：本项目由 Antigravity 强力驱动生成，每一个组件都凝聚了 AI 的灵巧与人类的审美。

Ready to update your config?