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

静态网站越来越流行，由于网站被访问的次数远远多于它们被编辑的次数, 因此静态网站提供给网站访问者最佳访问体验、同时给网站作者提供了理想的写作经验. Hugo是静态网站生成框架中最快最好的一个。

对于偏爱文本编辑器的coder，更希望手工敲代码构建他们自己网站的作者，构建博客、创建公司站点、档案站点、文档站点、一个单独的登录页或者具有好几千页面的网站的工作者. Hugo都是理想的网站创建工具、具有几乎瞬时的构建时间、可以在任何网站变化的时刻重建.

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

GitHub上Hugo theme的标签页内，star超过1000的主题有

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

wowchemy

MIT License

the website builder for Hugo

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

widgets众多, 包括登录页、知识库、学术简历、会议和技术博客等都可以使用widgets构建
可以使用50+ 明亮/黑暗主题, 语言包, 和组件来配置定制漂亮的入门模板
集成了开源的内容管理系统CMS, 编辑内容很容易

主要特性:

Page builder - 从组件和元素构建任何页面
编辑任何内容类型 - 博客文章、出版物、演讲、幻灯片展示、项目等更多类型!
使用Markdown创建内容, 也支持导入Jupyter Book 和RStudio Rmarkdown
插件系统- 全部高度可定制的颜色的字体主题
展示代码和数学公式- 代码高亮和Latex数学公式支持
集成常见页面组件- Google分析、Disqus评论插件、地图、联系表单等!
漂亮的站点- 简单清爽的页面设计
领先的工业级别SEO - 使得网站容易被查询引擎发现和在社交媒体分发
媒体画廊 - 展示图片、视频在可定制的gallery中
移动显示友好 - 站点在移动设备中展示友好舒适
多语言支持 - 15+ 语言包，包括英文、中文、葡萄牙语等
多用户支持-每个作者具有自己的个人资料页面
隐私包-支持GPDR
突出特定 - 生动的动画、视差背景(parallax background)、滚动效果
一键部署 - 不需要服务器、不需要数据库有些特性是Hugo框架和hugo生态带来的，比如一键部署、多语言支持等 wowchemy的大部分特性还是自己特有的

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

内容创作原型

参考Hugo框架中文文档 Hugo Archetypes 原型

Wowchemy archetypes 包括的内容原型有 authors、event、post、project、publication、slides、book、default、home 这比其他主题的原型模板多了很多，当然简单blog主题也没必要有这些，有需要才会使用。

下面是post原型 archetype

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
---
# 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)模式、还可以选择几个预制的样式、

另外可以自己定制样式

show case

课程Georgia State University Andrew Young School of Policy Studies

更多wowchemy案例

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

使用https://wowchemy.com/templates/上链接的模板，可以在netlify一键部署自己的类似站点(您自己的github repository也可以，一键部署)

netlify一键部署的格式, repository要修改成自己netlify可以访问的URL ** https://app.netlify.com/start/deploy?repository=https://github.com/wowchemy/starter-hugo-online-course&stack=cms **

Academic Resume
Researcher
Online course
research group
Blog
Project documentation
hello world

hugo-PaperMod

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

极简设计的 blog主题, PaperMod 基于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实现简单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站点

截图:

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 not working ? 配置查询
References

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

hugoThemes

Hugo社区的主题仓库，所有的提交在hugo社区的主题都在这里:)

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

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

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

本机测试开发环境中，通过git clone、git submodule add，或者下载源码都可以添加主题，如果想部署在服务器上, Netlify不支持git clone方式下载的主题，其他服务器应该没啥问题。

hugo-coder

A minimalist blog theme for hugo.

MIT license

配置

demo

截图如下

Even

MIT License

本站(andbible.com)暂时使用的主题, 入手简单，有中文文档:), 配置还可以参考hexo-theme-even的文档

可定制的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可以单独设置的参数有

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
---
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站点

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站点

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

home page

适合项目

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建站写博客愉快

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

Contents

wowchemy

主要特性:

内容创作原型

主题样式

show case

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

hugo-PaperMod

Features

截图:

FAQ

hugoThemes

hugo-coder

Even

starter-hugo-academic

截图

Hugo-book

Features

截图

hugo-theme-learn

features

Docsy

适合项目

LoveIt

小杰