Homepage

现代化、响应式的个人主页模版

基于 Next.js 13+ 构建的全功能个人主页模板，集成博客、项目展示、书单、友链等多种功能。
采用 TypeScript + Tailwind CSS + Framer Motion 技术栈，提供流畅的动画效果和卓越的用户体验。

🚀 快速开始 • 📖 文档 • 🎨 特性 • 💻 演示 • 🤝 贡献

简体中文 | English

✨ 特性

📝 内容管理

📝 Markdown - 支持 Markdown 写作，代码语法高亮
📚 博客系统 - 完整的博客功能，支持分页、分类、标签
✍️ 随笔功能 - 记录生活感悟，支持心情标签
🔍 搜索功能 - 内置全文搜索

🗂️ 展示模块

💼 项目展示 - 展示个人项目作品
📚 书籍管理 - 分享阅读书单，记录读书心得
🤝 友链管理 - 管理友情链接
👤 关于页面 - 完整的个人介绍

🎬 动画效果

✨ 入场动画 - 流畅的入场动画效果
🎭 动画系统 - 元素按层次依次出现
🚀 交互反馈 - 悬浮、点击等交互反馈
⚡ 性能优化 - 基于 Framer Motion 构建

🎯 互动功能

💬 评论系统 - 支持多种评论系统
🔄 实时更新 - 动态内容加载
🎨 主题适配 - 评论系统自动适配网站主题

🚀 部署与开发

🚀 一键部署 - 支持 Vercel、Netlify 等平台
⚙️ 配置驱动 - 通过配置文件管理所有功能
🔧 开发友好 - 热重载、ESLint、Prettier 开箱即用
📦 模块化设计 - 组件化架构，易于定制和扩展

⚡ 性能与技术

⚡ 极速性能 - 基于 Next.js 13+ 构建，静态生成
🎯 SEO 优化 - 内置 SEO 最佳实践
📱 PWA 支持 - 支持离线访问，可安装到桌面
🔧 TypeScript - 完整的类型安全

🚀 快速开始

方式一：使用 npx

# 创建新项目
npx @ducr/homepage my-website

# 进入项目目录
cd my-website

# 启动开发服务器
npm run dev

方式二：克隆仓库

# 克隆仓库
git clone https://github.com/Ducr/homepage.git my-website

# 进入项目目录
cd my-website

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:4000 查看你的网站。

📖 文档

🛠️ 开发命令

npm run dev      # 启动开发服务器 (http://localhost:4000)
npm run build    # 构建生产版本
npm run start    # 启动生产服务器
npm run lint     # 代码检查

⚙️ 配置网站

修改 site.config.example.ts 为ste.config.ts。

编辑 site.config.ts 文件来配置你的网站：

export const siteConfig = {
  // 基本信息
  name: "你的名字",
  title: "你的网站标题",
  description: "你的网站描述",
  url: "https://yourdomain.com",
  
  // 个人信息
  profile: {
    avatar: "/images/avatar.jpg",
    bio: "你的个人简介",
    email: "your.email@example.com",
    github: "https://github.com/yourusername",
    social: {
      linkedin: "https://linkedin.com/in/username",
      twitter: "https://twitter.com/username",
      // ... 更多社交媒体链接
    }
  },
  
  // 导航配置
  navigation: {
    main: [
      { name: "首页", href: "/" },
      { name: "博客", href: "/blog" },
      { name: "随笔", href: "/thoughts" },
      { name: "关于", href: "/about" },
    ],
  }
}

📝 添加内容

博客文章

在 content/blog/ 目录下创建 .md 文件：

---
title: 标题
date: "2025-10-11"
category: "生活"
tags: ["个人主页", "Next.js"]
excerpt: "这是我的第一篇博客文章，欢迎来到我的个人主页！"
readTime: "3分钟"
---

# 文章内容

这里是文章的正文内容...

随笔

在 content/thoughts/ 目录下创建 .md 文件：

---
date: "2025-08-27"
mood: "🤔"
tags: ["计划"]
---

# 随笔内容

这里是随笔的内容...

图片资源

将图片文件放在 public/images/ 目录下，然后在文章中引用：

![图片描述](/images/your-image.jpg)

🗂️ 配置展示模块

项目展示

在 site.config.ts 中配置项目信息：

projects: {
  enabled: true,
  title: "项目",
  description: "探索技术作品与创新项目",
  items: [
    {
      id: "homepage",
      title: "个人主页",
      description: "基于 Next.js 的个人主页模板",
      image: "/images/projects/homepage.jpg",
      tags: ["Next.js", "TypeScript", "Tailwind CSS"],
      github: "https://github.com/username/homepage",
      demo: "https://your-site.com",
      status: "active", // active | completed | archived
      featured: true
    }
    // 更多项目...
  ]
}

书籍管理

配置你的阅读书单：

books: {
  enabled: true,
  title: "书籍",
  description: "分享值得阅读的好书，记录阅读心得",
  items: [
    {
      id: "clean-code",
      title: "代码整洁之道",
      author: "Robert C. Martin",
      category: "tech",
      rating: 5,
      status: "read", // reading | read | want_to_read
      cover: "/images/books/clean-code.jpg",
      description: "代码质量与其整洁度成正比...",
      review: "这本书彻底改变了我对编程的认知",
      tags: ["编程", "软件工程", "最佳实践"],
      readDate: "2024-01-15",
      featured: true,
      purchaseLinks: {
        amazon: "https://amazon.com/clean-code",
        douban: "https://book.douban.com/subject/4199741/"
      }
    }
    // 更多书籍...
  ]
}

友链管理

配置友情链接：

friends: {
  enabled: true,
  title: "友链",
  description: "志同道合的朋友们",
  items: [
    {
      id: "friend-1",
      name: "朋友名称",
      description: "朋友网站的描述",
      avatar: "https://avatars.githubusercontent.com/u/1?v=4",
      url: "https://friend-site.com",
      featured: true,
      status: "active", // active | inactive
      tags: ["技术", "博客", "前端"]
    }
    // 更多友链...
  ]
}

关于页面

配置个人信息展示：

about: {
  // 个人简介
  intro: {
    title: "个人简介",
    paragraphs: [
      "x年前端经验，拥有 2B/2G 的多个项目经验...",
      "在工作之余，我喜欢阅读技术文章..."
    ]
  },
  
  
  // 职业技能
  experience: {
    title: "职业技能",
    paragraphs: [
      "1、熟练 vue 全家桶",
      "2、熟练 react 全家桶"
    ]
  },

  // 工作经历
  experience: {
    title: "工作经历",
    items: [
      {
        year: "2023 - 现在",
        title: "软件工程师",
        company: "公司名称",
        description: "工作描述...",
        highlights: ["工作亮点1", "工作亮点2"]
      }
    ]
  },

  // 项目经历
  experience: {
    title: "项目经历",
    items: [
      {
        year: "2023 - 现在",
        title: "项目名称",
        description: "项目描述...",
        responsibility: "工作职责...",
        stack: "主要技术...",
        highlights: ["项目亮点1", "项目亮点2"]
      }
    ]
  },

  // 教育背景
  education: {
    title: "教育背景",
    items: [
      {
        year: "2020 - 2024",
        degree: "计算机科学与技术 硕士",
        school: "大学名称",
        description: "专业课程描述...",
        gpa: "3.8/4.0"
      }
    ]
  },
  
  // 技能专长
  skills: {
    title: "技能专长",
    categories: [
      {
        name: "后端开发",
        skills: [
          { name: "Java/Spring Boot", level: 95 },
          { name: "Python/Django", level: 88 }
        ]
      }
    ]
  }
}

💬 配置评论系统

支持多种评论系统，可以选择其中一种进行配置。评论功能会自动出现在博客详情页、随笔页、项目页、书籍页、友链页和关于页。

支持的评论系统

Giscus (推荐) - 基于 GitHub Discussions，完全免费
Gitalk - 基于 GitHub Issues
Valine - 基于 LeanCloud
Waline - Valine 的增强版

快速配置

在 site.config.ts 文件中配置评论系统：

export const siteConfig = {
  // ... 其他配置
  
  comments: {
    enabled: true,               // 启用评论功能
    provider: "giscus",          // 选择评论系统: giscus | gitalk | valine | waline
    
    // Giscus 配置 (推荐)
    giscus: {
      repo: "your-username/your-repo",
      repoId: "your-repo-id",
      category: "General",
      categoryId: "your-category-id",
      mapping: "pathname",
      theme: "preferred_color_scheme",
      lang: "zh-CN",
      // ... 更多配置
    },
    
    // 其他评论系统配置...
  },
  
  // ... 其他配置
};

提示: 仍支持环境变量配置方式，但推荐使用配置文件方式管理。

详细配置说明请查看评论系统配置指南。

🚀 部署

Vercel 部署（推荐）

点击上方按钮
连接你的 GitHub 账户
自动部署完成

Netlify 部署

点击上方按钮
连接你的 GitHub 账户
设置构建命令：npm run build
设置发布目录：.next

🛠️ 技术栈

框架: Next.js 13+ - React 全栈框架
样式: Tailwind CSS - 实用优先的 CSS 框架
语言: TypeScript - 类型安全的 JavaScript
图标: Heroicons + Lucide React
动画: Framer Motion - 生产就绪的动画库
内容: Markdown + Gray Matter
代码高亮: Prism.js

📁 项目结构

homepage/
├── app/                    # Next.js 13+ App Router
│   ├── about/             # 关于页面
│   ├── blog/              # 博客相关页面
│   ├── thoughts/          # 随笔页面
│   ├── books/             # 书籍页面
│   ├── friends/           # 友链页面
│   └── projects/          # 项目展示页面
├── components/            # React 组件
├── content/               # Markdown 内容
│   ├── blog/             # 博客文章
│   └── thoughts/         # 随笔文章
├── lib/                   # 工具函数
├── public/                # 静态资源
│   └── images/           # 图片资源
├── styles/                # 样式文件
├── site.config.ts         # 网站配置
└── package.json          # 项目依赖

🤝 贡献

我们欢迎所有形式的贡献！可参考贡献指南指南。

如何贡献

Fork 这个仓库
创建你的特性分支 (git checkout -b feature/AmazingFeature)
提交你的更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开一个 Pull Request

📄 许可证

本项目基于 MIT 许可证开源。

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

如果这个项目对你有帮助，请给一个 ⭐️支持

Made with ❤️ by Ducr

Name		Name	Last commit message	Last commit date
Latest commit History 95 Commits
.github		.github
app		app
assets		assets
bin		bin
components		components
content		content
contexts		contexts
docs		docs
hooks		hooks
lib		lib
public		public
scripts		scripts
styles		styles
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmignore		.npmignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.en.md		README.en.md
README.md		README.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
site.config.example.ts		site.config.example.ts
site.config.ts		site.config.ts
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

License

Ducr/homepage

Folders and files

Latest commit

History

Repository files navigation