From 6ecad15c86ba77d82c7623d85b3274209bf70fca Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Thu, 7 Dec 2017 17:46:44 +0800
Subject: [PATCH] docs: add open in plnkr & copy code.

---
 docs/010-020-changes.md                       |   2 +-
 docs/acl.md                                   |   2 +-
 docs/data-render.md                           |   2 +-
 docs/deploy.md                                |   6 +-
 docs/getting-started.en-US.md                 |  14 +-
 docs/getting-started.zh-CN.md                 |  16 +-
 docs/graph.md                                 |   4 +-
 docs/happy-coding.md                          |   2 +-
 docs/how-dev.md                               |  14 +-
 docs/layout.md                                |   8 +-
 docs/net.md                                   |   2 +-
 docs/performance.md                           |   2 +-
 docs/service.md                               |  16 +-
 docs/style.md                                 |  10 +-
 docs/theme.md                                 |   4 +-
 docs/use-components-alone.md                  |  10 +-
 scaffold                                      |   2 +-
 site/app/i18n/en-US.ts                        |   5 +-
 site/app/i18n/zh-CN.ts                        |   5 +-
 .../code-box/code-box.component.html          |  12 +
 .../components/code-box/code-box.component.ts |  26 ++
 .../shared/components/code-box/templates.ts   | 227 ++++++++++++++++++
 site/app/shared/shared.module.ts              |   5 +-
 site/app/styles/demo.less                     |  21 +-
 site/assets/img/plnkr.png                     | Bin 0 -> 1709 bytes
 src/app/app.component.ts                      |   2 +-
 tools/gulp/converters/site.ts                 |   7 -
 tools/gulp/utils/process.ts                   |   9 +-
 28 files changed, 347 insertions(+), 88 deletions(-)
 create mode 100644 site/app/shared/components/code-box/templates.ts
 create mode 100644 site/assets/img/plnkr.png

diff --git a/docs/010-020-changes.md b/docs/010-020-changes.md
index 85b227632a..19a9d17e8e 100644
--- a/docs/010-020-changes.md
+++ b/docs/010-020-changes.md
@@ -8,7 +8,7 @@ type: Advance
 
 本次的变化对项目的改动其实不是很大，在开始阅读指引之前我建议先阅读入门指南序列文章（至少阅读 [关于 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` 版本了。
+当前 `0.2` 是以[独立分支](//github.com/cipchk/ng-alain/tree/0.2.0)在存在，而 [ng-alain](//cipchk.github.io/ng-alain/) github预览已经是 `0.2` 版本了。
 
 ## 一、主题系统、服务、业务组件的变化
 
diff --git a/docs/acl.md b/docs/acl.md
index f1d231b0f5..ac6dedee2e 100644
--- a/docs/acl.md
+++ b/docs/acl.md
@@ -4,7 +4,7 @@ title: ACL
 type: Advance
 ---
 
-ACL 全称叫访问控制列表（Access Control List），是一种非常简单的基于角色权限控制方式，所以如果你需要它，则需要导入 `@delon/acl` 模块；另外你也可以在 [DEMO](https://cipchk.github.io/ng-alain/#/logics/acl) 中体验它。
+ACL 全称叫访问控制列表（Access Control List），是一种非常简单的基于角色权限控制方式，所以如果你需要它，则需要导入 `@delon/acl` 模块；另外你也可以在 [DEMO](//cipchk.github.io/ng-alain/#/logics/acl) 中体验它。
 
 ```ts
 import { AlainACLModule } from '@delon/acl';
diff --git a/docs/data-render.md b/docs/data-render.md
index 340356e3d5..8a7ad7bc42 100644
--- a/docs/data-render.md
+++ b/docs/data-render.md
@@ -35,7 +35,7 @@ registerLocaleData(localeZhHans);
 
 ## _date
 
-基于 moment 日期格式化，显示更多细节参考：http://momentjs.com/docs/#/displaying
+基于 moment 日期格式化，显示更多细节参考：//momentjs.com/docs/#/displaying
 
 最大好处是 moment 支持不同种类的时间格式，例如：
 
diff --git a/docs/deploy.md b/docs/deploy.md
index cca1a585b7..c51c35f3d9 100644
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -14,7 +14,7 @@ type: Basic
 $ npm run build
 ```
 
-ng-alain 本身是一个 Angular cli 项目，因此也可以参照 [WiKi](https://github.com/angular/angular-cli/wiki/build) 完整更复杂的构建需求。构建打包成功之后，会在根目录生成 `dist` 文件夹，里面就是构建打包好的文件，通常是若干 `*.js`、`*.css`、`index.html` 等静态文件。
+ng-alain 本身是一个 Angular cli 项目，因此也可以参照 [WiKi](//github.com/angular/angular-cli/wiki/build) 完整更复杂的构建需求。构建打包成功之后，会在根目录生成 `dist` 文件夹，里面就是构建打包好的文件，通常是若干 `*.js`、`*.css`、`index.html` 等静态文件。
 
 ### 环境变量
 
@@ -32,7 +32,7 @@ $ ng serve -e=hmr
 $ npm run analyze
 ```
 
-然后通过 `webpack-bundle-analyzer dist/stats.json` 或 https://webpack.github.io/analyse 查看体积分布数据。
+然后通过 `webpack-bundle-analyzer dist/stats.json` 或 //webpack.github.io/analyse 查看体积分布数据。
 
 ![](./assets/screenshot/analyzer.png)
 
@@ -86,7 +86,7 @@ app.get('home', '/*', 'home.index');
 
 ### Docker
 
-`ng-alain` 提供了一个基于 `nginx` WEB服务完整的构建Angular项目的镜像文件。其中 `nginx` 是采用 [nginx:1.13.5-alpine](https://github.com/nginxinc/docker-nginx/blob/master/mainline/alpine/Dockerfile) 的镜像，基本上可以满足 `ng-alain` 项目的良好运行环境，倘若有更多需求，你可以利用 `docker run` 轻易的指定 *nginx.conf*。
+`ng-alain` 提供了一个基于 `nginx` WEB服务完整的构建Angular项目的镜像文件。其中 `nginx` 是采用 [nginx:1.13.5-alpine](//github.com/nginxinc/docker-nginx/blob/master/mainline/alpine/Dockerfile) 的镜像，基本上可以满足 `ng-alain` 项目的良好运行环境，倘若有更多需求，你可以利用 `docker run` 轻易的指定 *nginx.conf*。
 
 #### 1、构建镜像
 
diff --git a/docs/getting-started.en-US.md b/docs/getting-started.en-US.md
index f91af6559c..802355da04 100644
--- a/docs/getting-started.en-US.md
+++ b/docs/getting-started.en-US.md
@@ -12,10 +12,10 @@ ng-alain is a production-ready solution for admin interfaces based on ng-zorro-a
 
 ## Version
 
-- ng-alain: [![NPM version](https://img.shields.io/npm/v/ng-alain.svg)](https://www.npmjs.com/package/ng-alain)
-- `@delon/theme`: [![NPM version](https://img.shields.io/npm/v/@delon/theme.svg)](https://www.npmjs.com/package/@delon/theme)
-- `@delon/abc`: [![NPM version](https://img.shields.io/npm/v/@delon/abc.svg)](https://www.npmjs.com/package/@delon/abc)
-- `@delon/acl`: [![NPM version](https://img.shields.io/npm/v/@delon/acl.svg)](https://www.npmjs.com/package/@delon/acl)
+- ng-alain: [![NPM version](//img.shields.io/npm/v/ng-alain.svg)](//www.npmjs.com/package/ng-alain)
+- `@delon/theme`: [![NPM version](//img.shields.io/npm/v/@delon/theme.svg)](//www.npmjs.com/package/@delon/theme)
+- `@delon/abc`: [![NPM version](//img.shields.io/npm/v/@delon/abc.svg)](//www.npmjs.com/package/@delon/abc)
+- `@delon/acl`: [![NPM version](//img.shields.io/npm/v/@delon/acl.svg)](//www.npmjs.com/package/@delon/acl)
 
 ## Installation
 
@@ -24,13 +24,13 @@ There are two ways to install:
 ### Clone the Git Repository
 
 ```bash
-$ git clone -b 0.2.0 --depth=1 https://github.com/cipchk/ng-alain.git my-project
+$ git clone -b 0.2.0 --depth=1 //github.com/cipchk/ng-alain.git my-project
 $ cd my-project
 ```
 
 ### Download the Package
 
-Download [https://github.com/cipchk/ng-alain/archive/0.2.0.zip](https://github.com/cipchk/ng-alain/archive/0.2.0.zip), and un-archive.
+Download [//github.com/cipchk/ng-alain/archive/0.2.0.zip](//github.com/cipchk/ng-alain/archive/0.2.0.zip), and un-archive.
 
 ## Scaffolding
 
@@ -79,6 +79,6 @@ or use HMR mode
 $ npm run serve:hmr
 ```
 
-open [http://localhost:4200](http://localhost:4200), If you see the following page then you have succeeded.
+open [//localhost:4200](//localhost:4200), If you see the following page then you have succeeded.
 
 ![](./assets/screenshot/desktop.png | width=700)
diff --git a/docs/getting-started.zh-CN.md b/docs/getting-started.zh-CN.md
index 01f23a2450..9919e60f31 100644
--- a/docs/getting-started.zh-CN.md
+++ b/docs/getting-started.zh-CN.md
@@ -12,10 +12,10 @@ ng-alain 是一个基于 ng-zorro-antd 的企业级中后台前端脚手架，
 
 ## 版本
 
-- ng-alain 脚手架：[![NPM version](https://img.shields.io/npm/v/ng-alain.svg)](https://www.npmjs.com/package/ng-alain)
-- `@delon/theme`：[![NPM version](https://img.shields.io/npm/v/@delon/theme.svg)](https://www.npmjs.com/package/@delon/theme)
-- `@delon/abc`：[![NPM version](https://img.shields.io/npm/v/@delon/abc.svg)](https://www.npmjs.com/package/@delon/abc)
-- `@delon/acl`：[![NPM version](https://img.shields.io/npm/v/@delon/acl.svg)](https://www.npmjs.com/package/@delon/acl)
+- ng-alain 脚手架：[![NPM version](//img.shields.io/npm/v/ng-alain.svg)](//www.npmjs.com/package/ng-alain)
+- `@delon/theme`：[![NPM version](//img.shields.io/npm/v/@delon/theme.svg)](//www.npmjs.com/package/@delon/theme)
+- `@delon/abc`：[![NPM version](//img.shields.io/npm/v/@delon/abc.svg)](//www.npmjs.com/package/@delon/abc)
+- `@delon/acl`：[![NPM version](//img.shields.io/npm/v/@delon/acl.svg)](//www.npmjs.com/package/@delon/acl)
 
 ## 安装
 
@@ -24,13 +24,13 @@ ng-alain 是一个基于 ng-zorro-antd 的企业级中后台前端脚手架，
 ### 直接 clone git 仓库
 
 ```bash
-$ git clone -b 0.2.0 --depth=1 https://github.com/cipchk/ng-alain.git my-project
+$ git clone -b 0.2.0 --depth=1 //github.com/cipchk/ng-alain.git my-project
 $ cd my-project
 ```
 
 ### 下载压缩包
 
-点击 [https://github.com/cipchk/ng-alain/archive/0.2.0.zip](https://github.com/cipchk/ng-alain/archive/0.2.0.zip) 下载到本地后解压。
+点击 [//github.com/cipchk/ng-alain/archive/0.2.0.zip](//github.com/cipchk/ng-alain/archive/0.2.0.zip) 下载到本地后解压。
 
 ## 目录结构
 
@@ -69,7 +69,7 @@ ng-alain 是一个标准的 Angular cli 构建的项目，因此你会非常熟
 $ npm install
 ```
 
-如果网络状况不佳，可以使用 [cnpm](https://cnpmjs.org/) 进行加速。
+如果网络状况不佳，可以使用 [cnpm](//cnpmjs.org/) 进行加速。
 
 ```bash
 $ npm start
@@ -81,6 +81,6 @@ $ npm start
 $ npm run serve:hmr
 ```
 
-启动完成后会打开浏览器访问 [http://localhost:4200](http://localhost:4200)，你看到下面的页面就代表成功了。
+启动完成后会打开浏览器访问 [//localhost:4200](//localhost:4200)，你看到下面的页面就代表成功了。
 
 ![](./assets/screenshot/desktop.png | width=700)
diff --git a/docs/graph.md b/docs/graph.md
index ef14d45a0a..cbe23fedcb 100644
--- a/docs/graph.md
+++ b/docs/graph.md
@@ -27,7 +27,7 @@ type: Advance
 
 ## 如何使用？
 
-> 如果上面组件不能满足你的业务需求，可以直接试用 [G2](https://antv.alipay.com/zh-cn/g2/3.x/index.html) 封装自己的图表组件。
+> 如果上面组件不能满足你的业务需求，可以直接试用 [G2](//antv.alipay.com/zh-cn/g2/3.x/index.html) 封装自己的图表组件。
 
 ### 引入 G2
 
@@ -51,4 +51,4 @@ npm install @antv/g2 @antv/data-set @antv/g2-plugin-slider --save
 
 `@delon/abc` 提供了一个自定义G2组件的容器，可以减少不必要的组件渲染过程中所产生的奇怪问题。
 
-一个完整的示例见 [chart.md](https://github.com/cipchk/delon/blob/master/src/core/abc/components/charts/demo/chart.md)。
+一个完整的示例见 [chart.md](//github.com/cipchk/delon/blob/master/src/core/abc/components/charts/demo/chart.md)。
diff --git a/docs/happy-coding.md b/docs/happy-coding.md
index ce2432bf3d..1773d5dba6 100644
--- a/docs/happy-coding.md
+++ b/docs/happy-coding.md
@@ -16,7 +16,7 @@ ng-alain 默认配置了不生成样式文件&单元测试，因此，你会看
 
 ## snippets
 
-vscode 是编写 Angular 最佳的选择，自然 ng-alain 也制作了相应 snippets 扩展插件：[ng-zorro-vscode](https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode)。除了大量的 ng-zorro-antd 组件片断以外，还加入了部分 ng-alain 片断，例如：
+vscode 是编写 Angular 最佳的选择，自然 ng-alain 也制作了相应 snippets 扩展插件：[ng-zorro-vscode](//marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode)。除了大量的 ng-zorro-antd 组件片断以外，还加入了部分 ng-alain 片断，例如：
 
 ```
 nz-button => 构建一个按钮
diff --git a/docs/how-dev.md b/docs/how-dev.md
index 0f0cac7b53..3fa4d42bda 100644
--- a/docs/how-dev.md
+++ b/docs/how-dev.md
@@ -10,13 +10,13 @@ type: Basic
 
 当你开始着手在 ng-alain 基础上进行业务开发时，我建议你先了解一下以下文档，这对于亦或是团队每个成员都非常有帮助。
 
-+ [Ant Desig 指引文章](https://ant.design/docs/spec/introduce-cn)
-+ [Ant Deisng for Angular](https://ng.ant.design/docs/angular/introduce)
-+ [Antv 图表](https://antv.alipay.com/zh-cn/index.html)
++ [Ant Desig 指引文章](//ant.design/docs/spec/introduce-cn)
++ [Ant Deisng for Angular](//ng.ant.design/docs/angular/introduce)
++ [Antv 图表](//antv.alipay.com/zh-cn/index.html)
 
-ng-alain 的基础组件库来自 ng-zorro-antd，因此对于这类组件的使用方式你可以通过其官网得到很细说 [API](https://ng.ant.design/) 文档说明，而对于 ng-alain 提供的组件则通过[组件页](/components)获取。
+ng-alain 的基础组件库来自 ng-zorro-antd，因此对于这类组件的使用方式你可以通过其官网得到很细说 [API](//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 依赖了一个 [ng-zorro-antd-extra](//cipchk.github.io/ng-zorro-antd-extra/) 类库，这是它和 ng-zorro-antd 一样，只是提供了一些 3.0 才会有的组件临时解决方案。
 
 ## 如何开始？
 
@@ -24,7 +24,7 @@ ng-alain 的目录非常简单，只有简单几个文件；默认情况下，
 
 > 很多情况下，可能你不需要这些功能，上述每个链接中都包含着如何去删除它们的方法。
 
-我们知道，项目从启动开始就需要从远程获取到一些配置信息（例如：菜单数据、用户数据等），ng-alain 的启动始于 [startup.service.ts](https://github.com/cipchk/ng-alain/blob/0.2.0/src/app/core/services/startup.service.ts)；它返回的是一个 `Promise` 对象，因此你可以在这个方法体内做你想做的事，默认情况下做了很多有意思的事：
+我们知道，项目从启动开始就需要从远程获取到一些配置信息（例如：菜单数据、用户数据等），ng-alain 的启动始于 [startup.service.ts](//github.com/cipchk/ng-alain/blob/0.2.0/src/app/core/services/startup.service.ts)；它返回的是一个 `Promise` 对象，因此你可以在这个方法体内做你想做的事，默认情况下做了很多有意思的事：
 
 ```ts
 // 应用信息：包括站点名、描述、年份
@@ -123,4 +123,4 @@ const routes: Routes = [
 ];
 ```
 
-最终，你可以访问 [list](http://localhost:4200/#/trade/list) 页面。
+最终，你可以访问 [list](//localhost:4200/#/trade/list) 页面。
diff --git a/docs/layout.md b/docs/layout.md
index e3bd02d0fd..ca092a72de 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](//ng.ant.design/components/layout) 和 [Grid](//ng.ant.design/components/grid)；而后者是日常都需要的，诸如：表单、列表页、明细页等多多少少都会涉及。
 
 ## 根据不同场景区分抽离布局组件
 
@@ -14,9 +14,9 @@ type: Basic
 
 | 类型 | 位置 | 描述 |
 | ---- | --- | ---- |
-| 基础 | [LayoutComponent](https://github.com/cipchk/ng-alain/blob/0.2.0/src/app/layout/layout.component.ts) | - |
-| 全屏 | [LayoutFullScreenComponent](https://github.com/cipchk/ng-alain/blob/0.2.0/src/app/layout/fullscreen/fullscreen.component.ts) | - |
-| PRO用户授权 | [ProUserLayoutComponent](https://github.com/cipchk/ng-alain/blob/0.2.0/src/app/layout/pro/user/user.component.ts) | 限 [pro](https://cipchk.github.io/ng-alain/#/pro/user/login) 用户相关 |
+| 基础 | [LayoutComponent](//github.com/cipchk/ng-alain/blob/0.2.0/src/app/layout/layout.component.ts) | - |
+| 全屏 | [LayoutFullScreenComponent](//github.com/cipchk/ng-alain/blob/0.2.0/src/app/layout/fullscreen/fullscreen.component.ts) | - |
+| PRO用户授权 | [ProUserLayoutComponent](//github.com/cipchk/ng-alain/blob/0.2.0/src/app/layout/pro/user/user.component.ts) | 限 [pro](//cipchk.github.io/ng-alain/#/pro/user/login) 用户相关 |
 
 ## 如何使用
 
diff --git a/docs/net.md b/docs/net.md
index 3f812557bc..89a8130e31 100644
--- a/docs/net.md
+++ b/docs/net.md
@@ -10,7 +10,7 @@ ng-alain 默认下有两处对任何网络请求进行一些处理。
 
 ## 一、扩展 HttpClient
 
-`@delon/theme` 包含了一个叫 [_HttpClient](https://github.com/cipchk/delon/blob/master/src/core/theme/services/http/http.client.ts) 类，其本质还是调用 Angular 的 `HttpClient`，只是包裹了一个 `loading`。
+`@delon/theme` 包含了一个叫 [_HttpClient](//github.com/cipchk/delon/blob/master/src/core/theme/services/http/http.client.ts) 类，其本质还是调用 Angular 的 `HttpClient`，只是包裹了一个 `loading`。
 
 我们知道 ng-zorro-antd 充斥着大量 `nzLoading` 属性，它可以让网络请求的加载有更友好的体验，这样我们无须在每一个业务页面维护一个 `loadind` 变量。
 
diff --git a/docs/performance.md b/docs/performance.md
index 5619880355..38d48d961b 100644
--- a/docs/performance.md
+++ b/docs/performance.md
@@ -8,7 +8,7 @@ type: Advance
 
 ## Web 图标
 
-默认除了 ng-zorro-antd 自带 Web 图标，额外增加了 [font-awesome](http://fontawesome.io/)、[simple-line-icons](http://simplelineicons.com/)、[weather-icons](http://erikflowers.github.io/weather-icons/) 三个图标库，如果你明确不需要，可以删除：
+默认除了 ng-zorro-antd 自带 Web 图标，额外增加了 [font-awesome](//fontawesome.io/)、[simple-line-icons](//simplelineicons.com/)、[weather-icons](//erikflowers.github.io/weather-icons/) 三个图标库，如果你明确不需要，可以删除：
 
 + 移除 `src/styles.less` 引用样式文件
 + 移除相应包体
diff --git a/docs/service.md b/docs/service.md
index a90bd15864..70f2046541 100644
--- a/docs/service.md
+++ b/docs/service.md
@@ -10,13 +10,13 @@ type: Theme
 
 ## _HttpClient
 
-见[网络请求](http://localhost:4200/docs/net)章节。
+见[网络请求](//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](/components/sidebar-nav)组件），这是因为菜单是贯穿整个项目必不可少的组成部分，而将其独立成一个服务可以更有效被使用，例如：动态生成导航、标题等。
+菜单服务的数据格式是一个 [Menu](//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()` 方法。
+**建议：** 在 Angular 启动服务（[startup.service.ts](//github.com/cipchk/ng-alain/blob/0.2.0/src/app/core/services/startup.service.ts)）从远程获取到菜单数据后，调用 `add()` 方法。
 
 **API 接口**
 
@@ -31,19 +31,19 @@ type: Theme
 
 ## SettingsService
 
-项目配置项，包含应用[App](https://github.com/cipchk/delon/blob/master/src/core/theme/services/settings/settings.service.ts#L13)、布局[Layout](https://github.com/cipchk/delon/blob/master/src/core/theme/services/settings/settings.service.ts#L22)、用户信息[User](https://github.com/cipchk/delon/blob/master/src/core/theme/services/settings/settings.service.ts#L6)三种类型。
+项目配置项，包含应用[App](//github.com/cipchk/delon/blob/master/src/core/theme/services/settings/settings.service.ts#L13)、布局[Layout](//github.com/cipchk/delon/blob/master/src/core/theme/services/settings/settings.service.ts#L22)、用户信息[User](//github.com/cipchk/delon/blob/master/src/core/theme/services/settings/settings.service.ts#L6)三种类型。
 
-**建议：** 在 Angular 启动服务（[startup.service.ts](https://github.com/cipchk/ng-alain/blob/0.2.0/src/app/core/services/startup.service.ts)）从远程获取到应用、用户数据后，调用 `setApp()`、`setUser()` 方法。
+**建议：** 在 Angular 启动服务（[startup.service.ts](//github.com/cipchk/ng-alain/blob/0.2.0/src/app/core/services/startup.service.ts)）从远程获取到应用、用户数据后，调用 `setApp()`、`setUser()` 方法。
 
 ## TitleService
 
-用于设置页面标题，一般需要配置路由变化一起使用，例如：[app.component.ts](https://github.com/cipchk/ng-alain/blob/0.2.0/src/app/app.component.ts#L29)；而标题的数据来源于 `MenuService`。
+用于设置页面标题，一般需要配置路由变化一起使用，例如：[app.component.ts](//github.com/cipchk/ng-alain/blob/0.2.0/src/app/app.component.ts#L29)；而标题的数据来源于 `MenuService`。
 
-**建议：** 在 Angular 启动服务（[startup.service.ts](https://github.com/cipchk/ng-alain/blob/0.2.0/src/app/core/services/startup.service.ts)）从远程获取到应用数据后，设置 `prefix` 或 `suffix` 值来调整统一的标题前后缀。
+**建议：** 在 Angular 启动服务（[startup.service.ts](//github.com/cipchk/ng-alain/blob/0.2.0/src/app/core/services/startup.service.ts)）从远程获取到应用数据后，设置 `prefix` 或 `suffix` 值来调整统一的标题前后缀。
 
 ## ThemesService
 
-用于设置当前 ng-alain 主题颜色，默认提供 A-J 共十种颜色，除了调用 `setTheme()` 方法改变颜色系外，还要确保 [_alain-custom-variables.less](https://github.com/cipchk/ng-alain/blob/0.2.0/src/styles/_alain-custom-variables.less) 中注册相应的颜色系样式。
+用于设置当前 ng-alain 主题颜色，默认提供 A-J 共十种颜色，除了调用 `setTheme()` 方法改变颜色系外，还要确保 [_alain-custom-variables.less](//github.com/cipchk/ng-alain/blob/0.2.0/src/styles/_alain-custom-variables.less) 中注册相应的颜色系样式。
 
 与之相对应的还有 `ColorsService` 用于获取这些颜色系。
 
diff --git a/docs/style.md b/docs/style.md
index e487c9232a..1301df7e57 100644
--- a/docs/style.md
+++ b/docs/style.md
@@ -110,7 +110,7 @@ type: Theme
         </tr>
         <tr>
             <td><code>.modal-header</code></td>
-            <td>自定义Modal时非常有效，<a href="https://cipchk.github.io/ng-alain/#/elements/modal" target="_blank">DEMO</a></td>
+            <td>自定义Modal时非常有效，<a href="//cipchk.github.io/ng-alain/#/elements/modal" target="_blank">DEMO</a></td>
             <td></td>
         </tr>
         <tr>
@@ -131,7 +131,7 @@ type: Theme
 
 ## CSS动画库
 
-来源于 [animate.css](https://daneden.github.io/animate.css/)。
+来源于 [animate.css](//daneden.github.io/animate.css/)。
 
 ## 工具类规则
 
@@ -180,9 +180,9 @@ type: Theme
 
 Ant Design 并没有按钮色这一说，而是以视觉效果为基准。`nz-button` 包括四种类型：`primary`、`dashed` 等。但 `primary` 是固定的蓝色系列，这是默认色系。
 
-而 `ng-alain` 依然不会破坏这种规则，但依 [色彩](https://ant.design/docs/spec/colors-cn) 章节，我产生了一种运用于文本、背景的色系类。
+而 `ng-alain` 依然不会破坏这种规则，但依 [色彩](//ant.design/docs/spec/colors-cn) 章节，我产生了一种运用于文本、背景的色系类。
 
-色彩一共有十种，前九种依[色彩](https://ant.design/docs/spec/colors-cn)为准，以及新增一种 `teal【#20c997】` （别问我为什么，我就喜欢偶数而已），分别如下：
+色彩一共有十种，前九种依[色彩](//ant.design/docs/spec/colors-cn)为准，以及新增一种 `teal【#20c997】` （别问我为什么，我就喜欢偶数而已），分别如下：
 
 | 名称 | 基本色 | 说明 |
 | ---- | --- | --- |
@@ -270,7 +270,7 @@ Ant Design 并没有按钮色这一说，而是以视觉效果为基准。`nz-bu
 
 #### 全量颜色
 
-包含10*10=100种颜色面板，具体效果参见 [color page](https://cipchk.github.io/ng-alain/#/elements/colors)。
+包含10*10=100种颜色面板，具体效果参见 [color page](//cipchk.github.io/ng-alain/#/elements/colors)。
 
 ### Clearfix
 
diff --git a/docs/theme.md b/docs/theme.md
index f519b0e958..2113baf7f2 100644
--- a/docs/theme.md
+++ b/docs/theme.md
@@ -6,11 +6,11 @@ title:
 type: Theme
 ---
 
-`@delon/theme` 的主题系统包含了[几十种参数](https://github.com/cipchk/delon/blob/master/src/core/theme/styles/app/variables.less)，你可以通过覆盖参数数值进而定制一些特别的需求。
+`@delon/theme` 的主题系统包含了[几十种参数](//github.com/cipchk/delon/blob/master/src/core/theme/styles/app/variables.less)，你可以通过覆盖参数数值进而定制一些特别的需求。
 
 ## 如何覆盖参数
 
-ng-alain 脚手架里有一个叫 [_alain-custom-variables.less](https://github.com/cipchk/ng-alain/blob/0.2.0/src/styles/_alain-custom-variables.less) LESS文件，允许你在注册 ng-alain 主题样式**之前**重新覆盖参数数值，例如：开启强制所有 `ng-zorro-antd` 组件字号为 `14px`， 只需要前重新覆盖 `@focusing-enabled: true` 参数数值即可。
+ng-alain 脚手架里有一个叫 [_alain-custom-variables.less](//github.com/cipchk/ng-alain/blob/0.2.0/src/styles/_alain-custom-variables.less) LESS文件，允许你在注册 ng-alain 主题样式**之前**重新覆盖参数数值，例如：开启强制所有 `ng-zorro-antd` 组件字号为 `14px`， 只需要前重新覆盖 `@focusing-enabled: true` 参数数值即可。
 
 ## 关于 ng-zorro-antd 字号问题
 
diff --git a/docs/use-components-alone.md b/docs/use-components-alone.md
index b045f2dab7..3938cf9c2b 100644
--- a/docs/use-components-alone.md
+++ b/docs/use-components-alone.md
@@ -12,8 +12,8 @@ ng-alain 脚手架内提供了一套默认业务组件，这些组件抽象了
 
 ng-alain 脚手架内用到的组件分为三种：
 
-- [ng-zorro-antd](https://ng-zorro.github.io) 组件
-- [ng-zorro-antd-extra](https://cipchk.github.io/ng-zorro-antd-extra/#/) 组件
+- [ng-zorro-antd](//ng-zorro.github.io) 组件
+- [ng-zorro-antd-extra](//cipchk.github.io/ng-zorro-antd-extra/#/) 组件
 - [@delon/abc](/components) 组件
 
 这三种组件都是独立发布在 Npm 上面，因此你都可以单独去使用它们：
@@ -30,7 +30,7 @@ import { AlainABCModule } from '@delon/abc';
 
 你可以在 [组件页面](/components) 找到所有的业务组件，以及相关的演示和 API 文档。
 
-组件会随着脚手架的更新而不断迭代，有任何问题和需求可以反馈到 [这里](https://github.com/cipchk/ng-alain/issues)。
+组件会随着脚手架的更新而不断迭代，有任何问题和需求可以反馈到 [这里](//github.com/cipchk/ng-alain/issues)。
 
-- 最新版本：[![@delon/abc](https://img.shields.io/npm/v/@delon/abc.svg?style=flat-square)](https://www.npmjs.com/package/@delon/abc)
-- [更新日志](https://github.com/cipchk/ng-alain/releases)
+- 最新版本：[![@delon/abc](//img.shields.io/npm/v/@delon/abc.svg?style=flat-square)](//www.npmjs.com/package/@delon/abc)
+- [更新日志](//github.com/cipchk/ng-alain/releases)
diff --git a/scaffold b/scaffold
index 1d30ea4906..808a85cc6e 160000
--- a/scaffold
+++ b/scaffold
@@ -1 +1 @@
-Subproject commit 1d30ea490629ddfca58b1c974ffa8137b18ba718
+Subproject commit 808a85cc6edadf25eda307f1adc2a284a71dc241
diff --git a/site/app/i18n/en-US.ts b/site/app/i18n/en-US.ts
index c4aee3630d..c83155ce8a 100644
--- a/site/app/i18n/en-US.ts
+++ b/site/app/i18n/en-US.ts
@@ -20,5 +20,8 @@ export const ENUS = {
     'app.component.examples': 'Examples',
     'app.component.refer.title': 'Usage:',
     'app.component.refer.desc': 'Learning more to visit: ',
-    'app.component.refer.link': 'Using ABC Components Alone'
+    'app.component.refer.link': 'Using ABC Components Alone',
+    'app.demo.copy': 'Copy code',
+    'app.demo.copied': 'Copied!',
+    'app.demo.plnkr': 'Open in Plnkr'
 };
diff --git a/site/app/i18n/zh-CN.ts b/site/app/i18n/zh-CN.ts
index 56153a8ff3..d748b5e1d8 100644
--- a/site/app/i18n/zh-CN.ts
+++ b/site/app/i18n/zh-CN.ts
@@ -20,5 +20,8 @@ export const ZHCN = {
     'app.component.examples': '代码演示',
     'app.component.refer.title': '引用方式：',
     'app.component.refer.desc': '详细使用方式请参照：',
-    'app.component.refer.link': '独立使用 abc 组件'
+    'app.component.refer.link': '独立使用 abc 组件',
+    'app.demo.copy': '复制代码',
+    'app.demo.copied': '复制成功',
+    'app.demo.plnkr': '在 Plnkr 中打开'
 };
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 c30bd07bf2..2333bbecad 100644
--- a/site/app/shared/components/code-box/code-box.component.html
+++ b/site/app/shared/components/code-box/code-box.component.html
@@ -30,6 +30,18 @@
 </section>
 <section class="highlight-wrapper" [ngClass]="{'highlight-wrapper-expand': expand}">
     <div class="highlight">
+        <div class="code-box-actions">
+            <form *ngIf="plnkr" ngNoForm action="https://plnkr.co/edit/?p=preview" method="POST" target="_blank">
+                <input type="hidden" name="description" value="{{plnkr.title}}">
+                <input type="hidden" *ngFor="let f of plnkr.files" name="files[{{f.name}}]" value="{{f.content}}">
+                <nz-tooltip [nzTitle]="'app.demo.plnkr' | translate">
+                    <input nz-tooltip type="submit" value="Create New Plnkr" class="code-box-plnkr" />
+                </nz-tooltip>
+            </form>
+            <nz-tooltip [nzTitle]="'app.demo.copy' | translate">
+                <i nz-tooltip [nz-clipboard]="item.code" [nzSuccessText]="'app.demo.copied' | translate" class="anticon anticon-copy code-box-code-copy"></i>
+            </nz-tooltip>
+        </div>
         <pre class="hljs language-{{item.lang}}"><code>{{item.code}}</code></pre>
     </div>
 </section>
diff --git a/site/app/shared/components/code-box/code-box.component.ts b/site/app/shared/components/code-box/code-box.component.ts
index 288a4c162b..3644016585 100644
--- a/site/app/shared/components/code-box/code-box.component.ts
+++ b/site/app/shared/components/code-box/code-box.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { I18NService } from './../../../i18n/service';
+import { configJs, indexHtml, mainTS, angularLoad } from './templates';
 
 @Component({
     selector: 'code-box',
@@ -32,6 +33,7 @@ export class CodeBoxComponent implements OnInit, OnDestroy {
 
     handle() {
         this.expand = !this.expand;
+        this.genPlnkr();
     }
 
     private initHLJS() {
@@ -43,6 +45,30 @@ export class CodeBoxComponent implements OnInit, OnDestroy {
         }, 250);
     }
 
+    plnkr: any;
+    private genPlnkr() {
+        if (this.plnkr) {
+            this.plnkr.title = this.i18n.get(this.item.meta.title);
+            return ;
+        }
+
+        const className = /export class ([^ ]*)/g.exec(this.item.code)[1];
+        const componentName = /selector: '([^']+)/g.exec(this.item.code)[1];
+        this.plnkr = {
+            title: this.i18n.get(this.item.meta.title),
+            files: [
+                { name: `index.html`, content: indexHtml.replace(/##component##/g, `<${componentName}>loading...</${componentName}>`) },
+                { name: `systemjs.config.js`, content: configJs },
+                { name: `systemjs-angular-loader.js`, content: angularLoad },
+                {
+                    name: `main.ts`, content: mainTS.replace(/##name##/g, className)
+                                                    .replace(/##import##/g, `import { ${className} } from './app/demo';`)
+                },
+                { name: 'app/demo.ts', content: this.item.code }
+            ]
+        };
+    }
+
     i18NChange$: any;
     ngOnInit(): void {
         this.i18NChange$ = this.i18n.change.subscribe(() => {
diff --git a/site/app/shared/components/code-box/templates.ts b/site/app/shared/components/code-box/templates.ts
new file mode 100644
index 0000000000..3d08009d82
--- /dev/null
+++ b/site/app/shared/components/code-box/templates.ts
@@ -0,0 +1,227 @@
+export const mainTS = `
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import { Component, NgModule, VERSION } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NgZorroAntdExtraModule } from 'ng-zorro-antd-extra';
+import { AlainThemeModule } from '@delon/theme';
+import { AlainABCModule } from '@delon/abc';
+import { AlainACLModule } from '@delon/acl';
+
+##import##
+
+@NgModule({
+    imports: [
+      BrowserModule,
+      BrowserAnimationsModule,
+      NgZorroAntdModule.forRoot(),
+      NgZorroAntdExtraModule.forRoot(),
+      AlainThemeModule.forRoot(),
+      AlainABCModule.forRoot(),
+      AlainACLModule.forRoot(),
+    ],
+    declarations: [ ##name## ],
+    bootstrap: [ ##name## ]
+})
+export class AppModule {}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+`;
+
+export const indexHtml = `<!DOCTYPE html>
+<html>
+
+  <head>
+    <script>document.write('<base href="' + document.location + '" />');</script>
+    <meta charset="UTF-8">
+    <title>angular playground</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
+    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
+    <script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.0/g2.min.js"></script>
+    <script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.7.0/data-set.min.js"></script>
+    <script src="https://gw.alipayobjects.com/os/antv/assets/g2-plugin-slider/2.0.0/g2-plugin-slider.js"></script>
+    <script src="systemjs.config.js"></script>
+    <script>
+        System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <div style="margin: 24px">
+        ##component##
+    </div>
+  </body>
+</html>
+`;
+
+export const angularLoad = `
+var templateUrlRegex = /templateUrl\\s*:(\\s*['"\`](.*?)['"\`]\\s*)/gm;
+var stylesRegex = /styleUrls *:(\\s*\\[[^\\]]*?\\])/g;
+var stringRegex = /(['\`"])((?:[^\\\\]\\\\\\1|.)*?)\\1/g;
+
+module.exports.translate = function(load){
+  if (load.source.indexOf('moduleId') != -1) return load;
+
+  var url = document.createElement('a');
+  url.href = load.address;
+
+  var basePathParts = url.pathname.split('/');
+
+  basePathParts.pop();
+  var basePath = basePathParts.join('/');
+
+  var baseHref = document.createElement('a');
+  baseHref.href = this.baseURL;
+  baseHref = baseHref.pathname;
+
+  if (!baseHref.startsWith('/base/')) { // it is not karma
+    basePath = basePath.replace(baseHref, '');
+  }
+
+  load.source = load.source
+    .replace(templateUrlRegex, function(match, quote, url){
+      var resolvedUrl = url;
+
+      if (url.startsWith('.')) {
+        resolvedUrl = basePath + url.substr(1);
+      }
+
+      return 'templateUrl: "' + resolvedUrl + '"';
+    })
+    .replace(stylesRegex, function(match, relativeUrls) {
+      var urls = [];
+
+      while ((match = stringRegex.exec(relativeUrls)) !== null) {
+        if (match[2].startsWith('.')) {
+          urls.push('"' + basePath + match[2].substr(1) + '"');
+        } else {
+          urls.push('"' + match[2] + '"');
+        }
+      }
+
+      return "styleUrls: [" + urls.join(', ') + "]";
+    });
+
+  return load;
+};
+`;
+
+export const configJs = `
+
+/**
+ * WEB ANGULAR VERSION
+ * (based on systemjs.config.js in angular.io)
+ * System configuration for Angular samples
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+  System.config({
+    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+    transpiler: 'ts',
+    typescriptOptions: {
+      // Copy of compiler options in standard tsconfig.json
+      "target": "es5",
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "sourceMap": true,
+      "emitDecoratorMetadata": true,
+      "experimentalDecorators": true,
+      "lib": ["es2015", "dom"],
+      "noImplicitAny": true,
+      "suppressImplicitAnyIndexErrors": true
+    },
+    meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+      // paths serve as alias
+      'npm:': 'https://unpkg.com/'
+    },
+    // map tells the System loader where to look for things
+    map: {
+      // our app is within the app folder
+      'app': 'app',
+
+      // angular bundles
+      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+
+      '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
+      '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
+      '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
+      '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
+      '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
+      '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
+      '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
+      '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
+      '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
+      '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
+      '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
+      '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
+      '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',
+      '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
+
+      // other libraries
+      'rxjs':                      'npm:rxjs@5.5.5',
+      'rxjs/operators':            'npm:rxjs@5.5.5/operators',
+      'tslib':                     'npm:tslib/tslib.js',
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api@0.4/bundles/in-memory-web-api.umd.js',
+      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
+      'typescript':                'npm:typescript@2.4.2/lib/typescript.js',
+
+      'moment': 'https://momentjs.com/downloads/moment-with-locales.js',
+      'moment/locale/zh-cn': '@empty',
+      'ng-zorro-antd': 'https://unpkg.com/ng-zorro-antd/bundles/antd.umd.js',
+
+      'ng-zorro-antd-extra': 'https://unpkg.com/ng-zorro-antd-extra/bundles/ng-zorro-antd-extra.umd.js',
+      '@delon/theme': 'https://unpkg.com/@delon/theme/bundles/theme.umd.js',
+      '@delon/abc': 'https://unpkg.com/@delon/abc/bundles/abc.umd.js',
+      '@delon/acl': 'https://unpkg.com/@delon/acl/bundles/acl.umd.js',
+
+      'file-saver': 'npm:file-saver',
+      'ngx-countdown': 'https://unpkg.com/ngx-countdown/bundles/ngx-countdown.umd.js'
+    },
+    // packages tells the System loader how to load when no filename and/or no extension
+    packages: {
+      app: {
+        main: './main.ts',
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
+      },
+      rxjs: {
+        defaultExtension: 'js'
+      }
+    }
+  });
+
+})(this);
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
+
+`;
diff --git a/site/app/shared/shared.module.ts b/site/app/shared/shared.module.ts
index c6b21646c0..b48d8bce47 100644
--- a/site/app/shared/shared.module.ts
+++ b/site/app/shared/shared.module.ts
@@ -10,6 +10,7 @@ import { AlainABCModule } from '@delon/abc';
 import { AlainACLModule } from '@delon/acl';
 import { TranslateModule } from '@ngx-translate/core';
 import { HighlightJsModule } from 'ngx-highlight-js';
+import { NzClipboardModule } from 'ng-clipboard-antd';
 
 import { ContentComponent } from './components/content/content.component';
 import { EditButtonComponent } from './components/edit-button/edit-button.component';
@@ -31,7 +32,8 @@ const COMPONENTS = [ ContentComponent, EditButtonComponent, DocsComponent, CodeB
         AlainABCModule.forRoot(),
         AlainACLModule.forRoot(),
         HighlightJsModule,
-        TranslateModule
+        TranslateModule,
+        NzClipboardModule.forRoot()
     ],
     declarations: COMPONENTS,
     exports: [
@@ -46,6 +48,7 @@ const COMPONENTS = [ ContentComponent, EditButtonComponent, DocsComponent, CodeB
         AlainACLModule,
         HighlightJsModule,
         TranslateModule,
+        NzClipboardModule,
         ...COMPONENTS
     ]
 })
diff --git a/site/app/styles/demo.less b/site/app/styles/demo.less
index 47bf7b1805..42e587baeb 100644
--- a/site/app/styles/demo.less
+++ b/site/app/styles/demo.less
@@ -203,23 +203,9 @@
 		}
 	}
 
-	&-codepen {
+	&-plnkr {
 		background: transparent
-			url("https://gw.alipayobjects.com/zos/rmsportal/OtZslpOjYXijshDERXwc.svg")
-			center / 14px no-repeat;
-		width: 20px;
-		height: 20px;
-		cursor: pointer;
-		opacity: 0;
-		transition: all 0.3s;
-		border: 0;
-		text-indent: -9999px;
-		overflow: hidden;
-	}
-
-	&-riddle {
-		background: transparent
-			url("https://gw.alipayobjects.com/zos/rmsportal/DlHbxMCyeuyOrqOdbgik.svg")
+			url("/assets/img/plnkr.png")
 			center / 14px no-repeat;
 		width: 20px;
 		height: 20px;
@@ -232,8 +218,7 @@
 	}
 
 	.highlight-wrapper:hover &-code-copy,
-	.highlight-wrapper:hover &-codepen,
-	.highlight-wrapper:hover &-riddle {
+	.highlight-wrapper:hover &-plnkr {
 		opacity: 1;
 	}
 
diff --git a/site/assets/img/plnkr.png b/site/assets/img/plnkr.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6f7cb976f0aa697ca1ec5bfea6f70b12e82a126
GIT binary patch
literal 1709
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
D%%K+R

literal 0
HcmV?d00001

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ed0f1edeb1..6aed1e98f2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,7 +7,7 @@ import 'style-loader!./app.themes.less';
   template: `
   <div style="margin: 0 auto; max-width: 80%;">
     <div class="padding: 32px;">
-        <a routerLink="/">theme</a>
+        <a routerLink="/theme">theme</a>
         <a routerLink="/abc">abc</a>
         <a routerLink="/acl">acl</a>
     </div>
diff --git a/tools/gulp/converters/site.ts b/tools/gulp/converters/site.ts
index 7466de4ae8..ae8220370e 100644
--- a/tools/gulp/converters/site.ts
+++ b/tools/gulp/converters/site.ts
@@ -14,13 +14,6 @@ export function site() {
                 return `<${tagName} id="${sluggedId}"><span>${children}</span></${tagName}>`;
             }
         ],
-        [
-            (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'a',
-            (node: any, index: number) => {
-                const attrs = Object.assign({ }, JsonML.getAttributes(node));
-                return `<a target="_blank" href="${attrs.href}">${JsonML.getChildren(node)}</a>`;
-            }
-        ],
         [
             (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'img',
             (node: any, index: number) => {
diff --git a/tools/gulp/utils/process.ts b/tools/gulp/utils/process.ts
index 895acdb35d..5a8adff23f 100644
--- a/tools/gulp/utils/process.ts
+++ b/tools/gulp/utils/process.ts
@@ -18,6 +18,13 @@ const converters = [
         (node: any) => typeof node === 'string',
         (node: any) => node
     ],
+    [
+        (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'a',
+        (node: any, index: number) => {
+            const attrs = Object.assign({ }, JsonML.getAttributes(node));
+            return `<a target="_blank" href="${attrs.href}">${JsonML.getChildren(node).map(toHtml).join('')}</a>`;
+        }
+    ],
     [
         () => true,
         (node: any) => {
@@ -70,7 +77,7 @@ export function gen(config: any) {
         }
 
         // todo: test
-        // if (file.path.indexOf('theme') === -1) {
+        // if (file.path.indexOf('getting-started') === -1) {
         //     cb();
         //     return;
         // }