创建新主题：从零开始的 Hugo 主题开发指南

Sun, 24 May 2026 00:00:00 +0000

创建新主题：从零开始的 Hugo 主题开发指南

在 Hugo 生态系统中，主题是决定网站外观和布局的关键。学会创建自定义主题，不仅能让你完全掌控网站的设计，更能深入理解 Hugo 的工作原理。本指南将带您一步步从零开始，打造一个功能齐全、独具风格的 Hugo 主题。

一、理解 Hugo 主题结构

一个标准的 Hugo 主题通常包含以下核心目录和文件：

your-theme/
├── archetypes/ # 模板文件，用于创建新内容时自动填充元数据
├── assets/ # 存放 CSS, JavaScript, 图片等静态资源
├── data/ # 存放自定义数据文件
├── i18n/ # 多语言翻译文件
├── layouts/ # 存放模板文件（HTML, XML 等）
│ ├── _default/ # 默认模板，处理不同类型的内容
│ ├── index.html # 首页模板
│ ├── partials/ # 可重用模板片段
│ └── posts/ # 文章列表和单篇文章模板
├── static/ # 存放不经过 Hugo 处理的静态文件（新版 Hugo 推荐使用 assets/）
├── theme.toml # 主题配置文件（可选，用于主题元数据）
└── layouts.html # 主题入口文件（可选）

1.1 `archetypes/` 目录

此目录用于存放内容类型的模板。当您使用 hugo new post/my-new-post.md 命令创建新文章时，Hugo 会根据文件名的类型（如 post）查找对应的 archetypes/post.md 文件，并将其内容作为新文章的元数据（Frontmatter）的初始值。

Web 开发 on 黑白体育-黑白体育直播网页版-足球篮球直播

创建新主题：从零开始的 Hugo 主题开发指南

创建新主题：从零开始的 Hugo 主题开发指南

一、 理解 Hugo 主题结构

1.1 archetypes/ 目录

一、理解 Hugo 主题结构

1.1 `archetypes/` 目录