One

主题

00:00:00
2025-11-082025-11-08hugo-teek
627
2.6m
0

开发指南 ​

🔧 开发指南 ​

Makefile 命令 ​

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

bash
# 查看所有可用命令
make help

# 开发模式（生成数据 + 启动服务器）
make dev

# 快速预览（不生成数据）
make quick

# 生成永久链接
make gen-permalink

# 生成索引页
make gen-index

# 生成文档分析数据
make gen-doc-analysis

# 构建生产版本
make build

# 清理构建文件
make clean

构建工具说明 ​

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

1. permalink-gen (永久链接生成器) ​

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

bash
make gen-permalink

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

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

bash
make gen-index

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

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

bash
make gen-doc-analysis

目录结构约定 ​

文档目录命名 ​

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

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

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

文章 Front Matter ​

标准的文章 Front Matter 格式：

yaml
---
title: "文章标题"                    # 必填
date: 2025-10-23T18:00:00+08:00    # 必填
draft: false                        # 是否草稿
description: "文章描述"             # SEO 描述
categories: ["分类"]                # 分类（数组）
tags: ["标签1", "标签2"]           # 标签（数组）
slug: "article-slug"                # URL slug（可选，自动生成）
coverImg: "https://..."             # 封面图（可选）
author: "作者名"                    # 作者（可选）
---

自定义主题 ​

修改样式 ​

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

bash
themes/hugo-teek/assets/css/
├── main.scss                 # 主样式入口
├── _variables.scss           # 变量定义
├── _base.scss                # 基础样式
├── _layout.scss              # 布局样式
└── components/               # 组件样式
    ├── _header.scss
    ├── _footer.scss
    └── ...

修改变量示例（_variables.scss）：

scss
// 主题颜色
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333333;
$bg-color: #ffffff;

// 字体
$font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
$code-font: "Fira Code", "Consolas", monospace;

// 尺寸
$container-width: 1280px;
$sidebar-width: 280px;

修改模板 ​

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

bash
layouts/
├── _default/                 # 默认模板
│   ├── baseof.html           # 基础模板
│   ├── single.html           # 单页模板
│   └── list.html             # 列表模板
├── partials/                 # 部分模板
│   ├── header.html
│   ├── footer.html
│   └── ...
└── shortcodes/               # 短代码
    └── ...

添加 Shortcode ​

创建自定义 Shortcode 示例：

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

在文章中使用：

markdown
{{</* notice info */>}}
这是一个提示信息！
{{</* /notice */>}}
最近更新