靜態(tài)網(wǎng)站越來越流行，由于網(wǎng)站被訪問的次數(shù)遠(yuǎn)遠(yuǎn)多于它們被編輯的次數(shù),??
因此靜態(tài)網(wǎng)站提供給網(wǎng)站訪問者最佳訪問體驗(yàn)同時(shí)也給網(wǎng)站作者提供了理想的寫作經(jīng)驗(yàn).
?Hugo是靜態(tài)網(wǎng)站生成框架中最快最好的一個(gè)。
對于偏愛文本編輯器的coder，更希望手工敲代碼構(gòu)建他們自己網(wǎng)站的作者，
構(gòu)建博客、創(chuàng)建公司站點(diǎn)、檔案站點(diǎn)、文檔站點(diǎn)、一個(gè)單獨(dú)的登錄頁或者具有好幾千頁面的網(wǎng)站的工作者.? Hugo都是理想的網(wǎng)站創(chuàng)建工具、具有幾乎瞬時(shí)的構(gòu)建時(shí)間、可以在任何網(wǎng)站變化的時(shí)刻重建.
對于大部分作者來說，構(gòu)建博客、個(gè)人簡歷、公司站點(diǎn)，Hugo 主題展示頁面都有不少相應(yīng)的主題，不過挑選起來需要些時(shí)間。
GitHub上[Hugo theme](https://github.com/topics/hugo-theme)的標(biāo)簽頁內(nèi)，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個(gè)star超過1K的主題（嗯 第6個(gè)和第1個(gè)基本相同, 第三個(gè)是hugo的模版庫, 不算一個(gè)）
## wowchemy
MIT License
**the website builder for Hugo**
有超過75萬的站點(diǎn)使用了wowchemy主題, 可以輕松創(chuàng)建面向未來的站點(diǎn)
1. widgets眾多, 包括登錄頁、知識庫、學(xué)術(shù)簡歷、會議和技術(shù)博客等都可以使用widgets構(gòu)建
2. 可以使用50+ 明亮/黑暗主題, 語言包, 和組件來配置定制漂亮的入門模板
3. 集成了開源的內(nèi)容管理系統(tǒng)CMS, 編輯內(nèi)容很容易
### 主要特性:
- Page builder - 從組件和元素構(gòu)建任何頁面
- 編輯任何內(nèi)容類型 - 博客文章、出版物、演講、幻燈片展示、項(xiàng)目等更多類型!
- 使用Markdown創(chuàng)建內(nèi)容, 也支持導(dǎo)入Jupyter Book 和RStudio Rmarkdown
- 插件系統(tǒng)- 全部高度可定制的顏色的字體主題
- 展示代碼和數(shù)學(xué)公式- 代碼高亮和Latex數(shù)學(xué)公式支持
- 集成常見頁面組件- Google分析、Disqus評論插件、地圖、聯(lián)系表單等!
- 漂亮的站點(diǎn)- 簡單清爽的頁面設(shè)計(jì)
- 領(lǐng)先的工業(yè)級別SEO - 使得網(wǎng)站容易被查詢引擎發(fā)現(xiàn)和在社交媒體分發(fā)
- 媒體畫廊 - 展示圖片、視頻在可定制的gallery中
- 移動顯示友好 - 站點(diǎn)在移動設(shè)備中展示友好舒適
- 多語言支持 - 15+ 語言包，包括英文、中文、葡萄牙語等
- 多用戶支持-每個(gè)作者具有自己的個(gè)人資料頁面
- 隱私包-支持GPDR
- 突出特定 - 生動的動畫、視差背景(parallax background)、滾動效果
- 一鍵部署 - 不需要服務(wù)器、不需要數(shù)據(jù)庫
有些特性是Hugo框架和hugo生態(tài)帶來的，比如一鍵部署、多語言支持等
wowchemy的大部分特性還是自己特有的
具體再看看源碼、展示站點(diǎn)來發(fā)現(xiàn)些亮點(diǎn)
### 內(nèi)容創(chuàng)作原型?
參考[Hugo中文文檔 Hugo Archetypes 原型](https://www.andbible.com/content-management/archetypes/)
Wowchemy [archetypes](https://github.com/wowchemy/wowchemy-hugo-modules/tree/main/wowchemy/archetypes) 包括的內(nèi)容原型有
authors、event、post、project、publication、slides、book、default、home
這比其他主題的原型模版多了很多，當(dāng)然簡單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 }}"? 標(biāo)題
subtitle: ""? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 副標(biāo)題
summary: ""? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 摘要
authors: []? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 作者
tags: []? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 標(biāo)簽
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).? ? ? ? ? ? ? ? ? ? ? ? ? 關(guān)聯(lián)的項(xiàng)目
#? 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內(nèi)置了day(light)和night(dark)模式、
還可以選擇幾個(gè)預(yù)制的樣式、
另外可以自己[定制樣式](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/)
### 預(yù)制的template, 一鍵部署在netlify上
**使用https://wowchemy.com/templates/上鏈接的模版，
可以在netlify一鍵部署自己的類似站點(diǎn)(您自己的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)
極簡設(shè)計(jì)的 blog主題, PaperMod 基于[hugo-paper](https://github.com/nanxiaobei/hugo-paper)擴(kuò)展而來,? 提供了更多特性.
### 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)? ? ##主題樣式轉(zhuǎn)換開關(guān)?
- Archives Layout? ? ##為檔案而設(shè)計(jì)的布局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)實(shí)現(xiàn)簡單search
- Draft Page indication? ? ##是否草案
- Post Cover Image? ? ##post主題圖
- Share Buttons on post? ? ## 分享按鈕
- Show post reading time? ? ## 顯示閱讀時(shí)間
- Show Table of Contents (Toc) on blog post? ? ##顯示文章目錄
- BreadCrumb Navigation? ? ##面包屑導(dǎo)航
- Edit Link for Posts? ? ##文章編輯的鏈接
- Other Posts suggestion below a post? ? ##相關(guān)的文章
- Code Copy Button? ? ##代碼copy按鈕
- Multiple Authors? ? ##多個(gè)作者
- Comments? ? ##評論插件
- AccessKeys? ? ##快捷鍵
- Enhanced SEO? ? ##增強(qiáng)的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統(tǒng)計(jì)
? - Syntax highlighting? ? ? ? ? ? ? ? ## 格式加亮
? - RSS feeds? ? ? ? ? ? ? ? ? ? ? ? ? ## RSS feeds
[demo站點(diǎn)](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 啟用社交元數(shù)據(jù)和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
對于主要是記錄分享的技術(shù)人員博客，推薦這個(gè)極簡主題，可以試試
## hugoThemes
[Hugo社區(qū)的主題倉庫](https://github.com/gohugoio/hugoThemes)，所有的提交在hugo社區(qū)的主題都在這里:)
如果想安裝所有主題測試用, 使用下面命令在工作目錄中clone整個(gè)代碼庫
，
```
git clone --depth 1 --recursive https://github.com/gohugoio/hugoThemes.git themes
```
在自己項(xiàng)目中使用theme, 請參考[Hugo中文文檔2 Mac系統(tǒng) Hugo快速開始
](https://www.andbible.com/post/hugo-quick-start/).
本機(jī)測試開發(fā)環(huán)境中，通過git clone、git submodule add，或者下載源碼都可以添加主題，
如果想部署在服務(wù)器上, **Github、Netlify不支持git clone方式下載的主題**，其他服務(wù)器應(yīng)該沒啥問題。
## 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)暫時(shí)使用的主題, 入手簡單， 有中文文檔:),
配置還可以參考[hexo-theme-even](https://github.com/ahonn/hexo-theme-even/wiki)的文檔
- 可定制的CSS和SCSS
- 可以配置的樣式顏色，5個(gè)內(nèi)置主題顏色(Default|Mint Green|Cobalt Blue|Hot Pink|Dark Violet)
- Draft 草案支持?
- Summary? 文章摘要生成
- Share Buttons on post? ? ## 分享按鈕
- Show post reading time? ? ## 顯示閱讀時(shí)間
- Show Table of Contents? ? ##顯示文章摘要
- pagination? ? ? ? ? ## 分頁支持
- Comments? ? ##評論支持
- Multilingual Support? ? ##多語言支持
- mathjax
- Misc? ? ? ? ? ? ? ? ? ?
? - Google Analytics integration? ? ? ? ## Google統(tǒng)計(jì)
? - Syntax highlighting? ? ? ? ? ? ? ? ## 格式加亮
? - RSS feeds? ? ? ? ? ? ? ? ? ? ? ? ? ## RSS feeds
? - Sitemap? ? ?
? - baiduAnalytics
? - baiduPush
? - baiduVerification
? - googleVerification
? - LanguageSelector
? - 輸出RSS Markdown
對于每片post可以單獨(dú)設(shè)置的參數(shù)有
```
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
lastmod: {{ .Date }}
draft: true? ? ? ? ? ? ? ? ? ? ##這個(gè)草案狀態(tài) 發(fā)布需要修改成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.
這是第一個(gè)主題wowchemy對學(xué)術(shù)簡歷需求的特化模版.
### 截圖
## Hugo-book
Hugo documentation theme as simple as plain book(https://github.com/alex-shpak/hugo-book)
MIT License
[demo站點(diǎn)](https://themes.gohugo.io/theme/hugo-book/)
### Features
- Clean simple design? ##干凈簡明設(shè)計(jì)
- Light and Mobile-Friendly ##輕量、移動友好設(shè)計(jì)
- Multi-language support? ? ##多語言支持
- Customisable? ? ? ? ? ? ? ## 可定制?
- Zero initial configuration? ##零初始配置
- File tree menu? ? ? ? ? ? ? ## 文件樹菜單
- Leaf bundle menu? ? ? ? ? ? ## 分支包菜單
- Handy shortcodes? ? ? ? ? ? ##靈巧的短代碼
- Comments support? ? ? ? ? ? ##評論支持
- Simple blog and taxonomy? ? ##簡單的博客和tag實(shí)現(xiàn)
- Primary features work without JavaScript 主要特性不依賴與Javascript
- Dark/Light Mode?
作為wiki、寫書是不錯(cuò)選擇, 簡易的blog實(shí)現(xiàn)可以放棄
### 截圖
## hugo-theme-learn
完全是為文檔編寫展示而設(shè)計(jì)hugo主題,
[demo站點(diǎn)](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/)
### 適合項(xiàng)目
Docsy 特別適合中等到大型的技術(shù)文檔集合, 具有20+的文檔頁面, 多種文檔/頁面類型可能是教程、參考文檔、blog文章、社區(qū)頁面等。如果您的項(xiàng)目只有幾個(gè)文檔頁面，那么Docsy可能是一個(gè)太重量級的方案，可以考慮hugo或者Jekyll的其他主題(比如上面的hugo-book, hugo-theme-learn). 如果您是非常大的文檔項(xiàng)目，docsy的項(xiàng)目結(jié)構(gòu)可能不足以滿足您需求，當(dāng)然您可以使用docsy，估計(jì)需要很多定制工作。
文檔很翔實(shí)(https://www.docsy.dev/docs/), 如何使用主題，添加內(nèi)容，定制站點(diǎn)，多語言支持，預(yù)覽和部署、最佳實(shí)踐都有詳細(xì)說明。
## LoveIt
是一個(gè)簡潔、優(yōu)雅且高效的 Hugo 博客主題?
MIT License?
demo預(yù)覽站點(diǎn) https://hugoloveit.com/zh-cn/?
特性:
性能和 SEO
- 性能優(yōu)化：在 Google PageSpeed Insights 中， 99/100 的移動設(shè)備得分和 100/100 的桌面設(shè)備得分
- 使用基于 JSON-LD 格式 的 SEO SCHEMA 文件進(jìn)行 SEO 優(yōu)化
- 支持 Google Analytics
- 支持 Fathom Analytics
- 支持搜索引擎的網(wǎng)站驗(yàn)證 (Google, Bind, Yandex and Baidu)
- 支持所有第三方庫的 CDN
- 基于 lazysizes 自動轉(zhuǎn)換圖片為懶加載
外觀和布局
- 響應(yīng)式布局
- 淺色/深色 主題模式
- 全局一致的設(shè)計(jì)語言
- 支持分頁
- 易用和自動展開的文章目錄
- 支持多語言和國際化
- 美觀的 CSS 動畫
社交和評論系統(tǒng)
- 支持 Gravatar 頭像
- 支持本地頭像
- 支持多達(dá) 64 種社交鏈接
- 支持多達(dá) 28 種網(wǎng)站分享
- 支持 Disqus 評論系統(tǒng)
- 支持 Gitalk 評論系統(tǒng)
- 支持 Valine 評論系統(tǒng)
- 支持 Facebook 評論系統(tǒng)
- 支持 Telegram comments 評論系統(tǒng)
- 支持 Commento 評論系統(tǒng)
- 支持 Utterances 評論系統(tǒng)
擴(kuò)展功能
- 支持基于 Lunr.js 或 algolia 的搜索
- 支持 Twemoji
- 支持代碼高亮
- 一鍵復(fù)制代碼到剪貼板
- 支持基于 lightgallery.js 的圖片畫廊
- 支持 Font Awesome 圖標(biāo)的擴(kuò)展 Markdown 語法
- 支持上標(biāo)注釋的擴(kuò)展 Markdown 語法
- 支持分?jǐn)?shù)的擴(kuò)展 Markdown 語法
- 支持基于 KaTeX 的數(shù)學(xué)公式
- 支持基于 mermaid 的圖表 shortcode
- 支持基于 ECharts 的交互式數(shù)據(jù)可視化 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標(biāo)簽的hugo主題簡單比較下，希望能節(jié)省大家一點(diǎn)時(shí)間，選出適合自己的備選主題，多試驗(yàn)。
祝您使用Hugo建站寫博客愉快
后續(xù)有其他主題，也會隨時(shí)補(bǔ)充，歡迎大家關(guān)注
