diff --git a/docs/010-020-changes.md b/docs/010-020-changes.md index 4e77aae4eb..85b227632a 100644 --- a/docs/010-020-changes.md +++ b/docs/010-020-changes.md @@ -6,7 +6,7 @@ type: Advance `0.2` 最大的改变是将部分原本在 ng-alain 项目中文件进行独立拆分，这样对 ng-alain 在复用、更友好的升级问题上得到很好的解决。 -本次的变化对项目的改动其实不是很大，在开始阅读指引之前我建议先阅读入门指南序列文章（至少阅读 [关于 Delon](http://ng-alain.com/#/docs/delon) 文章），这样会更好的理解为何我要这么做。 +本次的变化对项目的改动其实不是很大，在开始阅读指引之前我建议先阅读入门指南序列文章（至少阅读 [关于 Delon](/docs/delon) 文章），这样会更好的理解为何我要这么做。 当前 `0.2` 是以[独立分支](https://github.com/cipchk/ng-alain/tree/0.2.0)在存在，而 [ng-alain](https://cipchk.github.io/ng-alain/) github预览已经是 `0.2` 版本了。 @@ -89,7 +89,7 @@ export class CoreModule { } | 原组件名 | 新组件名 | 描述 | | ------- | ------ | ---- | -| `fixed-btns` | `footer-toolbar` | [api](http://ng-alain.com/#/components/footer-toolbar) | +| `fixed-btns` | `footer-toolbar` | [api](/components/footer-toolbar) | **g2升级至3.0** diff --git a/docs/changelog.md b/docs/changelog.md index 40f6b43395..1b13d1be19 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -20,4 +20,4 @@ type: Other `2017-12-04` - 脚手架 - - 引入 `@delon/*` 系列类库，极大简化 `core`、`shared`、`styles` 的使用方式；若 `0.1` 则请参考[升级指引](http://ng-alain.com/#/docs/010-020-changes)。 + - 引入 `@delon/*` 系列类库，极大简化 `core`、`shared`、`styles` 的使用方式；若 `0.1` 则请参考[升级指引](/docs/010-020-changes)。 diff --git a/docs/graph.md b/docs/graph.md index cdac5471e0..7d5fd63c7f 100644 --- a/docs/graph.md +++ b/docs/graph.md @@ -22,7 +22,7 @@ type: Advance - 带有时间轴的折线图（timeline） - 图表卡片（chart-card） -[查看图表组件API文档](//ng-alain.com/#/components/charts) +[查看图表组件API文档](//ng-alain.com/components/charts) ## 如何使用？ diff --git a/docs/how-dev.md b/docs/how-dev.md index c829a996db..0f0cac7b53 100644 --- a/docs/how-dev.md +++ b/docs/how-dev.md @@ -11,16 +11,16 @@ type: Basic 当你开始着手在 ng-alain 基础上进行业务开发时，我建议你先了解一下以下文档，这对于亦或是团队每个成员都非常有帮助。 + [Ant Desig 指引文章](https://ant.design/docs/spec/introduce-cn) -+ [Ant Deisng for Angular](https://ng.ant.design/#/docs/angular/introduce) ++ [Ant Deisng for Angular](https://ng.ant.design/docs/angular/introduce) + [Antv 图表](https://antv.alipay.com/zh-cn/index.html) -ng-alain 的基础组件库来自 ng-zorro-antd，因此对于这类组件的使用方式你可以通过其官网得到很细说 [API](https://ng.ant.design/) 文档说明，而对于 ng-alain 提供的组件则通过[组件页](http://ng-alain.com/#/components)获取。 +ng-alain 的基础组件库来自 ng-zorro-antd，因此对于这类组件的使用方式你可以通过其官网得到很细说 [API](https://ng.ant.design/) 文档说明，而对于 ng-alain 提供的组件则通过[组件页](/components)获取。 > ng-alain 依赖了一个 [ng-zorro-antd-extra](https://cipchk.github.io/ng-zorro-antd-extra/) 类库，这是它和 ng-zorro-antd 一样，只是提供了一些 3.0 才会有的组件临时解决方案。 ## 如何开始？ -ng-alain 的目录非常简单，只有简单几个文件；默认情况下，包含了 [i18n](http://ng-alain.com/#/docs/i18n)、[acl](http://ng-alain.com/#/docs/acl)、[页面模板](http://ng-alain.com/#/docs/template)等文件。 +ng-alain 的目录非常简单，只有简单几个文件；默认情况下，包含了 [i18n](/docs/i18n)、[acl](/docs/acl)、[页面模板](/docs/template)等文件。 > 很多情况下，可能你不需要这些功能，上述每个链接中都包含着如何去删除它们的方法。 diff --git a/docs/layout.md b/docs/layout.md index 5cef213557..e3bd02d0fd 100644 --- a/docs/layout.md +++ b/docs/layout.md @@ -6,7 +6,7 @@ title: type: Basic --- -页面整体布局是指包含导航、侧边栏、内容区域、页脚等最外层的框架结构。在页面之中，也有很多区块的布局结构，目前 ng-zorro-antd 有两套布局方案：[Layout](https://ng.ant.design/#/components/layout) 和 [Grid](https://ng.ant.design/#/components/grid)；而后者是日常都需要的，诸如：表单、列表页、明细页等多多少少都会涉及。 +页面整体布局是指包含导航、侧边栏、内容区域、页脚等最外层的框架结构。在页面之中，也有很多区块的布局结构，目前 ng-zorro-antd 有两套布局方案：[Layout](https://ng.ant.design/components/layout) 和 [Grid](https://ng.ant.design/components/grid)；而后者是日常都需要的，诸如：表单、列表页、明细页等多多少少都会涉及。 ## 根据不同场景区分抽离布局组件 diff --git a/docs/service.md b/docs/service.md index 1152ed087e..a90bd15864 100644 --- a/docs/service.md +++ b/docs/service.md @@ -10,11 +10,11 @@ type: Theme ## _HttpClient -见[网络请求](http://localhost:4200/#/docs/net)章节。 +见[网络请求](http://localhost:4200/docs/net)章节。 ## MenuService -菜单服务的数据格式是一个 [Menu](https://github.com/cipchk/delon/blob/master/src/core/theme/services/menu/menu.service.ts#L4) 数组，其中 `text` 属性表示菜单文本为必填项，而且本身并不受外部组件的影响（例如[sidebar-nav](http://ng-alain.com/#/components/sidebar-nav)组件），这是因为菜单是贯穿整个项目必不可少的组成部分，而将其独立成一个服务可以更有效被使用，例如：动态生成导航、标题等。 +菜单服务的数据格式是一个 [Menu](https://github.com/cipchk/delon/blob/master/src/core/theme/services/menu/menu.service.ts#L4) 数组，其中 `text` 属性表示菜单文本为必填项，而且本身并不受外部组件的影响（例如[sidebar-nav](/components/sidebar-nav)组件），这是因为菜单是贯穿整个项目必不可少的组成部分，而将其独立成一个服务可以更有效被使用，例如：动态生成导航、标题等。 **建议：** 在 Angular 启动服务（[startup.service.ts](https://github.com/cipchk/ng-alain/blob/0.2.0/src/app/core/services/startup.service.ts)）从远程获取到菜单数据后，调用 `add()` 方法。 diff --git a/docs/use-components-alone.md b/docs/use-components-alone.md index 08997a74dd..b045f2dab7 100644 --- a/docs/use-components-alone.md +++ b/docs/use-components-alone.md @@ -14,7 +14,7 @@ ng-alain 脚手架内用到的组件分为三种： - [ng-zorro-antd](https://ng-zorro.github.io) 组件 - [ng-zorro-antd-extra](https://cipchk.github.io/ng-zorro-antd-extra/#/) 组件 -- [@delon/abc](http://ng-alain.com/#/components) 组件 +- [@delon/abc](/components) 组件 这三种组件都是独立发布在 Npm 上面，因此你都可以单独去使用它们： @@ -28,7 +28,7 @@ import { AlainABCModule } from '@delon/abc'; ## 文档和反馈 -你可以在 [组件页面](http://ng-alain.com/#/components) 找到所有的业务组件，以及相关的演示和 API 文档。 +你可以在 [组件页面](/components) 找到所有的业务组件，以及相关的演示和 API 文档。 组件会随着脚手架的更新而不断迭代，有任何问题和需求可以反馈到 [这里](https://github.com/cipchk/ng-alain/issues)。 diff --git a/package.json b/package.json index 51327c3954..fd27abcbcc 100644 --- a/package.json +++ b/package.json @@ -32,13 +32,14 @@ "e2e": "ng e2e", "site:clean": "rimraf site/app/routes/gen", "site:gen": "gulp site:build", - "site:serve:cli": "ng serve --app site -o", + "site:serve:cli": "ng serve --app site -o --bh /", "site:serve": "npm-run-all -s site:clean site:gen site:serve:cli", - "site:ts": "ng build --app site --prod --build-optimizer --bh ./", + "site:ts": "ng build --app site --prod --build-optimizer --bh /", "site:build": "npm-run-all -s site:clean site:gen site:ts site:cname", "site:cname": "cname site/dist", + "site:404": "cd ./site/dist && cpy index.html --rename=404.html ./", "site:deploy": "gh-pages -d site/dist", - "site:release": "npm-run-all -s site:build site:deploy", + "site:release": "npm-run-all -s site:build site:404 site:deploy", "build:package": "npm-run-all -s clean:tmp:lib build:copy-sources build:ts build:inline-resources build:bundle clean:tmp", "build:ts": "tsc -p tsconfig.publish.json && ngc -p tsconfig.publish.json", "build:prod": "npm run build -- --prod", diff --git a/site/app/app.component.ts b/site/app/app.component.ts index 3bacb22d68..316913cbdf 100644 --- a/site/app/app.component.ts +++ b/site/app/app.component.ts @@ -11,6 +11,7 @@ import { I18NService } from './i18n/service'; }) export class AppComponent implements OnInit { @HostBinding('class.layout-fixed') isHome = false; + private prevUrl: string; constructor( private i18n: I18NService, @@ -21,11 +22,16 @@ export class AppComponent implements OnInit { ngOnInit() { this.router.events.pipe( filter(evt => evt instanceof NavigationEnd), - map(() => this.router.url) + map(() => this.router.url.split('#')[0]) ).subscribe(url => { - // update i18n const urlLang = this.router.parseUrl(url).queryParams['lang']; - if (typeof urlLang !== 'undefined') { + const hasLang = typeof urlLang !== 'undefined'; + + if (!hasLang && url === this.prevUrl) return; + this.prevUrl = url; + + // update i18n + if (hasLang) { const lang = urlLang || this.i18n.defaultLang; if (this.i18n.lang !== lang) { this.i18n.use(lang); diff --git a/site/app/core/meta.service.ts b/site/app/core/meta.service.ts index 9accde8b5b..2b5d1c4cbd 100644 --- a/site/app/core/meta.service.ts +++ b/site/app/core/meta.service.ts @@ -80,7 +80,7 @@ export class MetaService { genMenus(url: string): void { const arr = url.split('?')[0].split('/'); - if (arr.length <= 2) return ; + if (arr.length <= 1) return ; const categoryName = arr[1].toLowerCase(); const category = META.types.find(w => w.name === categoryName); diff --git a/site/app/i18n/service.ts b/site/app/i18n/service.ts index 04e132c19e..e87fd845a3 100644 --- a/site/app/i18n/service.ts +++ b/site/app/i18n/service.ts @@ -42,4 +42,8 @@ export class I18NService { fanyi(key: string) { return this.translate.instant(key); } + + get(i: any) { + return typeof i === 'string' ? i : i[this.lang] || i[this.defaultLang] || ''; + } } diff --git a/site/app/layout/footer/footer.component.html b/site/app/layout/footer/footer.component.html index 57c164cd11..97e813ff53 100644 --- a/site/app/layout/footer/footer.component.html +++ b/site/app/layout/footer/footer.component.html @@ -37,7 +37,7 @@

{{'app.footer.resources' | translate}}

{{'app.footer.community' | translate}}

-
{{ 'app.footer.change-log' | translate}}
+
{{ 'app.footer.change-log' | translate}}
{{ 'app.footer.faq' | translate}}
{{ 'app.footer.issues' | translate}}
diff --git a/site/app/layout/footer/footer.component.ts b/site/app/layout/footer/footer.component.ts index 282fe13e2a..6304cd7a56 100644 --- a/site/app/layout/footer/footer.component.ts +++ b/site/app/layout/footer/footer.component.ts @@ -15,7 +15,7 @@ export class FooterComponent { constructor(public i18n: I18NService, private router: Router) {} langChange() { - let url = this.router.url.split('?')[0]; + let url = this.router.url.split('#')[0]; url += `?lang=${this.i18n.isZh ? 'en-US' : 'zh-CN'}`; this.router.navigateByUrl(url); diff --git a/site/app/routes/404/404.component.html b/site/app/routes/404/404.component.html new file mode 100644 index 0000000000..6ddd71c406 --- /dev/null +++ b/site/app/routes/404/404.component.html @@ -0,0 +1,8 @@ +
+
+

404

+

你要找的页面不存在 + 返回首页 +

+
+
diff --git a/site/app/routes/404/404.component.ts b/site/app/routes/404/404.component.ts new file mode 100644 index 0000000000..e616b41acb --- /dev/null +++ b/site/app/routes/404/404.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'not-found', + templateUrl: './404.component.html' +}) +export class NotFoundComponent {} diff --git a/site/app/routes/routes.module.ts b/site/app/routes/routes.module.ts index 0d4576609c..7319214ba7 100644 --- a/site/app/routes/routes.module.ts +++ b/site/app/routes/routes.module.ts @@ -3,9 +3,11 @@ import { RouterModule } from '@angular/router'; import { SharedModule } from '../shared/shared.module'; import { LayoutComponent } from '../layout/layout.component'; import { HomeComponent } from './home/home.component'; +import { NotFoundComponent } from './404/404.component'; const COMPONENTS = [ - HomeComponent + HomeComponent, + NotFoundComponent ]; const routes = [ @@ -20,13 +22,14 @@ const routes = [ // endregion ] }, - { path: '**', redirectTo: 'home' } + { path: '404', component: NotFoundComponent }, + { path: '**', redirectTo: '404' } ]; @NgModule({ imports: [ SharedModule, - RouterModule.forRoot(routes, { useHash: true }) + RouterModule.forRoot(routes) ], declarations: [ ...COMPONENTS diff --git a/site/app/shared/components/code-box/code-box.component.html b/site/app/shared/components/code-box/code-box.component.html index dd4d476ff6..c30bd07bf2 100644 --- a/site/app/shared/components/code-box/code-box.component.html +++ b/site/app/shared/components/code-box/code-box.component.html @@ -7,13 +7,12 @@
- {{get(item.meta.title)}} + {{i18n.get(item.meta.title)}}
-
+
- expand code
diff --git a/site/app/shared/components/content/content.component.ts b/site/app/shared/components/content/content.component.ts index b7bbadd68a..f11bffdf60 100644 --- a/site/app/shared/components/content/content.component.ts +++ b/site/app/shared/components/content/content.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { SettingsService } from '@delon/theme'; import { I18NService } from '../../../i18n/service'; import { MetaService } from '../../../core/meta.service'; @@ -11,18 +11,10 @@ import { MetaService } from '../../../core/meta.service'; '[class.main-wrapper]': 'true' } }) -export class ContentComponent implements OnInit { - +export class ContentComponent { constructor( public meta: MetaService, public i18n: I18NService, public settings: SettingsService ) {} - - ngOnInit() { - } - - get(i: any) { - return i ? i[this.i18n.lang] || i[this.i18n.defaultLang] || i : ''; - } } diff --git a/site/app/shared/components/docs/docs.component.html b/site/app/shared/components/docs/docs.component.html index 037b0d6180..72a98ddc6f 100644 --- a/site/app/shared/components/docs/docs.component.html +++ b/site/app/shared/components/docs/docs.component.html @@ -1,6 +1,6 @@ -
+
@@ -15,9 +15,9 @@

{{meta.item.title}} {{meta.item.subtitle}} - +

-
+

{{'app.component.refer.title' | translate}}

import { {{meta.item.module}} } from '{{meta.item.module_name}}';
@@ -27,8 +27,10 @@

{{'app.component.refer.link' | translate}}

-

{{'app.component.examples' | translate}}

 +

+ {{'app.component.examples' | translate}} +

-
+
diff --git a/site/app/shared/components/docs/docs.component.ts b/site/app/shared/components/docs/docs.component.ts index 2dbeadcf2a..b02965ff59 100644 --- a/site/app/shared/components/docs/docs.component.ts +++ b/site/app/shared/components/docs/docs.component.ts @@ -1,7 +1,8 @@ import { Component, Input, OnInit, OnDestroy } from '@angular/core'; +import { Router } from '@angular/router'; +import { DomSanitizer } from '@angular/platform-browser'; import { I18NService } from '../../../i18n/service'; import { MetaService } from '../../../core/meta.service'; -import { Router } from '@angular/router'; @Component({ selector: 'app-docs', @@ -12,15 +13,18 @@ export class DocsComponent implements OnInit, OnDestroy { private _item: any; + @Input() codes: any[]; + @Input() set item(value: any) { if (Array.isArray(value.toc)) { const toc = [ ...value.toc ]; value.toc = {}; for (const lang of this.i18n.langs) { - value.toc[lang] = toc; + value.toc[lang] = [ ...toc ]; } } + // region: source if (typeof value.source === 'string') { const source = '' + value.source; @@ -29,39 +33,50 @@ export class DocsComponent implements OnInit, OnDestroy { value.source[lang] = source; } } - // tslint:disable-next-line:forin - // for (const lang in value.source) { - // value.source[lang] = `${this.meta.github}/edit/master/${value.source[lang]}`; - // } // endregion - // region: demo - // if (!value.demos || !Array.isArray(value.demos)) - // value.demos = []; + // region: demo toc + if (value.demo && this.codes && this.codes.length) { + // tslint:disable-next-line:forin + for (const lang in value.toc) { + const demoTocs: any[] = this.codes.map((item: any) => { + return { + h: 3, + href: '#' + item.id, + title: this.i18n.get(item.meta.title) + }; + }); + const demoTitle = this.i18n.fanyi('app.component.examples'); + value.toc[lang].splice(0, 0, { + h: 2, + href: '#' + demoTitle, + title: demoTitle + }, ...demoTocs); + } + } // endregion this._item = value; // goTo - setTimeout(() => { - const toc = this.router.parseUrl(this.router.url).queryParams._toc || ''; - if (toc) this.goTo({ href: `#${toc}` }); - }, 800); + // setTimeout(() => { + // const toc = this.router.parseUrl(this.router.url).queryParams._toc || ''; + // if (toc) this.goTo({ href: `#${toc}` }); + // }, 800); } get item(): any { return this._item; } - constructor(public i18n: I18NService, public meta: MetaService, private router: Router) {} - - get(i: any) { - return i ? i[this.i18n.lang] || i[this.i18n.defaultLang] : ''; - } + constructor( + public i18n: I18NService, + public meta: MetaService, + private router: Router, + protected sanitizer: DomSanitizer) {} goTo(item: any) { - const el = document.querySelector(`[href="${item.href}"]`); - if (!el) return false; - el.parentElement.scrollIntoView(); + document.querySelector(item.href).scrollIntoView(); + location.hash = item.href; return false; } @@ -74,6 +89,10 @@ export class DocsComponent implements OnInit, OnDestroy { }, 250); } + safeHtml(html: string) { + return this.sanitizer.bypassSecurityTrustHtml(html); + } + i18NChange$: any; ngOnInit(): void { this.i18NChange$ = this.i18n.change.subscribe(() => { diff --git a/site/app/styles/markdown.less b/site/app/styles/markdown.less index f29da8249a..3ddc89ca8f 100644 --- a/site/app/styles/markdown.less +++ b/site/app/styles/markdown.less @@ -147,10 +147,9 @@ } .markdown .anchor { - display: none !important; - // opacity: 0; - // transition: opacity 0.3s ease; - // margin-left: 8px; + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; } .markdown .waiting { diff --git a/site/app/styles/not-found.less b/site/app/styles/not-found.less new file mode 100644 index 0000000000..13d374a481 --- /dev/null +++ b/site/app/styles/not-found.less @@ -0,0 +1,35 @@ +#page-404 { + background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg'); + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center; + background-size: 100%; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 100; + + section { + position: absolute; + top: 48%; + left: 55%; + margin: -103px 0 0 -120px; + + text-align: center; + } + + h1 { + color: @primary-color; + font-size: 120px; + font-weight: 500; + } + + p { + color: @site-text-color; + font-size: 18px; + } +} diff --git a/site/assets/img/404.jpg b/site/assets/img/404.jpg new file mode 100644 index 0000000000..5ecf1453d2 Binary files /dev/null and b/site/assets/img/404.jpg differ diff --git a/site/index.html b/site/index.html index 0f017348a7..c7097c81d8 100644 --- a/site/index.html +++ b/site/index.html @@ -4,7 +4,7 @@ delon | Delon is a set of essential modules for ng-alain. - + diff --git a/site/styles.less b/site/styles.less index 652978334f..59bda148fb 100644 --- a/site/styles.less +++ b/site/styles.less @@ -19,4 +19,5 @@ @import './app/styles/hljs.less'; @import './app/styles/page-nav.less'; @import './app/styles/footer.less'; +@import './app/styles/not-found.less'; @import './app/styles/responsive.less'; diff --git a/site/templates/doc.ts b/site/templates/doc.ts index 7b71289045..9b8b901579 100644 --- a/site/templates/doc.ts +++ b/site/templates/doc.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: `app-{{directoryName}}-{{name}}`, - template: `{{{demos}}}`, + template: `{{{demos}}}`, styles: [ `:host { display: block } `] }) export class {{componentName}} { diff --git a/src/core/abc/components/count-down/index.md b/src/core/abc/components/count-down/index.md index 83f8953a93..c5a9056aa3 100644 --- a/src/core/abc/components/count-down/index.md +++ b/src/core/abc/components/count-down/index.md @@ -3,6 +3,7 @@ title: count-down subtitle: 倒计时 cols: 2 order: 3 +module: AdCountDownModule --- 倒计时组件，依赖 [ngx-countdown](https://github.com/cipchk/ngx-countdown)。 diff --git a/tools/gulp/converters/site.ts b/tools/gulp/converters/site.ts index caec08188d..7466de4ae8 100644 --- a/tools/gulp/converters/site.ts +++ b/tools/gulp/converters/site.ts @@ -11,7 +11,7 @@ export function site() { const children = JsonML.getChildren(node); const sluggedId = generateSluggedId(children).id; // # - return `<${tagName}>${children}　`; + return `<${tagName} id="${sluggedId}">${children}`; } ], [ diff --git a/tools/gulp/utils/process.ts b/tools/gulp/utils/process.ts index e4579d743e..895acdb35d 100644 --- a/tools/gulp/utils/process.ts +++ b/tools/gulp/utils/process.ts @@ -378,7 +378,7 @@ export function gen(config: any) { // generate doc component template ret.tpl.push(`
- + <${item.id}>
`);