My Cool Blog 技术细节

本文档记录了 my-cool-blog 项目所使用的主要技术和实现细节。

核心技术栈

• 框架 (Framework): Next.js (v14.2.3) - 一个用于生产环境的 React 框架，支持静态站点生成 (SSG) 和服务器端渲染 (SSR)。
• 语言 (Language): TypeScript (v5) - JavaScript 的超集，提供了静态类型检查。
• UI 库 (UI Library): React (v18) - 用于构建用户界面的 JavaScript 库。
• 样式 (Styling): Tailwind CSS (v3.4.1) - 一个功能类优先的 CSS 框架，用于快速构建自定义设计。

内容管理

• 文章格式: 所有博客文章均以 Markdown (.md) 格式编写，并存储在 /posts 目录下。
• 元数据 (Frontmatter): 每篇 Markdown 文章的顶部都包含 YAML frontmatter，用于定义标题、日期等元数据。使用 gray-matter 库来解析这部分内容。
• Markdown 渲染: 使用 remark 和 remark-html 库将 Markdown 文本转换为 HTML，以便在页面上显示。

主要依赖库

• date-fns: 用于格式化文章日期。
• react-tsparticles & tsparticles: 用于实现页面背景中的动态粒子效果。
• react-type-animation: 用于创建打字机动画效果。
• @tailwindcss/typography: Tailwind CSS 插件，为 Markdown 渲染后的 HTML 提供美观的排版样式。

项目结构

• pages/: 存放页面的目录，遵循 Next.js 基于文件的路由机制。
  • pages/index.tsx: 博客主页。
  • pages/posts/[id].tsx: 动态路由页面，用于显示单篇博客文章。
• components/: 存放可重用的 React 组件，如布局、导航栏等。
• lib/: 存放工具函数和辅助模块，例如处理 Markdown 文件的 posts.ts。
• styles/: 存放全局 CSS 文件。
• public/: 存放静态资源，如图片。

构建与部署

• 开发模式: 运行 npm run dev 启动本地开发服务器。
• 生产构建: 运行 npm run build 为生产环境构建优化后的静态文件。
• 启动服务: 运行 npm run start 启动 Next.js 生产服务器。