Hugo 主题开发入门
在本篇详尽的指南中，我们将深入探讨如何为 Hugo 网站创建一个全新的主题。Hugo 是一个广受欢迎的静态网站生成器，以其卓越的速度和灵活性而闻名。而主题则是决定 Hugo 网站外观和感觉的关键要素。掌握主题开发，意味着您可以完全掌控网站的视觉呈现，并根据品牌需求（如爱游戏(ayx)的官方风格）进行高度定制。
主题结构解析
一个 Hugo 主题通常包含以下几个核心目录和文件：
layouts/: 这是主题的核心，包含了网站的各种页面模板。例如，layouts/_default/list.html和layouts/_default/single.html是文章列表页和单篇文章页的默认模板。您还可以为特定内容类型（如post）创建更具体的模板，例如layouts/post/list.html和layouts/post/single.html。layouts/partials/: 存放可重用的模板片段，如导航栏、页脚、侧边栏等。这有助于保持代码的 DRY（Don’t Repeat Yourself）原则。layouts/shortcodes/: 存放自定义的短代码，用于在 Markdown 内容中插入富媒体或复杂布局。
static/: 存放静态资源，如 CSS 文件、JavaScript 文件、图片、字体等。Hugo 会将此目录下的所有内容直接复制到网站的根目录。assets/: Hugo 0.60 版本后引入，用于处理图片和资源。通过 Hugo Pipes，您可以在这里进行图片裁剪、缩放、添加水印等操作。data/: 存放 YAML、JSON 或 TOML 格式的数据文件，可以在模板中引用，用于动态生成内容。i18n/: 存放国际化（i18n）翻译文件，用于支持多语言网站。archetypes/: 存放内容类型的默认 front matter 模板。当您创建一个新内容时，Hugo 会根据其类型加载对应的 archetype 文件。config.toml(或config.yaml,config.json): 虽然主题通常不包含自己的config.toml，但主题的exampleSite目录中会有一个示例配置文件，用于演示主题的配置选项。
基础模板创建
让我们从创建最基本的模板开始。
layouts/_default/list.html
这个模板将用于显示内容列表，例如博客文章列表。
<!DOCTYPE html>
<html>
<head>
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
<ul>
{{ range .Pages }}
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</body>
</html>
layouts/_default/single.html
这个模板将用于显示单个内容页面，例如单篇文章。
<!DOCTYPE html>
<html>
<head>
<title>{{ .Title }} - {{ .Site.Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
<div>
{{ .Content }}
</div>
</body>
</html>
引入 CSS 和 JavaScript
为了让网站更具吸引力，我们需要引入样式表和脚本。
- 在
static/css/目录下创建一个style.css文件。 - 在
static/js/目录下创建一个script.js文件。
然后在 layouts/_default/baseof.html（如果您使用了 baseof.html 结构）或直接在 list.html 和 single.html 中引入它们：
<head>
<title>{{ .Title }} - {{ .Site.Title }}</title>
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>
<body>
<!-- ... 页面内容 ... -->
<script src="{{ "js/script.js" | relURL }}"></script>
</body>
relURL 函数确保路径正确，无论网站部署在哪里。
利用 Partials 重用代码
将导航栏、页脚等公共部分提取到 layouts/partials/ 目录下的文件中，例如 header.html 和 footer.html。
layouts/partials/header.html:
<header>
<nav>
<a href="/">爱游戏 (ayx) 官网</a>
<ul>
<li><a href="/posts/">博客</a></li>
<li><a href="/about/">关于</a></li>
<!-- 更多导航链接 -->
</ul>
</nav>
</header>
layouts/partials/footer.html:
<footer>
<p>© {{ now.Year }} 爱游戏. All rights reserved.</p>
</footer>
然后在您的主模板中包含它们：
<!DOCTYPE html>
<html>
<head>
<title>{{ .Title }} - {{ .Site.Title }}</title>
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>
<body>
{{ partial "header.html" . }}
<main>
<h1>{{ .Title }}</h1>
<div>
{{ .Content }}
</div>
</main>
{{ partial "footer.html" . }}
<script src="{{ "js/script.js" | relURL }}"></script>
</body>
</html>
使用 Archetypes 简化内容创建
在 archetypes/default.md（或者为特定内容类型创建 archetypes/post.md）中定义 front matter 模板：
---
title: "{{ replace .File.ContentBaseName "-" " " | title }}"
date: {{ .Date }}
draft: true
tags: []
---
当您执行 hugo new posts/my-first-post.md 时，Hugo 会使用 archetypes/post.md（如果存在）或 archetypes/default.md 来生成 posts/my-first-post.md 的初始内容，包括 title、date 和 draft 字段。
进阶主题开发
- Hugo Pipes: 利用
assets/目录和 Hugo Pipes 进行图片处理、CSS/JS 压缩和合并。 - Taxonomies: 创建自定义分类法（如“游戏类型”、“平台”）来组织内容。
- Shortcodes: 创建自定义短代码，以更灵活地在 Markdown 中嵌入内容，例如嵌入爱游戏(ayx)的官方视频或游戏截图。
- 多语言支持: 使用
i18n/目录和{{ T "key" }}函数来实现多语言功能。 - Homepage 模板: 为网站首页创建特定的模板
layouts/index.html。
开发 Hugo 主题是一个循序渐进的过程。从简单的结构开始，逐步添加功能和样式，最终实现您期望的视觉效果和用户体验，完美契合爱游戏(ayx)的品牌形象。