在完成第一篇文章的发布后，趁热打铁记录下 FixIt 主题的深度定制备忘，重点解决内容组织架构与导航体验。

1. 内容目录架构：从逻辑到物理组织

为了方便管理 9 年来的技术沉淀，我决定不依赖 Hugo 的扁平化展示，而是通过文件夹在物理层面进行分类，将其划分为 “项目实战” 与 “技术随笔” 两大板块。

项目实战 (Projects)

在 content/projects/ 目录下，采用“一项目一文件夹”的结构。每个文件夹内放置 _index.md 标识该板块为一个 Section。

  • 路径示例：content/projects/mole-client/_index.md
  • 配置内容：
    +++
title = "Mole 客户端 (frp管理)"
layout = "section"
draft = false
+++
  • 注意：在父级 projects/ 下也要放置一个 _index.md 作为项目总列表。

技术随笔 (Posts)

日常记录存放于 content/posts/。不需要 _index.md，直接通过文章开头的 Front Matter 进行分类。

  • 示例 Front Matter：
    categories: ["deploy"] # 将分类设为 deploy，Hugo 会自动将其归档至对应分类页

2. 导航菜单配置：构建多级下拉菜单

在 hugo.toml 中，通过 identifier 和 parent 的配合，我为“技术笔记”板块设计了下拉菜单，使导航更具条理性。

[menu]
  # 首页入口
  [[menu.main]]
    identifier = "home"
    name = "首页"
    url = "/"
    pre = '<i class="fa-solid fa-home fa-fw"></i>'
    weight = 1

  # --- 技术笔记下拉菜单 ---
  # 1. 父级入口：点击不跳转，仅用于展开子项
  [[menu.main]]
    identifier = "notes"
    name = "技术笔记"
    url = "#" 
    pre = '<i class="fa-solid fa-book fa-fw"></i>'
    weight = 2

  # 2. 子菜单：小程序
  [[menu.main]]
    parent = "notes"
    identifier = "mp"
    name = "小程序"
    url = "/categories/mp/"
    pre = '<i class="fa-solid fa-mobile-screen-button fa-fw"></i>'
    weight = 1

  # 3. 子菜单：Go 语言
  [[menu.main]]
    parent = "notes"
    identifier = "go"
    name = "Go 语言"
    url = "/categories/go/"
    pre = '<i class="fa-brands fa-golang fa-fw"></i>'
    weight = 2

  # 4. 子菜单：Rust 语言
  [[menu.main]]
    parent = "notes"
    identifier = "rust"
    name = "Rust 语言"
    url = "/categories/rust/"
    pre = '<i class="fa-brands fa-rust fa-fw"></i>'
    weight = 3

  # 5. 子菜单：部署运维
  [[menu.main]]
    parent = "notes"
    identifier = "deploy"
    name = "部署实战"
    url = "/categories/deploy/"
    pre = '<i class="fa-solid fa-cloud-arrow-up fa-fw"></i>'
    weight = 4

  # --- 其他一级菜单 ---
  [[menu.main]]
    identifier = "projects"
    name = "项目实战"
    url = "/projects/"
    pre = '<i class="fa-solid fa-layer-group fa-fw"></i>'  
    weight = 10

  [[menu.main]]
    identifier = "about"
    name = "关于我"
    url = "/about/"
    pre = '<i class="fa-solid fa-user-circle fa-fw"></i>'
    weight = 20

作为“豆豆技术站”的标志，我选择了 Ostrich 图标。

  1. 资源准备：将 favicon.ico 和 ostrich.png 放置在项目的 static/ 根目录下。
  2. 配置文件修改：在 hugo.toml 中定位到页眉配置：
[params]
  [params.header]
    [params.header.title]
      # 引用 static/ 目录下的图片地址
      logo = "/ostrich.png"
      name = "豆豆技术站"

结语

通过以上配置，网站的骨架已经完全搭建完毕。Hugo 的强大之处在于，一旦你制定了规则（如目录结构和分类逻辑），剩下的工作就只需专注于内容的产出。接下来，我将按照这个既定的“航线”，持续填充更多关于 Go 与 Rust 的技术深度内容。