为什么做这个主题

试过不少 Hugo 主题——PaperMod、Stack、Even、Cactus——好看的不够快，够快的不够好看。我想要一个真正极简的主题：等宽字体、暖色调、零框架依赖，改 3 个 CSS 变量就能换整套配色。

于是有了 soneBlog Theme。

开源地址：github.com/upgiorgio/soneblog-theme

设计理念

好的设计是隐形的。读者应该专注于内容，而不是装饰。

soneBlog 的设计原则：

  • 减法优先 — 没有花哨的动画、没有多余的阴影、没有视觉噪音
  • 自然舒适 — 暖色调底色、充足的留白、舒适的行高
  • 等宽字体 — JetBrains Mono 贯穿全站，技术博客的气质
  • 一致性 — 每个元素的交互反馈都保持克制和统一

核心特性

HSL 3 变量色彩系统

整个主题的配色由 3 个 CSS 变量控制：

1
2
3
4
5
6
7
8
9

:root {
  --bg-h: 30;     /* 色相 (0-360) */
  --bg-s: 5%;     /* 饱和度 */
  --bg-l: 99%;    /* 亮度 — 亮色模式 */
}

.dark {
  --bg-l: 12%;    /* 亮度 — 暗色模式 */
}

所有文字颜色、边框、背景都是自动推导的。改这 3 个值，整站配色联动。

想要暖色纸张感？--bg-h: 40; --bg-s: 20%; --bg-l: 97%

想要冷色科技感？--bg-h: 210; --bg-s: 15%; --bg-l: 98%

想要纯白极简？--bg-h: 0; --bg-s: 0%; --bg-l: 100%

链接填充动效

文章内的超链接底部有一条细线，鼠标悬停时强调色从底部向上填充整个文字，形成反色高亮效果。外部链接带有 ↗ 箭头标识，hover 时箭头微微偏移。

纯 CSS 实现，基于 background-size 动画，流畅自然。

搜索弹窗

点击导航栏的搜索图标（或按 Ctrl/Cmd+K），弹出全屏搜索浮层。输入关键词按回车搜索，点击空白处或按 Esc 关闭。

基于 Fuse.js 客户端全文搜索，无需后端。

纯 CSS 动效

  • 页面元素淡入上浮（微幅 6px，快速 0.35s）
  • 暗色模式切换平滑过渡（0.4s）
  • Sticky header 毛玻璃效果
  • 所有交互反馈保持克制 — 仅颜色变化，无位移和缩放

全部 CSS transition / @keyframes，零 JS 动画库。

代码复制 + 语言标签

代码块右上角显示复制按钮，左上角显示语言名称：

1

hugo server -D

1

const theme = localStorage.getItem('s1-theme');

1

print("Hello, soneBlog!")

归档页

分类、标签、时间线三合一的归档页面：

  • 分类 — 网格卡片，带文章占比进度条
  • 标签 — 紧凑流式云，虚线边框
  • 时间线 — 按年份分组，左侧竖线连接

更多功能

  • 阅读进度条 — 页面顶部强调色细线
  • 返回顶部 — 滚动后出现，圆形按钮
  • 可折叠目录 — <details> 实现
  • 面包屑导航 — 带 JSON-LD 结构化数据
  • Hero 卡片 — 首页最新文章大卡片展示
  • 文章卡片 — 缩略图 + 元信息 + 摘要
  • SEO — Open Graph、Twitter Cards、JSON-LD（BlogPosting、BreadcrumbList、CollectionPage）
  • AI 爬虫屏蔽 — robots.txt 屏蔽 30+ AI 爬虫
  • 百度 SEO — 专用百度 sitemap
  • Fuse.js 搜索 — 客户端全文即时搜索（弹窗式）
  • CJK 优化 — 中文排版友好，行高 1.9
  • 暗色模式 — 跟随系统偏好，localStorage 持久化

快速开始

方式一：Git Submodule

1

git submodule add https://github.com/upgiorgio/soneblog-theme.git themes/soneblog

在 hugo.yaml 中：

1

theme: soneblog

方式二：Hugo Module

1

hugo mod init your-site

在 hugo.yaml 中：

1
2
3

module:
  imports:
    - path: github.com/upgiorgio/soneblog-theme

最小配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

baseURL: "https://your-site.com/"
languageCode: "zh-CN"
title: "Your Blog"
paginate: 10
hasCJKLanguage: true

params:
  description: "博客描述"
  author: "Your Name"

menu:
  main:
    - name: "首页"
      url: /
      weight: 1
    - name: "归档"
      url: /categories/
      weight: 2

markup:
  highlight:
    noClasses: false
    lineNos: true

outputs:
  home:
    - HTML
    - RSS
    - JSON

文件结构

soneblog-theme/
├── assets/
│   ├── css/main.css             # 全部样式
│   └── js/                      # 3 个 vanilla JS 文件
│       ├── theme.js             # 暗色模式切换
│       ├── code-copy.js         # 代码复制 + 回到顶部 + 阅读进度
│       └── search.js            # 搜索弹窗 (Fuse.js)
├── layouts/
│   ├── _default/                # 基础模板
│   ├── partials/                # 组件 (head, header, footer, breadcrumb)
│   ├── index.html               # 首页
│   └── 404.html                 # 404 页面 (ASCII art)
├── static/fonts/                # JetBrains Mono WOFF2
├── theme.toml
└── LICENSE                      # MIT

技术细节

指标数值
CSS 文件1 个
JS 文件3 个
外部依赖0（Fuse.js 通过 JSON output 集成）
字体JetBrains Mono（自托管 WOFF2）
CSS 框架无
JS 框架无

开源

MIT 协议，随意使用、修改、分发。

如果对你有帮助，欢迎 Star。

GitHub: upgiorgio/soneblog-theme