文章目录
- ✅ 目标
- ✍️ 第一步：创建 About 页面
- 🧭 第二步：在导航栏添加菜单项
- 🔄 第三步：重新启动本地服务
- 🪄 可选美化：自定义样式
- 💡 小贴士
- 🎉 示例
- ✅ 文件路径:
- ✅ 页面代码（支持头像、技能图标、社交媒体、博客导航
- ✅ CSS 样式（新建 /src/pages/about.module.css）
- 📌 提示
✅ 目标
- 新建一个 About Me 页面，访问路径为 /about
- 在顶部导航栏添加 “About Me” 的链接按钮
✍️ 第一步：创建 About 页面
在你的 Docusaurus 项目中，创建一个 Markdown 文件（或者 React 页面）：
路径示例：/src/pages/about.md
---
title: About Me
description: Learn more about me
---
# 👋 About Me
你好，我是某某，正在写博客、研究 Kubernetes 和前端开发...
这里你可以写自我介绍、兴趣爱好、联系方式等内容。📌 Docusaurus 会自动将 /src/pages/about.md 映射为网站路径 /about
🧭 第二步：在导航栏添加菜单项
编辑配置文件：docusaurus.config.js
找到 themeConfig.navbar.items 数组，添加如下内容:
navbar: {
title: '你的博客名',
items: [
{ to: '/about', label: 'About Me', position: 'right' },
// 其他菜单项...
],
}- to: 页面路径 /about
- label: 显示在导航栏的文字
- position: left 或 right
🔄 第三步：重新启动本地服务
npm run start🪄 可选美化：自定义样式
你可以在 /src/css/custom.css 添加一些自定义样式
.about-title {
font-size: 2rem;
margin-top: 2rem;
}然后在 about.md 中用 HTML 或 React 写法调用样式。
💡 小贴士
- 如果你想要页面支持 React 组件，改用 .tsx 放在 /src/pages/about.tsx
- 你可以用这个页面写自我介绍、社交媒体、技能图标、博客地图等。
🎉 示例
对话：好的，帮你生成一个包含头像、技能列表、社交链接的 “About Me” 页面模板，支持 React 组件，改用 .tsx 放在 /src/pages/about.tsx，写自我介绍、社交媒体、技能图标、博客地图等。
✅ 文件路径:
/upmdocs/src/pages/about.tsx✅ 页面代码（支持头像、技能图标、社交媒体、博客导航
import React from 'react';
import Layout from '@theme/Layout';
import styles from './about.module.css';
export default function AboutPage(): JSX.Element {
return (
<Layout
title="关于我"
description="系统管理员 & 前端新手的个人介绍页面"
>
<main className={styles.container}>
<section className={styles.profile}>
<img
className={styles.avatar}
src="https://avatars.githubusercontent.com/u/your-github-id"
alt="Avatar"
/>
<h1>👋 Hi, I'm Ghostwritten</h1>
<p>
欢迎来到我的博客！我是一名系统管理员，正在学习前端开发，对 Kubernetes、
云原生、文档写作 和 AI 技术充满热情 💡
</p>
</section>
<section>
<h2>🚀 技能栈</h2>
<ul className={styles.skills}>
<li><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" /> JavaScript</li>
<li><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" /> React</li>
<li><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg" alt="Kubernetes" /> Kubernetes</li>
<li><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" alt="Docker" /> Docker</li>
<li><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" alt="Linux" /> Linux</li>
</ul>
</section>
<section>
<h2>🌐 社交链接</h2>
<ul className={styles.social}>
<li><a href="https://ghostwritten.github.io" target="_blank">📝 我的博客</a></li>
<li><a href="https://github.com/ghostwritten" target="_blank">💻 GitHub</a></li>
<li><a href="mailto:your-email@example.com">📧 Email</a></li>
</ul>
</section>
<section>
<h2>🗺️ 博客地图</h2>
<ul>
<li><a href="/docs/category/kubernetes">📦 Kubernetes 系列</a></li>
<li><a href="/docs/category/front-end">🎨 前端学习笔记</a></li>
<li><a href="/docs/category/linux">🐧 Linux 实用技巧</a></li>
<li><a href="/docs/category/tools">🔧 工具推荐 & 配置</a></li>
</ul>
</section>
</main>
</Layout>
);
}✅ CSS 样式（新建 /src/pages/about.module.css）
.container {
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
font-family: system-ui, sans-serif;
}
.profile {
text-align: center;
margin-bottom: 2rem;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
margin-bottom: 1rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.skills {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
gap: 1rem;
margin: 1rem 0;
}
.skills li {
display: flex;
align-items: center;
gap: 0.5rem;
background: #f9f9f9;
padding: 0.5rem 1rem;
border-radius: 12px;
font-weight: bold;
}
.skills img {
width: 24px;
height: 24px;
}
.social {
list-style: none;
padding: 0;
}
.social li {
margin: 0.5rem 0;
}
.social a {
text-decoration: none;
color: #007acc;
}展示效果：
📌 提示
- about.tsx 用 TypeScript 写的 React 页面
- about.module.css 是局部样式，不会污染其他页面
- 头像、图标链接、社交媒体请替换成你自己的
- 博客地图链接请根据你的实际文档结构修改。
