好,这一步我带你一步到位装好 Stack 主题(比 PaperMod 好看很多,适合你现在阶段)👇
🎨 目标主题
👉 Hugo Theme Stack
特点:
- 卡片式 UI(很现代)
- 自带侧边栏
- 支持分类 / 标签 / 目录
- 比 PaperMod 更“像网站”
🚀 安装步骤(一步一步来)
🟢 第一步:进入你的项目
cd D:\projects blog\my-blog
🟢 第二步:下载主题(推荐用 git submodule)
git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/stack
⚠️ 如果你之前装过 PaperMod(建议删掉)
git rm -r themes/PaperMod
git commit -m "remove papermod"
(不删也行,但容易混乱)
🟢 第三步:修改配置文件(关键)
打开:
hugo.toml 或 config.toml
改成:
baseURL = "https://10douaris.top/"
languageCode = "zh-cn"
title = "我的博客"
theme = "stack"
🟢 第四步:加 Stack 推荐配置(直接复制)
👉 在 config 下面加:
[params]
mainSections = ["posts"]
[params.sidebar]
subtitle = "欢迎来到我的网站"
[params.article]
math = false
toc = true
🟢 第五步:启动测试
hugo server -D
打开:
🎉 你应该已经看到一个完全不同风格的网站了
🚨 如果样式没变(常见问题)
❌ 还是旧主题
👉 检查:
theme = "stack"
❌ 主题没拉下来
👉 看有没有:
themes/stack/
❌ Cloudflare 上没更新
👉 push 一下:
git add .
git commit -m "change theme to stack"
git push
🎯 重要:文章路径要对
Stack 默认读:
content/posts/
👉 你的文章要在这里!
🎨 进阶(让它更好看)
你可以改:
✨ 头像
config.toml
加:
[params.sidebar.avatar]
enabled = true
local = true
src = "img/avatar.png"
然后放图片:
static/img/avatar.png
✨ 首页介绍
[params.sidebar]
subtitle = "AI / 编程 / 项目分享"
🧠 给你一个关键认知
👉 Hugo 换主题本质就是:
换 UI 壳,不动内容
你的文章不会丢!
🚀 下一步你可以这样玩
等你装好 Stack,可以继续升级:
👉 做一个:
- 下载专区页面
- AI工具页面
- 项目展示页
⚡ 如果你想更狠一点
你可以说:
👉 “帮我把 Stack 首页改成一个导航门户(像产品网站)”
我可以帮你把:
- 首页 → 导航面板
- 分类 → 卡片展示
- 加 AI入口
直接从“博客”升级成“个人平台”。