Cloud Home

一个基于 Vue 的个人主页模板，内置友链申请、网站展示、项目展示、友链随机展示、自定义配置，支持 Vercel 部署与邮件通知。

特性

• 🎨 个性化主页：头像、社交链接、技能、站点/项目列表可配置。
• 🔗 友链模块：支持申请表单、邮件通知、随机顺序展示。
• 📱 响应式设计：适配桌面与移动端。
• ⚙️ Serverless 部署支持

技术栈

• 前端：Vue 3 + HTML + CSS
• 构建：Vite
• 部署：Vercel（静态构建 + Serverless Functions）

致谢

排名不分先后

• Skill Icons：技能图标库，本项目的技能图标来源。
• Netease Mini Player：迷你网易云播放器组件，为本项目的音乐播放功能提供支持。

感谢以上开源项目原作者与维护者的贡献。

配置指南

站点配置文件 (src/config/siteConfig.ts)

本项目的所有静态内容配置均集中在 src/config/siteConfig.ts 文件中。

const siteConfig: SiteConfig = {
    profile: {
        name: "Example User", // 你的名字
        title: "I'm a software developer.", // 你的简介，可为空
        avatar: "avatar.webp", // 你的头像，可为public目录下的文件或外部链接
        bio: "Hello World", // 你的喜欢的一句话，可为空
        birthday: "xxxx-xx-xx", // 你的生日，可为空
        gender: "", // 你的性别，可为空
        pronouns: "", // 你希望别人如何称呼你，可为空
        location: "", // 你的居住地，可为空
    },

    // 社交链接，预定义的社交链接可在 `src/components/SocialLink.vue` 中查阅
    socialLinks: [
        { name: "GitHub", url: "https://github.com/ExampleUser" },
        { name: "Email", url: "mailto:you@example.com" },
        { name: "Telegram", url: "https://t.me/ExampleUser" },
        { name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
        { name: "Blog", url: "https://blog.example.com" },
    ],

    github: {
        username: "ExampleUser", // 你的 GitHub 用户名
    },

    // 个人介绍卡片
    about: [
        { title: "Example", desc: "Example description", icon: "🧠" },
        { title: "Example", desc: "Example description", icon: "🛠️" },
        { title: "Example", desc: "Example description", icon: "🎬" },
        { title: "Example", desc: "Example description", icon: "🎮" },
    ],

    siteMeta: {
        title: "Example Title", // 网站标题
        icon: "favicon.ico", // 网站图标，可为public目录下的文件或外部链接
        startDate:"xxxx-xx-xx", // 网站创建日期
    },

    music: {
        // 是否启用音乐播放器
        enable: true,
        // floating - 浮动模式播放器（推荐）- 用于播放网易云歌单
        // embed - 嵌入模式播放器 - 用于播放网易云单曲
        mode: "floating", // "floating" 或 "embed"
        // 歌单ID：从网易云音乐链接获取，如 https://music.163.com/#/playlist?id=14273792576
        playlistId: undefined, // 例如: "14273792576"
        // 歌曲ID：仅在嵌入模式下使用
        songId: undefined, // 例如: "554242291"
        // 播放器位置（浮动模式）: "bottom-left" | "bottom-right" | "top-left" | "top-right"
        position: "bottom-left",
        // 是否显示歌词
        lyric: true,
        // 主题: "light" | "dark" | "auto"
        theme: "dark",
        // 是否自动播放
        autoplay: false,
        // 是否默认以黑胶唱片状态启动（仅浮动模式）
        defaultMinimized: true,
    },

    umami: {
        enable: true, // 是否启用 Umami 分析
        url: "https://cloud.umami.is/script.js", // Umami 分析脚本 URL，一般无需修改
        websiteId: "YOUR_WEBSITE_ID", // Umami 网站 ID
        apiBase: "https://api.umami.is", // Umami API 地址，一般无需修改
    },

    // 技能图标展示，详见https://github.com/tandpfun/skill-icons#icons-list
    skills: [
        { title: "前端", items: ["css", "html", "javascript", "typescript", "vue"] },
        { title: "后端 / 云", items: ["cpp", "cloudflare", "docker", "java", "mysql", "nodejs", "python", "vercel"] },
        { title: "工具", items: ["ae", "au", "git", "github", "md", "ps", "pr", "vscode"] },
        { title: "操作系统", items: ["arch", "linux", "windows"] },
    ],

    sites: [
        {
            name: "Example Site 1",
            desc: "Example Site 1",
            url: "https://example1.com",
        },
        {
            name: "Example Site 2",
            desc: "Example Site 2",
            url: "https://example2.com",
        },
    ],

    projects: [
        { name: "Example Project 1", url: "https://github.com/ExampleUser/example-project-1", desc: "Example Project 1" },
        { name: "Example Project 2", url: "https://github.com/ExampleUser/example-project-2", desc: "Example Project 2" },
    ],

    friends: [
        {
            name: "Example Site 1",
            desc: "Example Site 1",
            url: "https://example1.com",
            avatar: "https://example1.com/avatar.png",
        },
        {
            name: "Example Site 2",
            desc: "Example Site 2",
            url: "https://example2.com",
            avatar: "https://example2.com/avatar.png",
        },
    ],

    footer: {
        beian: "备案号", // 备案号，留空则不显示
        beianLink: "https://beian.miit.gov.cn/", // 备案号链接，一般无需修改
        customHtml: '', // 自定义 HTML 代码，如统计代码等
        hitokoto: {
            enable: true, // 是否启用一言
            type: "a&b&c&d&j", // 一言类型，详见 https://developer.hitokoto.cn/sentence/#%E5%8F%A5%E5%AD%90%E7%B1%BB%E5%9E%8B-%E5%8F%82%E6%95%B0
        },
    },
};

其他配置

• 404 页面：修改 public/404.html 来自定义 404 错误页面的样式与内容。
• 友链展示逻辑：FriendsSection.vue 默认使用随机顺序渲染 siteConfig.friends，如需固定顺序请修改该组件。

环境变量

在 Vercel 控制台或本地 .env 配置：

• VITE_GITHUB_TOKEN: 具有仓库读取权限的 GitHub Token，用于绕过 GitHub API 速率限制。（可选）
• UMAMI_API_KEY: Umami 分析的 API Key。
• SMTP_HOST: 邮件服务器主机名
• SMTP_PORT: 端口（如 465 或 587）
• SMTP_USER: 发件人邮箱账号
• SMTP_PASS: 邮箱授权码或密码
• MAIL_FROM: 发件人地址（通常同 SMTP_USER）
• ADMIN_EMAIL: 接收通知的邮箱地址
• SMTP_SECURE：是否启用 SSL/TLS 加密（默认 true）

本地开发

pnpm install
pnpm dev

访问 http://localhost:5173/。

构建

pnpm build

产物输出到

部署到 Vercel

1. 导入仓库到 Vercel。
2. 设置上文的环境变量。

API

• POST /api/send-mail：友链申请邮件发送。请求体示例：

{
    "name": "RhenCloud",
    "url": "https://example.com",
    "desc": "个人博客",
    "email": "you@example.com",
    "avatar": "https://example.com/avatar.png"
}

许可

MIT License.