Day 3 - 自定义主题与样式
自定义主题
本文介绍如何自定义 Hugo 主题的样式和布局。
修改布局
在 layouts 目录下创建或修改模板文件：
1layouts/
2├── _default/
3│ ├── single.html # 单页模板
4│ ├── list.html # 列表页模板
5│ └── baseof.html # 基础模板
6└── partials/
7 ├── header.html # 页眉
8 └── footer.html # 页脚
添加自定义 CSS
在 static/css/ 目录下创建 CSS 文件：
1/* static/css/custom.css */
2body {
3 font-family: "Noto Sans SC", sans-serif;
4}
5
6.post-title {
7 color: #333;
8 font-size: 2rem;
9}
在模板中引用：
1<link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">
使用 Page Bundle
像本文一样，可以将图片和文章放在同一个文件夹中：
1day3-custom/
2├── index.md # 文章内容
3└── image.svg # 图片资源
在文章中引用：
1
总结
通过本系列教程，你已经掌握了：
- ✅ Hugo 的安装
- ✅ 网站的创建和配置
- ✅ 主题的自定义
继续探索 Hugo 的更多功能吧！
— END —