Hugo文档

hugo-theme-techdoc — Hugo 文档模板

作者 thingsym

hugo-theme-techdoc 是 thingsym 开发的 Hugo 技术文档主题,采用 MIT 许可,提供响应式布局、文档菜单、目录、代码高亮与自定义短代码。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

提供文档菜单、可选页面目录与标题锚点链接

02

内置代码高亮(带剪贴板)、提示面板和按钮等自定义短代码

03

支持 Algolia 搜索短代码、Open Graph 以及 Google Analytics/GTM

04

响应式布局,提供 Open Menu 与 Slide Menu 两种菜单样式

05

支持 git submodule、Hugo module 或直接克隆三种安装方式

06

MIT 许可,仓库包含 exampleSite 示例站点与 Docker 开发环境

模板详细介绍

hugo-theme-techdoc 是一个面向技术文档的 Hugo 主题,仓库位于 thingsym/hugo-theme-techdoc,采用 MIT 许可。主题要求 Hugo 最低版本 0.146.0,并兼容默认的 Goldmark Markdown 解析器。

主题提供响应式布局、文档菜单(Select Menu 风格,含 Open Menu 与 Slide Menu 两种样式)、可选的页面目录、主题配色、指向文档仓库的编辑链接、标题锚点链接,以及自定义短代码:带剪贴板的代码高亮、提示面板和按钮。搜索短代码由 Algolia 提供支持,另包含 Open Graph 与 Google Analytics、Google Tag Manager 分析集成。

安装方式包括 git submodule、Hugo module 或直接克隆到 themes 目录;示例配置可参考 exampleSite 中的 hugo.toml。本地开发可使用 hugo server 预览,也可通过 Docker Compose 运行示例站点;主题源码使用 SCSS 与 webpack/gulp 构建。

Hugo文档

适合你的项目吗?

适用场景

  • 为开源项目或产品编写技术文档站点
  • 搭建带侧边菜单与目录的 Markdown 文档中心
  • 需要代码高亮、提示面板与 Algolia 搜索的文档页面
  • 使用 Hugo 构建并部署到 public_html 或静态托管

适合人群

  • 使用 Hugo 并需要文档主题的开发者
  • 维护开源项目文档的团队
  • 希望以 Markdown 编写技术手册的作者

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    Hugo 最低版本要求 0.146.0,并兼容 Goldmark 解析器

  2. 2

    可通过 git submodule、Hugo module 或克隆到 themes 目录安装

  3. 3

    在 hugo.toml(或 hugo.yaml/hugo.json)中配置主题选项,参考 exampleSite 示例

  4. 4

    使用 hugo server -t hugo-theme-techdoc 本地预览,hugo -t hugo-theme-techdoc -d public_html 部署

  5. 5

    Algolia 搜索、Google Analytics 等外部服务需自行配置并可能产生费用

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 搜索短代码依赖第三方 Algolia 服务,需自行注册账号、获取 API 密钥并配置索引,可能产生费用;不配置则无法使用该搜索功能。
  • Google Analytics 与 Google Tag Manager 分析集成需使用外部 Google 服务并配置相应账号/跟踪 ID,属可选功能。
  • 使用该主题要求 Hugo 最低版本 0.146.0,低于此版本无法正常构建。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Search Shortcode powered by [Algolia](https://www.algolia.com/)

README 原文

Analytics with Google Analytics, Google Tag Manager

README 原文

Hugo minimum version: 0.146.0

README 原文
https://github.com/thingsym/hugo-theme-techdoc/blob/master/LICENSE.mdhttps://github.com/thingsym/hugo-theme-techdoc/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
Hugo Themes
资料与维护参考分
资料较完整 · 91 / 100
技术栈
Hugo
网站类型
文档
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-03-12
截图检查日期
2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: e1f730d12036d373d57d320071f93cc675523813119a35b8644a2ac50c6c44d3

2026-10-02T18:06:19.865Z

来源文件 / 仓库
# Hugo Theme Techdoc

The Techdoc is a Hugo Theme for technical documentation.

![The Techdoc screenshot](https://raw.githubusercontent.com/thingsym/hugo-theme-techdoc/master/images/screenshot.png)

- Hugo Themes page: [https://themes.gohugo.io/themes/hugo-theme-techdoc/](https://themes.gohugo.io/themes/hugo-theme-techdoc/)
- Demo site: [https://thingsym.github.io/hugo-theme-techdoc/](https://thingsym.github.io/hugo-theme-techdoc/)
- Download: [https://github.com/thingsym/hugo-theme-techdoc](https://github.com/thingsym/hugo-theme-techdoc)

## Features

* Modern, Simple layout
* Responsive web design
* Documentation menu (Select Menu style)
* Table Of Contents for the page (selective)
* Theme color
* Edit link to documentation repository
* Header link to HTML headings
* Custom Shortcodes
	* Code highlight with clipboard
	* Alert panel
	* Button
* Search Shortcode powered by [Algolia](https://www.algolia.com/)
* Open Graph
* Analytics with Google Analytics, Google Tag Manager

## Screenshot

### Theme color

![Theme color](https://raw.githubusercontent.com/thingsym/hugo-theme-techdoc/master/images/screenshot-theme-color.png)

### Menu style

#### Open Menu

![Open Menu](https://raw.githubusercontent.com/thingsym/hugo-theme-techdoc/master/images/screenshot-open-menu.png)

#### Slide Menu

![Slide Menu](https://raw.githubusercontent.com/thingsym/hugo-theme-techdoc/master/images/screenshot-slide-menu.gif)

### Edit link

![Edit link](https://raw.githubusercontent.com/thingsym/hugo-theme-techdoc/master/images/screenshot-edit-link.png)

## Getting Started

### Requirement

Hugo minimum version: 0.146.0

Default Markdown parser library `Goldmark` compatible

### Install Hugo theme on your project as a git submodule

If you have git installed, you can include hugo-theme-techdoc repository into your core repository as submodule using `git submodule` within your project directory.

```
cd your_project
git submodule add https://github.com/thingsym/hugo-theme-techdoc.git themes/hugo-theme-techdoc
```

For more information read [the Hugo documentation](https://gohugo.io/getting-started/quick-start/).

### Or install Hugo theme on your project as a Hugo module

If you have Go installed, you can add hugo-theme-techdoc to your site as a Hugo module instead of a git submodule. Navigate to your Hugo project root and edit your `hugo.toml`:

```toml
[module]
[[module.imports]]
path = 'github.com/thingsym/hugo-theme-techdoc'
```

Then, to install/update the hugo-theme-techdoc module, run:

```
hugo mod get -u
```

### Or download Hugo theme on your project

If you have git installed, you can do the following at the command-line-interface within your project directory.

```
cd your_project/themes
git clone https://github.com/thingsym/hugo-theme-techdoc.git
```

### Configure

You may specify options in hugo.toml (or hugo.yaml/hugo.json) of your site to make use of this theme's features.

For an example of `hugo.toml`, [hugo.toml](https://github.com/thingsym/hugo-theme-techdoc/blob/master/exampleSite/hugo.toml) in exampleSite.

### Update Hugo theme for git submodule

```
git submodule update --remote
git add themes/hugo-theme-techdoc
git commit
```

### Directory layout

```
tree . -I node_modules

.
├── LICENSE.md
├── README.md
├── archetypes
│   └── default.md
├── compose.yml
├── exampleSite
│   └── ..
├── gulpfile.js
├── images
│   └── ..
├── layouts
│   ├── 404.html
│   ├── blog
│   │   ├── li.html
│   │   ├── list.html
│   │   ├── single.html
│   │   └── summary.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.algolia.json
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   ├── partials
│   │   ├── content-footer.html
│   │   ├── custom-css.html
│   │   ├── custom-head.html
│   │   ├── edit-meta.html
│   │   ├── edit-page.html
│   │   ├── footer.html
│   │   ├── global-menu.html
│   │   ├── head.html
│   │   ├── last-updated.html
│   │   ├── menu
│   │   │   ├── open-menu.html
│   │   │   └── slide-menu.html
│   │   ├── meta
│   │   │   ├── chroma.html
│   │   │   ├── google-analytics-async.html
│   │   │   ├── google-site-verification.html
│   │   │   └── tag-manager.html
│   │   ├── notification.html
│   │   ├── pagination.html
│   │   ├── powered.html
│   │   ├── prepend-body.html
│   │   ├── search.html
│   │   ├── sidebar-footer.html
│   │   ├── sidebar.html
│   │   ├── site-header.html
│   │   └── table-of-contents.html
│   ├── posts
│   │   ├── list.html
│   │   └── single.html
│   ├── shortcodes
│       ├── button.html
│       ├── code.html
│       ├── panel.html
│       └── search.html
├── package-lock.json
├── package.json
├── resources
├── src
│   ├── js
│   │   ├── code.js
│   │   ├── headerlink.js
│   │   ├── jquery.backtothetop
│   │   │   ├── jquery.backtothetop.js
│   │   │   └── jquery.backtothetop.min.js
│   │   ├── keydown-nav.js
│   │   ├── main.js
│   │   └── sidebar-menu.js
│   └── scss
│       ├── _component.scss
│       ├── _project.scss
│       ├── _structure.scss
│       ├── _variable.scss
│       ├── chroma.scss
│       ├── foundation
│       │   ├── _element.scss
│       │   ├── _index.scss
│       │   ├── _normalize.scss
│       │   ├── _reset.scss
│       │   └── _stack.scss
│       ├── function
│       │   ├── _calc-font-size.scss
│       │   ├── _calc-stack.scss
│       │   ├── _contrast-color.scss
│       │   ├── _index.scss
│       │   └── _strip-unit.scss
│       └── theme.scss
├── static
│   ├── css
│   │   ├── chroma.css
│   │   ├── chroma.min.css
│   │   ├── theme.css
│   │   └── theme.min.css
│   ├── images
│   └── js
│       └── bundle.js
├── theme.toml
└── webpack.config.js
```

### Preview site

To preview your site, run Hugo's built-in local server.

```
hugo server -t hugo-theme-techdoc
```

Browse site on http://localhost:1313

## Deploy Site to public_html directory

```
hugo -t hugo-theme-techdoc -d public_html
```

## Local development environment

### Preview exampleSite

```
cd /path/to/dir/themes/hugo-theme-techdoc/exampleSite

hugo server --themesDir ../..
```

Browse site on http://localhost:1313

### Build development

```
cd /path/to/hugo-theme-techdoc
npm install
npm run gulp watch
```

## Docker development environment

### Run Docker and Preview exampleSite

```
cd /path/to/hugo-theme-techdoc
docker compose up -d
```

Browse site on http://localhost:1313

### Deploy exampleSite to public_html directory

```
docker compose run --rm hugo -t hugo-theme-techdoc -d public_html --themesDir /hugo/themes
```

### Stop container and remove container

```
docker compose down -v
```

### Build development

```
cd /path/to/hugo-theme-techdoc
docker compose run --rm node npm install
docker compose run --rm node npm run watch
```

## Contribution

### Patches and Bug Fixes

Small patches and bug reports can be submitted a issue tracker in Github. Forking on Github is another good way. You can send a pull request.

1. Fork [Hugo Theme Techdoc](https://github.com/thingsym/hugo-theme-techdoc) from GitHub repository
2. Create a feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Create new Pull Request

## Changelog

* Version 1.1.0 - 2026.03.12
	* change Hugo minimum version 0.146.0
	* fix hugo.toml
	* fix scss to adjust the layout
	* add eslint.config.js
	* update npm dependencies
	* remove gulp
	* fix absURL
	* change structure of layouts folder for New template system in Hugo v0.146.0
	* update docker image
	* fix Error: html/template:blog/list.html [ #74 ]
* Version 1.0.2 - 2025.01.30
	* bump up version jQuery Plugin Back to the Top
* Version 1.0.1 - 2024.08.20
	* fix README
	* fix exampleSite document
	* fix sass
	* update npm dependencies
	* fix hugo config
	* rename docker-compose.yml to compose.yml
	* change hugo docker image
	* fix deprecation warning [ #68 ]
	* bring example site up to date [ #66 ]
	* fix typos [ #65 ]
	* fix github workflows
* Version 1.0.0 - 2023.08.21
	* update hugo docker image
	* update npm dependencies
	* allow to set branch of github documentation repository [ #64 ]
	* enable use as a Hugo module [ #63 ]
* Version 0.9.9 - 2022.07.08
	* fix scss
	* bump up version on jquery, jquery.easing and clipboard
	* update node package dependencies
	* change service name
	* change fontawesome delivery from cdn to self-host
	* fix config.toml
	* id and class elements added to menu items
	* pre and post elements added to menu items [ #48 ]
	* use SRI for CDN js sources [ #45 ]
	* fix heading styles
	* change to using math.div for division
* Version 0.9.8 - 2021.10.18
	* fix sample document
	* edit README
	* update package.json
	* add github_doc_repository_path
	* change to relative link
	* add workflows for publishing demo site to gh-pages
* Version 0.9.7 - 2021.03.08
	* add docker-compose.yml for development environment
	* change keyboard event from event.keyCode to event.key because it is deprecated
	* update package.json
	* add FUNDING.yml
	* fix space for minify publish
	* change flexbox-grid-mixins from libsass to dart-sass
* Version 0.9.6 - 2020.11.22
	* add sample Markdown Syntax
	* update sample document
	* replace scss from node-sass to dart-sass
* Version 0.9.5 - 2020.11.05
	* fix link style with Alert panel
* Version 0.9.4 - 2020.10.08
	* improve scss for custom shortcodes using css custom properties
	* change stack to css custom properties
	* fix scss
	* fix button shortcode, adding notice color
	* add Code highlight with clipboard custom shortcode
	* fix webpack.config.js
	* fix npm scripts
	* update package.json
	* adjust no sidebar layout
* Version 0.9.3 - 2020.08.02
	* remove jQuery dependency with keydown nav
	* add header link
* Version 0.9.2 - 2020.06.14
	* add note and sample to document
	* fix tableOfContents endLevel
	* add chapter 'unlimited levels' to document
	* add menu indentation up to 5 levels
* Version 0.9.1 - 2020.05.24
	* fix config.toml
	* fix url in rss meta link
	* remove line break	in algolia.json
* Version 0.9.0 - 2020.04.01
	* fix lint config
	* update Sample Document
	* update jQuery to v3.4.1
	* add search function and shortcode powered by Algolia
	* fix config.toml
	* fix sass
	* fix hugo deprecated warning
* Version 0.8.3 - 2020.03.19
	* fix edit page link
* Version 0.8.2 - 2020.03.07
	* fix open graph image path
* Version 0.8.1 - 2020.03.07
	* fix open graph image path
* Version 0.8.0 - 2020.02.27
	* update Sample Document
	* config.toml
	* add open graph image to exampleSite
	* add safeCSS for ZgotmplZ with generated by Hugo Template
* Version 0.7.0 - 2020.02.07
	* bump up Hugo minimum version to 0.60.0
	* change shortcode delimiter from % to <
	* improve tableOfContents for Goldmark
* Version 0.6.0 - 2020.01.13
	* fix scss
	* gulp bump up version to 4.0
	* fix hugo deprecated warning
* Version 0.5.0 - 2019.12.08
	* update Sample Document
	* add table of contents
	* add open graph
	* add function and stack scss
* Version 0.4.0 - 2019.11.02
	* update Sample Document
	* add Theme color
	* add Menu style
	* improve scss
* Version 0.3.0 - 2019.10.06
	* fix archetypes
	* add prepend-body.html for Tag Manager noscript version
	* change class name from menu to global-menu
	* rename partials files
	* fix javascript path for webpack
	* improve development environment
	* move javascript files to src directory
* Version 0.2.2 - 2019.04.27
	* fix Lastmod's and PublishDate's initial value of 0001-01-01
* Version 0.2.1 - 2018.12.07
	* fix scss lint errors
	* change lint from scss-lint to stylelint
	* add published date
	* change the font color of powered by
	* fix link on powered by
* Version 0.2.0 - 2018.11.21
	* add screenshot images
	* add exampleSite
	* fix sub-menu for responsive
	* improve menu and pagination
* Version 0.1.0 - 2018.03.04
	* initial release

## License

Techdoc is licensed under the MIT License.

Techdoc bundles the following third-party resources:

* CSS reset by [normalize.css](https://necolas.github.io/normalize.css/), [MIT](https://opensource.org/licenses/MIT)
* jQuery Plugin [Back to the Top](https://github.com/thingsym/jquery.backtothetop), [MIT](https://opensource.org/licenses/MIT)
* Sass Mixin [Flexbox Grid Mixins](https://thingsym.github.io/flexbox-grid-mixins/), [MIT](https://opensource.org/licenses/MIT)
* [jQuery](https://jquery.com/)
* [jQuery Easing](https://github.com/gdsmith/jquery.easing)
* [Font Awesome](https://fontawesome.com/)
* [clipboard.js](https://clipboardjs.com/)
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
* [Day.js](https://github.com/iamkun/dayjs)

## Author

[thingsym](https://github.com/thingsym)

Copyright (c) 2017-2026 by [thingsym](https://management.thingslabo.com/)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。