# Nuxt-FlanChan-Blog **Repository Path**: belovedLYC/nuxt-flan-chan-blog ## Basic Information - **Project Name**: Nuxt-FlanChan-Blog - **Description**: 基于Nuxt Nuxt/content 快速搭建的个人博客 - **Primary Language**: TypeScript - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2025-05-13 - **Last Updated**: 2025-06-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: Nuxt ## README # Flan-Chan博客 一个基于Nuxt 3构建的现代化技术博客网站,专注于Java、微服务、前端和开发工具等技术内容展示。 ## 项目介绍 Flan-Chan博客是一个优雅、高性能的技术博客平台,具有以下特点: - 🎨 **现代UI设计**:采用Tailwind CSS构建的响应式设计,暗黑模式支持 - 📝 **Markdown内容**:基于Nuxt Content模块的内容管理系统,轻松编写和管理文章 - 🚀 **高性能**:基于Nuxt 3的SSR/静态生成,保证访问速度和SEO友好 - 🔍 **内容分类**:多主题技术内容分类,包括Java、微服务、Web开发等 - 🌙 **主题切换**:支持亮色/暗色主题,自动适应系统偏好 ## 技术栈 - **前端框架**:[Nuxt 3](https://nuxt.com/) + [Vue 3](https://vuejs.org/) - **样式**:[Tailwind CSS](https://tailwindcss.com/) + [Heroicons](https://heroicons.com/) - **内容管理**:[Nuxt Content](https://content.nuxtjs.org/) - **代码高亮**:Prism.js + rehype/remark 插件链 - **UI组件**:自定义Vue组件(Header、Footer、ThemeToggle等) ## 项目结构 ``` Flan-Chan-Blog/ ├── assets/ # 静态资源文件 ├── components/ # Vue组件 ├── composables/ # Vue组合式API函数 ├── content/ # Markdown内容文件 │ ├── 1.java/ # Java相关文章 │ ├── 2.nuxt/ # Nuxt相关文章 │ ├── 3.businessfragmentation/ # 业务分片 │ └── ... # 其他技术分类 ├── pages/ # 页面路由组件 ├── public/ # 公共静态资源 ├── server/ # API端点和服务器中间件 │ └── api/ # 后端API端点 └── nuxt.config.ts # Nuxt配置文件 ``` ## 功能特性 - 🔄 **响应式布局**:适配桌面、平板、移动设备的界面设计 - 🌓 **亮/暗模式**:支持手动切换和自动适应系统主题 - 📋 **目录导航**:自动生成文章目录,方便阅读和导航 - 🔍 **内容分类**:多层次内容分类系统 - 🧩 **组件化**:基于Vue 3的组件化开发,代码复用性高 - 📊 **Gitee API集成**:展示作者的Gitee项目和贡献 ## 快速开始 ### 前置条件 - Node.js 16.x 或更高版本 - npm 或 yarn ### 安装步骤 1. 克隆仓库 ```bash git clone https://gitee.com/your-username/Flan-Chan-Blog.git cd Flan-Chan-Blog ``` 2. 安装依赖 ```bash npm install # 或使用 yarn yarn install ``` 3. 开发模式启动项目 ```bash npm run dev # 或使用 yarn yarn dev ``` 4. 构建生产版本 ```bash npm run build # 或使用 yarn yarn build ``` ## 内容管理 博客内容基于Markdown文件,存放在`content/`目录下,按技术主题分类: - `1.java/`: Java基础和进阶知识 - `2.nuxt/`: Nuxt/Vue相关技术 - `3.businessfragmentation/`: 业务分片相关内容 - `4.javaweb/`: Java Web开发 - `5.microservice/`: 微服务架构 - `6.commonframework/`: 常用开发框架 - `7.tooldeployment/`: 工具和部署 - `8.datastorage/`: 数据存储和数据库 - `9.jobinterview/`: 面试相关内容 ## 自定义配置 ### 主题配置 项目使用`@nuxtjs/color-mode`进行主题管理,可在`nuxt.config.ts`中修改相关配置: ```js colorMode: { classSuffix: "", preference: "system", // 默认跟随系统 fallback: "light", // 回退到亮色主题 } ``` ### 导航菜单 导航菜单配置位于`server/api/getNavigation.ts`,可根据需要添加或修改菜单项。 ## 部署 项目可部署在任何支持Node.js的服务器或静态网站托管服务上: - Vercel - Netlify - Gitee Pages - 自托管服务器 [MIT License](LICENSE) --- 🚀 由 [FlanChan团队] 精心打造