From 38e7dfa5fafacca199eecd7fbce6b449197d7dcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 2 Feb 2021 12:03:57 +0800 Subject: [PATCH] docs: Update resource page (#29176) * docs: Update resource page * docs: Update style --- docs/resources.en-US.md | 2 +- docs/resources.zh-CN.md | 17 ++++++++++++++++- site/theme/template/Resources/index.less | 23 +++++++++++++++++++++++ site/theme/template/Resources/index.tsx | 13 ++++++++++--- 4 files changed, 50 insertions(+), 5 deletions(-) diff --git a/docs/resources.en-US.md b/docs/resources.en-US.md index ac5cde7a3f..b1d2c22553 100644 --- a/docs/resources.en-US.md +++ b/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 diff --git a/docs/resources.zh-CN.md b/docs/resources.zh-CN.md index c4be9080fb..e0e76c2103 100644 --- a/docs/resources.zh-CN.md +++ b/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) +
+ +- [![林外](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) +
+ +- [![偏右](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/) diff --git a/site/theme/template/Resources/index.less b/site/theme/template/Resources/index.less index 93f9cb41bd..93159145bf 100644 --- a/site/theme/template/Resources/index.less +++ b/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; diff --git a/site/theme/template/Resources/index.tsx b/site/theme/template/Resources/index.tsx index cc39f27e6e..94b346c2d9 100644 --- a/site/theme/template/Resources/index.tsx +++ b/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 {