diff --git a/docs/第三方服务/WebIDE.md b/docs/第三方服务/WebIDE.mdx
similarity index 93%
rename from docs/第三方服务/WebIDE.md
rename to docs/第三方服务/WebIDE.mdx
index 93ee280..568a870 100644
--- a/docs/第三方服务/WebIDE.md
+++ b/docs/第三方服务/WebIDE.mdx
@@ -3,6 +3,9 @@ sidebar_label: 'WebIDE'
 sidebar_position: 9 
    
 ---
+
+import VideoDemo from '../../src/components/VideoDemo';
+
 ## WebIDE背景
 传统的代码托管平台提供了代码仓库的 Git/SVN 的管理，可以在平台上做代码浏览、代码评审、缺陷管理、CI 流水线等和代码相关的活动。其中代码浏览、代码评审所用的编辑器组件一般为 CodeMirror，代码高亮使用 highlight.js，常常只提供了读代码的场景。蚂蚁研发效能部门云研发团队通过自研的 OpenSumi 框架及基于 OpenSumi 框架做的专门针对于 Web IDE（无远程容器）场景的极速版 Web IDE 框架，与内部代码托管平台碰撞出了创新型的、只依赖浏览器的、IDE 风格的代码阅读、代码编写、代码提交、代码运行、代码评审等场景，极大的提高了用户在代码托管平台阅读代码、代码评审、轻研发等场景的效率。本次蚂蚁研发效能云研发团队和 CCF（中国计算机学会）GitLink 代码托管平台合作，将内部极速版 Web IDE 应用到了 Gitlink 代码托管平台上，解决了长久以来的用户反馈的很多体验问题。
 
@@ -59,6 +62,28 @@ Gitlink 通过实现 Blame 插件，完成了编辑器 Blame 查看的能力：
 ![](../../static/img/di_san_fang/WebIDE/代码评审.png)<br/>
 <center>代码评审时可修改代码</center>
 
+## WebIDE 功能演示
+
+下面是 GitLink WebIDE 的功能演示视频，通过观看视频，您可以直观地了解如何使用 WebIDE 进行代码浏览、编辑和提交等操作。
+
+<VideoDemo
+  title="GitLink WebIDE 使用教程"
+  platform="bilibili"
+  videoId="BV1Hkr7YYEh8"
+  options={{ 
+    showTips: false
+  }}
+/>
+
+### 在线运行演示
+
+<VideoDemo
+  title="WebIDE 在线运行演示"
+  platform="bilibili"
+  videoId="BV15a411o72i"
+  options={{ showTips: true }}
+/>
+
 ## Gitlink Web IDE
 Gitlink 代码阅读场景虽然接入极速版 IDE 编辑器，但文件树、代码搜索、快捷键、IDE 皮肤、等均和平时开发时使用习惯的 IDE 差异较大，更有大部分用户仅仅是为了代码阅读将代码克隆到本地，尽管保证了一致的体验，但整个链路繁琐费时。
 基于这个洞察，蚂蚁云研发团队和 Gitlink 推出 Gitlink Web IDE，可以一键快速打开 Web IDE 访问阅读项目仓库代码，实现项目与 IDE 的无缝衔接，保持研发同学的日常偏好习惯，同时完美兼容 Gitlink 代码托管平台。更重要的是，通过无容器在浏览器上直接运行一个极速版 IDE，确保「秒开」的即时体验。
diff --git a/docs/视频教程.mdx b/docs/视频教程.mdx
new file mode 100644
index 0000000..d5e0a92
--- /dev/null
+++ b/docs/视频教程.mdx
@@ -0,0 +1,67 @@
+---
+sidebar_position: 2
+---
+
+# GitLink 视频教程
+
+在本页面，您可以找到各种 GitLink 功能的视频教程演示。这些视频将帮助您更直观地了解 GitLink 的使用方法。
+
+import VideoDemo from '../src/components/VideoDemo';
+
+## 快速入门
+
+<VideoDemo
+  title="GitLink 平台介绍"
+  description="快速了解 GitLink 平台的主要功能和使用场景"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"  
+  options={{ showTips: true }}
+/>
+
+## 代码库管理
+
+<VideoDemo
+  title="如何创建和管理代码仓库"
+  description="学习创建代码仓库、管理分支、设置权限等基本操作"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"
+  options={{ showTips: true }}
+/>
+
+## WebIDE 功能
+
+<VideoDemo
+  title="WebIDE 使用指南"
+  description="学习如何使用 GitLink 的 WebIDE 进行在线编码和调试"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"
+  options={{ showTips: true, tips: "WebIDE 支持多种编程语言和开发环境" }}
+/>
+
+## DevOps 引擎
+
+<VideoDemo
+  title="DevOps 引擎配置与使用"
+  description="了解如何配置和使用 GitLink 的 DevOps 引擎进行持续集成和部署"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"
+  options={{ showTips: true }}
+/>
+
+## 团队协作
+
+<VideoDemo
+  title="团队协作最佳实践"
+  description="学习在 GitLink 上进行团队协作的最佳实践和工作流程"
+  platform="bilibili"
+  videoId="BV1Gx411w7vd"
+  options={{ showTips: true }}
+/>
+
+:::tip 提示
+视频中使用的是最新版 GitLink 界面，如果您使用的版本界面略有不同，功能和操作方式基本一致。
+:::
+
+:::info 问题反馈
+如果您对视频内容有任何疑问，或者希望我们提供更多特定主题的视频教程，请通过 [GitLink 社区](https://www.gitlink.org.cn) 或邮箱 gitlink@ccf.org.cn 联系我们。
+::: 
\ No newline at end of file
diff --git a/sidebars.js b/sidebars.js
index 889a90e..a542945 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -2,8 +2,32 @@ module.exports = {
   DocsSidebar: [
     {
       type: 'doc',
-      id: 'index',
-      label: 'Docs',
-    }
+      id: 'intro',
+      label: '介绍',
+    },
+    {
+      type: 'doc',
+      id: '视频教程',
+      label: '视频教程',
+    },
+    {
+      type: 'category',
+      label: '快速开始',
+      collapsed: false,
+      items: ['快速开始/注册GitLink账号', '快速开始/登录GitLink账号'],
+    },
+    {
+      type: 'category',
+      label: '代码库管理',
+      collapsed: true,
+      items: ['代码库管理/仓库创建'],
+    },
+    {
+      type: 'category',
+      label: '第三方服务',
+      collapsed: true,
+      items: ['第三方服务/WebIDE', '第三方服务/跨平台代码同步'],
+    },
+    // 其他类别可以根据需要添加
   ],
 };
diff --git a/src/components/VideoDemo/index.js b/src/components/VideoDemo/index.js
new file mode 100644
index 0000000..378f50d
--- /dev/null
+++ b/src/components/VideoDemo/index.js
@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import styles from './styles.module.css';
+
+/**
+ * 视频演示组件
+ * @param {Object} props
+ * @param {string} props.title - 视频标题
+ * @param {string} props.description - 视频描述
+ * @param {string} props.platform - 视频平台 (bilibili, youku, youtube)
+ * @param {string} props.videoId - 视频ID
+ * @param {Object} props.options - 其他选项
+ */
+function VideoDemo({ 
+  title, 
+  description, 
+  platform = 'bilibili', 
+  videoId, 
+  options = {} 
+}) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  
+  // 构建视频 URL
+  const getVideoSrc = () => {
+    switch (platform.toLowerCase()) {
+      case 'bilibili':
+        return `//player.bilibili.com/player.html?bvid=${videoId}&page=1&high_quality=1&danmaku=0${options.autoplay ? '&autoplay=1' : ''}`;
+      case 'youku':
+        return `//player.youku.com/embed/${videoId}${options.autoplay ? '?autoplay=1' : ''}`;
+      case 'youtube':
+        return `//www.youtube.com/embed/${videoId}${options.autoplay ? '?autoplay=1' : ''}`;
+      default:
+        return '';
+    }
+  };
+  
+  const handleIframeLoad = () => {
+    setIsLoaded(true);
+  };
+
+  return (
+    <div className={styles.videoDemo}>
+      <h3 className={styles.videoTitle}>{title}</h3>
+      {description && <p className={styles.videoDescription}>{description}</p>}
+      
+      <div className={styles.videoWrapper}>
+        {!isLoaded && <div className={styles.loadingIndicator}>加载中...</div>}
+        <iframe 
+          src={getVideoSrc()}
+          className={styles.videoFrame}
+          frameBorder="0" 
+          allowFullScreen
+          onLoad={handleIframeLoad}
+          title={title}
+        ></iframe>
+      </div>
+      
+      {options.showTips && options.tips && (
+        <div className={styles.videoTips}>
+          <p>提示: {options.tips}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default VideoDemo; 
\ No newline at end of file
diff --git a/src/components/VideoDemo/styles.module.css b/src/components/VideoDemo/styles.module.css
new file mode 100644
index 0000000..32ab75c
--- /dev/null
+++ b/src/components/VideoDemo/styles.module.css
@@ -0,0 +1,114 @@
+.videoDemo {
+  margin: 2rem 0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background-color: var(--ifm-color-emphasis-0);
+}
+
+.videoTitle {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+  padding: 1rem;
+  background-color: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-emphasis-800);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+}
+
+.videoDescription {
+  padding: 0 1rem 1rem;
+  font-size: 1rem;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.videoWrapper {
+  position: relative;
+  padding-top: 56.25%; /* 16:9 宽高比 */
+  width: 100%;
+  background-color: #000;
+}
+
+.videoFrame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.loadingIndicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #000;
+  color: white;
+  font-size: 1.2rem;
+  z-index: 1;
+}
+
+.videoTips {
+  padding: 0.75rem 1rem;
+  background-color: var(--ifm-color-emphasis-100);
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-emphasis-700);
+  font-size: 0.9rem;
+}
+
+/* 深色模式调整 */
+html[data-theme='dark'] .videoDemo {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme='dark'] .videoTitle {
+  background-color: var(--ifm-color-emphasis-300);
+  color: var(--ifm-color-emphasis-900);
+}
+
+html[data-theme='dark'] .videoTips {
+  background-color: var(--ifm-color-emphasis-200);
+}
+
+/* 响应式样式 */
+@media (max-width: 768px) {
+  .videoTitle {
+    font-size: 1.25rem;
+    padding: 0.75rem;
+  }
+  
+  .videoDescription {
+    font-size: 0.9rem;
+    padding: 0 0.75rem 0.75rem;
+  }
+  
+  .videoTips {
+    font-size: 0.8rem;
+    padding: 0.5rem 0.75rem;
+  }
+  
+  .videoDemo {
+    margin: 1.5rem 0;
+    border-radius: 6px;
+  }
+}
+
+@media (max-width: 480px) {
+  .videoTitle {
+    font-size: 1.1rem;
+    padding: 0.5rem;
+  }
+  
+  .loadingIndicator {
+    font-size: 1rem;
+  }
+  
+  .videoDemo {
+    margin: 1rem 0;
+    border-radius: 4px;
+  }
+} 
\ No newline at end of file