--
:
--
:
--
内容创作指南
最后更新于:
🎯 创作前准备
在开始创作之前,了解 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 - 使用心得分类规划建议
🗂️ 分类设计原则
- 分类要少而精 - 建议3-5个主要分类
- 分类要互斥 - 一篇文章通常只属于一个分类
- 标签要丰富 - 一篇文章可以有多个标签
- 命名要统一 - 使用统一的命名规范
🖼️ 资源管理
图片存储方案
1优点:不占用仓库空间,加载速度快
2推荐:阿里云OSS、腾讯云COS、GitHub图床1优点:资源可控,不依赖外部服务
2路径:hugo-teek-site/static/images/
3引用:/images/xxx.jpg1优点:全球加速,访问稳定
2推荐:Cloudflare、jsDelivr图片引用方式
11<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属性
13URL 设计规范
🔗 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使用 > 引用重要内容代码展示规范
💻 代码块最佳实践
- 指定语言 - 让代码高亮生效
- 添加标题 - 说明代码用途
- 适当注释 - 解释关键逻辑
- 控制长度 - 过长代码考虑分段
- 提供说明 - 代码前后添加解释
📊 内容统计与分析
文章数据统计
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 短代码
用于创建提示框,支持多种类型:
支持的类型: tip、warning、danger、info、note、important、caution、details
🎨 custom-block 短代码
功能与 alert 类似,参数传递方式不同:🎬 video 短代码
用于嵌入视频内容:
支持的平台: bilibili、youtube、tencent、youku、vimeo、xigua
多语言内容
🌍 多语言支持
Hugo-Teek 支持多语言内容创作:
- 在
content/下创建语言目录,如content/en/ - 配置
languages.toml启用多语言 - 使用
{{ i18n "key" }}引用翻译
📝 开始你的创作之旅吧!
如有问题,请参考 部署与使用Hugo-Teek 或提交 Issue 反馈。
📡
👤
作者:
余温Gueen
🌐
版权:
本站文章除特别声明外,均采用
CC BY-NC-SA 4.0
协议,转载请注明来自
余温Gueen Blog!
推荐使用微信支付

推荐使用支付宝

- 01修改目录样式 2026-03-02
- 02站点监控页面配置说明 2026-03-02
- 03网站统计页面配置说明 2026-03-02