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/

新建文章

在 content/posts/ 下新建 my-new-post.md：

---
title: "文章标题"
description: "摘要，用于 SEO 和分享卡片"
date: 2026-06-20
lastmod: 2026-06-20          # 可选，最后修改时间
cover: "https://example.com/cover.jpg"   # 封面图 URL
categories:
  - 分类名
tags:
  - 标签一
  - 标签二
weight: 1                     # 可选，越小越靠前（置顶用）
---

正文使用 **Markdown** 书写。

支持代码块、图片、表格等。图片可写：

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

保存后，本地 npm run dev 即可在浏览器预览。

编辑 / 删除文章

• 编辑： 直接改对应的 content/posts/*.md
• 删除： 删除该 .md 文件，然后执行 npm run build（会清理 public/ 中的旧页面）

Front Matter 说明

页面位置

Hugo 中「页面」分两类：

独立页面（单文件）

位于 content/ 根目录，通过 front matter 的 layout 指定模板：

编辑关于页： 改 content/about.md 的 Markdown 正文即可。 编辑友链： 改 data/links.yaml（不是 links.md）。

栏目 / 列表页（目录 + _index.md）

分类页、标签详情页由 Hugo 根据文章 front matter 自动生成，无需手动创建。

相册（特殊页面）

content/gallery/
├── _index.md          # 相册列表（albums 字段控制显示哪些相册）
├── bizhi/index.md     # 相册「一些壁纸」→ /gallery/bizhi/
└── jiamio/index.md    # 相册「秘密哦」→ /gallery/jiamio/

新建相册：

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          # true 时启用密码门
password: "your-password" # encrypted 为 true 时填写
source: local
tags:
  - 壁纸
photos:
  - url: "https://example.com/photo1.jpg"
    date: 2026-6-1
  - url: "https://example.com/photo2.jpg"
    date: 2026-5-20
---

友链（特殊页面）

友链公告文件位置：themes/aiovtue/layouts/partials/friend-link-notice.html

评论系统

评论出现在文章详情页、友链页、留言页底部，在 hugo.toml 中配置。

选择评论服务

[params.comment]
  provider = 'waline'   # waline | twikoo

Waline

1. 在 Waline 或托管平台（如 HouLang 评论服务 文档所列）创建站点，获得 serverURL。
2. 填入 hugo.toml：

[params.waline]
  # Waline 服务端地址（创建应用后获得，末尾不要加 /）
  serverURL = 'https://你的地址'
  placeholder = '分享你的想法...'   # 评论框占位文字（可选）

3. 保存后重新构建部署

Twikoo

若改 Twikoo，将 provider 设为 twikoo 并配置：

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

关闭单篇文章评论

在文章 front matter 中加：

comment: false

站点配置

修改 hugo.toml 后，开发服务器会自动热重载；改 static/ 文件后刷新浏览器即可。 重要： 部署前确认 hugo.toml 顶部 baseURL 与线上域名一致

本地开发与测试

cd hugo-theme-aiovtue

# 安装依赖（管理员运行）
pnpm install

# 启动网页
pnpm dev

# 浏览器打开
# http://localhost:1313

常用操作：

• 改文章 / 页面 → 保存后浏览器刷新
• 改 hugo.toml / data/links.yaml → 自动生效
• 按 Ctrl+C 停止服务器

本地构建（模拟上线产物）

pnpm build

构建结果在 public/ 目录。--cleanDestinationDir 会先清空旧文件，避免已删文章残留。

本地预览构建结果（可选）：

npx --yes serve public
# 或任意静态文件服务器指向 public/

云端部署（Cloudflare Pages）

1. 将 hugo-blog/ 推送到 GitHub / GitLab 等
2. 登录 Cloudflare Dashboard → Workers & Pages → Create → Pages → Connect to Git
3. 选择仓库，配置构建设置：

4. 保存并部署。首次成功后获得 *.pages.dev 预览地址。

5. 绑定自定义域名： Pages 项目 → Custom domains → 添加你的域名，按提示在 Cloudflare DNS 添加 CNAME。

6. 确认 hugo.toml 中 baseURL 与最终访问域名一致，改完后重新部署。

云端部署（vercel）

直接选择hugo即可，依旧配置好了，正常会自己跳出来 vercel新建项目，选择连接github，选择本项目，配置界面直接选hugo即可，如果失败的话，可以手动选择构建命令为npm run build, 输出目录public, 如何直接部署即可

云端部署（netlify）

直接选择hugo即可，依旧配置好了，正常会自己跳出来 netlify新建项目，选择连接github，选择本项目，配置界面直接选hugo即可，如果失败的话，可以手动选择构建命令为npm run build, 输出目录public, 然后直接部署即可 其实都是一样的啦，要么直接选hugo预设，要么手动输入构建命令和输出目录，一通百通~

常用命令速查

pnpm dev     # 本地开发预览
pnpm build   # 构建到 public/（部署用）