从 Hexo 的 cactus 主题移植到 Hugo 的个人博客主题
portfolio-hugo-theme-cactus — Hugo 作品集模板
作者 fu4303
基于 Hugo 的个人博客主题,从 Hexo 的 cactus 主题移植而来,提供配色主题、项目列表、社交链接、评论与数学公式等配置项。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
提供 dark、light、white、classic 四种配色主题
支持通过 data 目录下的 yaml/toml/json 文件配置项目列表
社交链接使用 Font Awesome 图标名称配置
评论、MathJax 可全局设置,也可在单篇文章 front matter 中覆盖
代码高亮使用 Hugo 内置语法高亮,分析统计使用 Hugo 内置 analytics 模板
模板详细介绍
这是一个 Hugo 主题,用于搭建个人博客站点,由 @probberechts 的 Hexo 主题 cactus 移植而来。仓库说明中明确标注部分功能仍在开发中,并附有 TODO 列表。
主题通过站点配置文件(config.toml)进行设置。可选项包括:colortheme 提供 dark、light、white、classic 四种配色;css 参数可加载一个或多个自定义样式表,在主主题 CSS 之后加载;菜单通过 [[menu.main]] 定义首页、文章列表、标签、关于等入口。首页可设置 description(支持 Markdown)、mainSection 与 mainSectionTitle,并可选择只显示最近若干篇文章或显示全部,以及是否显示标签概览和项目列表。
项目列表读取 data 目录下的 projects.yaml、toml 或 json 数据文件,未检测到数据文件时不显示该区块。社交链接通过 [[params.social]] 配置,name 需对应 Font Awesome 图标名称。版权信息写入 .Site.Copyright,主题会在头部追加当前年份。
评论默认关闭,需在 params.comments 中启用,目前仅支持 Disqus,需要提供 disqusShortname;也可在单篇文章的 front matter 中用 comments 字段单独控制。代码高亮使用 Hugo 内置的语法高亮配置。分析统计使用 Hugo 内置的 analytics 模板,需填写 googleAnalytics 跟踪 ID,并可通过 googleAnalyticsAsync 切换为异步代码。RSS 默认不生成,需设置 params.rss 为 true。MathJax 可通过 params.mathjax 全局开启,或在单篇文章 front matter 中覆盖。文章归档页可通过 showAllPostsArchive 关闭分页,按时间顺序显示全部文章。
安装方式为将主题克隆到 Hugo 站点的 themes 目录,并在站点配置中把 theme 设为 cactus,随后用 hugo server 本地预览,发布方式参见 Hugo 的托管与部署文档。仓库采用 MIT 许可。
适合你的项目吗?
适用场景
- 搭建以文章列表和标签为主的个人博客
- 在首页展示个人项目清单并链接到外部地址
- 撰写包含数学公式的技术文章并开启 MathJax 渲染
- 为文章接入 Disqus 评论并按篇控制是否显示
适合人群
- 使用 Hugo 构建静态站点的个人博主
- 从 Hexo cactus 主题迁移、希望保留相似版式的用户
- 需要项目列表、社交链接与多种配色切换的博客作者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
将主题克隆到 Hugo 站点的 themes 目录,并在站点配置中设置 theme = "cactus"
- 2
项目列表需在 data 目录创建 projects.yaml、toml 或 json 文件,否则该区块不显示
- 3
启用评论需设置 params.comments.enabled 为 true 并提供 disqusShortname,目前仅支持 Disqus
- 4
RSS 默认不生成,需在 params 中设置 rss = true;MathJax 需设置 mathjax = true
- 5
仓库说明列出 I18n、本地搜索、toc 模板、图库等尚未完成,使用前请留意
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 启用评论功能需先注册 Disqus 账号并获取 shortname,属于第三方外部服务依赖,非主题自带能力。
- 使用分析统计功能需自行提供 Google Analytics 跟踪 ID,依赖外部服务。
- 社交链接的 name 字段需填写 Font Awesome 图标名称,依赖该图标库的命名。
- 仓库明确说明部分功能仍在开发中,I18n、本地搜索、toc 模板、图库等尚未完成,不应视为完整成品。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
Before using disqus, you need to register and get your [disqus shortname](https://help.disqus.com/en/articles/1717111-what-s-a-shortname).
README 原文
Add you tracking id in your site config.
README 原文
The `name` key expects the name of a [Font Awesome icon](https://fontawesome.com/icons?d=gallery&s=brands).
README 原文
https://github.com/fu4303/portfolio-hugo-theme-cactus/blob/main/LICENSEhttps://github.com/fu4303/portfolio-hugo-theme-cactus/blob/main/README.mdSome works are still in progress. See [TODOS](#todos) below.
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 70 / 100
- 技术栈
- Hugo
- 网站类型
- 作品集 · 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2021-07-23
- 截图检查日期
- 2026-10-03
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 73d7a58a1fe58c33ad72fef7224b4bb26320f6b34b686f5c0e9d814a8c825935
2026-10-03T03:04:04.642Z
来源文件 / 仓库## Cactus
A hugo theme for personal blog. Fork from hexo theme [cactus](https://github.com/probberechts/hexo-theme-cactus) created by @probberechts.
[Live demo on github pages](https://www.takuzen.me/hugo-theme-cactus/).
Some works are still in progress. See [TODOS](#todos) below.
## Install
1. clone cactus to your hugo site's `themes` folder.
```
git clone https://github.com/monkeyWzr/hugo-theme-cactus.git themes/cactus
```
2. change your theme to cactus in your site config
```toml
# config.toml
theme = "cactus"
```
3. config your site. See [Config] or a [complete config sample](exampleSite/config.toml)
4. test your site
```
hugo server
```
5. publish your site in your prefered way. See hugo's doc: [Hosting & Deployment](https://gohugo.io/hosting-and-deployment/)
## Config
### Color themes
```toml
[params]
colortheme = "white" # dark, light, white, or classic
```
### Custom CSS
```toml
[params]
css = ["css/custom.css"]
```
You can add multiple custom stylesheets which will be loaded after the main theme css.
For example, the above line will load the CSS-file placed at `/static/css/custom.css`.
### Navigation
```toml
# Main menu which appears below site header.
[[menu.main]]
name = "Home"
url = "/"
weight = 1
[[menu.main]]
name = "All posts"
url = "/posts"
weight = 2
[[menu.main]]
name = "Tags"
url = "/tags"
weight = 3
[[menu.main]]
name = "About"
url = "/about"
weight = 4
```
### Homepage settings
* description: description will be displayed in the homepage. Markdown syntax is supported in the description string.
```toml
[params]
description = "Hugo is a general-purpose website framework. Technically speaking, Hugo is a static site generator. Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content. Since websites are viewed far more often than they are edited, Hugo is designed to provide an optimal viewing experience for your website’s end users and an ideal writing experience for website authors."
```
* set your main section (used as the link for the "writings" title on the homepage)
```toml
[params]
mainSection = "posts"
```
* change the default main section title from Writings, to something else:
```toml
[params]
mainSectionTitle = "Blog"
```
* Show only the 5 most recent posts (default)
```toml
[params]
showAllPostsOnHomePage = false
postsOnHomePage = 5
```
* show all posts
```toml
[params]
showAllPostsOnHomePage = true
postsOnHomePage = 5 # this option will be ignored
```
* show tagsoverview (default) or not
*
```toml
[params]
tagsOverview = true
```
* show projects list (default) or not.
```toml
[params]
showProjectsList = true
projectsUrl = "https://github.com/monkeyWzr"
```
Projects section will not be shown if no data file is detected. See [Projects list](#projects-list) below.
### Projects list
Create your projects data file `data/projects.yaml|toml|json`. Hugo support yaml, toml and json formats.
for former hexo cactus users: please assign your json array to a `list` key.
for example, `data/projects.json`:
```json
{
"list": [
{
"name":"Hexo",
"url":"https://hexo.io/",
"desc":"A fast, simple & powerful blog framework"
},
{
"name":"Font Awesome",
"url":"http://fontawesome.io/",
"desc":"The iconic font and CSS toolkit"
}
]
}
```
### Social media links
```toml
[[params.social]]
name = "github"
link = "https://github.com/monkeyWzr"
[[params.social]]
name = "email"
link = "[email protected]" # no need for "mailto:" at the start
[[params.social]]
name = "linkedin"
link = "https://www.linkedin.com/in/monkeywzr/"
```
The `name` key expects the name of a [Font Awesome icon](https://fontawesome.com/icons?d=gallery&s=brands).
### Copyright
Assign your copy right to `.Site.Copyright`. Cactus will append current year to the head.
TODO: Customizable copyright year
```toml
copyright = "Zeran Wu" # cactus theme will use site title if copyright is not set
```
### Comments
Comments is disabled by default. Enable comments in your `.Site.Params`.
```toml
[params]
[params.comments]
enabled = true
# engine = "disqus" # in progress
```
You can also enable/disable comments per post. in your posts' front matter, add:
```yaml
comments: true
```
The site config is ignored when `comments` option exists in front matter.
The default engine is disqus. **By now only disqus is supported in cactus.** I will add more options sooner or later. See [Comments Alternatives](https://gohugo.io/content-management/comments/#comments-alternatives)
Before using disqus, you need to register and get your [disqus shortname](https://help.disqus.com/en/articles/1717111-what-s-a-shortname). Assign your shortname in `.Site.disqusShortname`, or cactus will use `.Site.Title` by default.
```
disqusShortname = "wzr" # cactus will use site title if not set
```
### highlight
Use hugo's built-in [syntax highlighting](https://gohugo.io/getting-started/configuration-markup#highlight).
default config:
```toml
[markup]
[markup.highlight]
codeFences = true
guessSyntax = false
hl_Lines = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true
style = "monokai"
tabWidth = 4
```
### Analytics
Cactus uses hugo's bulit in [analytics templates](https://gohugo.io/templates/internal#google-analytics)
Add you tracking id in your site config. By default cactus uses synchronous tracking code. You can switch to asynchronous tracking by set `googleAnalyticsAsync` to `true`.
```toml
googleAnalytics = "UA-123-45"
googleAnalyticsAsync = true # not required
```
### RSS
The rss feed is not generated by default. you can enable it in your site config:
```toml
[params]
rss = true
```
The rss link will be `https://example.com/index.xml` assuming your `baseURL` is set to `https://example.com/`
Please also check [Configure RSS](https://gohugo.io/templates/rss/#configure-rss)
### Mathjax
Cactus supports mathjax. Just add `mathjax` option in your site config:
```toml
[params]
mathjax = true # not required
```
You can also enable/disable mathjax per post. In your posts' front matter, add:
```yaml
mathjax: true # or false
```
The site config will be ignored when `mathjax` option exists in front matter.
### Archive
Pagination on posts archive can be disabled to show all posts in chronological order
```toml
[params]
showAllPostsArchive = true # or false (default)
```
## TODOS
- [ ] More comments engines
- [x] RSS
- [ ] I18n
- [x] Analytics
- [ ] Local Search
- [ ] toc template
- [ ] Customizable copyright year
- [ ] gallery
- [ ] expose [mathjax configuration](https://docs.mathjax.org/en/latest/web/configuration.html#web-configuration)
## License
MIT
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

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

Congo
Congo 是一款为 Hugo 设计的现代内容主题,核心定位是让内容本身成为页面焦点。 它基于 Tailwind CSS 3.0 构建,整体布局完全响应式,视觉风格干净且克制,没有多余装饰。
Hugo · 博客

toha
Toha 是一款面向个人作品集场景的 Hugo 主题,以极简设计和响应式布局为核心,适合用来搭建个人主页、作品展示或技术博客。
Hugo · 作品集

hugo-profile
A highly customizable and mobile first Hugo template for personal portfolio and blog.
Hugo · 作品集

hugo-xmin
eXtremely Minimal Hugo theme: about 140 lines of code in total, including HTML and CSS (with no dependencies)
Hugo · 启动器

hugo-theme-gallery
Gallery Theme for Hugo
Hugo · 启动器
