当前位置：首页 > news >正文

博客标题栏添加一个 About Me

news 来源：原创 2025/4/23 5:42:32

在这里插入图片描述

文章目录

- ✅ 目标
- ✍️ 第一步：创建 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 (<Layouttitle="关于我"description="系统管理员 & 前端新手的个人介绍页面"><main className={styles.container}><section className={styles.profile}><imgclassName={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;
}