XU81 - 赛博朋克终端风格的 Hugo 主题

最近给自己的博客做了一个新主题 —— XU81。设计理念很简单：极客、终端、科幻、文字冒险游戏。

设计灵感

作为一个从 DOS 时代过来的程序员，我对黑色屏幕上的绿色文字有着特殊的感情。那种敲击键盘、看着字符一个一个蹦出来的感觉，是现代花哨 UI 永远无法替代的。

所以这个主题融合了几个我喜欢的元素：

• 终端 (Terminal) - 复古的命令行界面风格
• 赛博朋克 (Cyberpunk) - 霓虹灯、发光效果
• Matrix - 经典的数字雨动画
• MUD - 文字冒险游戏的 ASCII 艺术风格

主题特性

1. CRT 显示器效果

模拟老式 CRT 显示器的扫描线和屏幕弯曲：

 1/* 扫描线叠加 */
 2body::before {
 3    background: repeating-linear-gradient(
 4        0deg,
 5        rgba(0, 255, 65, 0.03),
 6        rgba(0, 255, 65, 0.03) 1px,
 7        transparent 1px,
 8        transparent 2px
 9    );
10}

2. Matrix 数字雨

基于 Canvas 的实时动画，字符从上往下掉落。使用的字符集包括片假名、数字和符号：

1const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZアイウエオカキクケコ...';

3. 四种配色主题

快捷键 Alt + T 可以快速切换主题。

4. 霓虹发光效果

链接、标题、边框都有发光效果，悬停时增强：

1text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41, 0 0 30px #00ff41;

5. ASCII 艺术 Logo

用 ASCII 字符画出的 XU81 标志，配合终端命令行风格的装饰：

$ cat /etc/xu81/banner.txt

██╗  ██╗██╗   ██╗███╗   ██╗ ██████╗ ██████╗  ██████╗
██║ ██╔╝██║   ██║████╗  ██║██╔════╝██╔═══██╗██╔════╝
█████╔╝ ██║   ██║██╔██╗ ██║██║     ██║   ██║██║  ███╗
██╔═██╗ ██║   ██║██║╚██╗██║██║     ██║   ██║██║   ██║
██║  ██╗╚██████╔╝██║ ╚████║╚██████╗╚██████╔╝╚██████╔╝
╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═══╝ ╚═════╝ ╚═════╝  ╚═════╝

技术栈

• 模板引擎: Hugo Go Templates
• 样式: 纯 CSS（无框架）
• 脚本: 原生 JavaScript
• 字体: Fira Code + Source Code Pro（等宽字体）

响应式设计

在移动端会自动调整：

• ASCII Logo 缩小
• 导航栏折叠
• 字体大小优化

使用方法

在你的 Hugo 配置文件中设置：

1theme = 'xu81'
2
3[params]
4  dateFormat = "2006-01-02"
5  subtitle = "你的博客副标题"

源码

主题文件位于博客的 themes/xu81 目录下，结构如下：

themes/xu81/
├── layouts/
│   ├── _default/
│   │   ├── baseof.html
│   │   ├── list.html
│   │   ├── single.html
│   │   └── summary.html
│   ├── partials/
│   │   ├── header.html
│   │   ├── footer.html
│   │   ├── pagination.html
│   │   └── theme-toggle.html
│   └── index.html
├── static/
│   ├── css/style.css
│   └── js/theme-toggle.js
└── theme.toml

如果你也喜欢这种风格，欢迎 Fork 修改。毕竟，每个人的终端都应该有自己的配色方案。

root@xu81:~# echo "Happy Coding!"