sui_blog

个人博客 — 水墨纸质杂志风格。

技术栈：Next.js 16 + React 19 + Tailwind CSS 4 + GSAP ScrollTrigger。

页面

路由	说明
`/`	首页 — Hero 逐字揭示 + 精选文章 + 最新文章
`/blog`	文章列表 — 按时间倒序，分类/标签筛选
`/posts/[slug]`	文章详情 — 宋式排版，上下篇导航
`/categories`	分类浏览 — 卡片网格，悬停动效
`/tags`	标签云
`/about`	关于页 — 个人介绍 + 时间轴 + 技术栈

后台管理

路由	说明
`/admin/login`	登录（密码认证，cookie session）
`/admin`	仪表盘 — 统计概览 + 最近文章
`/admin/posts`	文章管理 — 列表筛选、新建、编辑、删除
`/admin/categories`	分类管理 — 增删改
`/admin/tags`	标签管理 — 云式展示，hover 删除

数据存储在 src/data/storage/*.json，已加入 .gitignore。

快速开始

pnpm install
pnpm dev          # http://localhost:3000
pnpm build        # 生产构建

初始化种子数据（首次运行）：

npx tsx src/lib/seed.ts

项目结构

src/
├── app/
│   ├── page.tsx              # 首页
│   ├── layout.tsx            # 根布局
│   ├── globals.css           # 全局样式 + Tailwind v4 设计令牌
│   ├── about/                # 关于页
│   ├── admin/                # 后台管理
│   │   ├── layout.tsx        # 侧栏 + 鉴权
│   │   ├── login/            # 登录页
│   │   ├── posts/            # 文章 CRUD
│   │   ├── categories/       # 分类管理
│   │   └── tags/             # 标签管理
│   ├── api/                  # Route Handlers
│   │   ├── auth/             # 登录/登出/鉴权
│   │   ├── posts/            # 文章 CRUD
│   │   ├── categories/       # 分类 CRUD
│   │   └── tags/             # 标签 CRUD
│   ├── blog/                 # 文章列表
│   ├── categories/           # 分类浏览
│   ├── posts/[slug]/         # 文章详情
│   └── tags/                 # 标签云
├── components/
│   ├── Header.tsx            # 顶部导航
│   ├── Footer.tsx            # 页脚
│   ├── HeroSection.tsx       # 首页 Hero
│   ├── BlogList.tsx          # 文章列表组件
│   ├── PostContent.tsx       # 文章正文排版
│   ├── PostSections.tsx      # 精选/最近文章卡片
│   └── GsapReveal.tsx        # GSAP 滚动动画组件
├── data/
│   ├── posts.ts              # Mock 数据
│   └── storage/              # JSON 数据文件（gitignored）
└── lib/
    ├── store.ts              # 数据存储层（posts/categories/tags CRUD）
    └── seed.ts               # 种子数据脚本

设计系统

详见 UI.md。

核心色彩：parchment（纸张底色）+ ink（墨色文字）+ terracotta（赭石强调）+ sage（成功/发布状态）。

字体三层：font-display（宋体标题）→ font-body（宋体正文）→ font-sans（无衬线 UI 文字）。

动画：GSAP ScrollTrigger 驱动页面滚动揭示，逐字 blur 动画用于标题，CSS transition 处理微交互。

部署

pnpm build
pnpm start

或部署到 Vercel / 任意 Node.js 主机。

License

MIT

3.4 KiB Raw Permalink Blame History Unescape Escape