基于 Hugo 官方 Ananke 主题的个人修改版,面向作者自己的博客
ananke-mod — Hugo 博客模板
作者 denmch
基于 Hugo 的 Ananke 主题个人修改版,提供响应式博客布局、联系表单与 RSS 发现等基础功能。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
响应式布局与无障碍支持,包含联系表单、RSS 发现和按环境变化的 robots.txt
使用 Tachyons CSS 库,可通过类名调整设计而不改动原始 CSS
内置元数据与 Google Analytics 模板,并提供分页、分类法、内容视图等 Hugo 功能示例
README 列出待修复项,包括硬编码的 section 链接
模板详细介绍
ananke-mod 是 denmch 在 Hugo 官方 Ananke 主题基础上修改的个人博客主题,仓库描述明确说明其用途是服务作者自己的博客。它沿用 Ananke 的编辑型博客结构,包含响应式布局、无障碍支持、联系表单、按环境变化的 robots.txt、元数据与 Google Analytics 内部模板以及 RSS 发现等特性。
主题使用 Tachyons CSS 库,可通过修改 HTML 中的类名调整外观,无需改动原始 CSS 文件。README 还列出分页、分类法、archetypes、自定义 shortcode、Hugo 内置菜单、内容视图、局部模板等 Hugo 功能的示例用法,并说明可通过 front matter 的 featured_image 设置页面头图,或改用 Tachyons 的背景色类。
作为个人修改版,它并未声明与上游 Ananke 保持同步,README 中的 TODO 也提到存在硬编码的 section 链接待修复。联系表单依赖 Formspree 作为邮件代理,需要自行配置 action 链接,其额度与费用需单独核对。仓库更新停留在 2018 年,采用 MIT 许可。
适合你的项目吗?
适用场景
- 搭建以文章列表和单页为主的个人 Hugo 博客
- 需要在页面或文章中通过 featured_image 设置头图的站点
- 希望用 Tachyons 类名快速调整配色与字体而不重写 CSS 的项目
- 需要示例参考 Hugo 分页、分类法、archetypes 与自定义 shortcode 用法的场景
适合人群
- 使用 Hugo 并希望从现成博客主题起步的个人博主
- 接受在他人修改版基础上继续调整、而非直接使用上游主题的开发者
- 需要联系表单并愿意自行接入 Formspree 的用户
- 希望以类名方式调整样式、不深入修改 CSS 的前端使用者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
将主题克隆到 Hugo 站点的 themes 目录,并参考 exampleSite 中的 config.toml 配置
- 2
使用 exampleSite 配置时可能需要删除 themesDir = "../.." 这一行
- 3
联系表单需在 Formspree 获取 action 链接并填入 form-contact shortcode
- 4
通过 front matter 的 featured_image 设置头图,或用 background_color_class 指定 Tachyons 背景色类
- 5
本地预览可运行 hugo server,并访问 localhost:1313
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 联系表单功能依赖第三方服务 Formspree 作为邮件代理,需自行注册并在 Formspree 获取 action 链接填入 shortcode;免费额度为每月最多一千封邮件,超出后可能产生费用或需付费升级,该外部服务的可用性与收费需单独核对。
- 主题样式依赖第三方 Tachyons CSS 库,其自身许可与主题的 MIT 许可相互独立,使用或再分发时需另行确认该库的授权条件。
- 内置 Google Analytics 模板,启用分析功能需自行提供 Google Analytics 账号与跟踪 ID,属于外部服务依赖,可能涉及 Google 的服务条款与数据处理要求。
- README 提及 Formspree 表单服务;真实提交需配置服务端点,其使用额度与费用需单独核对。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
One option is to use [formspree.io](//formspree.io/) as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges.
README 原文
This theme uses the "Tachyons" CSS library.
README 原文
https://github.com/denmch/ananke-mod/blob/master/LICENSE.mdhttps://github.com/denmch/ananke-mod/blob/master/README.mdInternal templates for meta data and google analytics
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 56 / 100
- 技术栈
- Hugo
- 网站类型
- 博客
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2018-03-12
- 截图检查日期
- 2026-10-02
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: cf390811136a94a0ab79cadceff56922d3813a32b127b633e595e7e70e6d781a
2026-10-02T17:18:24.207Z
来源文件 / 仓库# Ananke, A theme for [Hugo](http://gohugo.io/), a framework for building websites.
The intent of this theme is to provide a solid starting place for Hugo sites with basic features and include best practices for performance, accessibility, and rapid development.

[DEMO](https://gohugo-ananke-theme-demo.netlify.com/)
Features
- Responsive
- Accessible
- Contact form
- Custom Robots.txt (changes values based on environment)
- Internal templates for meta data and google analytics
- RSS Discovery
Also includes examples of Hugo Features or Functions:
- Pagination (internal template)
- Taxonomies
- Archetypes
- Custom shortcode
- Hugo built-in menu
- `with`
- `HUGO_ENV`
- `first`
- `after`
- `sort`
- Site LanguageCode
- `where`
- Content Views
- Partials
- Template layouts (type "post" uses a special list template, single template, and a content view)
- Tags
- `len`
- Conditionals
- `ge` (greater than or equal to)
- `.Site.Params.mainSections` to avoid hard-coding "blog," etc. [[release note](https://github.com/spf13/hugo/blob/66ec6305f6cb450ddf9c489854146bac02f7dca1/docs/content/meta/release-notes.md#enhancements)]
This theme uses the "Tachyons" CSS library. This will allow you to manipulate the design of the theme by changing class names in HTML without touching the original CSS files. For more information see the [Tachyons website](http://tachyons.io/).
## Installation
Inside the folder of your Hugo site run:
$ cd themes
$ git clone https://github.com/budparr/gohugo-theme-ananke.git
For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo.
## Getting started
After installing the theme successfully it requires a just a few more steps to get your site running.
### The config file
Take a look inside the [`exampleSite`](https://github.com/budparr/gohugo-theme-ananke/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](https://github.com/budparr/gohugo-theme-ananke/blob/master/exampleSite/config.toml). To use it, copy the [`config.toml`](https://github.com/budparr/gohugo-theme-ananke/blob/master/exampleSite/config.toml) in the root folder of your Hugo site. Feel free to change the strings in this theme.
You may need to delete the line: `themesDir = "../.."`
### Change the hero background
For any page or post you can add a featured image by including the local path in front matter (see content in the ExampleSite folder for examples): `featured_image: '/images/gohugo-default-sample-hero-image.jpg'`
You don't need an image though. The default background color is black, but you can change the color, by changing the default color class in the config.toml file. Choose a background color from any on the [Tachyons](http://tachyons.io/docs/themes/skins/) library site, and preface it with "bg-"
example: `background_color_class = "bg-blue"` or `background_color_class = "bg-gray"`
### Activate the contact form
This theme includes a shortcode for a contact form that you can add to any page (there is an example on the contact page in the exampleSite folder). One option is to use [formspree.io](//formspree.io/) as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Visit the Formspree site to get the "action" link and add it to your shortcode like this:
```
{{< form-contact action="http://formspree.io/[email protected]" >}}
```
### Update font or body classes
The theme is set, by default, to use a near-white background color and the "Avenir" or serif typeface. You can change these in your config file with the `body_classes` parameter, like this:
```
[params]
body_classes = "avenir bg-near-white"
```
which will give you a body class like this:
```
<body class="avenir bg-near-white">
```
You can find a list of available typefaces [here](https://github.com/tachyons-css/tachyons/blob/v4.7.0/src/_font-family.css).
And a list of background colors [here](https://github.com/tachyons-css/tachyons/blob/v4.7.0/src/_skins.css#L96).
_n.b. in future versions we will likely separate the typeface and other body classes._
### Nearly finished
In order to see your site in action, run Hugo's built-in local server.
`$ hugo server`
Now enter [`localhost:1313`](http://localhost:1313/) in the address bar of your browser.
## Contributing
If you find a bug or have an idea for a feature, feel free to use the [issue tracker](https://github.com/budparr/gohugo-theme-ananke/issues) to let me know.
TODO:
- fix hard-coded link to [section](https://github.com/budparr/gohugo-theme-ananke/blob/master/layouts/index.html#L32)
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

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 · 文档
