内容创作指南

最后更新于:

🎯 创作前准备

在开始创作之前,了解 Hugo-Teek 的内容组织方式和创作规范,能让你的写作更加高效。

内容存储位置

1hugo-teek-site/content/
2├── docs/               # 文档类内容
3│   ├── hugo-teek默认文档/
4│   └── 专题/
5├── posts/              # 博客文章
6├── about/              # 关于页面
7└── _settings/          # 设置页面
1技术文档 → content/docs/分类名/
2博客随笔 → content/posts/
3个人介绍 → content/about/

📋 Front Matter 配置

每篇文章的开头都需要配置 Front Matter,用于定义文章的元数据。

基础配置模板

 1---
 2title: 文章标题
 3date: "2026-03-02T10:00:00+08:00"
 4description: "文章描述"
 5tags:
 6    - 标签1
 7    - 标签2
 8categories:
 9    - 分类名
10draft: false
11---
 1---
 2title: 文章标题                          # 文章标题
 3date: "2026-03-02T10:00:00+08:00"       # 发布时间
 4description: "文章描述"                  # SEO描述
 5coverImg: https://example.com/img.jpg   # 封面图片
 6url: /custom-path                        # 自定义URL
 7weight: 1                                # 排序权重
 8tags:                                    # 标签列表
 9    - 标签1
10    - 标签2
11categories:                              # 分类列表
12    - 分类名
13draft: false                             # 草稿状态
14featured: true                           # 首页推荐
15---

字段说明

字段必填说明
title文章标题,显示在列表和详情页
date发布时间,ISO 8601 格式
description文章描述,用于SEO和列表展示
coverImg封面图片URL
url自定义访问路径
weight排序权重,数字越小越靠前
tags文章标签,支持多个
categories文章分类,支持多个
draft草稿状态,true为草稿不发布
featured推荐状态,true会显示在首页

📝 Markdown 语法支持

Hugo-Teek 支持丰富的 Markdown 语法扩展,让你的内容更加生动。

语法速查目录

📚 点击下方链接查看详细语法


🎨 内容组织技巧

文章结构设计

 1# 文章标题
 2
 3## 简介
 4简要介绍文章主题
 5
 6## 环境准备
 7需要的工具和依赖
 8
 9## 详细步骤
101. 步骤一
112. 步骤二
123. 步骤三
13
14## 常见问题
15Q1: 问题描述?
16A: 解决方案
17
18## 总结
19总结要点
 1# 文章标题
 2
 3## 背景
 4为什么写这篇文章
 5
 6## 正文内容
 7详细叙述...
 8
 9## 心得体会
10个人感悟...
11
12## 参考资料
13相关链接...

目录层级建议

📐 层级使用规范

  • 文章主标题使用 H1(#)
  • 大章节使用 H2(##)
  • 小章节使用 H3(###)
  • 避免使用超过 H4(####)
  • 保持层级结构清晰,不要跳级

🏷️ 标签与分类管理

标签使用建议

1tags:
2    - hugo
3    - 前端开发
4    - 静态网站
5    - 教程
1tags:
2    - 随笔
3    - 读书笔记
4    - 生活感悟
1tags:
2    - 开源项目
3    - 工具推荐
4    - 使用心得

分类规划建议

🗂️ 分类设计原则

  1. 分类要少而精 - 建议3-5个主要分类
  2. 分类要互斥 - 一篇文章通常只属于一个分类
  3. 标签要丰富 - 一篇文章可以有多个标签
  4. 命名要统一 - 使用统一的命名规范

🖼️ 资源管理

图片存储方案

1优点:不占用仓库空间,加载速度快
2推荐:阿里云OSS、腾讯云COS、GitHub图床
1优点:资源可控,不依赖外部服务
2路径:hugo-teek-site/static/images/
3引用:/images/xxx.jpg
1优点:全球加速,访问稳定
2推荐:Cloudflare、jsDelivr

图片引用方式

1![图片描述](https://example.com/image.jpg)
1<img src="https://example.com/image.jpg" alt="图片描述" width="80%">
1<figure>
2  <img src="/images/example.jpg" alt="示例">
3  <figcaption>图片标题说明</figcaption>
4</figure>

🔍 SEO 优化建议

基础SEO配置

1---
2title: "包含关键词的标题"
3description: "150字以内的描述,包含核心关键词"
4url: /seo-friendly-url
5---
 1# 文章标题包含核心关键词
 2
 3## 第一段要包含关键词
 4文章开头100字内出现核心关键词...
 5
 6## 合理使用小标题
 7使用H2、H3标签组织内容结构...
 8
 9## 添加内部链接
10参考[相关文章](/other-post/)...
11
12## 图片添加Alt属性
13![关键词描述](image.jpg)

URL 设计规范

🔗 URL优化建议

  • 使用小写字母
  • 使用短横线分隔单词
  • 包含核心关键词
  • 避免使用数字ID
  • 保持简洁有意义

示例:

  • /hugo-teek-tutorial
  • /frontend-development-guide
  • /post-12345
  • /2026/03/02/abc

🚀 发布流程

本地预览检查

1make dev
2# 访问 http://localhost:9090 预览
1make quick
2# 跳过搜索索引,快速启动
1make fix-frontmatter
2# 自动修复缺失的Front Matter

发布前检查清单

✅ 发布检查清单

  • Front Matter 信息完整
  • 文章内容无错别字
  • 图片正常显示
  • 链接可正常访问
  • 代码块语法正确
  • 本地预览正常
  • 设置 draft: false

💡 写作技巧

提升可读性

1❌ 避免:
2一大段文字没有分段,读起来很累...
3
4✅ 推荐:
5每段控制在3-5行。
6
7适当分段让阅读更轻松。
8
9使用空行分隔不同主题。
1❌ 避免:
2第一点是什么,第二点是什么,第三点是什么...
3
4✅ 推荐:
5- 第一点说明
6- 第二点说明
7- 第三点说明
1使用 **加粗** 突出重点
2使用 `代码` 标记技术术语
3使用 > 引用重要内容

代码展示规范

💻 代码块最佳实践

  1. 指定语言 - 让代码高亮生效
  2. 添加标题 - 说明代码用途
  3. 适当注释 - 解释关键逻辑
  4. 控制长度 - 过长代码考虑分段
  5. 提供说明 - 代码前后添加解释

📊 内容统计与分析

文章数据统计

Hugo-Teek 内置不蒜子统计,可查看文章阅读量:

1# config/teek-plugins/services.toml
2[services.busuanzi]
3    enabled = true

热门文章推荐

使用 featured: true 标记重要文章,它们会显示在首页推荐区域。

🌟 推荐文章选择标准

  • 内容质量高
  • 阅读量较高
  • 具有代表性
  • 时效性较强

🛠️ 常见问题

内容相关问题

1检查:
21. draft 是否为 false
32. date 是否为未来时间
43. 文件是否在正确的 content 目录下
1解决:
21. 检查 weight 字段设置
32. weight 数字越小越靠前
43. 相同weight按时间排序
1注意:
21. tags 使用数组格式
32. 注意缩进使用空格
43. 避免特殊字符

📚 进阶技巧

自定义模板使用

Hugo-Teek 提供了多个实用的短代码,方便在文章中插入复杂内容:

🎯 alert 短代码

用于创建提示框,支持多种类型:

支持的类型: tipwarningdangerinfonoteimportantcautiondetails

🎨 custom-block 短代码

功能与 alert 类似,参数传递方式不同:

🎬 video 短代码

用于嵌入视频内容:

支持的平台: bilibili、youtube、tencent、youku、vimeo、xigua

多语言内容

🌍 多语言支持

Hugo-Teek 支持多语言内容创作:

  • content/ 下创建语言目录,如 content/en/
  • 配置 languages.toml 启用多语言
  • 使用 {{ i18n "key" }} 引用翻译

📝 开始你的创作之旅吧!

如有问题,请参考 部署与使用Hugo-Teek 或提交 Issue 反馈。

推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章