Hugo博客搭建教程（三）：内容完善与页面配置

前面两篇把基础的站点和主题搞定了，这篇继续完善内容，主要是创建一些必要的页面，配置首页信息，添加图片什么的。

创建重要页面

创建关于页面

创建关于页面文件：
```
hugo new about.md
```

编辑关于页面：打开 content\about.md，替换内容：

+++
title = "关于我"
date = 2025-01-05T00:00:00+08:00
draft = false
showToc = false
+++

## 👋 你好，我是 Yimi

欢迎来到我的小站！这里是我记录学习、分享思考的地方。

### 🎯 关于这个博客

这个博客主要分享：
- 💻 技术学习笔记和心得
- 📚 读书感悟和知识总结  
- 🌱 生活感悟和随想杂谈
- 🔧 实用工具和资源推荐

### 📫 联系方式

- 📧 邮箱：hdxiaoke@126.com
- 💬 QQ群：726049236
- 🌐 博客：https://你的域名.com

### 🚀 技术栈

本博客使用以下技术构建：
- **Hugo**：静态网站生成器
- **PaperMod**：简洁优雅的主题
- **Markdown**：内容编写格式

感谢你的访问，希望我的分享对你有所帮助！

💡 编辑说明：使用文本编辑器打开about.md文件，替换为上述内容。这个页面将成为你的个人介绍页面，可以根据实际情况修改内容。

创建归档页面

创建归档页面：
```
hugo new archives.md
```

编辑归档页面：打开 content\archives.md：

+++
title = "文章归档"
layout = "archives"
url = "/archives/"
summary = "archives"
+++

创建搜索页面

创建搜索页面：
```
hugo new search.md
```
编辑搜索页面：打开 content\search.md：
```
+++
title = "搜索"
layout = "search"
+++
```
💡 文件结构：现在content目录应该包含about.md、archives.md、search.md等页面文件，以及posts文件夹。这些文件构成了网站的基本页面结构。

🎨 第二步：配置首页欢迎信息

编辑配置文件

打开配置文件：编辑 hugo.toml

添加首页配置：在 [params] 部分添加：

# 首页配置
homeInfoParams.Title = "欢迎来到 Yimi小站 "
homeInfoParams.Content = """
这里记录我的技术学习、生活感悟和随想杂谈

- **Yimi小站** 致力于分享有价值的技术内容和生活思考
- 欢迎通过社交媒体与我交流，分享你的想法和建议
- 持续学习，持续分享，一起成长进步
- 探索技术的深度，感受生活的温度
"""

# 首页布局优化
profileMode.enabled = false

完善菜单配置：更新菜单部分：

# 菜单配置
[[menu.main]]
  identifier = "home"
  name = "首页"
  url = "/"
  weight = 10

[[menu.main]]
  identifier = "posts"
  name = "文章"
  url = "/posts/"
  weight = 20

[[menu.main]]
  identifier = "archives"
  name = "归档"
  url = "/archives/"
  weight = 30

[[menu.main]]
  identifier = "tags"
  name = "标签"
  url = "/tags/"
  weight = 40

[[menu.main]]
  identifier = "search"
  name = "搜索"
  url = "/search/"
  weight = 45

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

💡 配置更新：在hugo.toml文件中添加首页欢迎信息和完整的菜单配置。注意保持正确的TOML格式，特别是引号和缩进。

🖼️ 第三步：添加图片资源

创建图片目录

创建静态资源目录：
```
mkdir static\images
```

目录结构：

static\
└── images\
    ├── favicon.ico      # 网站图标
    ├── avatar.png       # 头像图片
    └── banner.jpg       # 首页横幅

准备图片文件

网站图标 (favicon.ico)：
- 尺寸：16x16 或 32x32 像素
- 格式：ICO格式
- 放置位置：static\favicon.ico
💡 图标设计：网站图标应该简洁明了，可以是网站名称的首字母、简单的几何图形或者与网站主题相关的符号。建议使用简单的设计，在小尺寸下也能清晰显示。
首页图片：
- 建议尺寸：400x300 像素
- 格式：PNG或JPG
- 内容：可以是个人头像、卡通形象或抽象图案
💡 首页图片：选择一个代表个人风格的图片作为首页装饰。可以是个人照片、喜欢的卡通角色、或者抽象的艺术图案。图片应该与博客主题和个人风格相符。

配置图片显示

在配置文件中添加：

# 首页图片配置
homeInfoParams.imageUrl = "images/avatar.png"
homeInfoParams.imageWidth = 200
homeInfoParams.imageHeight = 200

添加社交链接：

# 社交链接
[[params.socialIcons]]
  name = "email"
  url = "mailto:hdxiaoke@126.com"

[[params.socialIcons]]
  name = "qq"
  url = "https://qm.qq.com/cgi-bin/qm/qr?k=726049236"

[[params.socialIcons]]
  name = "rss"
  url = "/index.xml"

💡 首页效果：配置完成后，首页会显示个性化的欢迎信息、个人图片（如果配置了的话）、以及底部的社交图标链接。整体布局简洁美观。

🔧 第四步：完善功能配置

启用更多功能

在配置文件中添加：

# 更多功能配置
ShowToc = true              # 显示目录
TocOpen = false             # 目录默认折叠
ShowCodeCopyButtons = true  # 代码复制按钮
ShowBreadCrumbs = true      # 面包屑导航
ShowPostNavLinks = true     # 文章导航链接
ShowWordCount = true        # 字数统计
ShowReadingTime = true      # 阅读时间
ShowSearchPage = true       # 搜索页面

# 评论系统配置
comments = true

创建文章索引页

创建posts目录索引：
```
hugo new posts\_index.md
```

编辑索引文件：

+++
title = "文章列表"
description = "所有博客文章的列表页面"
+++

这里是所有文章的列表，按时间倒序排列。

🚀 第五步：测试和预览

重启服务器

停止当前服务器：在运行 hugo server 的命令行按 Ctrl+C
重新启动：
```
hugo server
```

测试各个页面

首页测试：
- 访问 http://localhost:1313/
- 检查欢迎信息是否显示
- 确认图片是否正常加载
- 测试社交图标链接
💡 完整测试：首页应该显示完整的博客结构：顶部导航菜单、欢迎信息区域、文章列表、社交图标等。所有链接都应该能正常工作。
导航菜单测试：
- 点击"文章"菜单
- 点击"关于"菜单
- 点击"归档"菜单
- 点击"搜索"菜单
功能测试：
- 检查文章页面的目录功能
- 测试代码复制按钮
- 验证面包屑导航
💡 功能测试：文章页面应该显示完整的功能：文章标题、发布时间、阅读时长、字数统计、文章目录（TOC）、代码复制按钮、面包屑导航等。

📝 第六步：创建更多示例内容

创建几篇示例文章

技术类文章：
```
hugo new posts/tech-learning.md
```
生活类文章：
```
hugo new posts/life-thoughts.md
```
教程类文章：
```
hugo new posts/tutorial-example.md
```

文章内容模板

每篇文章都应该包含：

+++
title = "文章标题"
date = 2025-01-05T12:00:00+08:00
draft = false
tags = ["标签1", "标签2"]
categories = ["分类"]
author = "Yimi"
description = "文章描述"
+++

## 文章内容

这里是文章的正文内容...

✅ 完成检查

确认以下项目都已完成：

关于页面创建并显示正常
归档页面和搜索页面创建完成
首页欢迎信息配置正确
图片资源添加并显示正常
菜单导航功能完整
社交图标链接正确
各项功能配置启用

小结

到这里，博客的基本页面结构就完善了。有了关于页面、归档页面，首页也配置了欢迎信息，菜单导航也设置好了。

下一篇会继续添加评论系统、社交链接这些功能。

关于内容创作，简单说几点：

文章分类建议：

技术类：编程、工具、教程
生活类：读书、思考、随笔
资源类：工具推荐、链接收藏

标签使用：

保持标签简洁明了
避免创建过多相似标签
定期整理和合并标签

图片优化：

控制图片大小，提高加载速度
使用有意义的文件名

上一篇：Hugo博客搭建教程（二）：创建站点与主题安装 下一篇：Hugo博客搭建教程（四）：评论系统与社交功能

创建重要页面#

创建关于页面#

创建归档页面#

创建搜索页面#

🎨 第二步：配置首页欢迎信息#

编辑配置文件#

🖼️ 第三步：添加图片资源#

创建图片目录#

准备图片文件#

配置图片显示#

🔧 第四步：完善功能配置#

启用更多功能#

创建文章索引页#

🚀 第五步：测试和预览#

重启服务器#

测试各个页面#

📝 第六步：创建更多示例内容#

创建几篇示例文章#

文章内容模板#

✅ 完成检查#

小结#