Hugo的自定义主题实现和使用介绍，主要包括自定义模板，HintBox, Tab, Anchor Navigation, Code Copy, 等功能。以及如何修改默认表格样式等。
Hugo常用功能
Archetypes
原型 (Archetype)本质上是一个预定义的 Markdown 文件模板。它包含了新内容文件创建时应有的默认前置元数据字段和值，以及可选的初始 Markdown 内容
- 原型文件存放在 Hugo 项目（或主题）根目录下的
archetypes/文件夹中 - 可以创建多个原型，可以通过
--kind(或-k) 标志明确指定要使用的原型名称（不含.md后缀）
hugo new posts/demo.md --kind blog
# Hugo 会查找 archetypes/blog.md除了上述的明确指定原型名称外，Hugo 在执行 hugo new 命令时，会按照以下顺序（大致）来查找和选择原型文件：
-
根据内容所在的区段 (Section): Hugo 会首先在该区段对应的原型目录中查找。 例如：
content/posts/some-subdir/new.mdarchetypes/posts/some-subdir.md(最具体)archetypes/posts.md(区段原型)
-
默认原型 (
archetypes/default.md): 如果 Hugo 没有找到更具体的原型文件，它最终会使用archetypes/default.md(初始化项目时都会自动创建一个默认原型)
例如，在 archetypes 目录下创建两个原型：
archetypes/posts.md :
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }} {{ $parsedDate := time .Date }}
months: ["{{ $parsedDate.Format "2006-01" }}"]
categories: []
tags: []
weight: 1
---archetypes/default.md:
+++
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = '{{ .Date }}'
weight = 1
+++当使用 hugo new posts/demo.md 时，将使用 posts 原型，当使用 hugo new more/go/go-base.md 时，将使用 default 原型
自定义模板
采用 Hugo 的模板继承系统，通过 baseof.html 基础模板定义统一的页面结构
首页模板
首页模板 layouts/home.html
使用方式
- 设置精选文章：在文章前置元数据中添加
star: true - 配置站点信息：在
hugo.toml中设置title和description - 自定义样式：通过 CSS 变量调整颜色和布局
分类模板
layouts/section.html提供标准的分类页面布局，支持子分类展示layouts/taxonomy.html和layouts/term.html用于展示分类法和词条列表
核心特性：
- 面包屑导航：显示当前位置的层级关系
- 统计信息：显示文章数量、子目录数量、最后更新时间
- 子分类展示：支持目录结构的可视化展示
使用方式
- 创建分类：在
content/posts/下创建子目录 - 添加描述：在目录中创建
_index.md文件设置标题和描述 - 自定义图片：在
_index.md中设置image参数
文章模板
文章模板 layouts/page.html 实现了带侧边栏的文章布局，包含目录和相关文章。
核心特性：
- 智能侧边栏：显示当前目录下的相关文章
- 文章元信息：发布时间、分类、标签、字数统计、阅读时间
- Git信息集成：显示最后更新时间（基于Git提交）
使用方式
- 配置Git信息：在
hugo.toml中设置enableGitInfo = true - 设置日期格式：通过
dateFormat参数自定义日期显示格式 - 侧边栏配置：可通过配置文件自定义侧边栏显示逻辑
最后更新时间
利用 Git 提交信息自动显示最后更新时间
- 启用
enableGitInfo = true配置自动获取 Git 提交信息 - 使用 Git 提交时间作为最后更新时间
除了 Git 提交时间，Hugo 还支持通过 frontmatter 中的 lastmod 字段来指定最后更新时间:
- Git 信息:
page.GitInfo.AuthorDate（优先使用） - Frontmatter:
lastmod字段
注意：文章即.md文件不要使用中文名，否则可能会获取不到Git信息
自定义样式
以表格样式为例：通过自定义 CSS 实现美观的表格设计，支持响应式布局。
/* ===== 表格样式 ===== */
/* 通用表格样式 */
table,
.single-post .single-post-content table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e1e8ed;
}
/* 表头样式 */
table thead,
.single-post .single-post-content table thead {
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}使用方式：直接使用标准 Markdown 表格语法：
| 参数 | 说明 | 默认值 | 必需 |
|------|------|--------|------|
| `type` | 提示框类型 | `info` | 否 |
| `title` | 提示框标题 | 自动设置 | 否 |自定义功能
HintBox
HintBox 是一个美观的提示框组件，支持多种类型和 Markdown 内容。
实现原理
利用Hugo的 短代码 (Shortcodes) 实现
技术特性：
- 类型验证：支持 6 种预定义类型（important, info, note, tips, warning, caution）
- 图标系统：每种类型自动匹配对应的 emoji 图标
- Markdown 支持：内容区域完全支持 Markdown 语法
- 响应式设计：自适应不同屏幕尺寸
使用方式
{{< hintbox type="warning" title="重要提示" >}}
这是一个警告信息框，支持 **Markdown** 格式。
- 支持列表
- 支持链接
- 支持各种格式
{{< /hintbox >}}使用示例：
- Important 类型
这是一个重要的信息提示框，用于显示关键信息。支持 Markdown 格式的内容。
- 支持列表
- 支持链接
- 支持各种格式
- Info 类型
这是一个信息提示框，用于显示一般性的信息内容。
可以包含多段内容，以及各种 Markdown 元素。
- Note 类型
这是一个备注说明框，用于添加额外的说明信息。
可以包含引用块等复杂内容
- Tips 类型
这是一个小贴士框，用于分享有用的技巧和建议。
# 甚至可以包含代码块
echo "Hello HintBox!"- Warning 类型
这是一个警告信息框，用于提醒用户注意潜在的问题。
请仔细阅读相关说明！
- Caution 类型
这是一个危险操作提示框，用于警告用户避免危险操作。
⚠️ 执行前请确保已备份重要数据！
参数说明：
type：提示框类型（可选，默认 “info”）title：提示框标题（可选，根据类型自动设置）
Tab
Tab 组件提供标签页功能，支持内容分组展示。
利用Hugo的 短代码 (Shortcodes) 实现
使用方式
{{< tab titles="苹果,香蕉,橙子" active="0" >}}
苹果的内容描述...
---
香蕉的内容描述...
---
橙子的内容描述...
{{< /tab >}}Tab 标签页演示:
CodeTab 专用于代码展示：
{{< codetab languages="npm,yarn,pnpm" active="0" >}}
```bash
npm install package
```
---
```bash
yarn add package
```
---
```bash
pnpm add package
```
{{< /codetab >}}多语言代码示例
// JavaScript 示例
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));# Python 示例
def greet(name):
return f"Hello, {name}!"
print(greet('World'))// Go 示例
package main
import "fmt"
func greet(name string) string {
return fmt.Sprintf("Hello, %s!", name)
}
func main() {
fmt.Println(greet("World"))
}// Rust 示例
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
fn main() {
println!("{}", greet("World"));
}Navigation
跨页面锚点导航功能，支持智能跳转和高亮显示。
实现原理
渲染钩子 (Render Hooks)
使用方式
直接使用标准 Markdown 链接语法：
[跳转到其他页面的标题](/posts/hugo#Hugo配置文件)特性：
- 智能匹配：支持标题文本和 ID 的多种匹配方式
- 平滑滚动：考虑固定头部高度的智能滚动
- 高亮显示：目标内容临时高亮 3 秒
- 跨页面支持：使用 sessionStorage 实现跨页面跳转
Code Copy
代码块复制功能，为所有代码块添加一键复制按钮。
实现原理
使用方式
功能自动应用于所有代码块，无需额外配置。
特性：
- 兼容性：支持现代 Clipboard API 和传统复制方法
- 视觉反馈：复制成功后按钮状态变化和文本提示
- 键盘支持：支持 Ctrl+Shift+C 快捷键
- 语言显示：自动显示代码块的编程语言
项目部署上线
Cloudflare Pages 参照：deploy-with-cloudflare-pages