作为一名开发者，拥有一个现代化、个性化的个人主页是展示自己技术能力和作品的重要方式。今天，我要向大家介绍我的个人主页项目——Rutua，这是一个功能丰富、易于定制的开发者主页模板。

🌟 项目简介

Rutua 是一个现代化、响应式的个人开发者主页，支持深色/浅色主题切换，集成了 GitHub 仓库展示和博客文章列表功能。它采用了最新的前端技术，具有良好的性能和用户体验。

✨ 核心功能

1. 🎨 响应式设计

适配各种屏幕尺寸，从手机到桌面设备都能完美展示，确保访问者在任何设备上都有良好的体验。

2. 🌓 主题切换

支持深色/浅色主题无缝切换，能够自动跟随系统设置，也可以手动切换，满足不同用户的偏好。

3. 📱 PWA 支持

已配置为 Progressive Web App，支持离线访问和桌面安装，用户可以将其添加到主屏幕，获得类似原生应用的体验。

4. 📊 GitHub 集成

自动从 GitHub 获取并展示最新的开源仓库，包括仓库描述、语言类型和星标数量，让访问者直观了解你的开源贡献。

5. 📝 博客集成

通过 WordPress REST API 自动获取最新博客文章，保持主页内容的新鲜度，同时引导访问者前往你的博客。

6. 🔝 回到顶部

平滑滚动回到顶部功能，提升长页面的浏览体验。

7. 🚀 高性能

优化的加载速度和缓存策略，确保页面快速加载，提供流畅的用户体验。

8. 🔧 易于自定义

清晰的代码结构，便于修改和扩展，你可以根据自己的需求轻松调整样式和功能。

🛠️ 技术栈

• HTML5：使用语义化标签，提供良好的 SEO 支持
• CSS3：采用 CSS 变量实现主题切换，使用 Grid/Flex 布局实现响应式设计
• JavaScript (ES6+)：异步编程，模块化设计，代码结构清晰
• PWA：集成 Service Worker 和 Manifest.json，支持离线访问
• GitHub API：通过代理获取 GitHub 仓库数据
• WordPress REST API：获取博客文章数据

📦 安装和使用

本地开发

1. 克隆仓库到本地

git clone https://github.com/Lexo0522/Personalhomepage.git

1. 进入项目目录

cd Personalhomepage

1. 使用本地服务器运行

# 使用 Python 3
python -m http.server 8000

# 或使用 Node.js (需要安装 http-server)
npx http-server -p 8000

1. 在浏览器中访问 http://localhost:8000

部署

可以部署到任何静态网站托管服务，如：

• GitHub Pages
• Vercel
• Netlify
• Cloudflare Pages

📁 项目结构

Personalhomepage/
├── css/
│   └── style.css          # 主样式文件
├── js/
│   ├── back-to-top.js     # 回到顶部功能
│   ├── blog-posts.js      # 博客文章获取与展示
│   ├── github-repos.js    # GitHub仓库获取与展示
│   ├── loading-animation.js # 页面加载动画
│   ├── sw.js              # Service Worker文件
│   └── theme-toggle.js    # 主题切换功能
├── .user.ini              # 服务器配置文件
├── 404.html               # 404错误页面
├── index.html             # 主页面
├── manifest.json          # PWA配置文件
├── offline.html           # 离线页面
└── README.md              # 项目说明文档

⚙️ 自定义配置

修改 GitHub 用户名

在 js/github-repos.js 文件中找到 GitHub API 请求部分，修改为你的用户名：

const res = await fetch('https://stats.rutua.cn/github-api/users/[你的GitHub用户名]/repos?sort=updated&per_page=6');

GitHub API 备用配置

项目默认使用 https://stats.rutua.cn/github-api 作为 GitHub API 的代理服务。如果该代理不可用，你可以切换到官方 API 地址：

// 将 github-repos.js 文件中的 API 地址修改为
const res = await fetch('https://github-readme-stats.vercel.app/api/repos?username=[你的GitHub用户名]&sort=updated&per_page=6');

修改博客 API

在 index.html 中找到博客 API 请求部分，修改为你的 WordPress 博客地址：

const res = await fetch('https://[你的博客地址]/wp-json/wp/v2/posts?per_page=3&_embed');

修改主题颜色

在 css/style.css 中修改 CSS 变量，自定义主题颜色：

:root {
  /* 亮色主题 */
  --bg: #ffffff;
  --fg: #2c3e50;
  --muted: #7f8c8d;
  --link: #3498db;
  --border: #ecf0f1;
  --card-bg: #ffffff;
  --shadow: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  /* 暗色主题 */
  --bg: #1a1a1a;
  --fg: #f1f1f1;
  --muted: #b0b0b0;
  --link: #4da6ff;
  --border: #333333;
  --card-bg: #252525;
  --shadow: rgba(0, 0, 0, 0.3);
}

📱 PWA 支持

项目已配置为 PWA 应用，支持离线访问和桌面安装。你可以修改 manifest.json 文件自定义 PWA 设置：

{
  "name": "Rutua - WordPress Developer",
  "short_name": "Rutua",
  "description": "WordPress 开发者主页：开源项目、技术博客与解决方案",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "#4a6cf7",
  "icons": [
    // 图标配置
  ]
}

🌐 浏览器兼容性

• Chrome (推荐)
• Firefox
• Safari
• Edge

📄 许可证

本项目采用 MIT License 开源协议。

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

🙏 致谢

• WordPress REST API：提供博客文章数据获取支持

📚 资源链接

• GitHub 仓库：https://github.com/Lexo0522/Personalhomepage
• 在线演示：https://rutua.cn/
• 作者博客：https://www.rutua.cn/

---

通过 Rutua 项目，你可以快速搭建一个现代化、功能丰富的个人开发者主页。项目代码结构清晰，易于定制，适合各种技术水平的开发者使用。希望这个项目能对你有所帮助，如果你有任何问题或建议，欢迎在 GitHub 上提交 Issue！