Logic.Single.Core Blog

基于 Astro 6 的赛博朋克风格个人博客，通过 Cloudflare Tunnel 对外提供服务。

技术栈

层面	技术
框架	Astro 6 (SSG 静态站点)
语言	TypeScript
博客内容	MDX + Zod schema 校验
数据存储	JSON 文件 (`src/content/*/data.json`)
站点配置	`site-data.json` (构建时注入)
编辑器	自建可视化编辑器 (`/editor`)
图标	Lucide Icons
部署	泰山派 RK3566 + Node.js + Cloudflare Tunnel

项目结构

├── server.mjs                  # API 服务器（静态文件 + 编辑器 API）
├── site-data.json              # 站点配置（邮箱、社交链接、个人标签等）
├── src/
│   ├── components/
│   │   ├── Header.astro        # 顶部导航（含赛博终端）
│   │   └── Footer.astro        # 页脚
│   ├── content/
│   │   ├── blog/               # 博客文章 (MDX)
│   │   ├── diary/data.json     # 日记数据
│   │   ├── study/data.json     # 学习记录数据
│   │   ├── photos/data.json    # 相册数据
│   │   └── archive/data.json   # 档案库数据
│   ├── content.config.ts       # 内容 schema 定义
│   ├── layouts/
│   │   └── Layout.astro        # 基础 HTML 布局（极光背景、粒子拖尾）
│   ├── lib/
│   │   └── github.ts           # GitHub API 客户端
│   ├── pages/
│   │   ├── index.astro         # 首页（打字机、热力日历、粒子系统）
│   │   ├── blog/
│   │   │   ├── index.astro     # 博客列表
│   │   │   ├── [slug].astro    # 文章详情
│   │   │   └── tag/[tag].astro # 标签筛选
│   │   ├── diary.astro         # 日记页（赛博信息流 + 附件下载）
│   │   ├── study.astro         # 学习记录（时间线 + 技能雷达）
│   │   ├── gallery.astro       # 相册页
│   │   ├── archive.astro       # 档案库（密码锁定）
│   │   ├── projects.astro      # GitHub 项目展示
│   │   ├── about.astro         # 关于页
│   │   ├── contact.astro       # 联系页
│   │   ├── 404.astro           # 404 页面
│   │   └── editor/
│   │       └── index.astro     # 可视化编辑器（博客/日记/相册/学习/档案/设置）
│   ├── site.config.ts          # 站点配置（读取 site-data.json）
│   └── styles/
│       └── global.css          # 全局样式 & 设计变量
├── public/
│   └── uploads/blog/           # 上传的图片和附件
├── dist/                       # 构建产物
└── package.json

快速开始

# 安装依赖
npm install

# 本地开发（http://localhost:4321）
npm run dev

# 构建静态站点
npm run build

# 启动 API 服务器（http://localhost:3000）
EDITOR_PASSWORD=你的密码 npm start

站点配置

编辑 site-data.json 修改站点信息：

{
  "siteName": "Logic.Single.Core",
  "siteUrl": "https://xwlz.tech",
  "githubUsername": "xwlzLSC",
  "profileTitle": "你的个人标签",
  "mottos": "标语1；标语2；标语3",
  "contact": { "email": "your@email.com" },
  "social": {
    "github": "https://github.com/xxx",
    "twitter": "",
    "linkedin": ""
  },
  "resume": { "url": "" }
}

修改后重新 npm run build 即可生效。也可通过编辑器的「全站设置」页面在线修改。

博客文章格式

文章存放在 src/content/blog/，使用 MDX 格式：

---
title: "文章标题"
description: "文章摘要"
pubDate: 2026-05-28
updatedDate: 2026-05-28
heroImage: "/uploads/blog/cover.jpg"
tags: ["标签1", "标签2"]
---

正文内容（Markdown + MDX）

可视化编辑器

访问 /editor/，输入密码即可在线管理所有内容。

功能模块：

博客管理 — 创建 / 编辑 / 删除文章，Markdown 编辑 + 实时预览，图片上传
日记管理 — 发布日记，关联 PDF/DOC 附件
相册管理 — 上传照片，分类管理
学习记录 — 记录学习进度，技能雷达图，时间线展示
档案库 — 私密文件归档，密码锁定
全站设置 — 修改邮箱、社交链接、个人标签、简历链接等

数据存储在 src/content/*/data.json，编辑器通过 API 读写，修改后自动触发构建。

API 接口

所有 API 需要 Bearer Token 认证（通过 /api/login 获取）。

方法	路径	说明
POST	`/api/login`	登录获取 Token
GET	`/api/posts`	获取博客列表
GET/PUT/DELETE	`/api/posts/:slug`	文章 CRUD
POST	`/api/upload`	上传文件（图片/文档，最大 50MB）
GET/POST	`/api/diary`	日记列表 / 新建
PUT/DELETE	`/api/diary/:id`	编辑 / 删除日记
GET/POST	`/api/study`	学习记录列表 / 新建
PUT/DELETE	`/api/study/:id`	编辑 / 删除学习记录
GET/POST	`/api/photos`	相册列表 / 新建
PUT/DELETE	`/api/photos/:id`	编辑 / 删除相册
GET/POST	`/api/archive`	档案列表 / 新建
PUT/DELETE	`/api/archive/:id`	编辑 / 删除档案
GET/PUT	`/api/settings`	站点配置读写
GET	`/api/rebuild-status`	构建状态查询
POST	`/api/git-pull`	拉取远程更新
POST	`/api/git-push`	推送内容到远程

环境变量

在 .env 文件中配置：

变量	必填	说明
`EDITOR_PASSWORD`	部署时必填	编辑器登录密码
`PORT`	否	服务器端口，默认 3000
`GITHUB_TOKEN`	否	GitHub API token，提升速率限制

常用命令

命令	用途
`npm run dev`	本地开发服务器 (port 4321)
`npm run build`	生产构建
`npm start`	启动 API 服务器 (port 3000，需先 build)
`npm run preview`	预览构建产物

部署流程

# 1. 构建
npm run build

# 2. 启动服务器
EDITOR_PASSWORD=你的密码 npm start

# 3. 通过 Cloudflare Tunnel 暴露
cloudflared tunnel --url http://localhost:3000

编辑器修改内容后会自动触发 npm run build，也可通过编辑器的「Git 推送」按钮同步到远程仓库，由 Cloudflare Pages 自动部署。

设计风格

暗色赛博朋克主题，核心视觉元素：

极光发光球背景 + 噪点纹理
鼠标跟随发光卡片效果
3D 芯片光标粒子拖尾
金属拉丝字体反射动画
全局 CSS 变量定义在 src/styles/global.css