hugo主题更换

好,这一步我带你一步到位装好 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

打开:

👉 http://localhost:1313/

🎉 你应该已经看到一个完全不同风格的网站了


🚨 如果样式没变(常见问题)

❌ 还是旧主题

👉 检查:

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入口

直接从“博客”升级成“个人平台”。

Built with Hugo
Theme Stack designed by Jimmy