🌮 Taco-Rev

一个基于 Next.js 构建的现代化个人博客系统，融合了精美设计和强大功能。

✨ 特性

• 🎨 现代化设计 - 基于 NextUI 和 TailwindCSS 的精美界面
• 🌙 主题切换 - 支持明暗主题自动切换
• 📝 Markdown 支持 - 完整的 Markdown 文章渲染与语法高亮
• 🏷️ 分类系统 - 智能的文章分类和标签管理
• 📱 响应式设计 - 完美适配各种设备屏幕
• 💬 评论系统 - 集成 Giscus 评论功能
• 📚 媒体库 - 记录书籍和影视作品
• 🎯 项目展示 - 个人项目作品展示
• 🔗 友情链接 - 社交网络链接管理
• 🔍 SEO 优化 - 内置 sitemap 和 SEO 优化
• ⚡ 性能优化 - 基于 Turbopack 的极速开发体验

🛠️ 技术栈

核心框架

• React 19.1.0 - 用户界面库
• Next.js 15.3.3 - React 全栈框架
• Turbopack - 新一代 JavaScript 打包工具

UI 与样式

• NextUI (HeroUI) - 现代化 React 组件库
• TailwindCSS - 实用优先的 CSS 框架
• Sass - CSS 预处理器
• Framer Motion - 流畅的动画库

内容处理

• Markson - Markdown 解析器
• Interweave - HTML 安全渲染
• Prism.js - 代码语法高亮
• Tocbot - 自动生成目录

功能扩展

• Giscus - 基于 GitHub Discussions 的评论系统
• Next-themes - 主题切换支持
• React Icons - 丰富的图标库
• BasicLightbox - 图片灯箱效果

🚀 快速开始

环境要求

• Node.js >= 18.0.0
• pnpm >= 8.0.0

安装依赖

pnpm install

开发模式

pnpm dev

在浏览器中打开 http://localhost:3000 查看效果。

构建生产版本

pnpm build
pnpm start

📁 项目结构

Taco/
├── data/                          # 数据文件
│   ├── posts/                     # Markdown 博客文章
│   ├── pages/                     # 静态页面
│   ├── categories.data.js         # 分类配置
│   ├── home.data.js              # 首页配置
│   ├── links.data.js             # 友情链接
│   ├── media.data.js             # 媒体库数据
│   └── projects.data.js          # 项目数据
├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── blog/                 # 博客相关页面
│   │   ├── category/             # 分类页面
│   │   ├── media/                # 媒体库页面
│   │   ├── projects/             # 项目展示页面
│   │   └── components/           # 页面组件
│   ├── components/               # 全局组件
│   │   ├── helpbar/              # 辅助工具栏
│   │   └── utils/                # 工具组件
│   ├── lib/                      # 工具函数库
│   │   └── utils/                # 通用工具
│   └── styles/                   # 样式文件
├── public/                       # 静态资源
└── 配置文件...

📝 内容管理

添加新文章

1. 在 data/posts/ 目录下创建新的 .md 文件
2. 文章需要包含 Front Matter 头部信息：

---
title: '文章标题'
date: '2025-01-01'
category: 'tech'
banner:
    img: "图片URL"
    title: "横幅标题"
    subtitle: "横幅副标题"
---

# 文章内容

这里是文章正文...

配置网站信息

编辑 data/home.data.js 文件来自定义：

• 网站横幅信息
• 个人简介
• 导航菜单
• 社交媒体链接

管理项目展示

在 data/projects.data.js 中添加你的项目信息。

更新友情链接

编辑 data/links.data.js 来管理友情链接。

🎨 自定义样式

项目使用 Sass 和 TailwindCSS 进行样式管理：

• 全局样式：src/styles/globals.sass
• 主题变量：src/styles/_var.sass
• 暗色主题：src/styles/_dark.sass

🔧 环境配置

Next.js 配置

next.config.js 包含：

• 图片优化配置
• 外部图片源白名单
• Sass 配置

Tailwind 配置

tailwind.config.js 自定义了颜色主题和组件样式。

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

本项目基于 @BigCoke233/Taco 进行修改和优化，感谢原作者的开源贡献。

感谢所有为开源社区做出贡献的开发者们！