Mr. Zhongの宝藏之地
首页项目归档照片墙音乐灵境说说杂谈友链工具关于
封面

关于本站:一次博客复刻记录

写作时间:2026-08-08 10:00:00
# 博客
# Next.js
# 复刻
# 技术栈

为什么复刻这个博客

这个网站是基于原作者 XhsmB 复刻而来的,然后根据自己的需要做了二次改造

写这篇文章主要是为了记录这次复刻的过程,以及梳理一下这个网站用到的技术栈。


前端

技术栈:

  • Next.js 16 + React 19 + TypeScript
  • Tailwind CSS 做样式
  • Framer Motion 做动画
  • Three.js + @react-three/fiber 做 3D 背景特效
  • next-themes 做亮/暗主题切换
  • Tiptap 富文本编辑器(后台写文章用)
  • KaTeX 支持数学公式
  • highlight.js 做代码高亮

主要内容:

页面说明首页个人卡片 + 网易云播放器 + 文章轮播 + 照片墙 + 说说文章Markdown 博客列表与详情照片墙图片展示音乐网易云音乐歌单友链朋友们的网站时间线成长记录关于个人介绍

特色功能:

  • 全站弹幕
  • 霓虹渐变流动背景
  • 赛博猫 AI 助手(基于 Gemini API与deepseek chat API)
  • 网易云音乐悬浮播放器
  • 点击粒子特效
  • 开场动画

后台控制台

控制台也是基于 Next.js 16 构建的,额外配了一个 Python 后端(FastAPI + uvicorn)来处理配置保存、图床、同步等操作。

主要作用:

  • 可视化修改站点配置
  • 富文本编辑器写文章、存草稿
  • 同步文章和配置到前端博客目录
  • 一键部署到 GitHub / Vercel

部署环境

  • 本地开发:Windows + Node.js 22 + Python 3.13
  • 服务器:腾讯云 Ubuntu 2核4G(静态导出 + Nginx 部署)

致谢

感谢原作者 XHSmB 开源了这个漂亮的博客模板。


复刻只是起点,慢慢把它变成自己的数字小窝

‍

avatar

Mr. Zhong

初学者的进阶之路

RECOMMENDED

Table of Contents