修改readme文件
This commit is contained in:
Zopt
parent
55b08a08f4
commit
011df063df
180
README.md
180
README.md
@ -1,25 +1,183 @@
|
|||||||
# Onlook Starter Template
|
# MultiSite - 企业级多语言静态站点解决方案
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<img src="app/favicon.ico" />
|
<img src="app/favicon.ico" width="64" height="64" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
This is an [Onlook](https://onlook.com/) project set up with
|
<p align="center">
|
||||||
[Next.js](https://nextjs.org/), [TailwindCSS](https://tailwindcss.com/) and
|
<strong>基于 React/Next.js + gray-matter 构建的高性能多语言静态网站</strong>
|
||||||
[ShadCN](https://ui.shadcn.com).
|
</p>
|
||||||
|
|
||||||
## Getting Started
|
<p align="center">
|
||||||
|
<a href="#特性">特性</a> •
|
||||||
|
<a href="#快速开始">快速开始</a> •
|
||||||
|
<a href="#项目结构">项目结构</a> •
|
||||||
|
<a href="#技术栈">技术栈</a> •
|
||||||
|
<a href="#部署">部署</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
First, run the development server:
|
## 概述
|
||||||
|
|
||||||
|
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. **克隆项目**
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/your-repo/multisite.git
|
||||||
|
cd multisite
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **安装依赖**
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
# 或
|
||||||
|
yarn install
|
||||||
|
# 或
|
||||||
|
pnpm install
|
||||||
|
# 或
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **启动开发服务器**
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
# or
|
# 或
|
||||||
yarn dev
|
yarn dev
|
||||||
# or
|
# 或
|
||||||
pnpm dev
|
pnpm dev
|
||||||
# or
|
# 或
|
||||||
bun dev
|
bun dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) in Onlook to see the result.
|
4. **访问应用**
|
||||||
|
打开 [http://localhost:3000](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](https://nextjs.org/) - React 全栈框架
|
||||||
|
- **样式**: [TailwindCSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
|
||||||
|
- **UI 组件**: [ShadCN UI](https://ui.shadcn.com/) - 现代化组件库
|
||||||
|
- **内容管理**: [gray-matter](https://github.com/jonschlinkert/gray-matter) - Markdown 元数据解析
|
||||||
|
- **Markdown 渲染**: [react-markdown](https://github.com/remarkjs/react-markdown) - React Markdown 组件
|
||||||
|
- **代码高亮**: [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) - 代码语法高亮
|
||||||
|
- **图标**: [Lucide React](https://lucide.dev/) - 美观的图标库
|
||||||
|
- **类型检查**: [TypeScript](https://www.typescriptlang.org/) - 静态类型检查
|
||||||
|
|
||||||
|
## 内容管理
|
||||||
|
|
||||||
|
### 添加新内容
|
||||||
|
|
||||||
|
1. 在 `content/` 目录下选择对应语言文件夹
|
||||||
|
2. 创建新的 `.md` 文件
|
||||||
|
3. 在文件头部添加元数据：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
title: '页面标题'
|
||||||
|
description: '页面描述'
|
||||||
|
date: '2024-01-15'
|
||||||
|
author: '作者名称'
|
||||||
|
category: '分类'
|
||||||
|
tags: ['标签1', '标签2']
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### 支持的语言
|
||||||
|
|
||||||
|
- `zh-CN` - 简体中文
|
||||||
|
- `zh-TW` - 繁体中文
|
||||||
|
- `en` - 英文
|
||||||
|
|
||||||
|
## 开发命令
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 开发模式
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# 构建生产版本
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# 启动生产服务器
|
||||||
|
npm run start
|
||||||
|
|
||||||
|
# 代码检查
|
||||||
|
npm run lint
|
||||||
|
|
||||||
|
# 代码格式化
|
||||||
|
npm run format
|
||||||
|
```
|
||||||
|
|
||||||
|
## 部署
|
||||||
|
|
||||||
|
### Vercel 部署
|
||||||
|
|
||||||
|
1. 将代码推送到 GitHub
|
||||||
|
2. 在 [Vercel](https://vercel.com/) 导入项目
|
||||||
|
3. 自动部署完成
|
||||||
|
|
||||||
|
### 其他平台
|
||||||
|
|
||||||
|
项目支持部署到任何支持 Next.js 的平台：
|
||||||
|
- Netlify
|
||||||
|
- AWS Amplify
|
||||||
|
- 自建服务器
|
||||||
|
|
||||||
|
## 贡献
|
||||||
|
|
||||||
|
欢迎提交 Issue 和 Pull Request 来帮助改进项目。
|
||||||
|
|
||||||
|
## 许可证
|
||||||
|
|
||||||
|
MIT License - 查看 [LICENSE](LICENSE) 文件了解详情。
|
||||||
|
|
||||||
|
## 联系方式
|
||||||
|
|
||||||
|
- 项目地址: [GitHub Repository](https://github.com/your-repo/multisite)
|
||||||
|
- 问题反馈: [Issues](https://github.com/your-repo/multisite/issues)
|
||||||
|
- 邮箱: contact@multisite.com
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user