MultiSite - 企业级多语言静态站点解决方案

基于 React/Next.js + gray-matter 构建的高性能多语言静态网站

特性 • 快速开始 • 项目结构 • 技术栈 • 部署

概述

MultiSite 是一个企业级的多语言静态站点解决方案，支持简体中文、繁体中文、英文三种语言，提供完整的 SEO 优化、动态路由和静态生成功能。基于 Next.js 14 构建，使用 TailwindCSS 和 ShadCN UI 组件库。

特性

• 🌍 多语言支持 - 支持简体中文、繁体中文、英文三种语言
• ⚡ 静态站点生成 - 基于 Next.js 的静态生成，性能优异
• 🔍 SEO 优化 - 自动生成站点地图，完整的 SEO 元数据支持
• 📱 响应式设计 - 基于 TailwindCSS 的现代化响应式界面
• 🎨 组件化开发 - 使用 ShadCN UI 组件库，开发效率高
• 📝 Markdown 内容管理 - 基于 gray-matter 的内容管理系统
• 🔄 智能语言检测 - 自动检测用户浏览器语言偏好
• 🚀 快速部署 - 支持 Vercel、Netlify 等主流部署平台

快速开始

环境要求

• Node.js 18.0 或更高版本
• npm、yarn、pnpm 或 bun 包管理器
• Git（用于版本控制）

安装步骤

1. 克隆项目

git clone https://github.com/your-repo/multisite.git
cd multisite

2. 安装依赖

npm install
# 或
yarn install
# 或
pnpm install
# 或
bun install

3. 启动开发服务器

npm run dev
# 或
yarn dev
# 或
pnpm dev
# 或
bun dev

4. 访问应用 打开 http://localhost:3000 查看结果。

项目结构

multisite/
├── app/                    # Next.js App Router 页面
│   ├── about/             # 关于页面
│   ├── contact/           # 联系页面
│   ├── docs/              # 文档页面
│   │   └── [slug]/        # 动态文档路由
│   ├── layout.tsx         # 根布局
│   └── page.tsx           # 首页
├── components/            # React 组件
│   ├── DocumentList.tsx   # 文档列表组件
│   ├── Footer.tsx         # 页脚组件
│   └── Header.tsx         # 头部组件
├── content/               # 多语言内容文件
│   ├── en/               # 英文内容
│   ├── zh-CN/            # 简体中文内容
│   └── zh-TW/            # 繁体中文内容
├── lib/                   # 工具库
│   ├── content.ts         # 内容管理工具
│   └── utils.ts           # 通用工具函数
└── public/                # 静态资源
    └── images/            # 图片资源

技术栈

• 框架: Next.js 14 - React 全栈框架
• 样式: TailwindCSS - 实用优先的 CSS 框架
• UI 组件: ShadCN UI - 现代化组件库
• 内容管理: gray-matter - Markdown 元数据解析
• Markdown 渲染: react-markdown - React Markdown 组件
• 代码高亮: react-syntax-highlighter - 代码语法高亮
• 图标: Lucide React - 美观的图标库
• 类型检查: TypeScript - 静态类型检查

内容管理

添加新内容

1. 在 content/ 目录下选择对应语言文件夹
2. 创建新的 .md 文件
3. 在文件头部添加元数据：

---
title: '页面标题'
description: '页面描述'
date: '2024-01-15'
author: '作者名称'
category: '分类'
tags: ['标签1', '标签2']
---

支持的语言

• zh-CN - 简体中文
• zh-TW - 繁体中文
• en - 英文

开发命令

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 启动生产服务器
npm run start

# 代码检查
npm run lint

# 代码格式化
npm run format

部署

Vercel 部署

1. 将代码推送到 GitHub
2. 在 Vercel 导入项目
3. 自动部署完成

其他平台

项目支持部署到任何支持 Next.js 的平台：

• Netlify
• AWS Amplify
• 自建服务器

贡献

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

许可证

MIT License - 查看 LICENSE 文件了解详情。

联系方式

• 项目地址: GitHub Repository
• 问题反馈: Issues
• 邮箱: contact@multisite.com