Skip to content

Commit 2b821d1

Browse files
tangjinzhoutangjinzhou
committed
docs: optimize site #117 
1 parent 237cb55 commit 2b821d1

File tree

8 files changed

+156
-97
lines changed

8 files changed

+156
-97
lines changed

‎README-zh_CN.md

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,6 @@ Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。
2222

2323
[README in English](README.md)
2424

25-
## 赞助
26-
27-
ant-design-vue是一个开源的独立项目，为了项目能够更好的持续的发展，我们期望获得你的支持，你可以通过如下任何一种方式支持我们：
28-
29-
- [Patreon](https://www.patreon.com/tangjinzhou)
30-
- [opencollective](https://opencollective.com/ant-design-vue)
31-
- [paypal](https://www.paypal.me/tangjinzhou)
32-
33-
<p align="center">
34-
<img src="https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png">
35-
</p>
36-
3725
## 特性
3826

3927
- 提炼自企业级中后台产品的交互语言和视觉风格。
@@ -61,3 +49,12 @@ $ yarn add ant-design-vue
6149
- [Vue官方文档](https://cn.vuejs.org/)
6250
- [Antd React](http://ant.design/)
6351

52+
## 赞助
53+
54+
ant-design-vue是MIT协议的开源项目。为了项目能够更好的持续的发展，我们期望获得更多的[支持者](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)，你可以通过如下任何一种方式支持我们：
55+
56+
- [Patreon](https://www.patreon.com/tangjinzhou)
57+
- [opencollective](https://opencollective.com/ant-design-vue)
58+
- [paypal](https://www.paypal.me/tangjinzhou)
59+
- [支付宝或微信](https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png)
60+

‎README.md

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,6 @@ An enterprise-class UI components based on Ant Design 3.X and Vue.
2727
- A set of high-quality Vue components out of the box.
2828
- Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
2929

30-
## Donation
31-
32-
ant-design-vue is an open source independent project. In order to achieve better and sustainable development of the project, we hope to get your support. You can support us in any of the following ways:
33-
34-
- [Patreon](https://www.patreon.com/tangjinzhou)
35-
- [opencollective](https://opencollective.com/ant-design-vue)
36-
- [paypal](https://www.paypal.me/tangjinzhou)
37-
38-
<p align="center">
39-
<img src="https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png">
40-
</p>
41-
4230
## Using npm or yarn
4331

4432
**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
@@ -60,3 +48,13 @@ If you are in a bad network environment，you can try other registries and tools
6048
- [Vue](https://vuejs.org/)
6149
- [Ant Design React](http://ant.design/)
6250

51+
## Donation
52+
53+
ant-design-vue is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more [backers](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md). You can support us in any of the following ways:
54+
55+
- [Patreon](https://www.patreon.com/tangjinzhou)
56+
- [opencollective](https://opencollective.com/ant-design-vue)
57+
- [paypal](https://www.paypal.me/tangjinzhou)
58+
- [支付宝或微信](https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png)
59+
60+

‎components/icon/demo/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default {
4747
render () {
4848
return (
4949
<div>
50-
<md cn={md.cn} us={md.us}/>
50+
<md class='api-container' cn={md.cn} us={md.us}/>
5151
<md cn='### 方向性图标' us='### Directional Icons'/>
5252
<IconSet class='icons' catigory='direction' />
5353
<md cn='### 提示建议性图标' us='### Suggested Icons'/>

‎site/components/footer.vue

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<script>
2+
export default {
3+
props: {
4+
isCN: Boolean,
5+
},
6+
render () {
7+
const isCN = this.isCN
8+
return (
9+
<footer id='footer'>
10+
<div class='footer-wrap'>
11+
<a-row>
12+
<a-col md={6} sm={24} xs={24}>
13+
<div class='footer-center'>
14+
<h2>Ant Design</h2>
15+
<div>
16+
<a href='https://github.com/vueComponent/ant-design-vue' target='_blank '>
17+
<span>GitHub</span></a><span> - </span>
18+
<span><i class='anticon anticon-github'></i></span>
19+
</div>
20+
<div>
21+
<a href='https://ant.design/docs/react/introduce-cn' target='_blank'>Ant Design</a>
22+
<span> - </span><span>React</span>
23+
</div>
24+
<div>
25+
<a href='https://github.com/NG-ZORRO/ng-zorro-antd' target='_blank'>Ant Design</a>
26+
<span> - </span><span>Angular</span>
27+
</div>
28+
<div>
29+
<a href='https://github.com/websemantics/awesome-ant-design' target='_blank '>
30+
<span>Awesome Ant Design</span>
31+
</a>
32+
</div>
33+
</div>
34+
</a-col>
35+
<a-col md={6} sm={24} xs={24}>
36+
<div class='footer-center'>
37+
<h2>{isCN ? '资源链接' : 'Resources'}</h2>
38+
<div>
39+
<a href='https://cn.vuejs.org/' target='_blank'>Vue</a>
40+
</div>
41+
<div>
42+
<a href='https://cli.vuejs.org/' target='_blank'>Vue CLI</a>
43+
</div>
44+
<div>
45+
<a href='http://library.ant.design/' rel='noopener noreferrer' target='_blank'>AntD Library</a>
46+
</div>
47+
<div>
48+
<a href='http://tangjinzhou.gitee.io/ant-design-vue/' target='_blank' >
49+
<span>{isCN ? '国内镜像' : 'China Mirror'} 🇨🇳</span>
50+
</a>
51+
</div>
52+
</div>
53+
</a-col>
54+
<a-col md={6} sm={24} xs={24}>
55+
<div class='footer-center'>
56+
<h2>{isCN ? '社区' : 'Community'}</h2>
57+
{
58+
isCN ? <div>
59+
<a href='https://zhuanlan.zhihu.com/ant-design-vue' target='_blank'>
60+
<span>知乎专栏</span>
61+
</a>
62+
</div>
63+
: ''
64+
}
65+
<div>
66+
<a href='https://github.com/vueComponent/ant-design-vue/releases' target='_blank'>
67+
<span>{isCN ? '更新记录' : 'Change Log'}</span>
68+
</a>
69+
</div>
70+
<div>
71+
<a rel='noopener noreferrer' target='_blank' href='https://vuecomponent.github.io/issue-helper/?lang=zh'>
72+
<span>{isCN ? '报告 Bug' : 'Bug Report'}</span>
73+
</a>
74+
</div>
75+
</div>
76+
</a-col>
77+
<a-col md={6} sm={24} xs={24}>
78+
<div class='footer-center'>
79+
<h2>
80+
<img alt='' class='title-icon' src='https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg'/>
81+
<span>{isCN ? '更多产品' : 'More Products'}</span>
82+
</h2>
83+
<div>
84+
<a href='https://antv.alipay.com/' rel='noopener noreferrer' target='_blank'>AntV</a>
85+
<span> - </span>
86+
<span>{isCN ? '数据可视化' : 'Data Visualization'}</span></div><div><a href='https://eggjs.org/' rel='noopener noreferrer' target='_blank'>Egg</a>
87+
<span> - </span>
88+
<span>{isCN ? '企业级 Node 开发框架' : 'Enterprise Node Framework'}</span>
89+
</div>
90+
</div>
91+
</a-col>
92+
</a-row>
93+
</div>
94+
</footer>
95+
)
96+
},
97+
}
98+
</script>

‎site/components/header.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default {
3535
<a-col class='header-left' xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
3636
<router-link to={{ path: '/ant-design-vue' }} id='logo'>
3737
<img alt='logo' height='32' src='https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/logo.png' />
38-
<span> Ant Design Vue</span>
38+
<span style='color: black;font-size: 16px;font-weight: 400;'>Ant Design Vue</span>
3939
</router-link>
4040
<a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
4141
{isCN ? 'English' : '中文'}

‎site/components/layout.vue

Lines changed: 30 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
<script>
22
import AllDemo from '../demo'
33
import Header from './header'
4+
import Footer from './footer'
45
import zhCN from 'antd/locale-provider/zh_CN'
56
import enUS from 'antd/locale-provider/default'
67
import sortBy from 'lodash/sortBy'
78
import { isZhCN } from '../util'
89
import { Provider, create } from '../../components/_util/store'
910
import NProgress from 'nprogress'
10-
import debounce from 'lodash/debounce'
11-
import addDOMEventListener from 'add-dom-event-listener'
1211
1312
const docsList = [
1413
{ key: 'introduce', enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue' },
@@ -18,27 +17,6 @@ const docsList = [
1817
{ key: 'changelog', enTitle: 'Change Log', title: '更新日志' },
1918
{ key: 'i18n', enTitle: 'Internationalization', title: '国际化' },
2019
]
21-
function getOffsetTop (element, container = window) {
22-
if (!element) {
23-
return 0
24-
}
25-
26-
if (!element.getClientRects().length) {
27-
return 0
28-
}
29-
30-
const rect = element.getBoundingClientRect()
31-
32-
if (rect.width || rect.height) {
33-
if (container === window) {
34-
container = element.ownerDocument.documentElement
35-
return rect.top - container.clientTop
36-
}
37-
return rect.top - container.getBoundingClientRect().top
38-
}
39-
40-
return rect.top
41-
}
4220
4321
export default {
4422
props: {
@@ -83,12 +61,6 @@ export default {
8361
nprogressHiddenStyle.parentNode.removeChild(nprogressHiddenStyle)
8462
}, 0)
8563
}
86-
87-
this.updateHeight()
88-
this.debouncedResize = debounce(() => {
89-
this.updateHeight()
90-
}, 200)
91-
this.resizeEvent = addDOMEventListener(window, 'resize', this.debouncedResize)
9264
})
9365
},
9466
watch: {
@@ -98,12 +70,6 @@ export default {
9870
},
9971
},
10072
methods: {
101-
updateHeight () {
102-
const el = this.$refs.sidebar.$el
103-
const offsetTop = getOffsetTop(el)
104-
const docHeight = document.documentElement.offsetHeight
105-
this.sidebarHeight = docHeight - offsetTop
106-
},
10773
addSubMenu () {
10874
if (this.$route.path.indexOf('/docs/vue/') !== -1) {
10975
this.$nextTick(() => {
@@ -141,10 +107,14 @@ export default {
141107
</a-anchor>
142108
)
143109
},
144-
getDocsMenu (isCN) {
110+
getDocsMenu (isCN, pagesKey) {
145111
const docsMenu = []
146-
docsList.forEach(({ key, enTitle, title }) => {
112+
docsList.forEach(({ key, enTitle, title }, index) => {
147113
const k = isCN ? `${key}-cn` : key
114+
pagesKey.push({ name: k,
115+
url: `/ant-design-vue/docs/vue/${k}/`,
116+
title: isCN ? title : enTitle,
117+
})
148118
docsMenu.push(<a-menu-item key={k}>
149119
<router-link to={`/ant-design-vue/docs/vue/${k}/`}>{isCN ? title : enTitle }</router-link>
150120
</a-menu-item>)
@@ -176,7 +146,6 @@ export default {
176146
render () {
177147
const name = this.name
178148
const isCN = isZhCN(name)
179-
// name = name.replace(/-cn\/?$/, '')
180149
const titleMap = {}
181150
const menuConfig = {
182151
General: [],
@@ -187,6 +156,9 @@ export default {
187156
Feedback: [],
188157
Other: [],
189158
}
159+
const pagesKey = []
160+
let prevPage = null
161+
let nextPage = null
190162
const searchData = []
191163
for (const [title, d] of Object.entries(AllDemo)) {
192164
const type = d.type || 'Other'
@@ -196,14 +168,8 @@ export default {
196168
menuConfig[type] = menuConfig[type] || []
197169
menuConfig[type].push(d)
198170
}
171+
const docsMenu = this.getDocsMenu(isCN, pagesKey)
199172
const reName = name.replace(/-cn\/?$/, '')
200-
// const Demo = new Vue({
201-
// template: '<demo-component/>',
202-
// components: {
203-
// 'demo-component': () => import(`../../components/${AllDemo[titleMap[reName]].key}/demo/index.vue`),
204-
// },
205-
// })
206-
// AllDemo[titleMap[reName]]
207173
const MenuGroup = []
208174
for (const [type, menus] of Object.entries(menuConfig)) {
209175
const MenuItems = []
@@ -215,6 +181,11 @@ export default {
215181
if (isCN) {
216182
key = `${key}-cn`
217183
}
184+
pagesKey.push({
185+
name: key,
186+
url: `/ant-design-vue/components/${key}/`,
187+
title: isCN ? `${title} ${subtitle}` : title,
188+
})
218189
searchData.push({
219190
title,
220191
subtitle,
@@ -226,29 +197,34 @@ export default {
226197
})
227198
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
228199
}
200+
pagesKey.forEach((item, index) => {
201+
if (item.name === name) {
202+
prevPage = pagesKey[index - 1]
203+
nextPage = pagesKey[index + 1]
204+
}
205+
})
229206
let locale = zhCN
230207
if (!isCN) {
231208
locale = enUS
232209
}
233210
const config = AllDemo[titleMap[reName]]
234211
this.resetDocumentTitle(config, reName, isCN)
235-
const { showSideBars, sidebarHeight } = this
212+
const { showSideBars } = this
236213
return (
237214
<div class='page-wrapper'>
238215
<Header searchData={searchData} name={name}/>
239216
<a-locale-provider locale={locale}>
240217
<div class='main-wrapper'>
241218
<a-row>
242-
<a-col v-show={showSideBars} style={{ height: `${sidebarHeight}px` }} ref='sidebar' class='site-sidebar' xxl={4} xl={5} lg={5} md={6} sm={8} xs={12}>
219+
<a-col v-show={showSideBars} ref='sidebar' class='site-sidebar' xxl={4} xl={5} lg={5} md={6} sm={8} xs={12}>
243220
<div class='drawer-mask' onClick={() => { this.showSideBars = false }}></div>
244221
<a-menu
245-
246222
class='aside-container menu-site'
247223
selectedKeys={[name]}
248224
defaultOpenKeys={['Components']}
249225
inlineIndent={40}
250226
mode='inline'>
251-
{this.getDocsMenu(isCN)}
227+
{docsMenu}
252228
<a-sub-menu title={`Components(${searchData.length})`} key='Components'>
253229
{MenuGroup}
254230
</a-sub-menu>
@@ -287,12 +263,15 @@ export default {
287263
></router-view>
288264
</div> : ''}
289265
</div>
266+
<section class='prev-next-nav'>
267+
{prevPage ? <router-link class='prev-page' to={`${prevPage.url}`}>{prevPage.title}</router-link> : ''}
268+
{nextPage ? <router-link class='next-page' to={`${nextPage.url}`}>{nextPage.title}</router-link> : ''}
269+
</section>
290270
</a-col>
291271
</a-row>
292-
293272
</div>
294273
</a-locale-provider>
295-
274+
<Footer ref='footer' isCN={isCN}/>
296275
{ name.indexOf('back-top') === -1 ? <a-back-top /> : null }
297276
</div>
298277
)

0 commit comments

Comments
 (0)