博客标题栏添加一个 About Me

✅ 目标

• 新建一个 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:[email protected]"> 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 是局部样式，不会污染其他页面
• 头像、图标链接、社交媒体请替换成你自己的
• 博客地图链接请根据你的实际文档结构修改。