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

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

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

GitHub上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 原型

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也可以,一键部署)

  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扩展而来, 提供了更多特性.

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

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