Personal Dashboard 🎯#

一个简洁、高效的个人导航仪表板，用于快速访问常用网站和工具。

📋 项目简介#

Personal Dashboard 是一个使用 Astro 和 Tailwind CSS 构建的现代化个人导航网站，提供：

🔍 多搜索引擎支持 - Google、Bing、Baidu、GitHub 快速搜索
🌐 分类导航 - 个人网站、常用工具、学校资源、文献数据库等
🎨 现代 UI - 基于 Tailwind CSS 的精致毛玻璃设计
⚡ 高性能 - 静态生成，秒级加载
📱 响应式设计 - 完美支持各种设备
🌍 IP 地址显示 - 自动显示当前公网 IP 和所在位置
📄 页脚组件 - 支持备案信息和平台说明

🚀 快速开始#

环境要求#

Node.js 18+
pnpm 或 npm

安装依赖#

1
pnpm install

本地开发#

1
pnpm dev

启动开发服务器，访问 http://localhost:4321 查看效果。

生产构建#

1
pnpm build

生成静态文件到 ./dist/ 目录。

预览构建结果#

1
pnpm preview

📁 项目结构#

1
/
2
├── public/              # 静态资源
3
│   └── favicon.svg     # 网站图标
4
├── src/
5
│   ├── assets/         # 图片资源
6
│   ├── components/     # 可复用组件
7
│   │   └── Footer.astro       # 页脚组件（包含备案信息）
8
│   ├── data/           # 数据文件
9
│   │   └── links.ts    # 导航链接与搜索引擎配置
10
│   ├── layouts/        # 页面布局
11
│   │   └── Layout.astro
12
│   ├── pages/          # 页面文件
13
│   │   └── index.astro
14
│   └── styles/         # 全局样式
15
│       └── global.css
16
├── astro.config.mjs    # Astro 配置
17
├── tailwind.config.mjs  # Tailwind 配置
18
└── package.json        # 项目配置

⚙️ 配置说明#

修改导航链接#

编辑 src/data/links.ts 文件：

1
export const CATEGORIES = [
2
  {
3
    title: "分类名称",
4
    links: [
5
      {
6
        name: "链接名称",
7
        url: "https://example.com",
8
        icon: "fas fa-icon-name",
9
        color: "#ffffff"
10
      }
11
    ]
12
  }
13
];

修改搜索引擎#

在 src/data/links.ts 中编辑 SEARCH_ENGINES 数组：

1
export const SEARCH_ENGINES = [
2
  { id: 'baidu', name: 'Baidu', url: 'https://www.baidu.com/s?wd=', icon: 'fas fa-paw' },
3
  { id: 'google', name: 'Google', url: 'https://www.google.com/search?q=', icon: 'fab fa-google' },
4
  { id: 'bing', name: 'Bing', url: 'https://cn.bing.com/search?q=', icon: 'fab fa-microsoft' },
5
  { id: 'github', name: 'GitHub', url: 'https://github.com/search?q=', icon: 'fab fa-github' }
6
];

🛠️ 技术栈#

框架: Astro - 静态站点生成器
样式: Tailwind CSS - 实用型 CSS 框架
图标: Font Awesome - 丰富的图标库
组件化: Astro 组件 + TypeScript

📦 可用命令#

命令	描述
`pnpm install`	安装依赖
`pnpm dev`	启动本地开发服务器
`pnpm build`	构建生产环境
`pnpm preview`	预览构建结果
`pnpm astro`	运行 Astro CLI 命令

🎨 自定义指南#

修改背景图#

在 src/pages/index.astro 中修改：

1
const BG_URL = "https://t.alcy.cc/ycy"; // 修改为你的背景图片 URL

修改页脚信息#

编辑 src/components/Footer.astro 中的 profileConfig 对象：

1
const profileConfig = {
2
    name: "你的名字", // 修改为你的名字
3
};
4

5
const currentYear = new Date().getFullYear();

IP 地址显示#

项目默认启用 IP 地址显示功能，使用 api.ip.sb API：

支持显示当前公网 IP 和城市位置
如果 API 无法访问，会显示”欢迎回来”

关闭 IP 显示：可以在 src/pages/index.astro 中移除 IP 逻辑代码块。

添加新分类#

编辑 src/data/links.ts
在 CATEGORIES 数组中添加新的分类对象，例如：

1
{
2
  title: "新分类",
3
  links: [
4
    {
5
      name: "示例链接",
6
      url: "https://example.com",
7
      icon: "fas fa-icon",
8
      color: "#3498db"
9
    }
10
  ]
11
}

重启开发服务器即可看到效果

修改图标#

使用 Font Awesome 提供的图标类名，例如：

fas fa-link - 普通图标
fab fa-google - 品牌图标

📱 兼容性#

现代浏览器 (Chrome, Firefox, Safari, Edge)
移动设备 (iPhone, Android)
平板设备 (iPad, Android 平板)

🔧 开发相关#

项目依赖#

主要使用的 npm 包：

astro - 核心框架
tailwindcss - CSS 工具库
@astrojs/react - React 集成（可选）
typescript - 类型检查

浏览器兼容性#

使用了现代 CSS 特性（如 backdrop-filter），请确保在较新版本的浏览器中使用。

🚀 部署指南#

部署到 Cloudflare#

Fork本项目
在 cloudfalre 中导入项目
选择 Astro 框架预设
点击部署

部署到阿里云ESA#

Fork本项目
在阿里云ESA函数和pages中导入项目
安装命令 pnpm install 构建命令 pnpm run build 静态资源目录 dist
点击部署

部署到其他平台#

本项目构建输出为静态文件，可以部署到任何支持静态文件托管的平台：

GitHub Pages
Netlify
Cloudflare Pages
腾讯云 EO Pages
自有服务器