完善 docs

README.md

@@ -24,6 +24,7 @@
 <!-- code_chunk_output -->
 
 - [重要特性](#重要特性)
+- [功能演示](#功能演示)
 - [使用方法](#使用方法)
 - [更新日志](#更新日志)
   - [v1.0](#v10)
@@ -44,6 +45,10 @@
 > 提示
 > 服务包对引擎的所有改动都是开源的，并且每个改动都会附上一篇原理说明的文档，当你发现问题时请进行反馈，或者直接默默地帅气地提交一个 PR，帮助我们一起完善这个项目。
 
+## 功能演示
+
+待补充。
+
 ## 使用方法
 
 服务包通过自定义引擎的方式来修改引擎代码，你可以：

docs/docs/installation-guide/installation-engine-plugin.md

@@ -1,5 +1,7 @@
 ---
 sidebar_position: 1
+description: "推荐使用此方式进行一键安装。"
+icon: "😀"
 ---
 
 # 使用引擎扩展安装

docs/docs/installation-guide/installation-intro.mdx

@@ -1,16 +1,14 @@
----
-hide_title: true
-title: 安装指南
----
 import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-服务包对引擎的改动主要使用 [自定义引擎](https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/engine-customization.html) 的方式实现。
+# 安装指南
 
-由于没有找到方法添加内置资源，所以除此之外还需要你手动往项目里添加一些资源文件。
+服务包主要使用 [自定义引擎](https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/engine-customization.html) 的方式对引擎进行修改。
 
-对于使用 TypeScript 的项目我们还提供 `creator-sp.d.ts` 类型提示文件。
+但是，由于自定义引擎并不能添加内置资源与扩展组件的 inspector，所以还需要一点额外的步骤。
 
-以下是我们提供的两种安装方法：
+对于使用 TypeScript 的项目，服务包提供了 `creator-sp.d.ts` 类型提示文件。
+
+以下是两种常用的安装方式：
 
 <DocCardList items={useCurrentSidebarCategory().items}/>

docs/docs/installation-guide/installation-manual.md

@@ -1,92 +1,111 @@
 ---
 sidebar_position: 2
+description: "需掌握一定的自定义引擎知识。"
 ---
 
 # 手动安装
 
-:::caution 提示
+:::tip 提示
 
-手动安装需要掌握一定的 [Git](https://git-scm.com/doc) 和 [自定义引擎](https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/engine-customization.html) 知识，推荐使用我们发布的 [引擎扩展](./installation-engine-plugin) 一键安装。
+建议升级到最新的引擎版本，官方只会对 2.x 版本只会进行维护性更新，所以不用担心其稳定性问题。
+
+如果你的项目引擎版本较低，可以看一看 [使用引擎扩展安装](./installation-engine-plugin) ，支持对多个引擎版本进行一键安装。
 
 :::
 
-## 引擎要求
+---
+## 服务包下载
 
-**请将 Cocos Creator 至少升级到 v2.4.x 版本，服务包不保证对 v2.4 版本以下的兼容性。**
+### Service Pack v1.0
 
-**强烈推荐直接升级到最新引擎版本**，官方只会对 2.x 版本只会进行维护性更新，所以不用担心其稳定性问题。
+适配 Cocos Creator v2.4.9 版本，[点此下载服务包](http://www.baidu.com)
-
-**并且每次服务包的更新只会发布引擎最新版本的压缩包。**
 
+---
 ## 标准安装
 
-当你的项目所使用的引擎版本与服务包适配的引擎版本一致，并且自己未对引擎有任何改动时，可参考以下步骤安装：
+请确保您的项目符合以下条件，否则请使用 [补丁安装](#补丁安装)。：
+
+- **项目所使用的引擎版本与服务包适配的引擎版本一致**
+- **项目未使用自定义引擎**
 
 ### 1.替换自定义引擎
 
-压缩包内的 `engine` `cocos2d-x` `jsb-adapter` 这三个目录分别就是我们已经修改好的 **JavaScript 引擎**、**Cocos2d-x 引擎** 和 **jsb-adpater**。
+下载服务包后，解压压缩包可以看到压缩包内的 `engine` `cocos2d-x` `jsb-adapter` 这三个目录分别是已经整理好的 **JavaScript 引擎**、**Cocos2d-x 引擎** 和 **jsb-adpater**。
 
-参照官方的 [自定义引擎](https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/engine-customization.html) 文档分别配置或替换这三个部分即可。
+打开 Cocos Creator 菜单的 **项目 - 项目设置 - 自定义引擎**。
 
-:::tip 提示
+分别填写 **JavaScript 引擎路径**（对应 `engine` 目录）和 **Cocos2d-x 引擎路径**（对应 `cocos2d-x` 目录）。
 
-**官方文档中的一些步骤我们已经帮你做好了**：
+![custom-engine](./assets/custom-engine.png)
 
-**定制 JavaScript 引擎：**参考官方文档的 `1.2 修改 JS 引擎路径` 设置路径即可，无需安装编译依赖或者编译。
 
-**定制 Cocos2d-x 引擎：**
+然后点击 Cocos Creator 主界面右上角的 **编辑器** 按钮，进入到编辑器的资源目录。
 
-**替换 jsb-adapter：**这一步只需要替换目录即可，但请一定不要忘记！
+![ide-cocos-path](./assets//ide-cocos-path.png)
+
+接着使用压缩包内的 `jsb-adapter` 替换掉编辑器的 `Resources/builtin/jsb-adapter` 目录。
+
+:::info 提示
+
+如果你的项目不需要在原生平台上运行，则只定制 JavaScript 引擎即可。
+
+如果你的项目需要在原生模拟器中预览，可能需要重新编译模拟器，更多详情可阅读官方的 [自定义引擎](https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/engine-customization.html) 文档。
 
-并且如果你的项目**不需要支持原生平台，可以只定制 JavaScript 引擎**，无需定制 Cocos2d-x 和 jsb-adapter。
 :::
 
-### 2.往项目放入资源
+### 2.安装引擎扩展
-
-由于我们无法为引擎新增内置资源，所以需要你手动操作这一步，将压缩包内 `project` 目录的 `sp` 目录拷贝到项目的 `assets` 目录中，并设置 `sp` 目录为 **Asset Bundle**。
-
-![assetbundlesettings](assets/assetbundle-settings.png)
 
 :::caution 注意
 
-请勿随意放置，路径必须是 `assets/sp`，在编辑器环境中引擎只能通过路径读取资源。
+**请勿将此扩展与 “使用引擎扩展安装” 中所安装的引擎扩展混淆！**
 
-请勿随意修改 Asset Bundle 的名称，名称必须是 `sp`，在实际运行中会通过加载这个 Asset Bundle 读取资源。
+**该扩展只解决自定义引擎无法为引擎新增内置资源和扩展组件 inspector 的问题，是服务包开源的一部分**。
 
-没有必要将这个 Asset Bundle 设为远程包或者 Zip 压缩，里面只是两个 Effect 着色器资源。
+:::
+
+压缩包内 `service-pack-support` 目录即是扩展本身，将其放到项目的 `packages` 目录即可。
+
+更多详情可阅读官方的 [安装扩展](https://docs.cocos.com/creator/2.4/manual/zh/extension/install-and-share.html) 文档。
+
+:::caution 注意
+
+服务包会使用名为 `sp` 的 AssetBundle 存放资源，如果你的项目有使用 AssetBundle，请确保该名称未被占用。
+
+没有必要将这个 Asset Bundle 设为远程包或者 Zip 压缩，里面只是一个多纹理 Effect 着色器资源。
 
 :::
 
 ### 3.TypeScript 类型提示（可选）
 
-如果你的项目使用 TypeScript，请将压缩包内 `project` 目录的 `creator-sp.d.ts` 拷贝到项目根目录中，更新引擎 API 接口类型提示。
+如果你的项目使用 TypeScript，可将压缩包内 `creator-sp.d.ts` 文件拷贝到项目根目录中。
 
 ![dts](assets/dts.png)
 
-部分 IDE 可能需要重启才会生效。
+部分代码编辑器可能需要重启之后类型提示才会生效。
 
+### 4.重启 Cocos Creator
+
+完成以上的步骤后重启 Cocos Creator。
+
+可在项目预览时检查 Devtools Console 打印的是否为 `Cocos Creator SP v2.4.x`，是的话则成功安装。
+
+![](./assets/installed-console.png)
+
+---
 ## 补丁安装
 
-如果你无法升级到引擎的最新版本，或者本身已对引擎有过修改，我们提供 Git Patch 让你能在已有修改的基础上应用我们对引擎的改动。
+:::caution 提示
 
-接下来我们不会说的很细致，你需要有一定的动手能力。
+**建议至少将 Cocos Creator 升级到 v2.4.x 版本，服务包所做的改动不保证对 v2.4 版本以下的兼容性。**
 
-在压缩包内的 `patch` 目录放着最新的 Git Patch 文件，在引擎目录应用补丁就等同于应用了我们对引擎的所有改动，这时候你就可以按照官方的自定义引擎文档去使用了。
+补丁安装需要掌握一定的 [Git](https://git-scm.com/doc) 知识和修改引擎源码的能力。
 
-Git Patch 存储了我们所有的提交信息，所以你可以只挑选你想要的改动进行应用。
+:::
 
-如果你使用的不是引擎最新版本，你依然可以将 Git Patch 应用在 2.4.x 版本的引擎上进行适配，可能会发生冲突或者不兼容的情况，不过差别应该不是很大，可以自行完成适配工作。
+补丁安装实际上就是打 Git Patch，**在压缩包内的 `patch` 目录放着最新的 Git Patch 文件。**
 
-完成自定义引擎的工作后，请别忘了还要将资源放入项目哦（可参考标准安装的[第 2、3 步](#2往项目放入资源)进行操作）。
+这种方式理论上可以在任意版本的引擎上进行，但由于这种方式如果需要正确的进行下去本就需要你拥有相关的知识与能力，所以我们不会说的很细致。
 
-## 下载链接
+Git Patch 存储了我们所有的源码提交信息，所以你可以只挑选你想要的提交进行应用，在引擎目录去打补丁文件就等同于应用了我们对引擎的改动，之后就可以按照官方的自定义引擎文档去使用了。
 
-### Service Pack v1.0 
+在完成自定义引擎的工作后，请别忘了安装引擎扩展哦。（可参考[标准安装的第 2 步](#2安装引擎扩展)进行操作）。
-
-适配 **Cocos Creator v2.4.9** 版本，请确认你项目的引擎版本一致。
-
-[下载压缩包](http://www.baidu.com)
-
-### 历史版本
-
-[存档页面](test)

docs/docs/intro.md

@@ -36,6 +36,10 @@ Service Pack 暂时只适配 Cocos Creator 2.x 版本，Cocos Creator 3.x 正在
 
 :::
 
+## 功能演示
+
+待补充。
+
 ## 使用方法
 
 服务包通过自定义引擎的方式来修改引擎代码，你可以：

docs/docs/start-guide/_category_.json

@@ -0,0 +1,9 @@
+{
+  "label": "入门教程",
+  "position": 3,
+  "collapsed": false,
+  "link": {
+    "type": "doc",
+    "id": "start-guide-intro"
+  }
+}

docs/docs/start-guide/batcher-guide.md

@@ -0,0 +1,106 @@
+---
+sidebar_position: 1
+description: "在大部分游戏的开发中享受不用担心 Draw Call 的快乐。"
+---
+
+# 新 UI 渲染批次合并指南
+
+在官方文档的进阶主题中，有一个 [UI 渲染批次合并指南](https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/ui-auto-batch.html)，而由于服务包的 **多纹理渲染**、**重构动态图集** 等新特性的出现，有一些内容可能已经过期。
+
+如果你未阅读过官方的指南，可以先看一看里面的知识科普部分，而我们将直接从如何实践开始！
+
+---
+## 什么是多纹理渲染？
+
+在以前的认识里，我们知道相邻的节点使用不同的纹理（Texture）会导致不能合并批次。
+
+其根本原因是纹理是使用 uniform 变量传给着色器的，而需要合并批次的话不允许每次渲染都拥有不同的 uniform 变量值。
+
+服务包实现的合批方法是先设置好多个 uniform 变量，比如将 8 张纹理写入到 "texture1" "texture2" "texture3"... 的 8 个 uniform 变量中，然后编写一个着色器判断应该在渲染时使用哪个 uniform 变量。
+
+这样的话如果所有渲染都只用这 8 张纹理的话，就都能合并为 1 个批次。
+
+这种做法要求设备需要支持采样多个纹理，而在现代绝大多数设备中这不是问题，至少都支持采样 8 张纹理。
+
+当然除了这种方法，还有另外的一些进行多纹理合批的方法，例如 "Texture Array"、"Bindless"，但都有实用性与兼容性的问题。
+
+:::info 提示
+
+以这种方式实现的多纹理渲染并不是没有弊端的：
+
+因为会多传递一个顶点属性，并且需要在着色器中去判断该使用哪个纹理，这可能也会造成性能下降，毕竟**合并批次并不一定会提升性能**。
+
+所以我们建议在多个档次设备中实际测试项目是否使用多纹理渲染的性能差距。
+
+如果你还有所担心，就像我们在实现这个功能之前一样，可以看看这些：
+
+**PixiJS 引擎在 2016 年发布的 v4 版本就已经正式实装了多纹理渲染机制！**[资料出处](https://medium.com/goodboy-digital/gpu-multi-texture-sprite-batching-21c90ae8f89b)。
+
+**Phaser 引擎在 v4 与 v3 版本都实装了多纹理渲染机制（2019 - 2020年）**[资料出处](https://www.patreon.com/posts/39665256)。
+
+:::
+
+---
+## 为你的项目启用动态合图
+
+在项目原来的开发中，我们可能会关闭动态图集，更倾向于靠静态图集或者自动图集达到降低 Draw Call 的目的。
+
+这种选择除了与动态合图存在会占用更多内存的缺点有关之外，更多的是在引擎原来的动态合图中，并不能复用图集的废弃区域，这个重要特性的缺失只能靠在切换场景（Scene）后重置所有图集来解决。
+
+但对于大部分项目来说，这种治标不治本的机制基本等于没有解决这个问题。
+
+而现在，**服务包几乎重构了整个动态合图系统，解决了以前存在的大部分问题**，你可以启用它了。
+
+:::note 提示
+
+开启动态图集常见的反对意见是：
+
+在部分小游戏平台里，启用动态图集会有保留 Image 对象所占用的内存空间很大的问题。
+
+我们建议：
+
+- 请实际测试是否启用动态图集的内存占用差距。
+- 有没有一种可能，只是说可能，出现不能接受的内存占用大小是因为你的项目根本就不做任何资源的释放呢？
+
+:::
+
+---
+## 充分利用动态合图
+
+启用动态合图后，我们有几个小提示能让你发挥出动态合图的潜力：
+
+### 放宽能参与合图的纹理尺寸限制
+
+你可以适当地放宽能参与合图的纹理尺寸的限制（`cc.dynamicAtlasManager.maxFrameSize`）。
+
+推荐设置为 `512`、 `1024` 甚至 `2048`。
+
+因为**动态图集会自动进行多纹理合批，你可以放心地使用多达 8 张图集而不用担心交叉渲染导致的打断批次！**
+
+:::tip 
+
+服务包会将动态图集默认的最大数量自动调整至与设备能同时采样的纹理数一致，这个值一般为 `8`。
+
+:::
+
+### 无需管理动态图集，只需要释放资源
+
+**动态合图支持复用废弃空间，释放纹理的同时会释放其在动态图集使用的空间。**
+
+所以一般不需要去关心动态图集，只需要做好资源释放，就不会发生动态图集被用完的情况。
+
+### 更加细致地优化图集的使用效率
+
+除了引擎自带的 `packable` 属性可以控制纹理是否会参与动态合图之外。
+
+服务包还额外支持了**控制组件是否默认参与动态合图，也可以控制单个组件是否参与动态合图。**
+
+有关动态合图的设置可前往 [动态合图](TODO) 的文档了解详情。
+
+在上面我们推荐可以将纹理尺寸限制放宽到 `2048`，这听起来貌似有点离谱，但只要规划好项目的资源确实可行，比如：
+
+- **将优化程度有限但尺寸具大的纹理禁止参与动态合图**
+- **分模块存放资源，将冷门界面（如活动）的纹理禁止参与动态合图，或尽早释放掉**
+- **在资源已经一团糟的项目中，可以直接禁止渲染组件参与动态合图**
+
+## Label 不再是合批的噩梦

docs/docs/start-guide/breaking-change.md

@@ -0,0 +1,16 @@
+---
+sidebar_position: 1
+description: "在大部分的情况下都不需要了解。"
+---
+
+# 破坏性变更
+
+:::note 提示
+
+在贡献指南中我们提到过尽量不会引入破坏性变更或者任何与原版引擎有不同的地方。
+
+但是有一些情况难以避免，我们会尽量减少其带来的不便。
+
+:::
+
+## 仅支持 WebGL 渲染模式

docs/docs/start-guide/start-guide-intro.mdx

@@ -0,0 +1,12 @@
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+# 入门指南
+
+在前面的介绍中，你虽然可以了解到服务包新增的一些重要特性的名称，但可能还是比较茫然。
+
+这个教程会简单地介绍安装服务包后该如何更好地使用 Cocos Creator 引擎，帮助你发挥出所有的潜力。
+
+这包括一个**新 UI 渲染批次合并指南**，和安装服务包后你可能需要注意的**破坏性变更**：
+
+<DocCardList items={useCurrentSidebarCategory().items}/>

docs/docs/update-log.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 title: 更新日志
 ---
 

docs/docs/user-guide/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "使用指南",
-  "position": 3,
+  "position": 4,
   "collapsed": false,
   "link": {
     "type": "doc",

docs/docs/user-guide/user-guide-intro.mdx

@@ -1,14 +1,16 @@
----
-hide_title: true
-title: 使用指南
----
 import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
+# 使用指南
+
 :::caution 注意
 
 在几乎所有平台上引擎都是使用 WebGL 渲染模式，所以服务包的大部分特性都未支持引擎的 Canvas 渲染模式，部分特性在 3D 节点下不生效。
 
 :::
 
+在 [入门教程](../start-guide/start-guide-intro) 里，你应该对如何更好地使用安装服务包后的引擎已经有所了解了。
+
+而在这里会更进一步，你能了解到服务包为引擎添加的所有特性：
+
 <DocCardList items={useCurrentSidebarCategory().items}/>

docs/docusaurus.config.js

@@ -69,6 +69,11 @@ const config = {
             position: 'right',
             label: '文档',
           },
+          {
+            href: 'TODO',
+            label: '演示',
+            position: 'right',
+          },
           {
             type: 'docsVersionDropdown',
             position: 'right',

docs/src/css/custom.css

@@ -13,9 +13,32 @@
   --ifm-color-primary-light: #6440b1;
   --ifm-color-primary-lighter: #6943b9;
   --ifm-color-primary-lightest: #7b59c3;
-  --ifm-code-font-size: 90%;
+  --ifm-code-font-size: 80%;
+  --ifm-code-padding-horizontal: 0.3rem;
+  --ifm-global-radius: 0.3rem;
+  --ifm-code-border-radius: 0.2rem;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-h1-font-size: 2.5rem;
+  --ifm-heading-font-weight: 500;
+  --ifm-button-font-weight: var(--ifm-heading-font-weight);
+  --ifm-hr-background-color: var(--ifm-color-emphasis-200);
+}
+
+.navbar__title {
+  font-weight: 500;
+}
+
+.navbar__link {
+  color: var(--ifm-navbar-link-color);
+  font-weight: var(--ifm-font-weight-normal);
+}
+
+.menu {
+  font-weight: var(--ifm-font-weight-normal);
+}
+
+.badge {
+  font-weight: var(--ifm-font-weight-normal);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -34,12 +57,55 @@
   :root {
     --ifm-font-size-base: 16px;
   }
+
+  .banner-img {
+    display: none;
+  }
 }
 
 @media screen and (min-width: 997px) {
   :root {
     --ifm-font-size-base: 18px;
   }
+
+  .hero__subtitle {
+    margin-top: 2rem;
+  }
+
+  .hero__title {
+    font-size: 4rem;
+    margin-left: -20px;
+  }
+
+  .markdown h1:first-child {
+    --ifm-h1-font-size: 2.5rem;
+  }
+
+  .title_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocCategoryGeneratedIndexPage-styles-module {
+    --ifm-h1-font-size: 2.5rem !important;
+  }
+
+  .markdown {
+    --ifm-h3-vertical-rhythm-top: 2;
+  }
+
+  hr {
+    margin-top: 2.5rem;
+  }
+
+  .markdown>h2 {
+    margin-bottom: calc(var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading) * 1.5);
+  }
+
+  .markdown>h3 {
+    --ifm-h3-font-size: 1.3rem;
+  }
+
+
+}
+
+.menu__caret:before {
+  background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 1.5rem;
 }
 
 html[data-theme=light] .navbar__item.header-github-link {
@@ -53,25 +119,3 @@ html[data-theme=light] .navbar__item.header-github-link {
   margin-right: -1rem;
   background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy42MDEgMGExMy41OTcgMTMuNTk3IDAgMCAwLTQuMjk4IDI2LjQ5OGMuNjc2LjEyNi45MjgtLjI5NS45MjgtLjY1NSAwLS4zMjUtLjAxMS0xLjM5NC0uMDE4LTIuNTMxLTMuNzgzLjgyMi00LjU4LTEuNjAzLTQuNTgtMS42MDMtLjYxOS0xLjU3Ni0xLjUxLTEuOTktMS41MS0xLjk5LTEuMjM0LS44NDUuMDkyLS44MjcuMDkyLS44MjcgMS4zNjYuMDk3IDIuMDg1IDEuNCAyLjA4NSAxLjQgMS4yMTMgMi4wNzkgMy4xODEgMS40OCAzLjk1NiAxLjEyNi4xMjMtLjg3OC40NzUtMS40NzcuODY0LTEuODE3LTMuMDEtLjM0LTYuMTk2LTEuNTA2LTYuMTk2LTYuNzE2YTUuMjU3IDUuMjU3IDAgMCAxIDEuNDAzLTMuNjU0Yy0uMTQyLS4zNDItLjYwOC0xLjcyNS4xMy0zLjYwMiAwIDAgMS4xNDItLjM2NSAzLjc0IDEuMzkzYTEyLjkyIDEyLjkyIDAgMCAxIDYuODEgMGMyLjU4NS0xLjc0OSAzLjczNi0xLjM5MyAzLjczNi0xLjM5My43MzkgMS44NzMuMjc1IDMuMjU1LjEzMyAzLjYwMmE1LjI1NSA1LjI1NSAwIDAgMSAxLjM5OCAzLjY1YzAgNS4yMjMtMy4xOCA2LjM3MS02LjIwNyA2LjcxLjQ4Ni40Mi45MiAxLjI0OS45MiAyLjUxNiAwIDEuODItLjAxMyAzLjI4NS0uMDEzIDMuNzMxIDAgLjM2My4yNDMuNzg2LjkzMi42NTNBMTMuNTk2IDEzLjU5NiAwIDAgMCAxMy42MDEgMHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNS4xNTQgMTkuNTJjLS4wMy4wNjgtLjEzNS4wODgtLjIyNS4wNDNzLS4xNTYtLjEzNy0uMTI0LS4yMDVjLjAzMS0uMDY3LjEzNy0uMDg3LjIyNS0uMDQyLjA4OC4wNDUuMTU1LjEzNy4xMjIuMjA0aC4wMDJ6bS41NTEuNjE1Yy0uMDY1LjA2LS4xOTEuMDMyLS4yNzktLjA2M2EuMjA3LjIwNyAwIDAgMS0uMDM4LS4yODFjLjA2Ny0uMDYxLjE4OS0uMDMyLjI3OS4wNjMuMDkuMDk0LjEwNi4yMjUuMDM4LjI4MXptLjUzNi43ODNjLS4wODMuMDU5LS4yMjUgMC0uMzA0LS4xMTctLjA3OS0uMTE3LS4wODMtLjI2NSAwLS4zMjQuMDg0LS4wNTguMjI1IDAgLjMwNC4xMTUuMDc5LjExNS4wODQuMjY4IDAgLjMyNnptLjc0My43NTdhLjI1NS4yNTUgMCAwIDEtLjM1OC0uMDZjLS4xMi0uMTExLS4xNTMtLjI2Ni0uMDc2LS4zNDguMDc2LS4wOC4yMjUtLjA2LjM1LjA1Mi4xMjcuMTEzLjE1NC4yNjYuMDc1LjM0N2wuMDEuMDA5em0xLjAwNC40MzljLS4wMzMuMTA2LS4xODQuMTU1LS4zNC4xMS0uMTU1LS4wNDUtLjI1NC0uMTctLjIyNS0uMjc5LjAzLS4xMDguMTg1LS4xNTcuMzQtLjExLjE1Ni4wNDcuMjU1LjE3LjIyNS4yNzl6bTEuMTEyLjA4MWMwIC4xMTMtLjEyNi4yMDUtLjI4OC4yMDctLjE2Mi4wMDItLjI5Mi0uMDg1LS4yOTUtLjE5OC0uMDAyLS4xMTMuMTI2LS4yMDUuMjktLjIwNy4xNjUtLjAwMi4yOTMuMDg4LjI5My4xOTh6bTEuMDM2LS4xNzVjLjAyLjExLS4wOTIuMjI1LS4yNTIuMjUyLS4xNi4wMjctLjMwNC0uMDM5LS4zMjQtLjE0OS0uMDItLjExLjA5NC0uMjI1LjI1Mi0uMjUyLjE1OC0uMDI3LjMwNC4wMzguMzI0LjE0OHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=) 0/20px 20px no-repeat;
 }
-
-.hero__subtitle {
-  margin-top: 2rem;
-}
-
-.hero__title {
-  font-size: 4rem;
-}
-
-@media screen and (max-width: 996px) {
-  .banner-img {
-    display: none;
-  }
-}
-
-.markdown h1:first-child {
-  --ifm-h1-font-size: 2.5rem;
-}
-
-.title_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocCategoryGeneratedIndexPage-styles-module {
-  --ifm-h1-font-size: 2.5rem !important;
-}

docs/src/pages/index.tsx

@@ -18,23 +18,23 @@ function HomepageHeader() {
             <h1 className="hero__title">{siteConfig.title}</h1>
             <p className="hero__subtitle">{siteConfig.tagline + "："}</p>
             <div>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                 <span className="badge badge--primary" style={{ marginRight: 8 }}>2D 渲染</span>
                 支持多纹理渲染（多纹理材质、多纹理合批）
               </p>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                 <span className="badge badge--primary" style={{ marginRight: 8 }}>2D 渲染</span>
                 支持高 DPI 文本渲染
               </p>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                 <span className="badge badge--primary" style={{ marginRight: 8 }}>动态图集</span>
                 完全重构，支持自动多纹理合批、优化算法、复用废弃空间等特性
               </p>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                 <span className="badge badge--primary" style={{ marginRight: 8 }}>Label 组件</span>
                 重构 Char 缓存模式，支持自动多纹理合批、多图集、复用废弃空间等特性
               </p>
-              <p style={{ color: 'var(--ifm-color-primary)', fontWeight: 'bold', marginBottom: 2 }}>
+              <p style={{ color: 'var(--ifm-color-primary)', marginBottom: 2 }}>
                 <span className="badge badge--primary" style={{ marginRight: 8 }}>Spine 组件</span>
                 支持与其它组件合批、合入动态图集与 SpriteFrame 换装
               </p>
@@ -47,6 +47,13 @@ function HomepageHeader() {
               >
                 开始使用
               </Link>
+              <Link
+                className="button button--outline button--primary button--lg"
+                href='TODO'
+                style={{ marginRight: 20 }}
+              >
+                查看演示
+              </Link>
               <Link
                 className="button button--secondary button--lg"
                 href='https://github.com/smallmain/cocos-service-pack'>

docs/src/theme/DocCard/index.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
+
+function CardContainer({href, children}) {
+  return (
+    <Link
+      href={href}
+      className={clsx('card padding--lg', styles.cardContainer)}>
+      {children}
+    </Link>
+  );
+}
+
+function CardLayout({href, icon, title, description}) {
+  return (
+    <CardContainer href={href}>
+      <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
+        {icon} {title}
+      </h2>
+      {description && (
+        <p
+          className={clsx('text--truncate', styles.cardDescription)}
+          title={description}>
+          {description}
+        </p>
+      )}
+    </CardContainer>
+  );
+}
+
+function CardCategory({item}) {
+  const href = findFirstCategoryLink(item); // Unexpected: categories that don't have a link have been filtered upfront
+
+  if (!href) {
+    return null;
+  }
+
+  return (
+    <CardLayout
+      href={href}
+      icon=""
+      title={item.label}
+      description={translate(
+        {
+          message: '{count} items',
+          id: 'theme.docs.DocCard.categoryDescription',
+          description:
+            'The default description for a category card in the generated index about how many items this category includes',
+        },
+        {
+          count: item.items.length,
+        },
+      )}
+    />
+  );
+}
+
+function CardLink({item}) {
+  const doc = useDocById(item.docId ?? undefined);
+  const icon = "";
+  return (
+    <CardLayout
+      href={item.href}
+      icon={icon}
+      title={item.label}
+      description={doc?.description}
+    />
+  );
+}
+
+export default function DocCard({item}) {
+  switch (item.type) {
+    case 'link':
+      return <CardLink item={item} />;
+
+    case 'category':
+      return <CardCategory item={item} />;
+
+    default:
+      throw new Error(`unknown item type ${JSON.stringify(item)}`);
+  }
+}

docs/src/theme/DocCard/styles.module.css

@@ -0,0 +1,27 @@
+.cardContainer {
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+  --ifm-link-hover-decoration: none;
+
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+}
+
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+}
+
+.cardContainer *:last-child {
+  margin-bottom: 0;
+}
+
+.cardTitle {
+  font-size: 1.2rem;
+}
+
+.cardDescription {
+  font-size: 0.8rem;
+}