hugo主题博客推荐（aiovtue）

简介

Hugo-theme-aiovtue 是一款开源 Hugo 架构博客项目，是一个完整的博客项目而非单独主题。Fork 克隆后只需修改自己的信息即可直接部署，无需繁杂配置。

开源地址： 点我跳转 hugo-theme-aiovtue 开源地址

网站预览： 点我跳转预览站点

界面展示

网站主页，进入站点后会进入头图部分，可设置多个图片或视频，每次访问都会随机展示，也支持手动切换。

主页文章列表共提供三种样式：卡片布局、单列列表、双列列表。

文档三要素页面：分类、归档、描述页面。

友链页面支持两种布局，同一页面可针对不同分组使用不同样式。

动态背景（网格模式）展示，开启后全站均采用网格背景，关闭则为纯白背景。

更多界面请前往预览站体验。

开源地址

喜欢的话欢迎点个 Star ⭐。

开源地址： 点我跳转 hugo-theme-aiovtue 开源地址

网站预览： 点我跳转预览站点

自定义教程

文章位置

路径：content/posts/。每篇文章对应一个 .md 文件，文件名即 URL Slug，例如：

content/posts/memos-web.md
→ /posts/memos-web/

新建文章

---
title: "文章标题"
description: "摘要，用于 SEO 和分享卡片"
date: 2026-06-20
lastmod: 2026-06-20
cover: "https://example.com/cover.jpg"

categories:
  - 分类名

tags:
  - 标签一
  - 标签二

weight: 1
---

正文使用 Markdown 编写。

![说明](https://example.com/image.jpg)

保存后执行：

npm run dev

即可本地预览。

编辑 / 删除文章

• 编辑：修改对应的 content/posts/*.md
• 删除：删除对应文件后执行 npm run build

Front Matter 字段说明

字段	必填	说明
title	是	文章标题
date	是	发布日期
description	建议	摘要
cover	建议	封面图
categories	建议	分类
tags	建议	标签
lastmod	否	最后修改时间
weight	否	排序权重

页面位置

独立页面

文件	访问路径	layout	说明
about.md	/about/	about	关于页
links.md	/links/	links	友链页
comment.md	/comment/	comment	留言页
search.md	/search/	search	搜索页

关于页：修改 content/about.md

友链：修改 data/links.yaml

栏目页面

目录	访问路径	说明
content/archives/_index.md	/archives/	归档
content/categories/_index.md	/categories/	分类
content/tags/_index.md	/tags/	标签
content/gallery/_index.md	/gallery/	相册

相册

content/gallery/
├── _index.md
├── bizhi/index.md
└── jiamio/index.md

新增相册步骤：

1. 创建 content/gallery/新相册/index.md
2. 在 content/gallery/_index.md 的 albums 中加入对应名称

相册 Front Matter：

---
title: "相册标题"
date: 2025-08-18
cover: "https://example.com/cover.jpg"
desc: "相册描述"
location: "重庆"

encrypted: false
password: "your-password"

source: local

tags:
  - 壁纸

photos:
  - url: "https://example.com/photo1.jpg"
    date: 2026-06-01
---

友链公告

themes/aiovtue/layouts/partials/friend-link-notice.html

评论系统

评论会显示在文章、友链、留言页面底部，通过 hugo.toml 配置。

选择评论系统

[params.comment]
provider = "waline"

Waline

1. 创建 Waline 服务获取 serverURL
2. 配置：

[params.waline]
serverURL = "https://你的地址"
placeholder = "分享你的想法..."

Twikoo

[params.twikoo]
envId = "https://你的-twikoo-地址/"

关闭评论

comment: false

站点配置

修改内容	对应文件
站点信息、导航、Hero、评论、页脚	hugo.toml
友链	data/links.yaml
首页图片	static/hero/
留言信封图	static/envelope/
网站图标	static/favicon.png
主题样式	themes/aiovtue/

部署前请确认： baseURL 与线上域名一致。

本地开发

cd hugo-theme-aiovtue

pnpm install

pnpm dev

# http://localhost:1313

• 修改文章、页面：保存即可刷新
• 修改 hugo.toml：自动热更新
• Ctrl + C：停止开发服务器

本地构建

pnpm build

构建结果位于 public/。

本地预览：

npx --yes serve public

Cloudflare Pages 部署

1. 推送项目到 GitHub/GitLab
2. Cloudflare Pages → Connect to Git
3. 配置：

设置项	值
Framework preset	None
Build command	npm run build
Output directory	public

4. 部署成功后获得 *.pages.dev
5. 绑定自定义域名
6. 确认 baseURL 正确后重新部署

Vercel 部署

直接选择 Hugo 即可，如失败可手动配置：

• Build Command：npm run build
• Output Directory：public

Netlify 部署

同样选择 Hugo 即可，如失败则：

• Build Command：npm run build
• Output Directory：public

无论 Cloudflare、Vercel 还是 Netlify，本质上都是执行构建命令并发布 public 目录。

常用命令

pnpm dev      # 本地开发
pnpm build    # 构建用于部署