SHUAXIN DIARY 📝

Generate by AI

一个基于 Astro 的个人博客系统，包含多种外部服务集成和国际化支持。

🚀 项目特色

核心功能

✅ 类型安全的 Markdown - 基于 Astro Content Collections
✅ 超快性能 - 静态站点生成，优化加载速度
✅ 响应式设计 - 支持移动端到桌面端的完美适配
✅ SEO 友好 - 自动生成 sitemap、RSS 和动态 OG 图片
✅ 明暗主题 - 支持自动切换和手动切换
✅ 模糊搜索 - 基于 Pagefind 的全站搜索
✅ 图片缩放 - 点击图片全屏预览，支持键盘操作
✅ 国际化支持 - 中英双语支持
✅ 可访问性优化 - 支持键盘导航和屏幕阅读器

外部服务集成

🚴 Strava API - 展示运动数据和骑行统计
📚 豆瓣 API - 爬取并展示个人观影记录
🐙 GitHub API - 展示代码贡献和项目活动
📝 Fragment API - 动态片段展示（支持文本、图片、链接）
🔍 Pagefind - 静态站点搜索功能

🏗️ 项目架构

blog/
├── public/                          # 静态资源
│   ├── assets/                      # 图片资源
│   ├── js/                         # 客户端脚本
│   ├── movie/                      # 豆瓣电影数据
│   │   ├── data.json              # 电影数据
│   │   └── images/                # 电影海报
│   └── pagefind/                   # 搜索索引（构建时生成）
├── script/                          # 构建脚本
│   ├── douban.ts                   # 豆瓣数据爬取
│   ├── downloadGithubImages.ts     # GitHub 图片下载
│   └── data.json                   # GitHub 数据缓存
├── src/
│   ├── assets/                     # 源码资源
│   │   ├── icons/                  # SVG 图标
│   │   └── images/                 # 图片资源
│   ├── components/                 # 可复用组件
│   │   ├── Header.astro           # 页头组件
│   │   ├── Footer.astro           # 页脚组件
│   │   ├── Card.astro             # 文章卡片
│   │   ├── RideData.astro         # Strava 运动数据展示
│   │   ├── Douban.astro           # 豆瓣观影记录
│   │   ├── Github.astro           # GitHub 活动展示
│   │   ├── React/                 # React 组件
│   │   │   └── FragmentList.tsx   # 动态片段列表（React）
│   │   └── ...                    # 其他组件
│   ├── data/                       # 内容数据
│   │   ├── blog/                  # 博客文章（Markdown）
│   │   │   ├── 技术笔记/           # 技术相关文章
│   │   │   ├── 日常/              # 日常记录
│   │   │   ├── 随笔/              # 随笔文章
│   │   │   └── ...                # 其他分类
│   │   └── pages/                 # 静态页面
│   │       ├── about.md           # 关于页面
│   │       ├── fragments.md       # 动态页面
│   │       └── social.md          # 社交页面
│   ├── i18n/                      # 国际化
│   │   └── locales/               # 语言文件
│   ├── layouts/                   # 页面布局
│   │   ├── Layout.astro          # 基础布局
│   │   ├── PostLayout.astro      # 文章布局
│   │   └── ...                   # 其他布局
│   ├── pages/                     # 路由页面
│   │   ├── [locale]/             # 国际化路由
│   │   ├── posts/                # 文章列表和详情
│   │   ├── tags/                 # 标签页面
│   │   └── ...                   # 其他页面
│   ├── styles/                    # 样式文件
│   ├── utils/                     # 工具函数
│   │   ├── Strava.ts             # Strava API 客户端
│   │   ├── getSortedPosts.ts     # 文章排序
│   │   └── ...                   # 其他工具
│   ├── config.ts                  # 站点配置
│   └── content.config.ts          # 内容集合配置
├── astro.config.ts                # Astro 配置
├── package.json                   # 项目依赖
└── tsconfig.json                 # TypeScript 配置

🛠️ 技术栈

核心框架

Astro - 现代静态站点生成器
React - 用户界面库（用于动态组件）
TypeScript - 类型安全的 JavaScript
TailwindCSS - 实用优先的 CSS 框架

构建工具

Vite - 快速构建工具
Sharp - 图片处理
Satori - OG 图片生成

外部 API

Strava API - 运动数据获取
豆瓣 API - 观影记录爬取（通过 Puppeteer）
GitHub API - 代码贡献数据
Fragment API - 动态片段内容（Cloudflare Workers + supabase）

开发工具

ESLint - 代码检查
Prettier - 代码格式化
Pagefind - 静态搜索

🚀 快速开始

环境要求

Node.js 18+
pnpm（推荐）

安装依赖

pnpm install

环境变量配置

创建 .env 文件并配置以下变量：

# Strava API 配置
CLIENT_ID=your_strava_client_id
CLIENT_SECRET=your_strava_client_secret
REFRESH_TOKEN=your_strava_refresh_token
USER_ID=your_strava_user_id
GRANT_TYPE=refresh_token

# Google Site Verification (可选)
PUBLIC_GOOGLE_SITE_VERIFICATION=your_verification_code

开发环境

# 启动开发服务器
pnpm run dev

# 访问 http://localhost:4321

构建部署

# 完整构建流程（包含数据爬取）
pnpm run pre

# 或者单独构建
pnpm run build

📝 内容管理

添加博客文章

在 src/data/blog/ 目录下创建 .md 文件
添加 Front Matter：

---
title: 文章标题
pubDatetime: 2025-01-15 10:00:00
modDatetime: 2025-01-15 12:00:00 # 可选
featured: false # 是否首页推荐
draft: false # 是否草稿
tags: ["技术", "前端"] # 标签
description: 文章描述
---

文章分类

在 src/data/blog/ 下创建子文件夹来组织分类
支持多级目录结构
文件夹名称会作为分类标识

快速添加文章

# 使用内置脚本
pnpm run addPost

🔧 配置说明

站点配置 (`src/config.ts`)

export const SITE = {
  website: "https://your-domain.com",
  author: "Your Name",
  desc: "网站描述",
  title: "网站标题",
  postPerPage: 4, // 每页文章数
  showArchives: true, // 是否显示归档页
  lightAndDarkMode: true, // 是否支持明暗主题
  lang: "zh", // 默认语言
  timezone: "Asia/Shanghai", // 时区
};

Astro 配置 (`astro.config.ts`)

国际化配置：支持中英双语
环境变量 Schema：定义所需的环境变量
Markdown 配置：支持 TOC、代码高亮等
图片处理：可选择启用/禁用图片优化

🎨 自定义主题

TailwindCSS 变量

在 src/styles/global.css 中修改 CSS 变量：

:root {
  --foreground: /* 前景色 */;
  --background: /* 背景色 */;
  --accent: /* 强调色 */;
  --muted: /* 柔和色 */;
}

组件自定义

所有组件都在 src/components/ 目录下
使用 Astro 组件语法，支持 TypeScript
样式采用 TailwindCSS 类名

🔌 API 集成

Strava 运动数据

在 Strava 开发者平台申请 API 密钥
配置环境变量
数据会在 fragments 页面自动展示

豆瓣观影记录

# 手动触发数据爬取
npx tsx ./script/douban.ts

GitHub 活动数据

# 下载 GitHub 贡献图片
npx tsx ./script/downloadGithubImages.ts

Fragment 动态片段

Fragment 功能支持展示动态内容，包括文本、图片和链接：

数据结构：

interface FragmentData {
  content: string;  // 主文本内容
  date: string;     // 发布时间
  extra?: {
    url?: string;   // 相关链接
    img?: string;   // 图片链接
  };
}

特性：

✅ 客户端渲染（CSR）
✅ 支持文本内容展示
✅ 图片懒加载
✅ 点击卡片跳转外链
✅ 响应式设计
✅ 暗色模式适配
✅ 用户头像和时间显示

API 端点：

POST https://short-route.nixideshuaxin.workers.dev/getAllFragment

📋 可用命令

命令	说明
`pnpm run dev`	启动开发服务器
`pnpm run build`	构建生产版本
`pnpm run preview`	预览构建结果
`pnpm run pre`	完整构建流程（含数据爬取）
`pnpm run addPost`	快速添加文章
`pnpm run format`	格式化代码
`pnpm run lint`	代码检查

🚀 部署方式

Cloudflare Pages

连接 GitHub 仓库
设置构建命令：pnpm run build
输出目录：dist
配置环境变量

Vercel

导入 GitHub 项目
框架选择：Astro
配置环境变量
自动部署

其他平台

支持任何静态站点托管平台，如 Netlify、GitHub Pages 等。

🌍 国际化

支持语言

简体中文 (zh)
English (en)

添加新语言

在 src/i18n/locales/ 添加语言文件
更新 astro.config.ts 中的 locales 配置
为每个页面创建对应语言版本

📊 性能优化

静态站点生成，首屏加载快
图片懒加载和响应式处理
CSS/JS 代码分割和压缩
Service Worker 缓存策略（可选）

🤝 贡献指南

Fork 本仓库
创建功能分支
提交变更
创建 Pull Request

📄 许可证

MIT License - 详见 LICENSE 文件

🙏 致谢

基于 AstroPaper 主题
图标来自 Tabler Icons
构建工具 Astro

Made with ❤️ by SHUAXIN

站点说明