React后台作品集

folio-template — React 后台模板

作者 Alaskaaa17

自托管作品集模板，带真实后台管理，React 19 + tRPC + Drizzle，适合想自主更新内容的开发者。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

真实后台管理，登录后可编辑资料、管理项目、查看联系表单消息

图片上传在浏览器端自动压缩，支持项目相册和灯箱浏览

内置 SEO 标签、动态 OG 图片接口、sitemap 和 robots.txt

联系表单有垃圾邮件过滤、速率限制，可选 Cloudflare Turnstile

暗色模式和英文/印尼语切换，视觉系统基于 CSS 自定义属性

后台集成 Vercel Web Analytics，可查看访问量和页面浏览量图表

模板详细介绍

Folio 是一个自托管的作品集模板，但它不是静态站点生成器，而是一个带真实后台管理的应用。前端展示个人简介、项目作品、联系表单等内容，后台 `/admin` 提供登录、编辑资料、增删改项目、拖拽排序、上传图片（浏览器端自动压缩）以及查看联系表单消息的功能，所有数据存储在 MySQL 兼容数据库中。技术栈为 React 19 + Vite + TypeScript，使用 tRPC v11 和 TanStack Query 管理 API 状态，Drizzle ORM 操作数据库，图片存储依赖 Vercel Blob，整个后端被打包成一个 Vercel serverless 函数。

模板内置了 SEO 支持（Open Graph、sitemap、动态 OG 图片接口）、暗色模式、英文/印尼语切换、联系表单的垃圾邮件过滤和速率限制，后台登录也有暴力破解保护。项目分类默认有 product、brand、motion 三种，可自行修改。视觉风格为暗色新粗野主义，带钴蓝强调色，有自定义光标和滚动显示动画，并尊重系统的 reduced-motion 设置。

需要留意的是，这个模板要求你自行准备 MySQL 兼容数据库（README 推荐 TiDB Cloud Serverless 免费层）和 Vercel Blob 存储，部署到 Vercel 后还需配置环境变量。它适合愿意自己维护数据库和部署的开发者，而不是想要零配置静态站点的用户。上线前建议核对 README 中的部署步骤，特别是 `pnpm run build:api` 的时机，以及后台登录密码和 JWT 密钥的设置。

React后台作品集

适合你的项目吗？

适用场景

个人作品集网站，希望直接通过后台更新内容而不改代码
设计师或开发者展示项目案例，需要按分类筛选和图片展示
需要联系表单且希望有基本防垃圾邮件能力的个人站点
想学习 React 19、tRPC、Drizzle 等现代全栈技术组合的开发者

适合人群

熟悉 React 和现代前端工具链的开发者
愿意自行配置数据库和对象存储的用户
需要多语言（英/印尼）或可扩展语言切换的站点
偏好自托管、不想被平台锁定内容的数据所有者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要准备 MySQL 兼容数据库（推荐 TiDB Cloud Serverless 免费层）、Vercel Blob 存储，并配置 DATABASE_URL、JWT_SECRET、ADMIN_PASSWORD 环境变量。
2
部署到 Vercel 前需运行 `pnpm run build:api` 重新生成打包后的 API 函数。
3
默认内容在 `shared/portfolio.ts` 中，项目分类需在多个文件中同步修改。

查看仓库使用说明