2026-03-02 博客 hugo-teek +3 关于我页面个人介绍配置说明 3028 字 12 分钟 -- 次

关于我页面配置说明

最后更新于: 2026-03-02 04:47:45

👤 关于我页面概述

Hugo-Teek 主题提供了一个精美的「关于我」页面模板，复刻张洪Heo风格设计，包含头像展示、个人介绍、技能展示、生涯时间线、心路历程等多个模块。

✨ 页面特性

🎨 设计特性

顶部标签云：左右两侧展示个性化标签
头像展示：支持多种形状动画效果
介绍卡片：渐变卡片 + 文字卡片双栏布局
技能展示：无限滚动技能图标墙
生涯时间线：可视化职业发展历程
心路历程：卡片式故事展示
打赏功能：内置微信/支付宝打赏弹窗
留言板：集成评论系统

⚙️ 配置特性

YAML frontmatter 配置，简单直观
所有内容通过参数配置，无需修改模板
支持自定义技能图标（需修改模板）
响应式设计，适配移动端

🔄 重要提示

修改文本信息后，需要重启项目才能生效
重启项目，可以使用命令：make dev 或 make build

📁 配置文件路径

关于我页面的配置分布在以下位置：

页面内容配置📄 作者信息配置📄 博主卡片配置📄

1# hugo-teek-site/content/about.md
2# 关于页面主要内容配置
3# 包括个人介绍、标签、生涯、心路历程等

1# hugo-teek-site/config/teek-plugins/author.toml
2# 作者基础信息（姓名、角色、座右铭、头像等）

1# hugo-teek-site/config/themes/hugo-teek/params.toml
2# 博主卡片样式配置（头像形状、状态表情、社交链接等）

配置优先级

1配置合并顺序（优先级从低到高）：
21️⃣ config/themes/{theme}/params.toml（主题默认配置）
32️⃣ config/teek-plugins/author.toml（作者信息配置）
43️⃣ content/about.md（页面内容配置）

📝 基础页面配置

创建关于页面

在 content/about.md 创建关于页面：

基础配置📝 配置说明📝

1---
2coverImg: https://mu.baimu.live/img/mn/
3date: 2025-10-14T10:00:00+08:00
4description: 关于 Hugo Teek 主题和我的个人介绍
5draft: false
6title: 关于
7type: about
8url: /about/
9---

1---
2coverImg: https://mu.baimu.live/img/mn/    # ◀️ 页面封面图
3date: 2025-10-14T10:00:00+08:00            # ◀️ 页面创建日期
4description: 关于 Hugo Teek 主题...       # ◀️ 页面描述（SEO用）
5draft: false                               # ◀️ 是否为草稿
6title: 关于                                # ◀️ 页面标题
7type: about                                # ◀️ 页面类型，固定为 about
8url: /about/                               # ◀️ 页面访问路径
9---

Frontmatter 字段说明

字段	必填	说明
`title`	✅	页面标题，显示在浏览器标签页
`type`	✅	页面类型，必须设置为 `about`
`url`	✅	页面访问路径，建议设置为 `/about/`
`coverImg`	❌	页面封面图，显示在页面顶部
`description`	❌	页面描述，用于 SEO 优化
`draft`	❌	是否为草稿，`true` 时页面不发布

🎨 页面内容配置

顶部标签云配置

配置页面顶部左右两侧的个性化标签：

标签云配置🏷️ 配置说明📝

 1about:
 2  headerTags:
 3    left:
 4      - "😏 说实话你挺好看的，但我没说实话"
 5      - "🔍 Ta只是喜欢你，又不是只喜欢你"
 6      - "🤖️ 学了八年机械舞，结果发现写的代码都带卡顿"
 7      - "🔨 野外boss遇真爱"
 8    right:
 9      - "🤝 上知天文地理，下知鸡毛蒜皮"
10      - "🏃 拼尽全力终于没有力气"
11      - "🪸 互联网海螺"
12      - "💢 逃出了地球，没逃出SQL库"

1about:
2  headerTags:
3    left:       # ◀️ 左侧标签列表
4      - "标签1"  # ◀️ 支持 emoji 表情
5      - "标签2"
6    right:      # ◀️ 右侧标签列表
7      - "标签3"
8      - "标签4"

介绍卡片配置

配置渐变卡片和文字卡片的内容：

介绍卡片配置💳 配置说明📝

 1about:
 2  introCards:
 3    gradient:
 4      greeting: "泥嚎，很高兴认识你👋"
 5      name: ""
 6      role: "是一名做空不了股票做空自己的人才"
 7    text:
 8      label: "追求"
 9      title: "源于<br>热爱而去创造"
10      tags:
11        - "bug制造机"
12        - "往来穿梭，带走一部分bug"
13        - "目标是造二维bug，打败每一个三维bug"
14        - "提交要努力，Pr要开心"

 1about:
 2  introCards:
 3    gradient:           # ◀️ 左侧渐变卡片
 4      greeting: "..."     # ◀️ 问候语
 5      name: ""            # ◀️ 姓名（留空则使用博主配置）
 6      role: "..."         # ◀️ 角色/身份描述
 7    text:               # ◀️ 右侧文字卡片
 8      label: "追求"       # ◀️ 小标签文字
 9      title: "..."        # ◀️ 主标题（支持 HTML 标签如 <br>）
10      tags:               # ◀️ 标签列表
11        - "标签1"
12        - "标签2"

生涯时间线配置

配置职业发展时间线和公司经历：

生涯配置🚀 配置说明📝

 1about:
 2  career:
 3    timeline:
 4      - dot: "blue"
 5        label: "DLPU,产品设计专业"
 6      - dot: "red"
 7        label: "ITSO,UI/产品经理"
 8    companies:
 9      - icon: "🏢"
10        name: "DLPU"
11      - icon: "💼"
12        name: "ITSO"
13      - icon: "🌐"
14        name: "China Telecom"
15      - icon: "🔷"
16        name: "HongHui"
17      - icon: "📡"
18        name: "NEUSOFT"
19    timeMarks:
20      - "2015"
21      - "2019"
22      - "现在"

 1about:
 2  career:
 3    timeline:       # ◀️ 时间线节点
 4      - dot: "blue"   # ◀️ 节点颜色（blue/red/green/yellow）
 5        label: "..."  # ◀️ 节点标签
 6    companies:      # ◀️ 公司/经历列表
 7      - icon: "🏢"    # ◀️ 公司图标（emoji）
 8        name: "..."   # ◀️ 公司名称
 9    timeMarks:      # ◀️ 时间标记
10      - "2015"       # ◀️ 年份标记
11      - "现在"        # ◀️ 当前状态

心路历程配置

配置心路历程故事卡片：

心路历程配置💭 配置说明📝

1about:
2  stories:
3    - title: "恨？"
4      content: "如果你讨厌一个人，你就把手机砸了，他就嘎了"
5    - title: "快乐这件事"
6      content: "就像南方人看北方人看见大蟑螂的反应。北方人看南方人第一次看雪的反应"

1about:
2  stories:              # ◀️ 故事列表
3    - title: "标题"       # ◀️ 故事标题
4      content: "内容"     # ◀️ 故事内容

致谢与打赏配置

配置致谢描述和打赏按钮：

致谢配置🙏 配置说明📝

1about:
2  thanks:
3    desc: "感谢打赏的人，因为你们，让我感受到创造博客这件事情能够给你们带来便利"
4    buttonText: "☕ 投喂作者"

1about:
2  thanks:
3    desc: "..."           # ◀️ 致谢描述文字
4    buttonText: "☕ ..."   # ◀️ 打赏按钮文字

评论配置

配置留言板评论系统：

评论配置💬 配置说明📝

1about:
2  comments:
3    enabled: true

1about:
2  comments:
3    enabled: true   # ◀️ 是否启用评论（true/false）

👤 作者信息配置

配置作者基础信息

在 config/teek-plugins/author.toml 配置作者信息：

作者信息配置👤 配置说明📝

 1  # 作者姓名
 2  name = "余温Gueen"
 3
 4  # 作者角色/职业
 5  role = "设计师、产品经理、独立开发者、博主"
 6
 7  # 座右铭
 8  motto = "荆棘之路，劈风斩浪。"
 9
10  # 作者头像
11  avatar = "https://img.xxdevops.cn/blog/avatar/yuwen_avatar.avif?w=300&h=300&fit=crop&fm=webp&q=80"
12
13  # 作者邮箱（可选，留空不显示）
14  email = ""
15
16  # 作者个人网站或博客链接
17  link = "https://xxdevops.cn"

1  name = "..."       # ◀️ 作者姓名，显示在关于页面
2  role = "..."       # ◀️ 作者角色/职业描述
3  motto = "..."      # ◀️ 个人座右铭
4  avatar = "..."     # ◀️ 头像图片 URL
5  email = "..."      # ◀️ 联系邮箱（可选）
6  link = "..."       # ◀️ 个人网站链接

🎭 博主卡片样式配置

配置头像和状态

在 config/themes/hugo-teek/params.toml 配置博主卡片：

博主卡片配置🎭 配置说明📝

 1    avatar = "https://img.xxdevops.cn/blog/avatar/yuwen_avatar.avif?w=150&h=150&fit=crop&fm=webp&q=80"
 2    backgroundImage = "https://img.xxdevops.cn/blog/wallpaper/bg14.avif"
 3    circleBgImg = "https://img.xxdevops.cn/blog/avatar/yuwen_avatar.avif?w=300&h=300&fit=crop&fm=webp&q=80"
 4    circleBgMask = false
 5    name = "余温Gueen"
 6    shape = "circle-rotate"
 7    slogan = "明心静性，爱自己"
 8[blogger.status]
 9      icon = "😪"
10      size = 18.0
11      title = "困"

 1    avatar = "..."           # ◀️ 博主头像 URL
 2    backgroundImage = "..."  # ◀️ 博主卡片背景图
 3    circleBgImg = "..."      # ◀️ 圆形头像背景图
 4    circleBgMask = false     # ◀️ 是否启用背景遮罩
 5    name = "..."             # ◀️ 博主名称
 6    shape = "..."            # ◀️ 头像形状（circle-rotate/circle/square）
 7    slogan = "..."           # ◀️ 博主口号/签名
 8[blogger.status]
 9      icon = "😪"            # ◀️ 状态表情图标
10      size = 18.0            # ◀️ 图标大小（像素）
11      title = "困"           # ◀️ 状态标题（鼠标悬停显示）

头像形状选项

圆形旋转🔄 普通圆形⭕ 方形⬜

1shape = "circle-rotate"   # ◀️ 圆形头像带旋转动画

1shape = "circle"          # ◀️ 普通圆形头像

1shape = "square"          # ◀️ 方形头像

社交链接配置

社交链接配置🔗 配置说明📝

 1[[blogger.social]]
 2      name = "GitHub"
 3      icon = "github"
 4      url = "https://github.com/JSXGQ"
 5[[blogger.social]]
 6      name = "CNB"
 7      icon = "cnb"
 8      url = "https://cnb.cool/u/yuwenGueen"
 9[[blogger.social]]
10      name = "QQ"
11      icon = "qq"
12      url = "tencent://message/?uin=你的QQ号"
13[[blogger.social]]
14      name = "微信"
15      icon = "weichat"
16      url = "#"

1[[blogger.social]]
2      name = "..."     # ◀️ 社交平台名称
3      icon = "..."     # ◀️ 图标名称（Bootstrap Icons）
4      url = "..."      # ◀️ 社交主页链接

💰 打赏功能配置

启用打赏功能

在 config/themes/hugo-teek/params.toml 配置打赏：

打赏配置💰 配置说明📝

1    enabled = true
2    alipayQR = "https://img.xxdevops.cn/blog/appreciation_code/zhifubao.avif"
3    wechatQR = "https://img.xxdevops.cn/blog/appreciation_code/wechat.avif"

1    enabled = true       # ◀️ 启用打赏功能
2    alipayQR = "..."     # ◀️ 支付宝收款码图片 URL
3    wechatQR = "..."     # ◀️ 微信收款码图片 URL

📋 完整配置示例

完整的 about.md 配置

完整配置示例📋

 1---
 2coverImg: https://mu.baimu.live/img/mn/
 3date: 2025-10-14T10:00:00+08:00
 4description: 关于 Hugo Teek 主题和我的个人介绍
 5draft: false
 6title: 关于
 7type: about
 8url: /about/
 9
10about:
11  # ========================================
12  # 🏷️ 顶部标签云
13  # ========================================
14  headerTags:
15    left:
16      - "😏 说实话你挺好看的，但我没说实话"
17      - "🔍 Ta只是喜欢你，又不是只喜欢你"
18      - "🤖️ 学了八年机械舞，结果发现写的代码都带卡顿"
19      - "🔨 野外boss遇真爱"
20    right:
21      - "🤝 上知天文地理，下知鸡毛蒜皮"
22      - "🏃 拼尽全力终于没有力气"
23      - "🪸 互联网海螺"
24      - "💢 逃出了地球，没逃出SQL库"
25
26  # ========================================
27  # 💳 介绍卡片
28  # ========================================
29  introCards:
30    gradient:
31      greeting: "泥嚎，很高兴认识你👋"
32      name: ""
33      role: "是一名做空不了股票做空自己的人才"
34    text:
35      label: "追求"
36      title: "源于<br>热爱而去创造"
37      tags:
38        - "bug制造机"
39        - "往来穿梭，带走一部分bug"
40        - "目标是造二维bug，打败每一个三维bug"
41        - "提交要努力，Pr要开心"
42
43  # ========================================
44  # 🚀 生涯时间线
45  # ========================================
46  career:
47    timeline:
48      - dot: "blue"
49        label: "DLPU,产品设计专业"
50      - dot: "red"
51        label: "ITSO,UI/产品经理"
52    companies:
53      - icon: "🏢"
54        name: "DLPU"
55      - icon: "💼"
56        name: "ITSO"
57      - icon: "🌐"
58        name: "China Telecom"
59      - icon: "🔷"
60        name: "HongHui"
61      - icon: "📡"
62        name: "NEUSOFT"
63    timeMarks:
64      - "2015"
65      - "2019"
66      - "现在"
67
68  # ========================================
69  # 💭 心路历程
70  # ========================================
71  stories:
72    - title: "恨？"
73      content: "如果你讨厌一个人，你就把手机砸了，他就嘎了"
74    - title: "快乐这件事"
75      content: "就像南方人看北方人看见大蟑螂的反应。北方人看南方人第一次看雪的反应"
76
77  # ========================================
78  # 🙏 致谢
79  # ========================================
80  thanks:
81    desc: "感谢打赏的人，因为你们，让我感受到创造博客这件事情能够给你们带来便利"
82    buttonText: "☕ 投喂作者"
83
84  # ========================================
85  # 💬 评论
86  # ========================================
87  comments:
88    enabled: true
89---

🔧 高级自定义

自定义技能图标

技能图标需要在模板文件中添加，位于：

1hugo-teek-site/themes/hugo-teek/layouts/about/single.html

在 skills-track 区域添加新的技能项：

1<div class="skill-item" data-name="你的技能名">
2  <div class="skill-icon custom">自定义内容</div>
3  <div class="skill-tooltip">你的技能名</div>
4</div>

⚠️ 注意事项

修改模板后需要重启开发服务器才能生效
建议复制一份到 layouts/about/single.html 进行修改，避免主题更新被覆盖

页面样式自定义

如需自定义样式，可在 assets/scss/custom.scss 中添加：

1/* 🎨 关于页面自定义样式 */
2.about-page-v2 {
3  /* 自定义样式 */
4}

🔧 常见问题

页面不显示或显示异常

问题1：页面404❌ 问题2：头像不显示❌ 问题3：打赏弹窗不显示❌

1原因：页面未创建或 draft 为 true
2解决：
31️⃣ 确认 content/about.md 文件存在
42️⃣ 检查 frontmatter 中 draft: false
53️⃣ 重启开发服务器：make dev

1原因：头像 URL 错误或无法访问
2解决：
31️⃣ 检查 author.toml 中的 avatar 链接
42️⃣ 检查 params.toml 中的 blogger.avatar 链接
53️⃣ 确保图片 URL 可公开访问

1原因：appreciation 配置未启用或二维码无效
2解决：
31️⃣ 检查 params.toml 中 appreciation.enabled = true
42️⃣ 确认 alipayQR 和 wechatQR 图片链接有效
53️⃣ 检查 about.md 中 thanks 配置是否正确

配置生效检查清单

1✅ content/about.md 文件存在且格式正确
2✅ frontmatter 中 type: about 已设置
3✅ frontmatter 中 draft: false
4✅ author.toml 中作者信息已配置
5✅ params.toml 中博主卡片已配置
6✅ 图片 URL 可正常访问
7✅ 重启开发服务器后生效

📝 配置模板速查

快速开始模板

最小配置模板📝 推荐配置模板📝

1---
2title: 关于
3type: about
4url: /about/
5draft: false
6---

 1---
 2coverImg: https://example.com/cover.jpg
 3date: 2025-03-02T10:00:00+08:00
 4description: 关于我和我的博客
 5draft: false
 6title: 关于
 7type: about
 8url: /about/
 9
10about:
11  headerTags:
12    left:
13      - "标签1"
14      - "标签2"
15    right:
16      - "标签3"
17      - "标签4"
18  introCards:
19    gradient:
20      greeting: "你好👋"
21      name: ""
22      role: "你的角色描述"
23    text:
24      label: "追求"
25      title: "你的标题"
26      tags:
27        - "标签1"
28        - "标签2"
29  career:
30    timeline:
31      - dot: "blue"
32        label: "经历1"
33    companies:
34      - icon: "🏢"
35        name: "公司1"
36    timeMarks:
37      - "2020"
38      - "现在"
39  stories:
40    - title: "故事标题"
41      content: "故事内容"
42  thanks:
43    desc: "感谢支持"
44    buttonText: "☕ 请我喝咖啡"
45  comments:
46    enabled: true
47---

🎉 关于我页面配置完成！

如有问题，请在 Hugo-Teek项目仓库的 Issues 中反馈

📡

👤 作者: 余温Gueen

🔗 链接: https://wiki.xxdevops.cn/hobby/about-page-peizhi

🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自余温Gueen Blog！

推荐使用微信支付

推荐使用支付宝