# S407Blog

**Repository Path**: s407/S407Blog

## Basic Information

- **Project Name**: S407Blog
- **Description**: 实验室官网仓库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-23
- **Last Updated**: 2025-11-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# Docusaurus 使用指南

## 环境部署

### 系统要求
- Node.js v16.14+ 或更高版本
- npm v7+ 或 yarn v1.22+
- Git（用于版本控制）

### 安装步骤

1. **安装 Node.js 和 npm**
   - 访问 https://nodejs.org/ 下载并安装 LTS 版本
   - 安装完成后验证：
     ```bash
     node -v
     npm -v
     ```

2. **创建新项目**
   ```bash
   npx create-docusaurus@latest my-website classic
   ```
   或使用 yarn：
   ```bash
   yarn create docusaurus my-website classic
   ```

3. **进入项目目录**
   ```bash
   cd my-website
   ```

## 项目结构说明

```
my-website/
├── blog/               # 博客目录
├── docs/               # 文档目录
├── src/                # 自定义组件和样式
├── static/             # 静态资源
├── docusaurus.config.js # 主配置文件
├── package.json        # 项目依赖
└── sidebars.js         # 文档侧边栏配置
```

## 本地开发

### 启动开发服务器
```bash
npm run start
```
或
```bash
yarn start
```

访问 `http://localhost:3000` 查看实时预览效果

### 构建生产版本
```bash
npm run build
```
或
```bash
yarn build
```
生成的静态文件位于 `build/` 目录

### 本地预览生产构建
```bash
npm run serve
```
或
```bash
yarn serve
```
访问 `http://localhost:3000` 查看生产环境效果

## 常用命令

| 命令 | 功能 |
|------|------|
| `npm start` | 启动开发服务器 |
| `npm run build` | 构建生产版本 |
| `npm run serve` | 本地预览生产构建 |
| `npm run swizzle` | 自定义主题组件 |
| `npm run deploy` | 部署到 GitHub Pages |

## 版本控制

### 初始化 Git 仓库
```bash
git init
```

### 添加所有文件到暂存区
```bash
git add .
```

### 提交更改
```bash
git commit -m "初始化 Docusaurus 项目"
```

### 连接到远程仓库
```bash
git remote add origin git@gitee.com:s407/S407Blog.git
```

### 推送到远程仓库
```bash
git push -u origin main
```

## 部署到 GitHub Pages

1. 修改 `docusaurus.config.js`：
   ```javascript
   module.exports = {
     // ...
     url: 'https://your-username.github.io',
     baseUrl: '/your-repo-name/',
     // ...
   }
   ```

2. 添加部署脚本到 `package.json`：
   ```json
   {
      "scripts" : {
        "deploy": "docusaurus deploy"
      }
   }
   ```

3. 运行部署命令：
   ```bash
   GIT_USER=<your-github-username> yarn deploy
   ```
   或
   ```bash
   GIT_USER=<your-github-username> npm run deploy
   ```

## 添加新内容

### 创建新文档
```bash
npm run docusaurus docs:create my-doc
```
或手动在 `docs/` 目录创建 `.md` 文件

### 创建新博客
```bash
npm run docusaurus blog:create my-blog
```
或手动在 `blog/` 目录创建 `.md` 文件

## 自定义配置

### 修改网站信息
编辑 `docusaurus.config.js`：
```javascript
module.exports = {
  title: '我的网站',
  tagline: 'Dinosaurs are cool',
  favicon: 'img/favicon.ico',
  
  themeConfig: {
    navbar: {
      title: '我的网站',
      logo: {
        alt: 'Logo',
        src: 'img/logo.svg',
      },
      items: [
        { to: '/docs/intro', label: '文档', position: 'left' },
        { to: '/blog', label: '博客', position: 'left' },
      ],
    },
    footer: {
      style: 'dark',
      copyright: `Copyright © ${new Date().getFullYear()} 我的网站`,
    },
  },
};
```

### 配置侧边栏
编辑 `sidebars.js`：
```javascript
module.exports = {
  tutorialSidebar: [
    'intro',
    {
      type: 'category',
      label: '指南',
      items: ['guides/installation', 'guides/configuration'],
    },
    'faq',
  ],
};
```

## 设置文档版本控制
### 1. 初始化版本控制

```bash
npm run docusaurus docs:version 1.0.0
```

此命令将：

+ 创建 versioned_docs/version-1.0.0目录

+ 复制当前 docs/内容到该目录

+ 创建 versions.json文件记录所有版本

+ 更新 sidebars.json为版本化侧边栏

### 2. 创建新版本
当需要发布新版本时：
```bash
npm run docusaurus docs:version 2.0.0
```
### 3. 配置版本切换
在 docusaurus.config.js中启用版本下拉菜单：
```javascript
module.exports = {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'docsVersionDropdown',
          position: 'left',
        },
      ],
    },
  },
};
```


## 常见问题解决

### 依赖安装问题
```bash
# 清除 npm 缓存
npm cache clean --force

# 删除 node_modules 和 package-lock.json
rm -rf node_modules package-lock.json

# 重新安装依赖
npm install
```

### 网站构建失败
- 检查 Markdown 文件中的语法错误
- 确保所有引用的图片路径正确
- 查看终端错误日志定位具体问题

### 样式未更新
```bash
# 清除浏览器缓存
# 或尝试强制刷新 (Ctrl+F5 或 Cmd+Shift+R)

# 重启开发服务器
npm run start
```

## 进阶资源

- https://docusaurus.io/
- https://docusaurus.io/plugins
- https://docusaurus.io/docs/styling-layout
- https://docusaurus.io/docs/api/docusaurus-config

# 参与贡献者



![胡军](https://foruda.gitee.com/avatar/1756129861571867476/13493553_one__fish_1756129861.png)
![崔翱翔](https://foruda.gitee.com/avatar/1756524257016509196/16171633_scaxkl_1756524256.png)
![梁佳嵘](https://foruda.gitee.com/avatar/1756561803894874131/16172304_emmm13_1756561803.png)
![邓海彪](https://foruda.gitee.com/avatar/1730824299294861234/13460530_black-and-white-gray-01_1730824299.png)