Theme Sky Blog 2 - 终端风格主题

🖥️ 一款为 Halo CMS 打造的复古终端风格主题，支持全键盘操作。

演示地址

✨ 主要功能

🟢 沉浸式终端界面

整个博客模拟命令行终端操作体验，包含 CRT 视觉特效：

• 扫描线覆盖效果
• 文本荧光辉光
• 闪烁的光标
• Fira Code 等宽代码字体

⌨️ 键盘导航与指令

列表页 (首页、分类、标签)

文章详情页 (Post)

键盘快捷键 (文章阅读模式)

⚠️ 注意：使用键盘滚动前，请按 Esc 键或点击页面空白处，确保终端输入框未被选中。

🧭 终端特性

• Tab 自动补全：输入命令或路径的前几个字母，按 Tab 键自动补全。
• 命令历史：使用方向键 ↑ / ↓ 快速切换之前输入过的命令。
• 上下文感知路径：终端提示符会显示当前的虚拟路径 (例如 ~/blog/categories/ai$)。
• 显示优化：ls 命令显示友好的中文标题，支持中文路径导航。

🎨 终端风格组件

所有内容元素都进行了终端风格化适配：

🔗 链接卡片 (Hyperlink Card)

完美适配 Halo 的链接卡片组件，自动继承终端主题：

• 常规卡片：带有 $ curl -I 模拟请求头样式的顶部栏。
• 网格卡片：极简边框风格。
• 行内卡片：带有 [链接] 样式的方括号装饰。

全部组件支持深色模式，使用半透明背景和荧光绿边框。

🛠️ 开发指南

环境要求

• Node.js 18+
• pnpm

安装依赖

pnpm install

开发模式

pnpm dev

打包构建

pnpm build

✅ 功能验证指南 (Quick Start)

安装主题后，建议按照以下步骤验证功能是否正常：

1. 终端交互验证

1. 打开博客首页。
2. 点击底部的终端输入框（Home 键旁边的闪烁光标处）。
3. 输入 ls 并按 Enter 键 —— 应显示 categories/, tags/ 和最新文章列表。
4. 输入 help 并按 Enter 键 —— 应显示可用命令列表。

2. 键盘导航验证

1. 输入 cd categories 并按 Enter —— 页面应无刷新跳转到分类列表，路径变更为 ~/blog/categories$。
2. 输入 cd .. 并按 Enter —— 应返回首页。
3. 尝试输入 cd ca 然后按 Tab 键 —— 应自动补全为 cd categories。

3. 文章阅读体验验证

1. 进入任意一篇文章。
2. 关键步骤：按 Esc 键，确保光标从输入框移开。
3. 按 j 或 ↓ 键 —— 页面应平滑向下滚动。
4. 按 Space (空格) 键 —— 页面应向下翻页。
5. 输入 next 并按 Enter —— 应跳转到下一篇文章。

4. 样式适配验证

• 检查文章内的代码块是否带有 $ cat ... 顶部栏。
• 检查链接是否显示为绿色虚线下划线。
• 检查图片是否有 [ IMAGE ] 边框包裹。

📁 项目结构

theme-sky-blog-2/
├── src/
│   ├── main.ts          # Alpine.js 组件与终端逻辑核心
│   └── styles/
│       └── main.css     # 终端 CSS 样式与 Tailwind 扩展
├── templates/
│   ├── assets/          # 编译产出目录
│   ├── modules/
│   │   └── layout.html  # 全局布局 (包含 Pjax 容器与终端)
│   ├── index.html       # 首页模板
│   ├── post.html        # 文章详情页
│   ├── categories.html  # 分类列表页
│   ├── category.html    # 分类详情页
│   ├── tags.html        # 标签列表页
│   └── tag.html         # 标签详情页
└── theme.yaml           # 主题元数据配置

5. 组件适配说明

本主题目前仅适配了 Halo 的基础核心组件，保持极简体验：

• ✅ 核心功能：文章列表、文章详情、分类列表、标签列表。
• ✅ 基础组件：链接卡片。
• ❌ 组件适配：目前暂未适配评论组件（因样式无法统一样式）、第三方插件（如搜索组件、相册等）。

📝 开源协议

MIT

💬 讨论

如果你对主题有什么建议或者意见，欢迎提 PR & Issue。

企业微信（备注进群）	QQ群

⚠️ 卖服务器的广告人，就不要加了。