头像 余温Gueen
头像
余温Gueen
-- : -- : --
-- : -- : --
hugo-teek is loading...
博客 hugo-teek 2122 字 9 分钟 -- 次

hugo-teek

最后更新于:

hugo-teek

image-20251030212751104

目录

[toc]

📖 项目 简介

基于 VitePress Teek 主题移植的 Hugo 静态网站主题，专为技术博客和文档站点设计。

Hugo Teeker Theme 是将流行的 VitePress Teek 主题完整移植到 Hugo 平台的静态网站主题项目。适用于构建个人技术博客、文档库、知识管理系统等场景。

在线预览: https://wiki.xxdevops.cn/

开源仓库：https://cnb.cool/yuwen-gueen/hugo-teeker-theme

移植原则

  1. 凡是Teek具备的优秀特性，hugo-theme-teek必须也得有。
  2. hugo-theme-teek 依然得保持 简约、唯美、丝滑、强大 等特性。

主要特点

  • 🎨 精美设计 - 移植自 VitePress Teek，保留原主题的精美界面
  • 📱 响应式布局 - 完美适配桌面、平板、移动设备
  • 🚀 极速构建 - 基于 Hugo 的快速构建引擎
  • 📚 三栏文档模式 - 左侧目录导航 + 中间正文 + 右侧页内TOC
  • 🔍 强大搜索 - 集成 Algolia 全文搜索
  • 💬 评论系统 - 内置 Twikoo 评论支持
  • 📊 数据统计 - 支持百度统计、Google Analytics、不蒜子
  • 🎯 功能丰富 - 代码高亮、图片懒加载、分享按钮、暗色模式等

亮点

hugo-teek~一款简约、唯美、丝滑且强大的hugo主题博客 ❤️❤️❤️

v1-2025.9.10说明

  1. 理念超前：hugo-teek 以“将本地目录的 Markdown 文档渲染成博客”这一设计思想贯穿其中，大道至简，实用且强大。
  2. 双模式支持：能同时满足 知识库 & 博客 & 云笔记 需求，且功能完整、体验丝滑，试问全网还有哪个网站能与其争锋？
  3. 纯静态部署：一键轻松部署，最低配服务器即可满足需求，真正做到轻量化、高效化。
  4. 极致体验：风格简约、唯美，阅读/编辑文章就像读一本书一样清晰、舒适，细节打磨到位，操作丝滑流畅，用户体验无可挑剔。
  5. 数据管理：本地typora/obsidian维护markdown文档，git管理，一键发布本地md知识目录到网站；
  6. 社区氛围：群内热心小伙伴手把手教学，耐心解答问题，价值感和情绪价值双拉满，群主对小伙伴提出的需求基本有求必应……
  7. 持续迭代：开发者热心持续开发新功能，及时修复 Bug，完全开源，诚意满满。

无论是从设计理念、功能丰富度，还是从用户体验和社区支持来看，hugo-teek 都堪称全网最美博客，实至名归！

特色

写了一个wehook插件 twikoo评论插件 集成到钉钉

image-20251030212122402

image-20251030212132825

image-20251030212149178

支持pagefind搜索

https://pagefind.app

image-20251028152850620

image-20251028152941903

效果：

image-20251031100248842

✨ 功能特性

页面布局

  • 首页 - Hero背景图自动轮播、打字机效果副标题、分类卡片展示
  • 文章页 - 文章统计、分享按钮、版权声明、上下篇导航
  • 文档页 - 三栏布局、侧边栏折叠、页内目录高亮、面包屑导航
  • 归档页 - 按时间归档的文章列表
  • 分类/标签页 - 分类和标签聚合页面

交互功能

  • 搜索 - Algolia 全文搜索，支持中文分词
  • 评论 - Twikoo 评论系统，支持 Markdown
  • 分享 - 微博、Twitter、Facebook 等社交媒体分享
  • 代码块 - 语法高亮、复制按钮、自动折叠
  • 图片 - 懒加载、点击放大、相册模式
  • 主题切换 - 浅色/暗色主题自动切换

内容管理

  • 多栏目支持 - 运维、前端、编程、黑客、专题等多个栏目
  • 标签分类 - 灵活的分类和标签系统
  • 草稿管理 - 支持草稿预览
  • 文档分析 - 自动统计字数、阅读时长

🛠️ 技术栈

技术说明版本
Hugo静态网站生成器v0.150.0+ (Extended)
Go构建工具开发语言v1.21+
SCSS样式预处理器-
JavaScript前端交互脚本ES6+
Algolia搜索服务-
Twikoo评论系统v1.6.41

📁 项目结构

 1hugo-teeker-theme/
 2├── hugo                          # Hugo 可执行文件 (v0.150.0+extended)
 3├── Makefile                      # 构建命令集合
 4├── AGENTS.md                     # 开发规范和指南
 5├── 总结.md                       # 项目架构总结
 6│
 7├── hugo-teek-site/               # Hugo 站点主目录
 8│   ├── config.toml               # 主配置文件（生产环境）
 9│   ├── config-dev.toml           # 开发配置文件
10│   ├── content/                  # 内容目录
11│   │   ├── docs/                 # 文档栏目
12│   │   │   ├── 11.运维/
13│   │   │   ├── 20.前端/
14│   │   │   ├── 30.编程/
15│   │   │   ├── 35.黑客/
16│   │   │   ├── 40.专题/
17│   │   │   └── 50.工具/
18│   │   └── posts/                # 博客文章
19│   ├── data/                     # 数据文件
20│   │   └── docAnalysis.json      # 文档分析数据（自动生成）
21│   ├── layouts/                  # 模板文件
22│   ├── static/                   # 静态资源
23│   ├── archetypes/               # 内容模板
24│   └── public/                   # 构建输出（自动生成）
25│
26├── themes/                       # 主题目录
27│   └── hugo-teek/                # Hugo Teek 主题
28│       └── assets/               # 主题资源
29│           ├── css/              # SCSS 样式文件
30│           └── js/               # JavaScript 脚本
31│
32├── tools/                        # Go 构建工具
33│   ├── permalink-gen/            # 永久链接生成器
34│   ├── index-generator/          # 索引页生成器
35│   ├── doc-analysis/             # 文档分析工具
36│   └── docs-manager/             # 文档管理工具
37│
38├── vitepress-2.0.0-alpha.12/     # VitePress 原版参考（只读）
39└── vitepress-theme-teek-1.5.1/   # VitePress Teek 主题参考（只读）

📝 开发规范

提交规范

遵循 Conventional Commits 规范：

1<type>(<scope>): <subject>
2
3<body>
4
5<footer>

类型（type）：

  • feat: 新功能
  • fix: 修复bug
  • docs: 文档更新
  • style: 代码格式调整
  • refactor: 重构
  • perf: 性能优化
  • test: 测试相关
  • chore: 构建工具或辅助工具的变动

示例：

1feat(nav): 添加导航下拉菜单功能
2
3- 实现多级菜单支持
4- 添加菜单图标配置
5- 优化移动端菜单体验
6
7Closes #123

代码风格

  • Hugo 模板: 2空格缩进，使用 {{- -}} 去除空白
  • SCSS: 2空格缩进，变量统一在 _variables.scss 定义
  • JavaScript: 2空格缩进，使用 ES6+ 语法，camelCase 命名
  • Go: 遵循 gofmt 格式，使用 go vet 检查

分支管理

  • main: 主分支，稳定版本
  • develop: 开发分支
  • feature/*: 功能分支
  • bugfix/*: 修复分支
  • release/*: 发布分支

🤝 贡献指南

欢迎贡献代码、报告问题或提出建议！

贡献流程

  1. Fork 本仓库
  2. 创建功能分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'feat: Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 提交 Pull Request

Pull Request 要求

  • 遵循代码规范和提交规范
  • 包含清晰的描述和截图（UI 变更）
  • 测试通过（make build 无错误）
  • 更新相关文档

📄 许可证

本项目基于 MIT License 开源。

🙏 致谢

  • Hugo - 强大的静态网站生成器
  • VitePress Teek - 原始主题设计
  • 所有贡献者和使用者

📞 联系方式

🔗 相关链接

⭐ 如果这个项目对你有帮助，请给个 Star！

Made with ❤️ by 余温Gueen

其它hugo主题

（1）可以参考的hugo主题：

见《hugo主题》文档。

image-20251015222956990

🍊

（2）可以参考的teek主题：

官方demo：https://onedayxyy.cn/

仓库地址：https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public

！！

Teek官方demo：https://vp.teek.top/

Teek开发库：https://github.com/Kele-Bingtang/vitepress-theme-teek

FAQ

Q1: 页面样式不正常

A: 确保使用的是 Hugo Extended 版本：

1hugo version
2# 输出应包含 "+extended"

Q2: 构建时出现 SCSS 错误

A: 检查是否安装了 Hugo Extended 版本，并清理缓存：

1make clean
2make build

Q3: 图片不显示

A: 检查图片路径：

  • 放在 static/img/ 的图片，使用 /img/xxx.jpg 引用
  • 外部图片使用完整 URL

Q4: 修改配置不生效

A: 尝试清理缓存并重启服务器：

1make clean
2make dev

Q5: 评论不显示

A: 检查以下配置：

  1. params.comment.enabled 是否为 true
  2. Twikoo envId 是否正确
  3. 浏览器控制台是否有错误

Q6: 搜索功能不工作

A: 检查 Algolia 配置：

  1. appId、apiKey、indexName 是否正确
  2. 是否已在 Algolia 创建索引并上传数据

Q7: 构建时 Go 工具报错

A: 重新安装依赖：

1make install-deps

Q8: 端口 8080 被占用

A: 更换端口启动：

1./hugo server --source=hugo-teek-site --port=8090

twikoo评论管理开关

image-20251030212234771

image-20251030212240471

结束。

📡
👤 作者: 余温Gueen
🔗 链接: https://wiki.xxdevops.cn/topic/hugo-teek-jieshao
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 余温Gueen Blog！
推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章

文档导航