mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
docs: Update resource page (#29176)
* docs: Update resource page * docs: Update style
This commit is contained in:
二货机器人
GitHub
parent
ca05d15bb7
commit
38e7dfa5fa
@ -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
|
||||
|
||||
|
||||
@ -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://www.zhihu.com/people/lyndonliu)
|
||||
- [](https://www.zhihu.com/people/a-li-zai-nu-li)
|
||||
- [](https://www.zhihu.com/people/caicaicaizw)
|
||||
- [](https://www.zhihu.com/people/su-gu-niang-18)
|
||||
- [](https://www.zhihu.com/people/noideaser)
|
||||
- [](https://www.zhihu.com/people/sever-li)
|
||||
- [](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://www.zhihu.com/people/afc163)
|
||||
- [](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/)
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user