gitadmin/turingflow-blog-002

Template

Fork 0

Files

“dongming” 5addbbd2df first commit

2025-12-19 13:03:01 +08:00

8.2 KiB

Raw Blame History

venus-nextjs

个人作品集/博客网站模板，适用于设计师、开发者、自由职业者展示作品和服务。

技术栈

Next.js 15.5.9 (已锁定版本，App Router)
React 19.2.3 (已锁定版本，修复 CVE-2025-55182 漏洞)
TypeScript 5
Tailwind CSS 4
next-auth (身份认证)
next-themes (深色/浅色主题切换)
AOS (滚动动画)
react-slick (轮播组件)
Markdown/MDX (博客内容)

快速开始

pnpm install
pnpm run dev

目录结构

src/
├── app/                      # Next.js App Router 入口
│   ├── layout.tsx            # 根布局 (Header + Footer + 主题Provider)
│   ├── page.tsx              # 首页
│   ├── not-found.tsx         # 404 页面
│   ├── globals.css           # 全局样式
│   ├── context/              # React Context
│   │   └── AuthDialogContext.tsx  # 认证对话框状态管理
│   ├── api/                  # API 路由和数据
│   │   ├── auth/[...nextauth]/route.ts # NextAuth 认证 API
│   │   ├── data.tsx          # 静态数据 (菜单、计数器、服务、作品集)
│   │   └── contex/ToasetContex.tsx # Toast 通知 Context
│   └── (site)/               # 路由分组 (共享布局)
│       ├── about/page.tsx    # 关于页面
│       ├── blog/page.tsx     # 博客列表
│       ├── contact/page.tsx  # 联系页面
│       ├── documentation/page.tsx # 文档页面
│       ├── portfolio/page.tsx # 作品集列表
│       └── services/page.tsx # 服务页面
├── components/               # 可复用组件
│   ├── Layout/               # 布局组件
│   │   ├── Header/index.tsx  # 导航栏 (Logo + 菜单 + 主题切换)
│   │   └── Footer/index.tsx  # 页脚
│   ├── Home/                 # 首页专用组件
│   │   ├── Hero/index.tsx    # Hero 区域
│   │   ├── Services/index.tsx # 服务展示
│   │   ├── Counter/index.tsx # 数据统计
│   │   ├── WorkProgress/index.tsx # 工作进度
│   │   └── Contact/index.tsx # 联系表单
│   ├── Auth/                 # 认证相关
│   │   ├── SignIn/index.tsx  # 登录组件
│   │   ├── SignUp/index.tsx  # 注册组件
│   │   ├── SocialSignIn.tsx  # 社交登录
│   │   └── AuthDialog/       # 认证对话框
│   ├── Blog/                 # 博客组件
│   ├── Contact/              # 联系页组件
│   │   ├── Form/index.tsx    # 联系表单
│   │   ├── ContactInfo/index.tsx # 联系信息
│   │   └── OfficeLocation/index.tsx # 办公地点
│   ├── Documentation/        # 文档组件
│   ├── portfolio/            # 作品集组件
│   ├── Common/               # 通用组件
│   ├── SharedComponent/      # 共享组件
│   ├── Breadcrumb/           # 面包屑
│   ├── ScrollToTop/          # 回到顶部按钮
│   ├── NotFound/             # 404 组件
│   └── nextauth/             # NextAuth Provider
├── types/                    # TypeScript 类型定义
│   ├── blog.ts               # 博客类型
│   ├── menu.ts               # 菜单类型
│   └── breadcrumb.ts         # 面包屑类型
├── utils/                    # 工具函数
│   ├── image.ts              # 图片路径处理
│   ├── aos.tsx               # AOS 动画初始化
│   ├── markdown.ts           # Markdown 解析
│   ├── markdownToHtml.ts     # Markdown 转 HTML
│   ├── validateEmail.ts      # 邮箱验证
│   └── extendedConfig.ts     # 扩展配置
└── Style/                    # 样式文件
    └── style.css             # 组件样式

markdown/                     # 博客内容 (MDX 格式)
└── Blog/
    ├── Blog_1.mdx
    ├── Blog_2.mdx
    └── ...

public/                       # 静态资源
└── images/
    ├── logo/                 # Logo 图片
    ├── hero/                 # Hero 区域图片
    ├── blog/                 # 博客封面图
    ├── portfolio/            # 作品集图片
    ├── services/             # 服务图标
    ├── contact/              # 联系页图片
    ├── counter/              # 计数器图标
    ├── testimonial/          # 评价图片
    ├── footer/               # 页脚图标
    └── documentation/        # 文档图片

路由配置

路径	页面	说明
`/`	Home	首页 (Hero + 服务 + 作品集 + 评价 + 联系)
`/about`	About	关于我
`/services`	Services	服务介绍
`/portfolio`	Portfolio	作品集列表
`/blog`	Blog	博客列表
`/contact`	Contact	联系方式
`/documentation`	Documentation	模板文档

数据结构

菜单数据 (src/app/api/data.tsx)

export const menuItems = [
    { name: "Home", href: "#home" },
    { name: "About", href: "#about" },
    { name: "Services", href: "#services" },
    { name: "Portfolio", href: "#portfolio" },
    { name: "Testimonials", href: "#testimonials" },
    { name: "Blog", href: "/#blog" },
];

服务数据 (src/app/api/data.tsx)

export const Servicebox = [
    {
        icon: '/images/services/ux-design-product_1.svg',
        title: 'UX & Product Design',
        description: '服务描述...',
    },
    // ...
];

作品集数据 (src/app/api/data.tsx)

export const portfolioinfo = [
    {
        image: '/images/portfolio/cozycasa.png',
        alt: 'Portfolio',
        title: 'Cozycasa',
        slug: 'Cozycasa',
        info: 'Designation',
        Class: 'md:mt-0'  // 布局样式
    },
    // ...
];

博客类型 (src/types/blog.ts)

export type Blog = {
  id?: number;
  title?: string;
  slug?: string;
  excerpt?: string;
  coverImage?: string;
  date: string;
};

核心组件说明

布局系统

RootLayout (src/app/layout.tsx): 根布局，包含主题Provider、认证Provider、Header和Footer
使用 next-themes 实现深色/浅色模式切换
使用 next-auth 实现用户认证

主题切换

主题通过 next-themes 的 ThemeProvider 管理，支持:

light - 浅色主题
dark - 深色主题
system - 跟随系统

动画效果

使用 AOS (Animate On Scroll) 库，在 src/utils/aos.tsx 初始化

认证系统

使用 next-auth v4，配置文件位于 src/app/api/auth/[...nextauth]/route.ts。

启用社交登录需要：

在 .env.local 中配置环境变量：

NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=http://localhost:3000

# Google 登录
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# GitHub 登录
GITHUB_ID=your-github-id
GITHUB_SECRET=your-github-secret

在 route.ts 中取消对应 provider 的注释

常见修改任务

修改网站信息

修改 src/components/Layout/Header/index.tsx 中的 Logo
修改 src/components/Layout/Footer/index.tsx 中的版权信息
修改 src/app/layout.tsx 中的 metadata

修改导航菜单

编辑 src/app/api/data.tsx 中的 menuItems 数组

添加新页面

在 src/app/(site)/ 目录下创建新文件夹和 page.tsx
在 menuItems 中添加导航项

添加博客文章

在 markdown/Blog/ 目录下创建新的 .mdx 文件
使用 frontmatter 定义标题、日期、封面图等

修改样式主题

编辑 src/app/globals.css 中的 CSS 变量
或修改 tailwind.config.ts 中的主题配置

修改服务/作品集数据

编辑 src/app/api/data.tsx 中对应的数据数组

图片资源

存放在 public/images/ 目录
使用 getImgPath() 工具函数获取路径 (src/utils/image.ts)
引用路径：/images/xxx.jpg

安全说明

以下依赖版本已锁定以修复安全漏洞：

Next.js 15.5.9 - 锁定版本，修复漏洞编号为：CVE-2025-66478
React 19.2.3 - 修复 React Server Components 远程代码执行漏洞 (CVE-2025-55182)

请勿使用 ^ 或 ~ 前缀以避免自动升级到有漏洞的版本。

8.2 KiB Raw Blame History Unescape Escape