简介这几天呢，又开发了一个hugo的主题，参考了一下开源项目Shiro,同时也加入了一些自己的小巧思，制作出了这一块转为记录一生的网站，主要作为记录自己的过去现在以及未来，主题是简约和梦幻，本项目不适合用作发布一些教程之类的的传统博客，仅推荐作为个人站点记叙预览先给大家放出实际demo地址，有兴趣可以去看看行星环：https://www.yybb.us时间轴：https://20030327.xyz下面使用图片进行介绍：首页首先是首页，首页的设计基本是完全参考了 Shiro ，AIOVTUE-雪 觉得他的头图页面和这个博客的主题十分适配，最开始想到做这个其实也是看到它之后才有的想法，使用很大部分都会非常像，那么为什么不直接用它呢，因为要服务器？文章页时间轴然后是文章列表页面，着重介绍的部分就是文章列表页面，因为是以记录和回忆为出发点，因此，没有采用传统的列表或者时间轴排布，当然其实是支持时间轴模式的，可以在配置文件自由设置，先看看时间轴的样式吧行星环是不是感觉和Shiro一模一样，因为就是跟着写的，喜欢的当然也可以选这种模式，不过AIOVTUE-雪想介绍的是下面这个，这个显示效果应该是独一份吧，至少我还没见过类似的样式，AIOVTUE-雪 称他为行星环，顾名思义，就是所有文章显示在行星环上面，每一年会形成一个行星环，如果某一年没有文章则会跳过这一年，年内的每一篇文章都会变成一个运行在行星环上面的星星，鼠标靠近星星会暂停行星环转动，并且弹出预览框，行星环最多会显示十环，也就是十年的文章，超过十年，行星环会开始更替，环会不断变大，然后最外环会消失，最内环会新生一个，如此更替，那么，看看效果吧行星环本身也会转动，视频可能会更清楚吧：行星环特写当然啦，想在这样一个庞然大物寻找想要的文章无异于大海捞针，更别说到时候文章数量上来之后，密密麻麻，更加是异想天开，使用，其实每个行星环都有特写页面，只需要在行星环继续向下滚动，就和放ppt一样，会开始按时间展示每个行星环，上面的星星就是文章，当然，也是会转动的，下面是效果图动态页除却上述页面外，还有传统的文章页面，即按文章列表的样式显示文章，不过更加简约就是了，还有归档，标签这些必不可少的功能都是有的，需要着重介绍的是下面这个，动态页面，独立于文章页面，可以在这里写每日动态，感想等东西，并且，每个动态都支持独立评论，下面是预览效果其他页面就大差不差了，想体验的话还是推荐前往示例站点亲自体验一下
简介简单说一下吧，就是之前的博客使用的是valaxy架构配合sakura主题，后面经过AIOVTUE-雪的一系列魔改才有了如今的模样，怀念的小伙伴可以去这里看看AIOVTUE-valaxy,你会发现其实和现在没什么区别，因为我将他完完全全的在hugo进行了重构，由于是重构，所以整体项目和文件会更加清晰，配置也会更加简单，由于之前是魔改的，导致东一块西一块的，这也是重构的原因之一，另一个重构的原因就是，AIOVTUE-雪很久之前就听说hugo的速度多么多么块，实际体验下来也很震惊，真的很快，就是主题太稀缺了，而且大都不符合AIOVTUE-雪的审美，因此进行了重构，重构后的主题AIOVTUE-雪觉得在hugo的主题里应该也算能排得上号了吧，至少按我的审美是这样的啦~预览一下站点看看站点截图吧（斯~，为什么要让你们在这个站点看这个站点的截图）开源地址先附上开源地址吧Hugo-aiovtue,点击链接fork到自己的仓库之后在修改哦，记得给AIOVTUE-雪点个star哦，谢谢啦~自定义目录结构hugo-blog/ ├── hugo.toml # ★ 主配置（站点信息、导航、Hero、评论、赞助等） ├── data/ │ └── links.yaml # ★ 友链卡片数据 ├── content/ # ★ 所有文章与页面（Markdown） │ ├── posts/ # 博客文章 │ ├── gallery/ # 相册 │ ├── about.md # 关于页 │ ├── links.md # 友链页（壳子，数据在 data/links.yaml） │ ├── comment.md # 留言页 │ ├── search.md # 搜索页 │ ├── archives/ # 归档页 │ ├── categories/ # 分类列表页 │ └── tags/ # 标签列表页 ├── static/ # ★ 原样复制的静态文件（favicon、hero、envelope） ├── themes/aiovtue/ # 主题（一般不改，除非调样式/布局） ├── scripts/ │ ├── build.mjs # 正式构建 │ └── fetch-links-rss.mjs ├── package.json # npm 脚本 └── public/ # 构建输出（自动生成，勿手改，已 gitignore）标 ★ 的是日常最常改动的位置。hugo.toml 和 data/links.yaml 内已写中文注释，可直接打开查看说明文章位置路径： 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 说明字段必填说明title是标题date是发布日期description建议摘要（搜索、OG 分享）cover建议封面图categories建议分类（自动生成分类页）tags建议标签lastmod否最后修改时间weight否排序权重，数字越小越靠前页面位置Hugo 中「页面」分两类：独立页面（单文件）位于 content/ 根目录，通过 front matter 的 layout 指定模板：文件访问路径layout说明about.md/about/about关于页，正文写在文件里links.md/links/links友链页壳子，卡片在 data/links.yamlcomment.md/comment/comment留言页（Waline + 信封动画）search.md/search/search全文搜索页编辑关于页： 改 content/about.md 的 Markdown 正文即可。编辑友链： 改 data/links.yaml（不是 links.md）。栏目 / 列表页（目录 + _index.md）目录访问路径说明content/archives/_index.md/archives/归档（含统计图）content/categories/_index.md/categories/全部分类content/tags/_index.md/tags/全部标签content/gallery/_index.md/gallery/相册列表分类页、标签详情页由 Hugo 根据文章 front matter 自动生成，无需手动创建。相册（特殊页面）content/gallery/ ├── _index.md # 相册列表（albums 字段控制显示哪些相册） ├── bizhi/index.md # 相册「一些壁纸」→ /gallery/bizhi/ └── jiamio/index.md # 相册「秘密哦」→ /gallery/jiamio/新建相册：创建 content/gallery/新相册名/index.md在 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 | twikooWaline在 Waline 或托管平台（如 HouLang 评论服务 文档所列）创建站点，获得 serverURL。填入 hugo.toml：[params.waline] # Waline 服务端地址（创建应用后获得，末尾不要加 /） serverURL = 'https://你的地址' placeholder = '分享你的想法...' # 评论框占位文字（可选）保存后重新构建部署。评论区会随站点 html.dark 类自动切换深浅色。Twikoo若改 Twikoo，将 provider 设为 twikoo 并配置：[params.twikoo] envId = 'https://你的-twikoo-地址/'关闭单篇文章评论在文章 front matter 中加：comment: false站点配置想改什么改哪个文件站点名、域名、导航、Hero、社交、赞助、评论、页脚hugo.toml友链卡片data/links.yaml首页轮播图 / 留言信封图static/hero/、static/envelope/网站图标static/favicon.png主题样式、布局themes/aiovtue/（进阶）修改 hugo.toml 后，开发服务器会自动热重载；改 static/ 文件后刷新浏览器即可。重要： 部署前确认 hugo.toml 顶部 baseURL 与线上域名一致部署教程部署步骤很简单啦，支持cloudflare，vercel，netlify等平台，构建命令使用npm run build，构建目录使用public,其他不变，然后直接点击部署即可好啦，这期就到这里啦，我们下期再见咯~ 记得给AIOVTUE-雪点star哦！