Skip to content

README.md

Latest commit

 

History

History
216 lines (148 loc) · 6.37 KB

README.md

File metadata and controls

216 lines (148 loc) · 6.37 KB

Viki 的博客

Next.js React TypeScript Tailwind CSS

一个基于 Next.js 16、React 19 和 Tailwind CSS v4 构建的现代化个人博客。

生活需要记录

screenshot

💻 预览

✨ 特性

🚀 现代化技术栈

  • Next.js 16 - App Router + 混合渲染（静态生成 + 动态 API）
  • React 19 - Server Components + React Compiler
  • Tailwind CSS v4 - CSS-first 配置，OKLCH 色彩空间
  • TypeScript 5.9+ - 完整的类型安全
  • pnpm 10.25+ - 高效的包管理器

📝 内容管理

  • 纯 Markdown - 使用 .md 文件，按年份组织（2019-2026），非 MDX
  • Unified 生态 - 基于 remark + rehype 的 Markdown 处理管线
    • parseMarkdown() - 短内容（碎碎念、Mio 说），启用换行符处理
    • parseArticle() - 长文章，支持标题锚点、代码高亮
  • Shiki 双主题 - one-light 和 one-dark-pro 自动切换的代码高亮
  • 自定义插件 - 剧透语法 ||text||、图片缩放、外部链接处理
  • LRU 缓存 - 最多缓存 500 条 HTML 输出，提升性能
  • Front Matter - 灵活的文章元数据（标题、日期、摘要、标签、置顶等）
  • 多页面支持 - 首页、文章归档、文章详情、大事记、碎碎念、Mio 说、关于页等

🎨 设计与体验

  • 设计风格 - 扁平化设计，极简主义，严格的黑白灰色调
    • 无阴影设计（box-shadow: none）
    • 使用边框和背景色分隔元素
    • 小圆角（2px - 6px）
  • 主题系统 - 亮色/暗色/跟随系统三模式切换，基于 next-themes
  • OKLCH 色彩空间 - 感知均匀的现代色彩系统，更接近人眼视觉
  • 响应式布局 - 完美适配桌面、平板、手机
  • 平滑动画 - 主题切换、页面滚动、图片缩放等交互反馈
  • 系统字体栈 - 零字体加载，原生阅读体验

🔍 SEO 与性能优化

  • 动态 OG 图片 - 基于 @vercel/og 的社交分享卡片，构建时预生成
    • 文章页：显示标题、日期、阅读时间、摘要
    • 首页：显示统计数据（文章数、碎碎念数等）
    • 使用自定义字体（思源黑体）
  • 结构化数据 - JSON-LD 格式的 BlogPosting 和 BreadcrumbList Schema
  • 智能推荐算法 - 多维度加权评分（标签相似度 40% + 时间新鲜度 30% + 时间接近度 20% + 确定性随机 10%）
  • RSS Feed - 完整的 RSS 2.0 支持（/rss），最新 20 篇文章，1 小时缓存
  • 混合渲染 - 静态生成（SSG）+ 增量静态生成（ISR）
  • 预连接优化 - 关键域名 DNS 预解析和预连接
  • Robots.txt - 搜索引擎爬虫配置
  • PWA Manifest - 渐进式 Web 应用支持
  • Google Analytics - 访问统计和用户行为分析

🛠️ 技术栈

核心框架

内容处理

工具库

开发工具

  • pnpm - 包管理器（10.25+）
  • Prettier - 代码格式化（无分号、单引号、尾随逗号）
  • ESLint - 代码检查
  • Vitest - 单元测试框架
  • React Compiler - 自动性能优化

🚀 快速开始

环境要求

  • Node.js 20+
  • pnpm 10.25+

安装

# 克隆仓库
git clone https://github.com/vikiboss/blog.git
cd blog

# 安装依赖
pnpm install

开发

# 启动开发服务器（使用 Turbopack）
pnpm dev

# 访问 http://localhost:3000

构建

# 生产构建
pnpm build

# 静态文件输出到 out/ 目录

其他命令

# 类型检查
pnpm type-check

# 代码格式化
pnpm format

# 打包分析
pnpm analyze

🚢 部署

Vercel（推荐）

Deploy with Vercel

  1. 点击上方按钮
  2. 导入 Git 仓库
  3. 自动部署

其他静态托管

构建后，将 out/ 目录部署到:

  • GitHub Pages - 免费，集成 Git
  • Cloudflare Pages - 全球 CDN，快速
  • Netlify - 简单易用
  • 任何支持静态文件的服务

🤝 贡献

欢迎贡献代码、报告问题或提出建议！请查看 .claude/CLAUDE.md 了解开发规范。

📄 许可证

本项目采用 MIT 许可证

🙏 致谢

技术

📧 联系

⭐ 如果这个项目对你有帮助，欢迎 Star～

使用 ❤️ 和 Next.js 构建