六种预设外观与十四种配色方案,可任意组合
fieldnotes — Hugo 作品集模板
作者 maxfettinger
Fieldnotes 是一个用于个人站点的 Hugo 主题,支持文章与笔记、带地图的旅行记录、照片与视频画廊、数学公式和代码展示。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
从 GeoJSON 路线在 MapTiler 地形图上生成旅行地图
从文件夹生成照片与视频画廊,并在可滑动查看器中打开
首页包含个人照片、问候语、社交资料和自定义卡片
支持 MathJax 数学公式、带复制按钮的代码高亮和响应式图片说明
可自定义预设、配色、CSS 和钩子,无需 fork 主题
模板详细介绍
Fieldnotes 是一个 Hugo 主题,面向个人站点,内容涵盖文章与笔记、带地图和照片画廊的旅行记录、数学公式与代码。README 说明它提供六种预设外观(fieldnotes、minimal、editorial、cinematic、brutalist、terminal)与十四种配色方案,可任意组合;旅行地图基于 GeoJSON 路线并显示在 MapTiler 地形图上;照片和视频画廊从文件夹生成,并在可滑动查看器中打开(使用 dialog-lightbox)。首页包含个人照片、问候语、社交资料链接和一张自定义卡片。数学公式由 MathJax 渲染,代码按配色方案着色并带复制按钮,图片支持响应式与说明文字。主题允许自定义预设、配色、CSS 和钩子,无需 fork。README 还提到 JSON-LD、Open Graph 等搜索引擎数据与访客所见一致,以及对比度通过 WCAG AA。仓库根目录为主题本身,exampleSite/ 为演示站点,docs/ 为使用 Vitrine 构建的文档。演示截图仅说明页面外观存在,不证明具体功能。
适合你的项目吗?
适用场景
- 搭建以文章和笔记为主的个人站点
- 记录旅行路线并附地图与照片画廊
- 发布包含数学公式或代码片段的文章
- 为个人主页添加照片、简介和社交链接
适合人群
- 使用 Hugo 构建个人站点的用户
- 需要旅行地图与照片画廊功能的个人博客作者
- 希望在不 fork 主题的情况下自定义外观的 Hugo 用户
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
需要 Hugo 0.158 或更新版本(extended)
- 2
在 hugo.toml 中通过 module.imports 引入主题,并配置 markup.highlight、goldmark 解析器与 passthrough 相关选项
- 3
执行 hugo mod get github.com/maxfettinger/fieldnotes@latest 后运行 hugo server
- 4
也可按文档将主题添加为 Git submodule
- 5
本地查看演示:hugo server --source exampleSite;构建文档:cd docs && hugo server
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- 旅行地图依赖 MapTiler 的地形图服务,使用该功能可能需要 MapTiler 账户或 API key,并可能受其服务条款与费用约束。
- 需要 Hugo 0.158 或更新版本,且必须使用 extended 版本。
- 图标来自 Feather(MIT),照片查看器为 dialog-lightbox(MIT);这些第三方组件的许可与归属需保留。
- 地图由 MapTiler 提供、数学公式由 MathJax 渲染,属于外部服务/库,其使用条款与费用需自行确认。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
- **Trip maps** from a GeoJSON route on MapTiler's topographic map.
README 原文
Requires Hugo 0.158 or newer (extended). [Create your site](https://fieldnotes.maxfettinger.com/docs/guide/getting-started/create-your-site/)
README 原文
Icons from [Feather](https://feathericons.com/) (MIT). Photo viewer: [dialog-lightbox](https://github.com/maxfettinger/dialog-lightbox)
README 原文
https://raw.githubusercontent.com/maxfettinger/fieldnotes/03eee3f7e8edf4ac92cb68ef7ad94c1f453ba6dc/LICENSEhttps://raw.githubusercontent.com/maxfettinger/fieldnotes/03eee3f7e8edf4ac92cb68ef7ad94c1f453ba6dc/README.md(MIT). Maps: [MapTiler](https://www.maptiler.com/). Maths: [MathJax](https://www.mathjax.org/).
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-21。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 85 / 100
- 技术栈
- Hugo
- 网站类型
- 作品集 · 博客 · 企业官网
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-10-19
- 截图检查日期
- 2026-10-19
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: codex-user-requested-batch-review-20261021 · 2026-10-21
查看当时使用的来源资料
SHA-256: 7cd76a2d1052f6adf5edb0403db2bd1aa96820043bdacb02197889ded76fe5f9
2026-10-19T13:26:17.272Z
来源文件 / 仓库# Fieldnotes
**A Hugo theme for a personal site: posts and notes, trips with maps and photo galleries, maths and code.**
Graph paper and taped cards, or one of five other looks. Write Markdown; Hugo turns it into a fast site with no
server, no database and no build step of its own.
[**Demo**](https://fieldnotes.maxfettinger.com/) · [**Docs**](https://fieldnotes.maxfettinger.com/docs/) ·
[Getting started](https://fieldnotes.maxfettinger.com/docs/guide/getting-started/)

## What's in it
- **Six presets** for how the site is drawn (fieldnotes, minimal, editorial, cinematic, brutalist, terminal) and
**fourteen colour schemes**, any with any.

- **Trip maps** from a GeoJSON route on MapTiler's topographic map.
- **Photo and video galleries** from a folder, opening in a swipeable viewer
([dialog-lightbox](https://github.com/maxfettinger/dialog-lightbox)).
- **A home page** with your photo, a greeting, your profiles and a card for anything you like.
- **Maths** with MathJax, **code** in your scheme's colours with a copy button, responsive images with captions.
- **Your own presets, schemes, CSS and hooks**, without forking the theme.
- Search-engine data (JSON-LD, Open Graph) that matches what visitors see, and contrast that passes WCAG AA.
## Quick start
```sh
hugo new project my-site && cd my-site
hugo mod init github.com/you/my-site
```
Add the theme and the Markdown settings it needs to `hugo.toml`:
```toml
[module]
[[module.imports]]
path = "github.com/maxfettinger/fieldnotes"
[markup.highlight]
noClasses = false
[markup.goldmark.parser]
wrapStandAloneImageWithinParagraph = false
[markup.goldmark.extensions.passthrough]
enable = true
[markup.goldmark.extensions.passthrough.delimiters]
block = [['\[', '\]'], ['$$', '$$']]
inline = [['\(', '\)']]
```
```sh
hugo mod get github.com/maxfettinger/fieldnotes@latest
hugo server
```
Requires Hugo 0.158 or newer (extended). [Create your site](https://fieldnotes.maxfettinger.com/docs/guide/getting-started/create-your-site/)
walks through every step, including adding the theme as a Git submodule instead.
## This repository
| Folder | What it is |
|---|---|
| the root | the theme |
| `exampleSite/` | the [demo](https://fieldnotes.maxfettinger.com/): `hugo server --source exampleSite` |
| `docs/` | the [documentation](https://fieldnotes.maxfettinger.com/docs/), built with [Vitrine](https://github.com/maxfettinger/vitrine): `cd docs && hugo server` |
## Credits
Icons from [Feather](https://feathericons.com/) (MIT). Photo viewer: [dialog-lightbox](https://github.com/maxfettinger/dialog-lightbox)
(MIT). Maps: [MapTiler](https://www.maptiler.com/). Maths: [MathJax](https://www.mathjax.org/).
## Licence
MIT.
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

hugo-PaperMod
PaperMod 是 Hugo 生态里知名度较高的主题之一,定位很明确:给博客和轻量作品集站点提供一套干净、响应式的阅读界面。
Hugo · 作品集

LoveIt
❤️A clean, elegant but advanced blog theme for Hugo 一个简洁、优雅且高效的 Hugo 主题
Hugo · 博客

hugo-coder
A minimalist blog theme for hugo.
Hugo · 博客

blowfish
Personal Website & Blog Theme for Hugo
Hugo · 博客

hugo-paper
🪺 A simple, clean, customizable Hugo theme
Hugo · 博客

hextra
Hextra 是一个 Hugo 主题,定位在文档站与博客之间:既提供侧边栏导航、目录、面包屑、分页这类文档站结构,也能承载博客内容。
Hugo · 文档
