hugo-teek is loading...

开发指南

最后更新于:

🔧 开发指南

Makefile 命令

项目提供了一系列便捷的 Make 命令:

 1# 查看所有可用命令
 2make help
 3
 4# 开发模式(生成数据 + 启动服务器)
 5make dev
 6
 7# 快速预览(不生成数据)
 8make quick
 9
10# 生成永久链接
11make gen-permalink
12
13# 生成索引页
14make gen-index
15
16# 生成文档分析数据
17make gen-doc-analysis
18
19# 构建生产版本
20make build
21
22# 清理构建文件
23make clean

构建工具说明

项目包含多个 Go 编写的构建工具,用于预处理内容:

自动为文章生成 SEO 友好的永久链接,更新 Front Matter 中的 slug 字段。

1make gen-permalink

2. index-generator (索引页生成器)

自动生成分类、标签、归档等索引页面。

1make gen-index

3. doc-analysis (文档分析工具)

统计文档字数、阅读时长等信息,生成 data/docAnalysis.json

1make gen-doc-analysis

目录结构约定

文档目录命名

内容目录采用"数字前缀 + 名称"的方式组织:

1content/docs/
2├── 11.运维/          # 运维相关文档
3├── 20.前端/          # 前端技术文档
4├── 30.编程/          # 编程语言文档
5├── 35.黑客/          # 安全技术文档
6├── 40.专题/          # 专题系列文档
7└── 50.工具/          # 工具使用文档

数字前缀用于控制显示顺序,Hugo 会自动识别并排序。

文章 Front Matter

标准的文章 Front Matter 格式:

 1---
 2title: "文章标题"                    # 必填
 3date: 2025-10-23T18:00:00+08:00    # 必填
 4draft: false                        # 是否草稿
 5description: "文章描述"             # SEO 描述
 6categories: ["分类"]                # 分类(数组)
 7tags: ["标签1", "标签2"]           # 标签(数组)
 8slug: "article-slug"                # URL slug(可选,自动生成)
 9author: "作者名"                    # 作者(可选)
10---

自定义主题

修改样式

主题样式位于 themes/hugo-teek/assets/css/

1themes/hugo-teek/assets/css/
2├── main.scss                 # 主样式入口
3├── _variables.scss           # 变量定义
4├── _base.scss                # 基础样式
5├── _layout.scss              # 布局样式
6└── components/               # 组件样式
7    ├── _header.scss
8    ├── _footer.scss
9    └── ...

修改变量示例(_variables.scss):

 1// 主题颜色
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$text-color: #333333;
 5$bg-color: #ffffff;
 6
 7// 字体
 8$font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 9$code-font: "Fira Code", "Consolas", monospace;
10
11// 尺寸
12$container-width: 1280px;
13$sidebar-width: 280px;

修改模板

模板文件位于 hugo-teek-site/layouts/

 1layouts/
 2├── _default/                 # 默认模板
 3│   ├── baseof.html           # 基础模板
 4│   ├── single.html           # 单页模板
 5│   └── list.html             # 列表模板
 6├── partials/                 # 部分模板
 7│   ├── header.html
 8│   ├── footer.html
 9│   └── ...
10└── shortcodes/               # 短代码
11    └── ...

添加 Shortcode

创建自定义 Shortcode 示例:

1<!-- layouts/shortcodes/notice.html -->
2<div class="notice notice-{{ .Get 0 }}">
3  {{ .Inner | markdownify }}
4</div>

在文章中使用:

1{{< notice info >}}
2这是一个提示信息!
3{{< /notice >}}
推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章

文档导航