doit修改

I 味道**的口语化教程，写给准备魔改 Hugo 的 DoIt 主题的朋友。重点是：样式修改 + 顶部导航 + SEO 优化。全是我自己改过、试过、线上验证过的，能直接抄走用。

1 标题：我怎么魔改 Hugo 的 DoIt 主题（样式 + 导航栏 + SEO 一步到位）

1.1 前言：为啥要魔改

我一开始选 Hugo 是图它快、静态、能一键部署。但选来选去主题都不太满意，最后用了 DoIt 主题。这个主题颜值确实挺高，功能也挺全，但用着用着，还是有点不爽：

• 顶部导航不够灵活，想加点自己项目链接没地方放
• 样式有点单调，页面信息密度不太适合内容型博客
• SEO 基础还可以，但细节（比如 meta tag、url 路径）得手动补

于是，我动手魔改。

2 1. 顶部导航栏加自定义链接

默认导航只支持 Hugo 配置文件里的 menu 配置，如果你想加点额外链接，比如「关于我」「AI 工具合集」「简历下载」这种，就要改一下配置。

2.1 怎么改？

打开 config/_default/config.toml（或你用的 yaml/json 格式配置文件），加上：

[[menu.main]]
  identifier = "tools"
  name = "工具"
  url = "/tools/"
  weight = 10

[[menu.main]]
  identifier = "about"
  name = "关于我"
  url = "/about/"
  weight = 20

[[menu.main]]
  identifier = "external"
  name = "GitHub"
  url = "https://github.com/你的仓库"
  weight = 30

保存后运行 hugo server，导航栏立马就变了。

✅ 小技巧：weight 决定顺序，数值越小越靠前

3 2. 修改样式（颜色、字体、宽度）

你肯定不想和别人博客长一模一样，DoIt 主题虽然自带一些配色方案，但不够个性。这时候我们就动手改 CSS。

3.1 方法一：快速改内置样式

打开这个文件：

themes/DoIt/assets/css/_custom.scss

比如你要把文章区宽度放大，字体调大：

.content {
  max-width: 960px;
  font-size: 17px;
  line-height: 1.8;
}

h1, h2, h3 {
  font-weight: 700;
}

⚠️ 改这个文件是最推荐的方式，不会影响主题更新。

保存后，重启服务，样式就生效了。

3.2 方法二：定制配色方案

你可以新建一个颜色主题，或者覆盖现有主题色：

在 _variables.scss 中，找到类似：

$primary-color: #3498db;

你可以改成自己喜欢的颜色（比如绿色）：

$primary-color: #4CAF50;

4 3. 做好 SEO 设置（不止是设置 title）

说句实话，DoIt 的 SEO 基础配置是 OK 的，但要真正让 Google/Baidu 收录好、点击高，还得自己动手优化这三块：

4.1 3.1 title 和 description

每篇文章写 Markdown 的时候，都加上 front matter：

---
title: "AI 工具推荐合集"
description: "精选高效的 AI 工具集合，包括图片生成、文本处理、自动脚本等，持续更新。"
keywords: ["AI 工具", "效率", "自动化", "推荐合集"]
---

如果你没写 description，搜索引擎就只能随机抓正文内容了，效果差一大截。

4.2 3.2 自定义 URL

比如你这篇文章标题是 “如何部署 Ollama”，默认 URL 可能长成这样：

/posts/2025/06/ollama 部署教程/

很不友好。

你可以这样写：

url: "/ollama-local-deploy/"

不仅简洁、利于分享，也更利于 SEO。

4.3 3.3 设置 robots.txt、sitemap.xml

在 config.toml 里加：

enableRobotsTXT = true

Hugo 会自动生成 robots.txt 和 sitemap.xml。

你还可以配置 baseURL，不然 sitemap 默认是 localhost：

baseURL = "https://你的域名.com/"

5 4. 额外提示：让页面更轻、更快

DoIt 默认加载了很多 JS、字体、图标，虽然很炫，但如果你想让博客更快加载，可以干掉一些不必要的内容：

[params]
  disableFingerprinting = true    # 禁用 hash 后缀
  disableThemeSwitcher = true     # 禁用暗色模式切换按钮

如果你不想显示最后更新日期：

[params.page]
  showDate = true
  showLastMod = false

6 总结：我的 DoIt 魔改清单

很多人问：我改了之后还能更新主题吗？

答案是：只要你只改了 _custom.scss 和 config.toml，不会影响主题主干，更新是安全的。