docs: Update resource page (#29176)

* docs: Update resource page

* docs: Update style

docs/resources.en-US.md

@@ -69,7 +69,7 @@ Please find below some of the design resources and tools about Ant Design that w
 
 ## Articles
 
-Do you want to know the story behind the Ant Design design system? How can I better apply Ant Design? You can check out our well selected articles below. Also welcome to follow [Ant Design Official Column](https://zhuanlan.zhihu.com/antdesign). There are often the latest sharing and discussions on related topics under the Ant Design design system, such as Ant Design, AntV visualization, Kitchen design Plug-ins, B-side product design, SaaS product design, natural interaction, growth design, intelligent design, design engineering, etc.
+Do you want to know the story behind the Ant Design design system? How can I better apply Ant Design? You can check out our well selected articles below. Also welcome to follow [Ant Design Official Column](https://www.zhihu.com/column/c_1310524851418480640). There are often the latest sharing and discussions on related topics under the Ant Design design system, such as Ant Design, AntV visualization, Kitchen design Plug-ins, B-side product design, SaaS product design, natural interaction, growth design, intelligent design, design engineering, etc.
 
 ## Reference
 

docs/resources.zh-CN.md

@@ -65,7 +65,7 @@ toc: false
 
 ## 文章
 
-想要了解 Ant Design 设计体系背后的故事？如何才能更好的应用 Ant Design？你可以查阅下述我们为你精挑细选的文章。也欢迎关注 [Ant Design 官方专栏](https://zhuanlan.zhihu.com/antdesign)，这里常有关于 Ant Design 设计体系下相关话题内容的最新分享和讨论，如 Ant Design、AntV 可视化、Kitchen 设计插件、B 端产品设计、SaaS 产品设计、自然交互、增长设计、智能设计、设计工程化等。
+想要了解 Ant Design 设计体系背后的故事？如何才能更好的应用 Ant Design？你可以查阅下述我们为你精挑细选的文章。也欢迎关注 [Ant Design 官方专栏](https://www.zhihu.com/column/c_1310524851418480640)，这里常有关于 Ant Design 设计体系下相关话题内容的最新分享和讨论，如 Ant Design、AntV 可视化、Kitchen 设计插件、B 端产品设计、SaaS 产品设计、自然交互、增长设计、智能设计、设计工程化等。
 
 ### 设计
 
@@ -86,11 +86,26 @@ toc: false
 - [体验，不只是用户的！Ant Design 在蚂蚁中台的应用](https://zhuanlan.zhihu.com/p/26846739)
 - [在用 Sketch 和 iconfont？试试 Kitchen 吧！](https://zhuanlan.zhihu.com/p/36657030)
 
+<div class="next-block-use-avatars"></div>
+
+- [![林外](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x4_RRqpFsekAAAAAAAAAAAAAARQnAQ)](https://www.zhihu.com/people/lyndonliu)
+- [![元尧](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*kACkTa-p8cgAAAAAAAAAAAAAARQnAQ)](https://www.zhihu.com/people/a-li-zai-nu-li)
+- [![不过](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dvVKSKtCHf0AAAAAAAAAAAAAARQnAQ)](https://www.zhihu.com/people/caicaicaizw)
+- [![Suki](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*q5dQQ5c64yoAAAAAAAAAAAAAARQnAQ)](https://www.zhihu.com/people/su-gu-niang-18)
+- [![梓义](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KylFRYu1a9EAAAAAAAAAAAAAARQnAQ)](https://www.zhihu.com/people/noideaser)
+- [![幕阑](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VFWVRJSyy4IAAAAAAAAAAAAAARQnAQ)](https://www.zhihu.com/people/sever-li)
+- [![晴风](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1P5sRIAGCDoAAAAAAAAAAAAAARQnAQ)](https://www.zhihu.com/people/nan-guo-xi-chuang)
+
 ### 技术
 
 - [Ant Design 色板生成算法演进之路](https://zhuanlan.zhihu.com/p/32422584)
 - [如何向开源项目提交无法解答的问题](https://zhuanlan.zhihu.com/p/25795393)
 
+<div class="next-block-use-avatars"></div>
+
+- [![偏右](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*u5M-QJGnXl4AAAAAAAAAAAAAARQnAQ)](https://www.zhihu.com/people/afc163)
+- [![山果](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*M2yMRK9jTZAAAAAAAAAAAAAAARQnAQ)](https://www.zhihu.com/people/chi-zi-you)
+
 ## 致敬
 
 在 Ant Design 4.0 的改版中，我们汲取顶级设计体系的精华，同时结合我们自身业务特性做了大量优化。我们希望通过不断努力和打磨，成为世界级设计体系的一份子，为「用户」和「设计者」带来极致体验。如果你也想追求卓越，建议去研究这些体系： [Fiori Design](https://experience.sap.com/fiori-design-web/)、 [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/themes/)、 [Lightning Design System](https://lightningdesignsystem.com/getting-started/)、 [Material Design](https://material.io/)

site/theme/template/Resources/index.less

@@ -105,6 +105,29 @@
     }
   }
 
+  .resource-avatars {
+    margin-top: 24px;
+
+    ul,
+    li {
+      list-style: none;
+    }
+
+    li {
+      display: inline-block;
+      margin: 0 20px 0 0;
+
+      img {
+        width: 60px;
+        max-width: none;
+        height: 60px;
+        object-fit: cover;
+        background: #d8d8d8;
+        border-radius: 100%;
+      }
+    }
+  }
+
   footer {
     margin-top: 176px;
 

site/theme/template/Resources/index.tsx

@@ -49,7 +49,7 @@ function getUnitString(unit: ContentUnit[]): string {
   return Array.isArray(last) ? getUnitString(last) : (last as string);
 }
 
-function toList([, ...items]: ContentUnit[]): ContentUnit[] {
+function toCardList([, ...items]: ContentUnit[]): ContentUnit[] {
   return [
     'div',
     { className: 'ant-row resource-cards', style: 'margin: -12px -12px 0 -12px' },
@@ -101,11 +101,18 @@ function toList([, ...items]: ContentUnit[]): ContentUnit[] {
 function injectCards(content: ContentUnit[]): ContentUnit[] {
   const newContent: ContentUnit[] = [];
 
+  const isClassNameType = (unit: any, className: string) =>
+    Array.isArray(unit) && (unit[1] as any).class === className;
+
   for (let i = 0; i < content.length; i += 1) {
     const unit = content[i];
 
-    if (Array.isArray(unit) && (unit[1] as any).class === 'next-block-use-cards') {
-      newContent.push(toList(content[i + 1] as any));
+    if (isClassNameType(unit, 'next-block-use-cards')) {
+      newContent.push(toCardList(content[i + 1] as any));
+
+      i += 1;
+    } else if (isClassNameType(unit, 'next-block-use-avatars')) {
+      newContent.push(['div', { className: 'resource-avatars' }, content[i + 1]]);
 
       i += 1;
     } else {