建站手记¶

本文档记录个人网站的技术架构与功能实现，供维护与后续扩展参考。

一、系统概述¶

单一体前后端项目：服务端渲染（SSR），前台与后台共用一套代码与数据库。设计遵循「简约、大方、高级」原则，功能以实用为先，避免无价值的装饰元素。

二、技术架构¶

• 后端：PHP 8.2 / Laravel 11，Eloquent ORM，Blade 模板服务端渲染，Session 认证 + bcrypt，表单 CSRF 校验，后台路由经** **auth 中间件保护。
• 前端：原生 CSS（app.css / admin.css，CSS 变量统一配色与字体，移动优先、自带日夜模式）+ 原生 JS，版本号做缓存刷新。
• 编辑器：Vditor（所见即所得 / 分屏预览 / 源码切换）；league/commonmark 渲染 Markdown；highlight.js 代码高亮。
• 图片：intervention/image 压缩并生成多规格图，PhotoSwipe 灯箱，SortableJS 拖拽排序，懒加载。
• 数据与部署：MySQL（Migration 建表），Nginx + PHP-FPM，.env 管理配置，Git + Gitee 托管。

三、功能模块¶

前台¶

• 首页：Hero 简介 + 最新文章。
• 文章：列表 / 搜索 / 分类 / 标签筛选，详情含代码高亮，归档页。
• 相册：封面网格 + 详情画廊 + 灯箱全屏浏览。
• 声光片刻：图文流，并整合「音乐」入口。
• 音乐：详情播放器，支持一个音乐多个版本（音频 + 歌词），版本切换与逐行同步歌词（LRC / 纯文本）。
• 足迹：省份点亮地图，点击城市查看图文。
• 工具：创作型小工具，当前含「歌词卡片」（歌词生成可分享 SVG 卡片，含星野星轨版式）。
• 关于 / 友链：静态内容页，后台可维护。

后台¶

• 仪表盘：统计卡片 + 最近文章 / 相册 / 片刻 / 音乐概览。
• 文章 / 分类 / 标签：增删改查、发布 / 草稿切换。
• 相册：批量上传、拖拽排序、设置封面、发布 / 下架。
• 声光片刻：图文发布与管理。
• 音乐：多版本管理，各版本独立上传音频与歌词，音频 AJAX 上传。
• 足迹：城市 / 省份点亮的增删改。
• 工具：工具条目与配置管理。
• 系统设置：站点名称、简介、头像、页脚信息等。