🚀 NexusMarkdown 是一个完全自主研发的现代化 Markdown 博客平台，基于 Next.js 15 + React 19 + TypeScript 构建，专为技术博主和内容创作者设计。
NexusMarkdown 是一个从零开始自主研发的博客平台，每一个功能模块都经过精心设计和优化。它不仅仅是一个博客平台，更是一个技术展示的舞台，体现了现代前端开发的最佳实践。
- 🔬 完全自研：从架构设计到功能实现，100% 自主研发
- ⚡ 极速开发：基于 Turbopack 构建，比传统打包工具快 700 倍
- 🎨 自研主题系统：10 种精心设计的主题色方案，支持深度自定义
- 📝 自研渲染引擎：基于 React Markdown 生态的深度定制渲染系统
- 🌐 自研国际化：原生支持中文 URL、中文内容、Unicode 字符
- 📱 自研响应式：完美适配桌面端、平板和移动设备
- 🔧 自研配置系统：模块化设置系统，即改即用
- 🚀 自研部署方案：支持 Vercel、GitHub Pages 等多种部署方式
- 深度定制：基于 React Markdown 生态的完全自定义渲染系统
- 插件生态：集成 Remark/Rehype 插件生态，支持代码高亮、数学公式、Emoji 等
- 性能优化：Lazy 加载和骨架屏，提供流畅的阅读体验
- 扩展性强：支持自定义组件和渲染规则
- 10 种预设主题：精心设计的配色方案，涵盖多种风格
- 深度自定义：支持自定义主色调、辅助色、强调色
- 智能适配：自动适配深色/浅色模式
- 实时预览：主题切换即时生效，无需重启
- 中文 URL 支持：原生支持中文文件名和路径编码
- Unicode 字符处理：完整的 Unicode 字符支持
- 多语言内容：支持中英文混合内容展示
- SEO 优化：搜索引擎友好的 URL 结构
- 模块化设计：每个功能模块独立配置
- 即改即用：配置修改即时生效
- 类型安全：完整的 TypeScript 类型定义
- 开发友好：详细的注释和配置说明
- 多平台支持：Vercel、GitHub Pages、Netlify 等
- 自动化部署：GitHub Actions 自动化构建和部署
- 静态导出：零服务器成本的静态网站
- CDN 加速：全球内容分发网络支持
┌─────────────────────────────────────────────────────────────┐
│ NexusMarkdown 架构 │
├─────────────────────────────────────────────────────────────┤
│ 🎨 自研主题系统 │ 📝 自研渲染引擎 │ 🌐 自研国际化 │
├─────────────────────────────────────────────────────────────┤
│ 🔧 自研配置系统 │ 📱 自研响应式 │ 🚀 自研部署方案 │
├─────────────────────────────────────────────────────────────┤
│ Next.js 15 + React 19 + TypeScript │
├─────────────────────────────────────────────────────────────┤
│ Turbopack + Tailwind CSS │
└─────────────────────────────────────────────────────────────┘
- ✅ 自研 Markdown 渲染：支持代码高亮、数学公式、表格、Emoji 等
- ✅ 自研主题系统：10 种预设主题 + 深度自定义
- ✅ 自研国际化：原生支持中文 URL 和 Unicode 字符
- ✅ 自研响应式设计：完美适配所有设备尺寸
- ✅ 自研配置管理：模块化设置系统，即改即用
- ✅ 自研部署方案：一键部署到多个平台
- ✅ 分类标签系统：灵活的文章分类和标签管理
- ✅ 深色模式支持：自动适配系统主题偏好
node版本: >= 22
- git clone 到本地
- 安装依赖
npm install
# or
yarn install
# or
pnpm install- 运行项目
npm run dev
# or
yarn dev
# or
pnpm dev博客存放在src/content/blogs文件夹中，需要遵循一定的规范
markdown文件元数据规范如下
---
title: 使用Reference对象数组的示例文章 //名称，不填写则为文件名
date: 2023-11-20 //时间
category: 技术 //分类
tags: [React, Next.js, TypeScript] //标签。目前还不支持通过标签筛选
readTime: 5 //阅读时间
excerpt: 这是一篇展示如何使用Reference对象数组格式的示例文章 //摘要，显示在卡片上
reference: [ //博文参考来源，可不配置
{ description: "Next.js官方文档", link: "https://nextjs.org/docs" },
{ description: "React官方文档", link: "https://reactjs.org/docs/getting-started.html" },
{ description: "TypeScript官方文档", link: "https://www.typescriptlang.org/docs/" },
{ description: "Tailwind CSS文档", link: "https://tailwindcss.com/docs" },
{ description: "MDN Web文档", link: "https://developer.mozilla.org/zh-CN/" }
]
---
- markdown文件内部图片如果存放在本地，需要放在public文件夹下，然后通过md语法引用路径
- 实例：
平台配置存放在setting文件夹中，即改即用
AboutSetting.ts //关于页面的配置
blogSetting.ts //博客页面的配置
FooterSetting //网站页脚配置
HomeSetting //主页配置
NavigationSetting //导航栏配置
WebSetting.ts //网站配置
每一个配置文件都为您写好了注释
项目内置了 10 种精心设计的主题色方案，支持自定义配置：
预设主题：blue(蓝色)、purple(紫色)、green(绿色)、orange(橙色)、red(红色)、cyan(青色)、pink(粉色)、gold(金色)、indigo(靛蓝)、emerald(祖母绿)
快速切换：在 src/setting/WebSetting.ts 中修改：
// 切换到绿色主题
export const themeColors = themePresets.green;
// 自定义主题色
export const themeColors = {
primary: "#your-primary-color",
secondary: "#your-secondary-color",
accent: "#your-accent-color",
};颜色用途：
primary：主要按钮、重要文字强调secondary：次要按钮、标题渐变accent：装饰元素、动画高亮
所有主题色都支持自动深色模式适配和平滑过渡效果。
- 支持一键部署到 Vercel
- 支持一键部署到 GitHub Pages
- Fork本仓库
- 在Setting里面打开Page，并且选择Github Action 方式配置
- 打开 Action ，选择 Deploy to Github Page， 点击 Run WorkFlow
- 等待部署完毕，点击Github域名进入您的网站
V 1.0.0 2025.6.29
- 第一个版本
V 1.1.0 2025.6.30
- 支持文件名为title
- 修复代码高亮问题
- 增加Reference和版权声明
- 性能优化
- 图云页面支持自定义图片
- markdown元数据兼容性提醒
V 1.2.0 2025.6.30
- 重构博客文件结构支持深层嵌套和灵活配置
- 新增文章大纲导航组件
- 优化图片处理逻辑支持相对路径
- 改进设置文件的注释和配置项
V 1.2.1 2025.7.1
- 重构博客图片处理逻辑，使用公共目录替代API路由
- 修复中文URL编码问题，确保正确处理Unicode字符路径,支持中文博客名
- 移除未使用的性能监控组件代码
- 更新next配置以支持静态导出和Unicode路由
V 1.2.2 2025.7.1
- 修复了静态页面样式丢失的bug
- 现在已经支持GitHub Action 一键部署到Github Page！
V 1.2.3 2025.7.1
- 修复了Github Action部署时没有仓库名时候的bug
V 1.2.4 2025.7.4
- 修复了非Github根域名部署的情况下头像丢失的问题
- 添加basePath支持以适配GitHub Pages部署
- 添加环境变量NEXT_PUBLIC_BASE_PATH配置，用于处理GitHub Pages部署时的路径问题
- 修改头像和图片组件以自动处理basePath
- 优化CI工作流触发条件
V 1.3.0 2025.7.13
- 添加了主题色和背景图的功能！现在你可以在 WebSetting 里配置你喜欢的主题色,也可以 在WebSetting 文件里配置你喜欢的背景图！
- 修复了博客文章里列表和行内代码不能换行的问题
V 1.3.1 2025.7.15
- 更新了主题色配置
- 优化了暗黑模式下的页面显示
V 1.3.2 2025.7.16
- 修复了主题色切换后闪烁的问题
- 增加了卡片的毛玻璃特效，在有背景的情况下更美观
- 关于我页面的动画字体提供了彩虹渐变和主题色渐变两种选项
- 全面优化深色模式和浅色模式的特效
- 修复了Reference不受主题色约束的问题
- 暗色模式下背景增加了暗色遮罩
V 1.3.3 2025.7.17
- 优化了setting的提示词，现在更直观更易懂
- 精简代码，保持依赖的整洁
- 在关于我页面的自我介绍添加了第三段
- 修复 Github Action 重复构建问题
NexusMarkdown 作为完全自主研发的博客平台，具有以下独特优势：
- 从零开始：每一个功能模块都是自主研发，深度可控
- 技术栈先进：采用最新的 Next.js 15 + React 19 + TypeScript
- 性能优化：基于 Turbopack 的极速开发体验
- 架构清晰：模块化设计，易于维护和扩展
- 视觉统一：自研主题系统确保视觉风格一致性
- 用户体验：精心设计的交互和动画效果
- 响应式设计：完美适配各种设备尺寸
- 深色模式：智能主题切换，保护用户眼睛
- Markdown 生态：完整的 Markdown 功能支持
- 代码展示：专业的代码高亮和语法支持
- 数学公式：LaTeX 数学公式渲染
- 国际化：原生中文支持和 Unicode 字符
- 一键部署：支持多种云平台部署
- 零成本：静态网站，无需服务器费用
- 自动化：GitHub Actions 自动化构建部署
- 全球加速：CDN 内容分发网络
NexusMarkdown 不仅仅是一个博客平台，更是现代前端技术的完美展示。它体现了：
- 技术创新：采用最新技术栈，引领开发趋势
- 用户体验：以用户为中心的设计理念
- 代码质量：TypeScript 类型安全和代码规范
- 开源精神：完全开源，促进技术交流
- GitHub: https://github.com/wenhuilan
- 邮箱: 2713975114@qq.com