diff --git a/docs/download.md b/docs/download.md
index ae38db9e37..e321ad1f01 100644
--- a/docs/download.md
+++ b/docs/download.md
@@ -1,6 +1,6 @@
# 下载
-- category: React
+- category: top
- order: 2
---
@@ -54,7 +54,7 @@ $ npm install antd@beta --save
## 开发工具
-Ant Design 提供了开发构建的命令行工具，可以安装到全局直接使用：
+我们提供了开发构建的命令行工具，可以安装到全局直接使用：
```bash
$ npm install antd-bin -g
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 2d5a941680..c7a7e3435b 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -1,15 +1,15 @@
# 快速上手
-- category: React
+- category: top
- order: 1
---
-Ant Design 致力于提供给程序员愉悦的开发体验。
+Ant Design React 致力于提供给程序员愉悦的开发体验。
## 第一个例子
-Ant Design 封装了一套基于 React 实现的 UI 组件，可以用 React 的方式直接使用。
+我们封装了一套基于 React 实现的 UI 组件，可以用 React 的方式直接使用。
下面有一个使用了 [日期选择](http://ant.design/components/datepicker) 组件的简单例子。
@@ -43,7 +43,7 @@ Ant Design 封装了一套基于 React 实现的 UI 组件，可以用 React 的
## 标准项目
实际项目开发中，你会需要 CommonJS 、JSX 构建、打包部署等一系列工程化的需求。
-Ant Design 提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
+提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
### 1. 安装命令行工具
@@ -65,7 +65,7 @@ $ npm install
### 3. 使用组件
-编辑 `index.js`，使用 Ant Design 的组件：
+编辑 `index.js`，使用 Ant Design React 的组件：
```jsx
import React from 'react';
@@ -140,11 +140,11 @@ $ npm run build
入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
-> 上述例子用于帮助你理解 Ant Design 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
+> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
## 兼容性
-Ant Design 支持所有的现代浏览器和 IE8+。
+Ant Design React 支持所有的现代浏览器和 IE8+。
对于 IE8，需要提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
diff --git a/docs/introduce.md b/docs/introduce.md
index de333a555d..6175ebe5c6 100644
--- a/docs/introduce.md
+++ b/docs/introduce.md
@@ -1,19 +1,17 @@
# 介绍
-- category: React
+- category: top
- order: 0
---
-一套企业级的 UI 设计语言和 React 实现。
-
-设计文档和组件实现均在紧密整理和开发中，部分页面可能不完善，预计 8 月份释出正式版本。
+这里是 Ant Design 的 React 实现，主要设计和服务于企业级后台产品。
## 特性
-- 提炼自企业级后台产品的交互语言和视觉风格。
+- Designed as Ant Design.
- 丰富实用的 React UI 组件。
- 基于 React 的组件化开发模式。
- 背靠 npm 生态圈。
diff --git a/site/templates/aside.html b/site/templates/aside.html
index e22f65fa2a..45a017f26f 100644
--- a/site/templates/aside.html
+++ b/site/templates/aside.html
@@ -2,11 +2,20 @@
diff --git a/site/templates/layout.html b/site/templates/layout.html
index e38eb4fbd3..0838d3d576 100644
--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@@ -93,7 +93,7 @@
首页
- 设计
+ 设计
React
diff --git a/site/theme.js b/site/theme.js
index f413252f3f..d70e539b1e 100644
--- a/site/theme.js
+++ b/site/theme.js
@@ -61,28 +61,45 @@ module.exports = function(nico) {
directories = ['docs', 'components'];
}
var cacheKey = directories.join('-');
- var categories = Categories[cacheKey] || _.uniq(getAllPosts(posts).map(function(item) {
- var itemDirectory = item.directory.split('/')[0];
- if (directories.indexOf(itemDirectory) >= 0) {
- return item.meta.category;
- }
- })).filter(function(n) {
- return n != undefined;
- });
- // React 的分类排序
- categories = categories.sort(function(a, b) {
- var cats = ['React', 'Components'];
- a = cats.indexOf(a);
- b = cats.indexOf(b);
- return a - b;
- });
- // 设计的分类排序
- categories = categories.sort(function(a, b) {
- var cats = ['文字', '色彩', '动画'];
- a = cats.indexOf(a);
- b = cats.indexOf(b);
- return a - b;
- })
+ var categories;
+ if (Categories[cacheKey]) {
+ categories = Categories[cacheKey];
+ } else {
+ categories = {};
+ _.uniq(getAllPosts(posts).forEach(function(item) {
+ var itemDirectory = item.directory.split('/')[0];
+ var cat = item.meta.category;
+ if (cat && directories.indexOf(itemDirectory) >= 0) {
+ categories[cat] = categories[cat] || [];
+ categories[cat].push(item);
+ }
+ }));
+ categories = Object.keys(categories).map(function(cat) {
+ var pages = categories[cat].sort(function(a, b) {
+ a = a.meta.order || 100;
+ b = b.meta.order || 100;
+ return parseInt(a, 10) - parseInt(b, 10);
+ });
+ return {
+ name: cat,
+ pages: pages
+ };
+ });
+ // React 的分类排序
+ categories = categories.sort(function(a, b) {
+ var cats = ['React', 'Components'];
+ a = cats.indexOf(a.name);
+ b = cats.indexOf(b.name);
+ return a - b;
+ });
+ // 设计的分类排序
+ categories = categories.sort(function(a, b) {
+ var cats = ['文字', '色彩', '动画'];
+ a = cats.indexOf(a.name);
+ b = cats.indexOf(b.name);
+ return a - b;
+ });
+ }
Categories[cacheKey] = categories;
return categories;
},
diff --git a/spec/introduce.md b/spec/introduce.md
new file mode 100644
index 0000000000..b9d83ffd8c
--- /dev/null
+++ b/spec/introduce.md
@@ -0,0 +1,11 @@
+# Ant Design
+
+- category: top
+- order: 0
+
+---
+
+Ant Design 是一个 UI 设计语言，是提炼和应用于企业级金融产品的一套交互语言和视觉体系。
+
+
+
diff --git a/static/style.css b/static/style.css
index 4dd3c96965..dcff19f1ac 100644
--- a/static/style.css
+++ b/static/style.css
@@ -338,22 +338,22 @@ a.nav-link-disabled {
display: block;
width: 50px;
height: 50px;
- margin: auto;
+ margin: auto;
animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
- -webkit-animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;;
+ -webkit-animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;;
}
-.load-box span{
- display: inline-block;
+.load-box span {
+ display: inline-block;
}
-.load-box span>p{
- float: left;
+.load-box span > p {
+ float: left;
}
-.load-main-box .load-bar{
- width: 0%;
- height: 2px;
- background: #6EB4E0;
- transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
- -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);;
+.load-main-box .load-bar {
+ width: 0%;
+ height: 2px;
+ background: #6EB4E0;
+ transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+ -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);;
}
.load-out {
-webkit-animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
@@ -384,14 +384,14 @@ footer ul li {
padding: 5px 2% 15px;
}
-footer ul li>h2 {
+footer ul li > h2 {
font-size: 1em;
color: #5C6B77;
margin: 10px auto 0;
font-weight: normal;
}
-footer ul li>h3,
+footer ul li > h3,
footer h3 {
font-size: 0.75em;
color: #5C6B77;
@@ -425,7 +425,7 @@ footer ul li > a {
}
.aside-container li h4 {
- font-size: 16px;
+ font-size: 14px;
font-weight: 600;
padding: 10px 0 10px 46px;
margin: 0;
@@ -436,13 +436,32 @@ footer ul li > a {
position: relative;
z-index: 1;
background: #F9F9F9;
+ position: relative;
}
-.aside-container li>ul.aside-list-show {
+.aside-container li h4:after {
+ position: absolute;
+ top: 11px;
+ right: 30px;
+ content: "\e600";
+ font-family: "anticon";
+ transform: scale(0.6);
+ font-size: 12px;
+ color: #5C6B76;
+ opacity: 0.4;
+ transform: scale(0.6) rotate(180deg);
+ transition: transform 0.3s ease;
+}
+
+.aside-container li[open=open] h4:after {
+ transform: scale(0.6) rotate(0deg);
+}
+
+.aside-container li > ul.aside-list-show {
display: block;
}
-.aside-container li>ul li {
+.aside-container li > ul li {
border-left: 3px solid transparent;
}
@@ -455,6 +474,17 @@ footer ul li > a {
color: #5C6B76;
}
+.aside-container > ul > li > a {
+ padding-left: 46px;
+ font-size: 14px;
+ font-weight: 600;
+ border-left: 3px solid transparent;
+}
+
+.aside-container > ul > li.current > a {
+ border-left: 0;
+}
+
.aside-container .chinese {
font-size: 12px;
margin-left: 6px;