有哪些好看的Hugo主题？Hugo框架主题选那个? Github的star数量告诉您

静态网站越来越流行，由于网站被访问的次数远远多于它们被编辑的次数,  

因此静态网站提供给网站访问者最佳访问体验同时也给网站作者提供了理想的写作经验.

 Hugo是静态网站生成框架中最快最好的一个。

对于偏爱文本编辑器的coder，更希望手工敲代码构建他们自己网站的作者，

构建博客、创建公司站点、档案站点、文档站点、一个单独的登录页或者具有好几千页面的网站的工作者.  Hugo都是理想的网站创建工具、具有几乎瞬时的构建时间、可以在任何网站变化的时刻重建.

对于大部分作者来说，构建博客、个人简历、公司站点，Hugo 主题展示页面都有不少相应的主题，不过挑选起来需要些时间。

GitHub上[Hugo theme](https://github.com/topics/hugo-theme)的标签页内，star超过1000的主题有

1. https://github.com/wowchemy/wowchemy-hugo-modules 

2. https://github.com/adityatelange/hugo-PaperMod

3. https://github.com/gohugoio/hugoThemes

4. https://github.com/luizdepra/hugo-coder

5. https://github.com/olOwOlo/hugo-theme-even

6. https://github.com/wowchemy/starter-hugo-academic

7. https://github.com/alex-shpak/hugo-book

8. https://github.com/matcornic/hugo-theme-learn

9. https://github.com/google/docsy

10. https://github.com/dillonzq/LoveIt

正好有10个star超过1K的主题（嗯 第6个和第1个基本相同, 第三个是hugo的模版库, 不算一个）

## wowchemy


MIT License

**the website builder for Hugo**

有超过75万的站点使用了wowchemy主题, 可以轻松创建面向未来的站点

1. widgets众多, 包括登录页、知识库、学术简历、会议和技术博客等都可以使用widgets构建

2. 可以使用50+ 明亮/黑暗主题, 语言包, 和组件来配置定制漂亮的入门模板

3. 集成了开源的内容管理系统CMS, 编辑内容很容易

### 主要特性:

- Page builder - 从组件和元素构建任何页面

- 编辑任何内容类型 - 博客文章、出版物、演讲、幻灯片展示、项目等更多类型!

- 使用Markdown创建内容, 也支持导入Jupyter Book 和RStudio Rmarkdown

- 插件系统- 全部高度可定制的颜色的字体主题

- 展示代码和数学公式- 代码高亮和Latex数学公式支持

- 集成常见页面组件- Google分析、Disqus评论插件、地图、联系表单等!

- 漂亮的站点- 简单清爽的页面设计

- 领先的工业级别SEO - 使得网站容易被查询引擎发现和在社交媒体分发

- 媒体画廊 - 展示图片、视频在可定制的gallery中

- 移动显示友好 - 站点在移动设备中展示友好舒适

- 多语言支持 - 15+ 语言包，包括英文、中文、葡萄牙语等

- 多用户支持-每个作者具有自己的个人资料页面

- 隐私包-支持GPDR

- 突出特定 - 生动的动画、视差背景(parallax background)、滚动效果

- 一键部署 - 不需要服务器、不需要数据库

有些特性是Hugo框架和hugo生态带来的，比如一键部署、多语言支持等

wowchemy的大部分特性还是自己特有的

具体再看看源码、展示站点来发现些亮点

### 内容创作原型 

参考[Hugo中文文档 Hugo Archetypes 原型](https://www.andbible.com/content-management/archetypes/)

Wowchemy [archetypes](https://github.com/wowchemy/wowchemy-hugo-modules/tree/main/wowchemy/archetypes) 包括的内容原型有

authors、event、post、project、publication、slides、book、default、home

这比其他主题的原型模版多了很多，当然简单blog主题也没必要有这些，有需要才会使用。

下面是[post原型 archetype](https://github.com/wowchemy/wowchemy-hugo-modules/blob/main/wowchemy/archetypes/post/index.md)

```

---

# Documentation: https://wowchemy.com/docs/managing-content/  参考文档

title: "{{ replace .Name "-" " " | title }}"  标题

subtitle: ""                                  副标题

summary: ""                                    摘要

authors: []                                    作者

tags: []                                      标签

categories: []                                类别

date: {{ .Date }}                              日期

lastmod: {{ .Date }}                          最后修改日期

featured: false                                是否是主要

draft: false                                  是否是草案

# Featured image                              主题图片

# To use, add an image named `featured.jpg/png` to your page's folder.

# Focal points: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.

image:

  caption: ""

  focal_point: ""

  preview_only: false

# Projects (optional).                          关联的项目

#  Associate this post with one or more of your projects.

#  Simply enter your project's folder or file name without extension.

#  E.g. `projects = ["internal-project"]` references `content/project/deep-learning/index.md`.

#  Otherwise, set `projects = []`.

projects: []

---

```

### 主题样式

wowchemy内置了day(light)和night(dark)模式、

还可以选择几个预制的样式、


另外可以自己[定制样式](https://wowchemy.com/docs/customization/#custom-theme)

### show case

课程[Georgia State University Andrew Young School of Policy Studies](https://datavizs21.classes.andrewheiss.com/)

更多wowchemy[案例](https://wowchemy.com/user-stories/)

### 预制的template, 一键部署在netlify上

**使用https://wowchemy.com/templates/上链接的模版，

可以在netlify一键部署自己的类似站点(您自己的github repository也可以，一键部署)**

1. Academic Resume

2. Researcher

3. Online course

4. research group

5. Blog

6. Project documentation

7. hello world

## hugo-PaperMod

MIT License (https://github.com/adityatelange/hugo-PaperMod)

极简设计的 blog主题, PaperMod 基于[hugo-paper](https://github.com/nanxiaobei/hugo-paper)扩展而来,  提供了更多特性.

### Features

https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/

- Assets (js/css)    ##js/css资源，Hugo自带功能

- Default Theme light/dark/auto    ##可以配置的样式 明亮/黑暗/auto

- Theme Switch Toggle (enabled by default)    ##主题样式转换开关 

- Archives Layout    ##为档案而设计的布局layout

- Regular Mode (default-mode)    ##正常模式

- Home-Info Mode    ##主页信息模式

- Profile Mode    ##档案模式

- Search Page    ##使用[fuse.js](https://fusejs.io/getting-started/different-builds.html#explanation-of-different-builds)实现简单search

- Draft Page indication    ##是否草案

- Post Cover Image    ##post主题图

- Share Buttons on post    ## 分享按钮

- Show post reading time    ## 显示阅读时间

- Show Table of Contents (Toc) on blog post    ##显示文章目录

- BreadCrumb Navigation    ##面包屑导航

- Edit Link for Posts    ##文章编辑的链接

- Other Posts suggestion below a post    ##相关的文章

- Code Copy Button    ##代码copy按钮

- Multiple Authors    ##多个作者

- Comments    ##评论插件

- AccessKeys    ##快捷键

- Enhanced SEO    ##增强的SEO

- Multilingual Support    ##多语言支持

- Misc                   

  - Scroll-Bar themed (by default)    ##滚动条主题

  - Smooth Scroll between in-page links (by default)  ##链接间平滑滚动

  - Scroll-to-Top Button (by default)  ##滚动到页首

  - Google Analytics integration        ## Google统计

  - Syntax highlighting                ## 格式加亮

  - RSS feeds                          ## RSS feeds

[demo站点](https://adityatelange.github.io/hugo-PaperMod/)

### 截图:


### FAQ

常见问题见 https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/

- Override theme template 重载主题模版

- Enable Social-Metadata and SEO 启用社交元数据和SEO

- Failed to find a valid digest in the ‘integrity’ attribute for resource

- Bundling Custom css with theme’s assets 绑定定制CSS

- Custom Head / Footer  定制页面head/footer

- Add menu to site      添加菜单

- Pin a Post            固定post显示位置

- Adding Custom Favicon(s)  添加定制favicon

- Centering image in markdown  在markdown中图像置中

- Using Hugo’s Syntax highlighter “chroma”  “chroma”使用

- Search    配置查询

- References

对于主要是记录分享的技术人员博客，推荐这个极简主题，可以试试

## hugoThemes

[Hugo社区的主题仓库](https://github.com/gohugoio/hugoThemes)，所有的提交在hugo社区的主题都在这里:)

如果想安装所有主题测试用, 使用下面命令在工作目录中clone整个代码库

，

```

git clone --depth 1 --recursive https://github.com/gohugoio/hugoThemes.git themes

```

在自己项目中使用theme, 请参考[Hugo中文文档2 Mac系统 Hugo快速开始

](https://www.andbible.com/post/hugo-quick-start/).

本机测试开发环境中，通过git clone、git submodule add，或者下载源码都可以添加主题，

如果想部署在服务器上, **Github、Netlify不支持git clone方式下载的主题**，其他服务器应该没啥问题。

## hugo-coder

A minimalist blog theme for hugo.

MIT license

[配置](https://github.com/luizdepra/hugo-coder/wiki/Configurations)

[demo](https://hugo-coder.netlify.app/)

截图如下


## Even

MIT License

[hugo中文文档](andbible.com)暂时使用的主题, 入手简单， 有中文文档:),

配置还可以参考[hexo-theme-even](https://github.com/ahonn/hexo-theme-even/wiki)的文档

- 可定制的CSS和SCSS

- 可以配置的样式颜色，5个内置主题颜色(Default|Mint Green|Cobalt Blue|Hot Pink|Dark Violet)

- Draft 草案支持 

- Summary  文章摘要生成

- Share Buttons on post    ## 分享按钮

- Show post reading time    ## 显示阅读时间

- Show Table of Contents    ##显示文章摘要

- pagination          ## 分页支持

- Comments    ##评论支持

- Multilingual Support    ##多语言支持

- mathjax

- Misc                   

  - Google Analytics integration        ## Google统计

  - Syntax highlighting                ## 格式加亮

  - RSS feeds                          ## RSS feeds

  - Sitemap     

  - baiduAnalytics

  - baiduPush

  - baiduVerification

  - googleVerification

  - LanguageSelector

  - 输出RSS Markdown

对于每片post可以单独设置的参数有

```

---

title: "{{ replace .TranslationBaseName "-" " " | title }}"

date: {{ .Date }}

lastmod: {{ .Date }}

draft: true                    ##这个草案状态 发布需要修改成false

keywords: []

description: ""

tags: []

categories: []

author: ""

# You can also close(false) or open(true) something for this content.

# P.S. comment can only be closed

comment: false                    ##是否对此篇文章启用评论

toc: false                        ##是否显示此片文章的toc

autoCollapseToc: false         

postMetaInFooter: false           

hiddenFromHomePage: false        ##不在主页显示这篇文章

# You can also define another contentCopyright. e.g. contentCopyright: "This is another copyright."

contentCopyright: false

reward: false

mathjax: false                    ##本页支持mathjax

mathjaxEnableSingleDollar: false   

mathjaxEnableAutoNumber: false

# You unlisted posts you might want not want the header or footer to show

hideHeaderAndFooter: false         

# You can enable or disable out-of-date content warning for individual post.

# Comment this out to use the global config.

#enableOutdatedInfoWarning: false

flowchartDiagrams:                  ##本页支持流程图?

  enable: false

  options: ""

sequenceDiagrams:                  ##本页支持序列图?

  enable: false

  options: ""

```

## starter-hugo-academic

The Hugo Academic Resumé Template empowers you to create your job-winning online resumé and showcase your academic publications.

这是第一个主题wowchemy对学术简历需求的特化模版.

### 截图


## Hugo-book

Hugo documentation theme as simple as plain book(https://github.com/alex-shpak/hugo-book)

MIT License

[demo站点](https://themes.gohugo.io/theme/hugo-book/)

### Features

- Clean simple design  ##干净简明设计

- Light and Mobile-Friendly ##轻量、移动友好设计

- Multi-language support    ##多语言支持

- Customisable              ## 可定制 

- Zero initial configuration  ##零初始配置

- File tree menu              ## 文件树菜单

- Leaf bundle menu            ## 分支包菜单

- Handy shortcodes            ##灵巧的短代码

- Comments support            ##评论支持

- Simple blog and taxonomy    ##简单的博客和tag实现

- Primary features work without JavaScript 主要特性不依赖与Javascript

- Dark/Light Mode 

作为wiki、写书是不错选择, 简易的blog实现可以放弃

### 截图


## hugo-theme-learn

完全是为文档编写展示而设计hugo主题,


[demo站点](https://learn.netlify.app/en/)

### features

- Automatic Search

- Multilingual mode

- Unlimited menu levels

- Automatic next/prev buttons to navigate through menu entries

- Image resizing, shadow…

- Attachments files

- List child pages

- Mermaid diagram (flowchart, sequence, gantt)

- Customizable look and feel and themes variants

- Buttons, Tip/Note/Info/Warning boxes, Expand

## Docsy

A set of Hugo doc templates for launching open source content.

Apache-2.0 License

[github repo](https://github.com/google/docsy/)

[home page](https://www.docsy.dev/)

### 适合项目

Docsy 特别适合中等到大型的技术文档集合, 具有20+的文档页面, 多种文档/页面类型可能是教程、参考文档、blog文章、社区页面等。如果您的项目只有几个文档页面，那么Docsy可能是一个太重量级的方案，可以考虑hugo或者Jekyll的其他主题(比如上面的hugo-book, hugo-theme-learn). 如果您是非常大的文档项目，docsy的项目结构可能不足以满足您需求，当然您可以使用docsy，估计需要很多定制工作。

文档很翔实(https://www.docsy.dev/docs/), 如何使用主题，添加内容，定制站点，多语言支持，预览和部署、最佳实践都有详细说明。


## LoveIt

是一个简洁、优雅且高效的 Hugo 博客主题 

MIT License 

demo预览站点 https://hugoloveit.com/zh-cn/ 

特性:

性能和 SEO

- 性能优化：在 Google PageSpeed Insights 中， 99/100 的移动设备得分和 100/100 的桌面设备得分

- 使用基于 JSON-LD 格式 的 SEO SCHEMA 文件进行 SEO 优化

- 支持 Google Analytics

- 支持 Fathom Analytics

- 支持搜索引擎的网站验证 (Google, Bind, Yandex and Baidu)

- 支持所有第三方库的 CDN

- 基于 lazysizes 自动转换图片为懒加载

外观和布局

- 响应式布局

- 浅色/深色 主题模式

- 全局一致的设计语言

- 支持分页

- 易用和自动展开的文章目录

- 支持多语言和国际化

- 美观的 CSS 动画

社交和评论系统

- 支持 Gravatar 头像

- 支持本地头像

- 支持多达 64 种社交链接

- 支持多达 28 种网站分享

- 支持 Disqus 评论系统

- 支持 Gitalk 评论系统

- 支持 Valine 评论系统

- 支持 Facebook 评论系统

- 支持 Telegram comments 评论系统

- 支持 Commento 评论系统

- 支持 Utterances 评论系统

扩展功能

- 支持基于 Lunr.js 或 algolia 的搜索

- 支持 Twemoji

- 支持代码高亮

- 一键复制代码到剪贴板

- 支持基于 lightgallery.js 的图片画廊

- 支持 Font Awesome 图标的扩展 Markdown 语法

- 支持上标注释的扩展 Markdown 语法

- 支持分数的扩展 Markdown 语法

- 支持基于 KaTeX 的数学公式

- 支持基于 mermaid 的图表 shortcode

- 支持基于 ECharts 的交互式数据可视化 shortcode

- 支持基于 Mapbox GL JS 的 Mapbox shortcode

- 支持基于 APlayer 和 MetingJS 的音乐播放器 shortcode

- 支持 Bilibili 视频 shortcode

- 支持多种注释的 shortcode

- 支持自定义样式的 shortcode

- 支持自定义脚本的 shortcode

- 支持基于 TypeIt 的打字动画 shortcode

- 支持基于 Smooth Scroll 的滚动动画

- 支持基于 cookieconsent 的 Cookie 许可横幅

多语言和国际化支持

中文说明见 https://github.com/dillonzq/LoveIt/blob/master/README.zh-cn.md

## 小杰

超过1K Star的具有hugo-theme标签的hugo主题简单比较下，希望能节省大家一点时间，选出适合自己的备选主题，多试验。

祝您使用Hugo建站写博客愉快

后续有其他主题，也会随时补充，欢迎大家关注

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350

推荐阅读更多精彩内容