ICT 学习客栈全新改版

经过近两个月的持续打磨，ICT 学习客栈完成了一次大版本改版。本次改版不只换了一身皮，而是从技术底座到内容组织方式，再到阅读体验的整体重构。下面把主要变化分模块展开介绍。

一、技术栈升级

旧版基于动态博客框架，内容与样式耦合较深，扩展能力受限。本次改版后，站点切换到 Astro 静态站点生成器，核心变化如下：

二、组件库一览

为统一文章内的交互元素，我们开发了一套通用组件库。以下是当前已有的组件：

1. CodeBlock 代码块

5 种差异化类型，每种都有专属配色与交互：

// 5 种类型一览const types = {code:     '蓝色 - 通用代码',terminal: '绿色 - 终端命令',network:  '橙色 - 网络设备',config:   '紫色 - 配置文件',log:      '红色 - 日志输出',};

• 顶部栏显示类型徽章 + 语言标签
• 右上角带复制按钮，网络/终端类型会自动剥离设备前缀和提示符，仅复制可执行命令
• 自带行号（仅 code / config 类型显示）+ 行号区与代码之间的虚线分隔

2. DownloadCard 下载卡片

用于分发工具与资源，每张卡片展示名称、版本、描述与下载链接：

3. 其他常用组件

• StepCard：分步操作卡片，适合”按步骤排查问题”类内容。
• BilibiliPlayer：B 站视频嵌入，支持自动判断视频清晰度。
• LinkButton：链接按钮，适合”快速跳转”场景。
• Copyright：版权声明卡片，可通过 frontmatter 的 showCopyright: true 自动注入。
• AuthorCard：作者信息卡，多用于文末署名。

三、内容分类调整

旧版的分类粒度较粗，本次重新梳理为以下专题：

所有集合在 src/content.config.ts 中统一定义 schema，frontmatter 字段包括：title、description、pubDate、lastUpdated、category、tags、brandColor、badge、recommended、featured、author、statement、showCopyright。

四、视觉与交互升级

1. 视觉规范

• 全新配色：每个分类可单独设置 brandColor，组件中通过 var(--brand-color) 引用，避免硬编码。
• 图标统一：所有图标使用 SVG，避免 emoji 带来的字体兼容问题。
• 暗色模式：通过 data-theme 切换，组件自动适配，无需用户额外配置。

2. 阅读体验

• 顶部公告横幅：站点级公告可在 BaseLayout 中配置，发布新公告时统一显示在所有页面顶部。
• 弹窗公告：重要通知通过弹窗呈现，可在 frontmatter 配置生效时间。
• 代码复制增强：网络/终端代码块复制时自动剥离 >、<>、[Huawei] 等提示符，仅保留可执行命令。
• 上一篇/下一篇导航：文章末尾自动列出相邻文章。
• 行号虚线分隔：代码行号与代码区之间以 1px dashed 虚线分隔，提升视觉节奏。

3. 排版规范

• 正文使用中文左右引号 “ ”（U+201C / U+201D），与中文出版规范保持一致。
• JSX / 组件属性使用 ASCII 双引号 "..."，无论属性值是中文还是英文。
• 文章标题、描述等 metadata 字段使用 ASCII 双引号，方便工具链解析。

五、性能与可维护性

六、如何投稿或反馈

七、未来规划

接下来一段时间会持续推进：

• 搜索功能：基于 Pagefind 的全文搜索，正在评估中。
• AI 摘要：在文章顶部自动生成一句话摘要，方便快速了解文章内容。
• 评论系统：从无评论迁移到自托管评论系统（候选：Giscus / Twikoo）。
• RSS / Atom 输出：在 /rss.xml 之外，提供分类粒度的订阅。
• 国际化：暂不优先，但保留 i18n 目录结构。

如果对哪个方向有明确需求，欢迎在评论区留言。