--
:
--
:
--
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 编写的构建工具,用于预处理内容:
1. permalink-gen (永久链接生成器)
自动为文章生成 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 >}}
📡
👤
作者:
余温Gueen
🌐
版权:
本站文章除特别声明外,均采用
CC BY-NC-SA 4.0
协议,转载请注明来自
余温Gueen Blog!
推荐使用微信支付

推荐使用支付宝
