You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@linkis.apache.org by pe...@apache.org on 2021/10/21 08:59:33 UTC

[incubator-linkis-website] 28/43: add team info and blogs

This is an automated email from the ASF dual-hosted git repository.

peacewong pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-linkis-website.git

commit 001a9546258d68c1dbb3b63ba970825811aeb2a0
Author: casionone <ca...@gmail.com>
AuthorDate: Thu Oct 14 20:08:16 2021 +0800

    add team info and blogs
---
 src/App.vue                        | 396 ++++++++++++++++++++-----------------
 src/assets/image/github_user.png   | Bin 0 -> 4677 bytes
 src/i18n/en.json                   |  66 +++++--
 src/i18n/zh.json                   |  34 +++-
 src/js/config.js                   |   9 +
 src/js/utils.js                    |  10 +
 src/pages/blog/AddEngineConn_en.md | 105 ++++++++++
 src/pages/blog/AddEngineConn_zh.md | 111 +++++++++++
 src/pages/blog/blogdata_en.js      |  13 ++
 src/pages/blog/blogdata_zh.js      |  13 ++
 src/pages/blog/event.vue           |  57 +++---
 src/pages/blog/index.vue           |  88 ++++++---
 src/pages/faq/index.vue            |  42 ++--
 src/pages/home.vue                 | 137 ++++---------
 src/pages/team.vue                 | 195 ------------------
 src/pages/team/team.vue            | 140 +++++++++++++
 src/pages/team/teamdata_en.js      | 131 ++++++++++++
 src/pages/team/teamdata_zh.js      | 131 ++++++++++++
 src/router.js                      |   2 +-
 19 files changed, 1105 insertions(+), 575 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6418c15..f777ea6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,195 +1,235 @@
 <script setup>
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import { ref } from "vue";
-
-// 初始化语言
-const lang = ref(localStorage.getItem('locale'));
-
-// 切换语言
-const switchLang = (lang) => {
-  localStorage.setItem('locale', lang);
-  location.reload();
-}
+    // This starter template is using Vue 3 <script setup> SFCs
+    // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+    import {ref} from "vue";
+    import systemConfiguration from "./js/config";
+    // 初始化语言
+    const lang = ref(localStorage.getItem('locale'));
+
+    // 切换语言
+    const switchLang = (lang) => {
+        localStorage.setItem('locale', lang);
+        location.reload();
+    }
 </script>
 
 <template>
-<div>
-  <nav class="nav">
-    <div class="ctn-block">
-      <div class="nav-logo">
-        Apache Linkis
-      </div>
-      <span class="nav-logo-badge">Incubating</span>
-      <div class="menu-list">
-        <router-link class="menu-item" to="/"><span class="label">{{$t('menu.item.home')}}</span></router-link>
-        <router-link class="menu-item" to="/docs/deploy/linkis"><span class="label">{{$t('menu.item.docs')}}</span></router-link>
-        <router-link class="menu-item" to="/faq/index"><span class="label">{{$t('menu.item.faq')}}</span></router-link>
-        <router-link class="menu-item" to="/download"><span class="label">{{$t('menu.item.download')}}</span></router-link>
-        <router-link class="menu-item" to="/blog"><span class="label">{{$t('menu.item.blog')}}</span></router-link>
-        <router-link class="menu-item" to="/team"><span class="label">{{$t('menu.item.team')}}</span></router-link>
-        <div class="menu-item language">
-          Language
-          <div class="dropdown-menu">
-            <ul class="dropdown-menu-ctn">
-              <li class="dropdown-menu-item" :class="{active: lang === 'zh-CN'}" @click="switchLang('zh-CN')">简体中文</li>
-              <li class="dropdown-menu-item" :class="{active: lang === 'en'}" @click="switchLang('en')">English</li>
-            </ul>
-          </div>
-        </div>
-      </div>
+    <div>
+        <nav class="nav">
+            <div class="ctn-block">
+                <div class="nav-logo">
+                    Apache Linkis
+                </div>
+                <span class="nav-logo-badge">Incubating</span>
+                <div class="menu-list">
+                    <router-link class="menu-item" to="/"><span class="label">{{$t('menu.item.home')}}</span>
+                    </router-link>
+                    <router-link class="menu-item" to="/docs/deploy/linkis"><span
+                            class="label">{{$t('menu.item.docs')}}</span></router-link>
+                    <router-link class="menu-item" to="/faq/index"><span class="label">{{$t('menu.item.faq')}}</span>
+                    </router-link>
+                    <router-link class="menu-item" to="/download"><span
+                            class="label">{{$t('menu.item.download')}}</span></router-link>
+                    <router-link class="menu-item" to="/blog"><span class="label">{{$t('menu.item.blog')}}</span>
+                    </router-link>
+                    <router-link class="menu-item" to="/team"><span class="label">{{$t('menu.item.team')}}</span>
+                    </router-link>
+                    <div class="menu-item language">
+                        Language
+                        <div class="dropdown-menu">
+                            <ul class="dropdown-menu-ctn">
+                                <li class="dropdown-menu-item" :class="{active: lang === 'zh-CN'}"
+                                    @click="switchLang('zh-CN')">简体中文
+                                </li>
+                                <li class="dropdown-menu-item" :class="{active: lang === 'en'}"
+                                    @click="switchLang('en')">English
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+        <router-view></router-view>
+        <footer class="footer">
+            <div class="ctn-block">
+                <div class="footer-links-row">
+                    <div class="footer-links">
+                        <h3 class="links-title">Linkis</h3>
+                        <a href="/#/docs/deploy/linkis" class="links-item">{{$t('menu.links.documentation')}}</a>
+                        <a href="/#/blog" class="links-item">{{$t('menu.links.events')}}</a>
+                        <a :href="systemConfiguration.github.projectReleaseUrl" class="links-item">{{$t('menu.links.releases')}}</a>
+                    </div>
+                    <div class="footer-links">
+                        <h3 class="links-title">{{$t('menu.links.community')}}</h3>
+                        <a :href="systemConfiguration.github.projectUrl" class="links-item">GitHub</a>
+                        <a :href="systemConfiguration.github.projectIssueUrl" class="links-item">{{$t('menu.links.issue_tracker')}}</a>
+                        <a :href="systemConfiguration.github.projectPrUrl" class="links-item">{{$t('menu.links.pull_requests')}}</a>
+                    </div>
+                    <div class="footer-links">
+                        <h3 class="links-title">{{$t('menu.links.asf')}}</h3>
+                        <a href="https://www.apache.org/" class="links-item">{{$t('menu.links.foundation')}}</a>
+                        <a href="https://www.apache.org/licenses/LICENSE-2.0" class="links-item">{{$t('menu.links.license')}}</a>
+                        <a href="https://www.apache.org/foundation/sponsorship.html" class="links-item">{{$t('menu.links.sponsorship')}}</a>
+                        <a href="http://www.apache.org/foundation/thanks.html" class="links-item">{{$t('menu.links.thanks')}}</a>
+                    </div>
+                </div>
+                <p class="footer-desc">Apache Linkis (Incubating) is an effort undergoing incubation at The Apache
+                    Software Foundation, sponsored by the Apache Incubator. Incubation is required of all newly accepted
+                    projects until a further review indicates that the infrastructure, communications, and decision
+                    making process have stabilized in a manner consistent with other successful ASF projects. While
+                    incubation status is not necessarily a reflection of the completeness or stability of the code, it
+                    does indicate that the project has yet to be fully endorsed by the ASF.</p>
+                <p class="footer-desc text-center">Copyright © 2021 The Apache Software Foundation. Apache Linkis,
+                    Apache Incubator, Linkis, Apache, the Apache feather logo, the Apache<br>Linkis logo and the Apache
+                    Incubator project logo are trademarks of The Apache Software Foundation.</p>
+            </div>
+        </footer>
     </div>
-  </nav>
-  <router-view></router-view>
-  <footer class="footer">
-    <div class="ctn-block">
-      <div class="footer-links-row">
-        <div class="footer-links">
-          <h3 class="links-title">Linkis</h3>
-          <a href="" class="links-item">{{$t('menu.links.documentation')}}</a>
-          <a href="" class="links-item">{{$t('menu.links.events')}}</a>
-          <a href="" class="links-item">{{$t('menu.links.releases')}}</a>
-        </div>
-        <div class="footer-links">
-          <h3 class="links-title">{{$t('menu.links.community')}}</h3>
-          <a href="" class="links-item">GitHub</a>
-          <a href="" class="links-item">{{$t('menu.links.issue_tracker')}}</a>
-          <a href="" class="links-item">{{$t('menu.links.pull_requests')}}</a>
-        </div>
-        <div class="footer-links">
-          <h3 class="links-title">{{$t('menu.links.asf')}}</h3>
-          <a href="" class="links-item">{{$t('menu.links.foundation')}}</a>
-          <a href="" class="links-item">{{$t('menu.links.license')}}</a>
-          <a href="" class="links-item">{{$t('menu.links.sponsorship')}}</a>
-          <a href="" class="links-item">{{$t('menu.links.thanks')}}</a>
-        </div>
-      </div>
-      <p class="footer-desc">Apache Linkis (Incubating) is an effort undergoing incubation at The Apache Software Foundation, sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code [...]
-      <p class="footer-desc text-center">Copyright © 2021 The Apache Software Foundation. Apache Linkis, Apache Incubator, Linkis, Apache, the Apache feather logo, the Apache<br>Linkis logo and the Apache Incubator project logo are trademarks of The Apache Software Foundation.</p>
-    </div>
-  </footer>
-</div>
 </template>
 
 <style lang="less">
-@import url('/src/style/base.less');
-.nav{
-  font-size: 16px;
-  box-shadow: 0 2px 4px rgba(15,18,34,0.2);
-  color: @enhance-color;
-  .ctn-block{
-    display: flex;
-    align-items: center;
-  }
-  .nav-logo{
-    line-height: 54px;
-    font-weight: 500;
-  }
-  .nav-logo-badge{
-    display: inline-block;
-    margin-left: 4px;
-    padding: 0 8px;
-    line-height: 24px;
-    background: #E8E8E8;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-  }
-  .menu-list{
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    .menu-item{
-      margin-left: 16px;
-      margin-right: 16px;
-      line-height: 52px;
-      border-bottom: 2px solid transparent;
-      transition: all ease .2s;
-      cursor: pointer;
-      &:hover,
-      &.router-link-exact-active{
-        .label{
-          color: @active-color;
-        }
-        border-color: @active-color;
-      }
-      &.language{
-        position: relative;
-        &::after{
-          content: '';
-          display: inline-block;
-          vertical-align: middle;
-          width: 0;
-          height: 0;
-          margin-left: 8px;
-          border-bottom: 6px solid #ccc;
-          border-left: 4px solid transparent;
-          border-right: 4px solid transparent;
-          transition: all ease .2s;
+    @import url('/src/style/base.less');
+
+    .nav {
+        font-size: 16px;
+        box-shadow: 0 2px 4px rgba(15, 18, 34, 0.2);
+        color: @enhance-color;
+
+        .ctn-block {
+            display: flex;
+            align-items: center;
         }
-        &:hover{
-          &::after{
-            transform: rotate(180deg);
-          }
-          .dropdown-menu{
-            display: block;
-          }
+
+        .nav-logo {
+            line-height: 54px;
+            font-weight: 500;
         }
-        .dropdown-menu{
-          display: none;
-          position: absolute;
-          z-index: 10;
-          top: 20px;
-          left: 0;
-          padding-top: 40px;
-          .dropdown-menu-ctn{
-            padding: 10px 0;
-            background: #fff;
+
+        .nav-logo-badge {
+            display: inline-block;
+            margin-left: 4px;
+            padding: 0 8px;
+            line-height: 24px;
+            background: #E8E8E8;
             border-radius: 4px;
-            border: 1px solid #FFFFFF;
-            box-shadow: 0 2px 12px 0 rgba(15,18,34,0.10);
-            .dropdown-menu-item{
-              font-size: 14px;
-              line-height: 32px;
-              padding: 0 16px;
-              cursor: pointer;
-              &.active,
-              &:hover{
-                color: @active-color;
-              }
+            font-size: 12px;
+            font-weight: 400;
+        }
+
+        .menu-list {
+            flex: 1;
+            display: flex;
+            justify-content: flex-end;
+
+            .menu-item {
+                margin-left: 16px;
+                margin-right: 16px;
+                line-height: 52px;
+                border-bottom: 2px solid transparent;
+                transition: all ease .2s;
+                cursor: pointer;
+
+                &:hover,
+                &.router-link-exact-active {
+                    .label {
+                        color: @active-color;
+                    }
+
+                    border-color: @active-color;
+                }
+
+                &.language {
+                    position: relative;
+
+                    &::after {
+                        content: '';
+                        display: inline-block;
+                        vertical-align: middle;
+                        width: 0;
+                        height: 0;
+                        margin-left: 8px;
+                        border-bottom: 6px solid #ccc;
+                        border-left: 4px solid transparent;
+                        border-right: 4px solid transparent;
+                        transition: all ease .2s;
+                    }
+
+                    &:hover {
+                        &::after {
+                            transform: rotate(180deg);
+                        }
+
+                        .dropdown-menu {
+                            display: block;
+                        }
+                    }
+
+                    .dropdown-menu {
+                        display: none;
+                        position: absolute;
+                        z-index: 10;
+                        top: 20px;
+                        left: 0;
+                        padding-top: 40px;
+
+                        .dropdown-menu-ctn {
+                            padding: 10px 0;
+                            background: #fff;
+                            border-radius: 4px;
+                            border: 1px solid #FFFFFF;
+                            box-shadow: 0 2px 12px 0 rgba(15, 18, 34, 0.10);
+
+                            .dropdown-menu-item {
+                                font-size: 14px;
+                                line-height: 32px;
+                                padding: 0 16px;
+                                cursor: pointer;
+
+                                &.active,
+                                &:hover {
+                                    color: @active-color;
+                                }
+                            }
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
-}
-.footer{
-  padding-top: 40px;
-  background: #F9FAFB;
-  .footer-desc{
-    padding: 0 20px 30px;
-    color: #999999;
-    font-weight: 400;
-  }
-  .footer-links-row{
-    display: flex;
-    font-size: 16px;
-    .footer-links{
-      flex: 1;
-      padding: 20px;
-      .links-title{
-        margin-bottom: 16px;
-      }
-      .links-item{
-        display: block;
-        margin-bottom: 10px;
-        color: rgba(15,18,34,0.65);
-        &:hover{
-          text-decoration: underline;
+
+    .footer {
+        padding-top: 40px;
+        background: #F9FAFB;
+
+        .footer-desc {
+            padding: 0 20px 30px;
+            color: #999999;
+            font-weight: 400;
+        }
+
+        .footer-links-row {
+            display: flex;
+            font-size: 16px;
+
+            .footer-links {
+                flex: 1;
+                padding: 20px;
+
+                .links-title {
+                    margin-bottom: 16px;
+                }
+
+                .links-item {
+                    display: block;
+                    margin-bottom: 10px;
+                    color: rgba(15, 18, 34, 0.65);
+
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
         }
-      }
     }
-  }
-}
 </style>
diff --git a/src/assets/image/github_user.png b/src/assets/image/github_user.png
new file mode 100644
index 0000000..e57e9dd
Binary files /dev/null and b/src/assets/image/github_user.png differ
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 479851b..1335b9d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1,33 +1,63 @@
 {
   "message": {
-    "common": {},
+    "common": {
+      "get_start": "Get Start",
+      "description": "Description",
+      "learn_more": "Learn More",
+      "core_features": "Core Features",
+      "connectivity": "Connectivity",
+      "scalability": "Scalability",
+      "controllability": "Controllability",
+      "orchestration": "Orchestration",
+      "reusability": "Reusability",
+      "our_users": "Our Users",
+      "read_more": "Read More"
+    },
     "home": {
       "banner": {
         "slogan": "Decouple the upper applications and the underlying data engines by building a computation middleware layer."
+      },
+      "introduce": {
+        "title": "Computation Governance Concept",
+        "before": "before",
+        "after": "after",
+        "before_text": "Each upper application directly connects to and accesses various underlying engines in a tightly coupled way, which makes big data platform a complex network architecture.",
+        "after_text": "Build a common layer of \"computation middleware\" between the numerous upper-layer applications and the countless underlying engines to resolve these complex connection problems in a standardized reusable way\n"
+      },
+      "description": {
+        "paragraph1": "Linkis provides standardized interfaces (REST, JDBC, WebSocket etc.) to easily connect to various underlying engines (Spark, Presto, Flink, etc.), and acts as a proxy between the upper applications layer and underlying engines layer.",
+        "paragraph2": "Linkis is able to facilitate the connectivity, governance and orchestration capabilities of different kind of engines like OLAP, OLTP (developing), Streaming, and handle all these \"computation governance\" affairs in a standardized reusable way."
+      },
+      "core": {
+        "connectivity": "Simplify the operation environment; decouple the upper and lower layers, which make the upper layer insensitive when bottom layers changed",
+        "scalability": "Distributed microservice architecture with great scalability and extensibility; quickly integrate with the new underlying engine",
+        "controllability": "Converge engine entrance, unify identity verification, high-risk prevention and control, audit records; label-based multi-level refined resource control and recovery capabilities",
+        "orchestration": "Computing strategy design based on active-active, mixed computing, transcation Orchestrator Service",
+        "reusability": "Highly reduced the back-end development workload of upper-level applications development; Swiftly and efficiently build a data platform tool suite based on Linkis"
       }
     }
   },
   "menu": {
-    "item":{
+    "item": {
       "home": "Home",
-      "docs":"Docs",
+      "docs": "Docs",
       "faq": "FAQ",
-      "download":"Download",
-      "blog":"Blog",
-      "team":"Team"
+      "download": "Download",
+      "blog": "Blog",
+      "team": "Team"
     },
-    "links":{
-      "documentation":"Documentation",
-      "events":"Events",
-      "releases":"Releases",
-      "community":"Community",
-      "issue_tracker":"Issue Tracker",
-      "pull_requests":"Pull Requests",
-      "asf":"Apache Software Foundation",
-      "foundation":"Foundation",
-      "license":"License",
-      "sponsorship":"Sponsorship",
-      "thanks":"Thanks"
+    "links": {
+      "documentation": "Documentation",
+      "events": "Events",
+      "releases": "Releases",
+      "community": "Community",
+      "issue_tracker": "Issue Tracker",
+      "pull_requests": "Pull Requests",
+      "asf": "Apache Software Foundation",
+      "foundation": "Foundation",
+      "license": "License",
+      "sponsorship": "Sponsorship",
+      "thanks": "Thanks"
     }
   }
 }
diff --git a/src/i18n/zh.json b/src/i18n/zh.json
index 178f663..74c4942 100644
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@@ -1,9 +1,39 @@
 {
   "message": {
-    "common": {},
+    "common": {
+      "get_start": "开始",
+      "description": "描述",
+      "learn_more": "了解更多",
+      "core_features": "核心功能",
+      "connectivity": "连通性",
+      "scalability": "可扩展性",
+      "controllability": "可控性",
+      "orchestration": "编排",
+      "reusability": "可复用性",
+      "our_users": "我们的用户",
+      "read_more": "阅读更多"
+    },
     "home": {
       "banner": {
         "slogan": "通过构建计算中间件层来解耦上层应用程序和底层数据引擎"
+      },
+      "introduce": {
+        "title": "计算治理理念",
+        "before": "没有Linkis之前",
+        "after": "有Linkis之后",
+        "before_text": "每个上层应用以紧耦合的方式直接连接和访问各种底层引擎,这使得大数据平台成为一个复杂的网络架构",
+        "after_text": "在丰富的上层应用和丰富的底层引擎之间构建一个公共的“计算中间件”层,以标准化的可复用方式解决这些复杂的连接问题"
+      },
+      "description": {
+        "paragraph1": "Linkis 提供标准化接口(REST、JDBC、WebSocket 等),方便连接各种底层引擎(Spark、Presto、Flink 等),充当上层应用层和底层引擎层之间的代理",
+        "paragraph2": "Linkis 能够促进 OLAP、OLTP(开发)、Streaming 等不同类型引擎的连接、治理和编排能力,并以标准化的可重用方式处理所有这些“计算治理”事务."
+      },
+      "core": {
+        "connectivity": "简化操作环境;上层和下层解耦,使上层在底层变化时不敏感",
+        "scalability": "分布式微服务架构,具有很好的可伸缩性和扩展性;快速与新的底层引擎集成",
+        "controllability": "融合引擎入口,统一身份验证,高风险防控,审计记录;基于标签的多级精细化资源控制和恢复能力",
+        "orchestration": "基于双活、混合计算、事务Orchestrator服务的计算策略设计",
+        "reusability": "大大减少了上层应用开发的后端开发工作量;可基于Linkis快速高效搭建数据平台工具套件"
       }
     }
   },
@@ -30,4 +60,4 @@
       "thanks":"致谢"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/js/config.js b/src/js/config.js
new file mode 100644
index 0000000..8ddcc56
--- /dev/null
+++ b/src/js/config.js
@@ -0,0 +1,9 @@
+const  systemConfiguration={
+    github:{
+        "projectUrl":"https://github.com/apache/incubator-linkis",
+        "projectReleaseUrl":"https://github.com/apache/incubator-linkis/releases",
+        "projectIssueUrl":"https://github.com/apache/incubator-linkis/issues",
+        "projectPrUrl":"https://github.com/apache/incubator-linkis/pulls",
+    },
+}
+export  default systemConfiguration
diff --git a/src/js/utils.js b/src/js/utils.js
new file mode 100644
index 0000000..3dff972
--- /dev/null
+++ b/src/js/utils.js
@@ -0,0 +1,10 @@
+const utils = {
+      //拼接
+      concatStr(first, con, second) {
+        return first + con + second + "";
+      }
+
+}
+;
+
+export default utils;
diff --git a/src/pages/blog/AddEngineConn_en.md b/src/pages/blog/AddEngineConn_en.md
new file mode 100644
index 0000000..5ce15fe
--- /dev/null
+++ b/src/pages/blog/AddEngineConn_en.md
@@ -0,0 +1,105 @@
+# How to add an EngineConn
+
+Adding EngineConn is one of the core processes of the computing task preparation phase of Linkis computing governance. It mainly includes the following steps. First, client side (Entrance or user client) initiates a request for a new EngineConn to LinkisManager . Then LinkisManager initiates a request to EngineConnManager to start EngineConn based on demands and label rules. Finally,  LinkisManager returns the usable EngineConn to the client side.
+
+Based on the figure below, let's explain the whole process in detail:
+
+![Process of adding a EngineConn](../../assets/docs/architecture/add_an_engineConn_flow_chart.png)
+
+## 1. LinkisManger receives the requests from client side
+
+**Glossary:**
+
+- LinkisManager: The management center of Linkis computing governance capabilities. Its main responsibilities are:
+  1. Based on multi-level combined tags, provide users with available EngineConn after complex routing, resource management and load balancing.
+
+  2. Provide EC and ECM full life cycle management capabilities.
+
+  3. Provide users with multi-Yarn cluster resource management functions based on multi-level combined tags. It is mainly divided into three modules: AppManager, ResourceManager and LabelManager , which can support multi-active deployment and have the characteristics of high availability and easy expansion.
+
+After the AM module receives the Client’s new EngineConn request, it first checks the parameters of the request to determine the validity of the request parameters. Secondly, selects the most suitable EngineConnManager (ECM) through complex rules for use in the subsequent EngineConn startup. Next, it will apply to RM for the resources needed to start the EngineConn, Finally, it will request the ECM to create an EngineConn.
+
+The four steps will be described in detail below.
+
+### 1. Request parameter verification
+
+After the AM module receives the engine creation request, it will check the parameters. First, it will check the permissions of the requesting user and the creating user, and then check the Label attached to the request. Since in the subsequent creation process of AM, Label will be used to find ECM and perform resource information recording, etc, you need to ensure that you have the necessary Label. At this stage, you must bring the Label with UserCreatorLabel (For example: hadoop-IDE) a [...]
+
+### 2. Select  a EngineConnManager(ECM)
+
+ECM selection is mainly to complete the Label passed through the client to select a suitable ECM service to start EngineConn. In this step, first, the LabelManager will be used to search in the registered ECM through the Label passed by the client, and return in the order according to the label matching degree. After obtaining the registered ECM list, rules will be selected for these ECMs. At this stage, rules such as availability check, resource surplus, and machine load have been imple [...]
+
+### 3. Apply resources required for EngineConn
+
+1. After obtaining the assigned ECM, AM will then request how many resources will be used by the client's engine creation request by calling the EngineConnPluginServer service. Here, the resource request will be encapsulated, mainly including Label, the EngineConn startup parameters passed by the Client, and the user configuration parameters obtained from the Configuration module. The resource information is obtained by calling the ECP service through RPC.
+
+2. After the EngineConnPluginServer service receives the resource request, it will first find the corresponding engine tag through the passed tag, and select the EngineConnPlugin of the corresponding engine through the engine tag. Then use EngineConnPlugin's resource generator to calculate the engine startup parameters passed in by the client, calculate the resources required to apply for a new EngineConn this time, and then return it to LinkisManager. 
+
+   **Glossary:**
+
+- EgineConnPlugin: It is the interface that Linkis must implement when connecting a new computing storage engine. This interface mainly includes several capabilities that this EngineConn must provide during the startup process, including EngineConn resource generator, EngineConn startup command generator, EngineConn engine connection Device. Please refer to the Spark engine implementation class for the specific implementation: [SparkEngineConnPlugin](https://github.com/WeBankFinTech/Link [...]
+- EngineConnPluginServer: It is a microservice that loads all the EngineConnPlugins and provides externally the required resource generation capabilities of EngineConn and EngineConn's startup command generation capabilities.
+- EngineConnResourceFactory: Calculate the total resources needed when EngineConn starts this time through the parameters passed in.
+- EngineConnLaunchBuilder: Through the incoming parameters, a startup command of the EngineConn is generated to provide the ECM to start the engine.
+3. After AM obtains the engine resources, it will then call the RM service to apply for resources. The RM service will use the incoming Label, ECM, and the resources applied for this time to make resource judgments. First, it will judge whether the resources of the client corresponding to the Label are sufficient, and then judge whether the resources of the ECM service are sufficient, if the resources are sufficient, the resource application is approved this time, and the resources of th [...]
+
+### 4. Request ECM for engine creation
+
+1. After completing the resource application for the engine, AM will encapsulate the engine startup request, send it to the corresponding ECM via RPC for service startup, and obtain the instance object of EngineConn.
+2. AM will then determine whether EngineConn is successfully started and become available through the reported information of EngineConn. If it is, the result will be returned, and the process of adding an engine this time will end.
+
+## 2. ECM initiates EngineConn
+
+**Glossary:**
+
+- EngineConnManager: EngineConn's manager. Provides engine life-cycle management, and at the same time reports load information and its own health status to RM.
+- EngineConnBuildRequest: The start engine command passed by LinkisManager to ECM, which encapsulates all tag information, required resources and some parameter configuration information of the engine.
+- EngineConnLaunchRequest: Contains the BML materials, environment variables, ECM required local environment variables, startup commands and other information required to start an EngineConn, so that ECM can build a complete EngineConn startup script based on this.
+
+After ECM receives the EngineConnBuildRequest command passed by LinkisManager, it is mainly divided into three steps to start EngineConn: 
+
+1. Request EngineConnPluginServer to obtain EngineConnLaunchRequest encapsulated by EngineConnPluginServer. 
+2.  Parse EngineConnLaunchRequest and encapsulate it into EngineConn startup script.
+3.  Execute startup script to start EngineConn.
+
+### 2.1 EngineConnPluginServer encapsulates EngineConnLaunchRequest
+
+Get the EngineConn type and corresponding version that actually needs to be started through the label information of EngineConnBuildRequest, get the EngineConnPlugin of the EngineConn type from the memory of EngineConnPluginServer, and convert the EngineConnBuildRequest into EngineConnLaunchRequest through the EngineConnLaunchBuilder of the EngineConnPlugin.
+
+### 2.2 Encapsulate EngineConn startup script
+
+After the ECM obtains the EngineConnLaunchRequest, it downloads the BML materials in the EngineConnLaunchRequest to the local, and checks whether the local necessary environment variables required by the EngineConnLaunchRequest exist. After the verification is passed, the EngineConnLaunchRequest is encapsulated into an EngineConn startup script.
+
+### 2.3 Execute startup script
+
+Currently, ECM only supports Bash commands for Unix systems, that is, only supports Linux systems to execute the startup script.
+
+Before startup, the sudo command is used to switch to the corresponding requesting user to execute the script to ensure that the startup user (ie, JVM user) is the requesting user on the Client side.
+
+After the startup script is executed, ECM will monitor the execution status and execution log of the script in real time. Once the execution status returns to non-zero, it will immediately report EngineConn startup failure to LinkisManager and the entire process is complete; otherwise, it will keep monitoring the log and status of the startup script until The script execution is complete.
+
+## 3. EngineConn initialization
+
+After ECM executed EngineConn's startup script, EngineConn microservice was officially launched.
+
+**Glossary:**
+
+- EngineConn microservice: Refers to the actual microservices that include an EngineConn and one or more Executors to provide computing power for computing tasks. When we talk about adding an EngineConn, we actually mean adding an EngineConn microservice.
+- EngineConn: The engine connector is the actual connection unit with the underlying computing storage engine, and contains the session information with the actual engine. The difference between it and Executor is that EngineConn only acts as a connection and a client, and does not actually perform calculations. For example, SparkEngineConn, its session information is SparkSession.
+- Executor: As a real computing storage scenario executor, it is the actual computing storage logic execution unit. It abstracts the various capabilities of EngineConn and provides multiple different architectural capabilities such as interactive execution, subscription execution, and responsive execution.
+
+The initialization of EngineConn microservices is generally divided into three stages:
+
+1. Initialize the EngineConn of the specific engine. First use the command line parameters of the Java main method to encapsulate an EngineCreationContext that contains relevant label information, startup information, and parameter information, and initialize EngineConn through EngineCreationContext to complete the establishment of the connection between EngineConn and the underlying Engine, such as: SparkEngineConn will initialize one at this stage SparkSession is used to establish a co [...]
+2. Initialize the Executor. After the EngineConn is initialized, the corresponding Executor will be initialized according to the actual usage scenario to provide service capabilities for subsequent users. For example, the SparkEngineConn in the interactive computing scenario will initialize a series of Executors that can be used to submit and execute SQL, PySpark, and Scala code capabilities, and support the Client to submit and execute SQL, PySpark, Scala and other codes to the SparkEng [...]
+3. Report the heartbeat to LinkisManager regularly, and wait for EngineConn to exit. When the underlying engine corresponding to EngineConn is abnormal, or exceeds the maximum idle time, or Executor is executed, or the user manually kills, the EngineConn automatically ends and exits.
+
+----
+
+At this point, The process of how to add a new EngineConn is basically over. Finally, let's make a summary:
+
+- The client initiates a request for adding EngineConn to LinkisManager.
+- LinkisManager checks the legitimacy of the parameters, first selects the appropriate ECM according to the label, then confirms the resources required for this new EngineConn according to the user's request, applies for resources from the RM module of LinkisManager, and requires ECM to start a new EngineConn as required after the application is passed.
+- ECM first requests EngineConnPluginServer to obtain an EngineConnLaunchRequest containing BML materials, environment variables, ECM required local environment variables, startup commands and other information needed to start an EngineConn, and then encapsulates the startup script of EngineConn, and finally executes the startup script to start the EngineConn.
+- EngineConn initializes the EngineConn of a specific engine, and then initializes the corresponding Executor according to the actual usage scenario, and provides service capabilities for subsequent users. Finally, report the heartbeat to LinkisManager regularly, and wait for the normal end or termination by the user.
+
diff --git a/src/pages/blog/AddEngineConn_zh.md b/src/pages/blog/AddEngineConn_zh.md
new file mode 100644
index 0000000..bb6a88f
--- /dev/null
+++ b/src/pages/blog/AddEngineConn_zh.md
@@ -0,0 +1,111 @@
+# EngineConn新增流程
+
+EngineConn的新增,是Linkis计算治理的计算任务准备阶段的核心流程之一。它主要包括了Client端(Entrance或用户客户端)向LinkisManager发起一个新增EngineConn的请求,LinkisManager为用户按需、按标签规则,向EngineConnManager发起一个启动EngineConn的请求,并等待EngineConn启动完成后,将可用的EngineConn返回给Client的整个流程。
+
+如下图所示,接下来我们来详细说明一下整个流程:
+
+![EngineConn新增流程](../../assets/docs/architecture/add_an_engineConn_flow_chart.png)
+
+## 一、LinkisManager接收客户端请求
+
+**名词解释**:
+
+- LinkisManager:是Linkis计算治理能力的管理中枢,主要的职责为:
+  1. 基于多级组合标签,为用户提供经过复杂路由、资源管控和负载均衡后的可用EngineConn;
+  
+  2. 提供EC和ECM的全生命周期管理能力;
+  
+  3. 为用户提供基于多级组合标签的多Yarn集群资源管理功能。主要分为 AppManager(应用管理器)、ResourceManager(资源管理器)、LabelManager(标签管理器)三大模块,能够支持多活部署,具备高可用、易扩展的特性。
+
+&nbsp;&nbsp;&nbsp;&nbsp;AM模块接收到Client的新增EngineConn请求后,首先会对请求做参数校验,判断请求参数的合法性;其次是通过复杂规则选中一台最合适的EngineConnManager(ECM),以用于后面的EngineConn启动;接下来会向RM申请启动该EngineConn需要的资源;最后是向ECM请求创建EngineConn。
+
+下面将对四个步骤进行详细说明。
+
+### 1. 请求参数校验
+
+&nbsp;&nbsp;&nbsp;&nbsp;AM模块在接受到引擎创建请求后首先会做参数判断,首先会做请求用户和创建用户的权限判断,接着会对请求带上的Label进行检查。因为在AM后续的创建流程当中,Label会用来查找ECM和进行资源信息记录等,所以需要保证拥有必须的Label,现阶段一定需要带上的Label有UserCreatorLabel(例:hadoop-IDE)和EngineTypeLabel(例:spark-2.4.3)。
+
+### 2. EngineConnManager(ECM)选择
+
+&nbsp;&nbsp;&nbsp;&nbsp;ECM选择主要是完成通过客户端传递过来的Label去选择一个合适的ECM服务去启动EngineConn。这一步中首先会通过LabelManager去通过客户端传递过来的Label去注册的ECM中进行查找,通过按照标签匹配度进行顺序返回。在获取到注册的ECM列表后,会对这些ECM进行规则选择,现阶段已经实现有可用性检查、资源剩余、机器负载等规则。通过规则选择后,会将标签最匹配、资源最空闲、负载低的ECM进行返回。
+
+### 3. EngineConn资源申请
+
+1. 在获取到分配的ECM后,AM接着会通过调用EngineConnPluginServer服务请求本次客户端的引擎创建请求会使用多少的资源,这里会通过封装资源请求,主要包含Label、Client传递过来的EngineConn的启动参数、以及从Configuration模块获取到用户配置参数,通过RPC调用ECP服务去获取本次的资源信息。
+
+2. EngineConnPluginServer服务在接收到资源请求后,会先通过传递过来的标签找到对应的引擎标签,通过引擎标签选择对应引擎的EngineConnPlugin。然后通过EngineConnPlugin的资源生成器,对客户端传入的引擎启动参数进行计算,算出本次申请新EngineConn所需的资源,然后返回给LinkisManager。
+   
+   **名词解释:**
+- EgineConnPlugin:是Linkis对接一个新的计算存储引擎必须要实现的接口,该接口主要包含了这种EngineConn在启动过程中必须提供的几个接口能力,包括EngineConn资源生成器、EngineConn启动命令生成器、EngineConn引擎连接器。具体的实现可以参考Spark引擎的实现类:[SparkEngineConnPlugin](https://github.com/WeBankFinTech/Linkis/blob/master/linkis-engineconn-plugins/engineconn-plugins/spark/src/main/scala/com/webank/wedatasphere/linkis/engineplugin/spark/SparkEngineConnPlugin.scala)。
+
+- EngineConnPluginServer:是加载了所有的EngineConnPlugin,对外提供EngineConn的所需资源生成能力和EngineConn的启动命令生成能力的微服务。
+
+- EngineConnPlugin资源生成器(EngineConnResourceFactory):通过传入的参数,计算出本次EngineConn启动时需要的总资源。
+
+- EngineConn启动命令生成器(EngineConnLaunchBuilder):通过传入的参数,生成该EngineConn的启动命令,以提供给ECM去启动引擎。
+3. AM在获取到引擎资源后,会接着调用RM服务去申请资源,RM服务会通过传入的Label、ECM、本次申请的资源,去进行资源判断。首先会判断客户端对应Label的资源是否足够,然后再会判断ECM服务的资源是否足够,如果资源足够,则本次资源申请通过,并对对应的Label进行资源的加减。
+
+### 4. 请求ECM创建引擎
+
+1. 在完成引擎的资源申请后,AM会封装引擎启动的请求,通过RPC发送给对应的ECM进行服务启动,并获取到EngineConn的实例对象;
+2. AM接着会去通过EngineConn的上报信息判断EngineConn是否启动成功变成可用状态,如果是就会将结果进行返回,本次新增引擎的流程也就结束。
+
+## 二、 ECM启动EngineConn
+
+名词解释:
+
+- EngineConnManager(ECM):EngineConn的管理器,提供引擎的生命周期管理,同时向RM汇报负载信息和自身的健康状况。
+
+- EngineConnBuildRequest:LinkisManager传递给ECM的启动引擎命令,里面封装了该引擎的所有标签信息、所需资源和一些参数配置信息。
+
+- EngineConnLaunchRequest:包含了启动一个EngineConn所需的BML物料、环境变量、ECM本地必需环境变量、启动命令等信息,让ECM可以依此构建出一个完整的EngineConn启动脚本。
+
+ECM接收到LinkisManager传递过来的EngineConnBuildRequest命令后,主要分为三步来启动EngineConn:1. 请求EngineConnPluginServer,获取EngineConnPluginServer封装出的EngineConnLaunchRequest;2. 解析EngineConnLaunchRequest,封装成EngineConn启动脚本;3. 执行启动脚本,启动EngineConn。
+
+### 2.1 EngineConnPluginServer封装EngineConnLaunchRequest
+
+通过EngineConnBuildRequest的标签信息,拿到实际需要启动的EngineConn类型和对应版本,从EngineConnPluginServer的内存中获取到该EngineConn类型的EngineConnPlugin,通过该EngineConnPlugin的EngineConnLaunchBuilder,将EngineConnBuildRequest转换成EngineConnLaunchRequest。
+
+### 2.2 封装EngineConn启动脚本
+
+ECM获取到EngineConnLaunchRequest之后,将EngineConnLaunchRequest中的BML物料下载到本地,并检查EngineConnLaunchRequest要求的本地必需环境变量是否存在,校验通过后,将EngineConnLaunchRequest封装成一个EngineConn启动脚本
+
+### 2.3 执行启动脚本
+
+目前ECM只对Unix系统做了Bash命令的支持,即只支持Linux系统执行该启动脚本。
+
+启动前,会通过sudo命令,切换到对应的请求用户去执行该脚本,确保启动用户(即JVM用户)为Client端的请求用户。
+
+执行该启动脚本后,ECM会实时监听脚本的执行状态和执行日志,一旦执行状态返回非0,则立马向LinkisManager汇报EngineConn启动失败,整个流程完成;否则则一直监听启动脚本的日志和状态,直到该脚本执行完成。
+
+## 三、EngineConn初始化
+
+ECM执行了EngineConn的启动脚本后,EngineConn微服务正式启动。
+
+名词解释:
+
+- EngineConn微服务:指包含了一个EngineConn、一个或多个Executor,用于对计算任务提供计算能力的实际微服务。我们说的新增一个EngineConn,其实指的就是新增一个EngineConn微服务。
+
+- EngineConn:引擎连接器,是与底层计算存储引擎的实际连接单元,包含了与实际引擎的会话信息。它与Executor的差别,是EngineConn只是起到一个连接、一个客户端的作用,并不真正的去执行计算。如SparkEngineConn,其会话信息为SparkSession。
+
+- Executor:执行器,作为真正的计算存储场景执行器,是实际的计算存储逻辑执行单元,对EngineConn各种能力的具体抽象,提供交互式执行、订阅式执行、响应式执行等多种不同的架构能力。
+
+EngineConn微服务的初始化一般分为三个阶段:
+
+1. 初始化具体引擎的EngineConn。先通过Java main方法的命令行参数,封装出一个包含了相关标签信息、启动信息和参数信息的EngineCreationContext,通过EngineCreationContext初始化EngineConn,完成EngineConn与底层Engine的连接建立,如:SparkEngineConn会在该阶段初始化一个SparkSession,用于与一个Spark application建立了连通关系。
+
+2. 初始化Executor。EngineConn初始化之后,接下来会根据实际的使用场景,初始化对应的Executor,为接下来的用户使用,提供服务能力。比如:交互式计算场景的SparkEngineConn,会初始化一系列可以用于提交执行SQL、PySpark、Scala代码能力的Executor,支持Client往该SparkEngineConn提交执行SQL、PySpark、Scala等代码。
+
+3. 定时向LinkisManager汇报心跳,并等待EngineConn结束退出。当EngineConn对应的底层引擎异常、或是超过最大空闲时间、或是Executor执行完成、或是用户手动kill时,该EngineConn自动结束退出。
+
+----
+
+到了这里,EngineConn的新增流程就基本结束了,最后我们再来总结一下EngineConn的新增流程:
+
+- 客户端向LinkisManager发起新增EngineConn的请求;
+
+- LinkisManager校验参数合法性,先是根据标签选择合适的ECM,再根据用户请求确认本次新增EngineConn所需的资源,向LinkisManager的RM模块申请资源,申请通过后要求ECM按要求启动一个新的EngineConn;
+
+- ECM先请求EngineConnPluginServer获取一个包含了启动一个EngineConn所需的BML物料、环境变量、ECM本地必需环境变量、启动命令等信息的EngineConnLaunchRequest,然后封装出EngineConn的启动脚本,最后执行启动脚本,启动该EngineConn;
+
+- EngineConn初始化具体引擎的EngineConn,然后根据实际的使用场景,初始化对应的Executor,为接下来的用户使用,提供服务能力。最后定时向LinkisManager汇报心跳,等待正常结束或被用户终止。
diff --git a/src/pages/blog/blogdata_en.js b/src/pages/blog/blogdata_en.js
new file mode 100644
index 0000000..9972d95
--- /dev/null
+++ b/src/pages/blog/blogdata_en.js
@@ -0,0 +1,13 @@
+const list =
+    [{
+        "id":"AddEngineConn",
+        "title": "Born at China’s WeBank, now incubating in the ASF - Introducing Apache Linkis",
+        "author": "enjoyyin",
+        "createTime": "2021-10-14",
+        "summary": "Guangsheng Chen, the founder of Apache EventMesh, has been buzzing since the project was welcomed into the Apache Software Foundation (ASF)’s incubator in February 2021. There’s a growing community supporting work on the open source software — used to decouple the application",
+        "readCost": "5 min",
+        "tag": "share",
+         "ref":"AddEngineConn"
+    }]
+
+export default list
diff --git a/src/pages/blog/blogdata_zh.js b/src/pages/blog/blogdata_zh.js
new file mode 100644
index 0000000..9cdd71f
--- /dev/null
+++ b/src/pages/blog/blogdata_zh.js
@@ -0,0 +1,13 @@
+const list =
+    [{
+        "id":"AddEngineConn",
+        "title": "測試",
+        "author": "新明",
+        "createTime": "2021-10-14",
+        "summary": "Guangsheng Chen, the founder of Apache EventMesh, has been buzzing since the project was welcomed into the Apache Software Foundation (ASF)’s incubator in February 2021. There’s a growing community supporting work on the open source software — used to decouple the application",
+        "readCost": "5 min",
+        "tag": "share",
+         "ref":"AddEngineConn"
+    }]
+
+export default list
diff --git a/src/pages/blog/event.vue b/src/pages/blog/event.vue
index 6de9d72..0c33a70 100644
--- a/src/pages/blog/event.vue
+++ b/src/pages/blog/event.vue
@@ -1,35 +1,38 @@
 <template>
   <div class="ctn-block reading-area blog-ctn">
     <main class="main-content">
-      <h1 class="blog-title">Born at China’s WeBank, now incubating in the ASF - Introducing Apache Linkis</h1>
+      <main class="main-content">
+        <docEn v-if="lang === 'en'"></docEn>
+        <docZh ></docZh>
+        <component :is="optionComponent"></component>
+      </main>
+<!--      <h1 class="blog-title">Born at China’s WeBank, now incubating in the ASF - Introducing Apache Linkis</h1>-->
       <!-- <div class="blog-info seperator"><span class="info-item">enjoyyin</span><span class="info-item">2021-9-2</span></div>
       <div class="blog-info seperator"><span class="info-item">5 min read</span><span class="info-item">tag</span></div> -->
     </main>
-    <div class="side-bar">
-      <router-link :to="doc.link" class="bar-item" v-for="(doc,index) in docs" :key="index">{{doc.title}}
-        <router-link :to="children.link" class="bar-item" v-for="(children,cindex) in doc.children" :key="cindex">
-          {{children.title}}
-        </router-link>
-      </router-link>
-    </div>
+<!--    <div class="side-bar">-->
+<!--      <router-link :to="doc.link" class="bar-item" v-for="(doc,index) in docs" :key="index">{{doc.title}}-->
+<!--        <router-link :to="children.link" class="bar-item" v-for="(children,cindex) in doc.children" :key="cindex">-->
+<!--          {{children.title}}-->
+<!--        </router-link>-->
+<!--      </router-link>-->
+<!--    </div>-->
   </div>
 </template>
-<script setup>
-  const docs = [{
-    title: '部署文档',
-    link: '/docs/deploy/linkis',
-    children: [{
-      title: '快速部署 Linkis1.0',
-      link: '/docs/deploy/linkis',
-    }, {
-      title: '快速安装 EngineConnPlugin 引擎插件',
-      link: '/docs/deploy/engins',
-    }, {
-      title: 'Linkis1.0 分布式部署手册',
-      link: '/docs/deploy/distributed',
-    }, {
-      title: 'Linkis1.0 安装包目录层级结构详解',
-      link: '/docs/deploy/structure',
-    }]
-  }, ];
-</script>
\ No newline at end of file
+<script >
+  import { defineAsyncComponent } from "vue";
+  export default {
+    computed: {
+          optionComponent() {
+              const id=this.$route.query.id;
+              const lang =localStorage.getItem('locale')=="en"?"en":"zh";
+              const path="./"+id+"_"+lang+".md";
+              console.log(path);
+              return defineAsyncComponent(() =>
+                  import(path)
+              );
+          }
+      }
+
+  }
+</script>
diff --git a/src/pages/blog/index.vue b/src/pages/blog/index.vue
index 072887c..d900c84 100644
--- a/src/pages/blog/index.vue
+++ b/src/pages/blog/index.vue
@@ -1,38 +1,64 @@
 <template>
-  <div class="ctn-block reading-area blog-ctn">
-    <main class="main-content">
-      <ul class="blog-list">
-        <li class="blog-item">
-          <h1 class="blog-title">Born at China’s WeBank, now incubating in the ASF - Introducing Apache Linkis</h1>
-          <div class="blog-info">
-            <span class="info-item">enjoyyin</span>
-            <span class="info-item sperator">|</span>
-            <span class="info-item">2021-9-2</span>
-          </div>
-          <p class="blog-preview">Guangsheng Chen, the founder of Apache EventMesh, has been buzzing since the project was welcomed into the Apache Software Foundation (ASF)’s incubator in February 2021. There’s a growing community supporting work on the open source software — used to decouple the application</p>
-          <div class="blog-info seperator"><span class="info-item">5 min read</span><span class="info-item">tag</span></div>
-          <router-link to="/blog/event" class="corner-botton blue">Read More</router-link>
-        </li>
-      </ul>
-    </main>
-  </div>
+    <div class="ctn-block reading-area blog-ctn">
+        <main class="main-content">
+            <ul class="blog-list">{{lang}}
+                <li v-for="item in jsonData" class="blog-item">
+                    <h1 class="blog-title">{{item.title}}</h1>
+                    <div class="blog-info">
+                        <span class="info-item">{{item.author}}</span>
+                        <span class="info-item sperator">|</span>
+                        <span class="info-item">{{item.createTime}}</span>
+                    </div>
+                    <p class="blog-preview">
+                        {{item.summary}}</p>
+                    <div class="blog-info seperator"><span class="info-item">{{item.readCost}}</span><span
+                            class="info-item">{{item.tag}}</span></div>
+                    <router-link :to='"/blog/event?id="+item.id' class="corner-botton blue">{{$t('message.common.read_more')}}</router-link>
+                </li>
+            </ul>
+        </main>
+    </div>
 </template>
 <style lang="less" scoped>
-  .blog-ctn {
-    .blog-item{
-      position: relative;
-      padding: 30px;
-      margin-bottom: 20px;
-      background: rgba(15,18,34,0.03);
-      border-radius: 8px;
-      .blog-preview{
-        text-align: justify;
+    .blog-ctn {
+        .blog-item {
+            position: relative;
+            padding: 30px;
+            margin-bottom: 20px;
+            background: rgba(15, 18, 34, 0.03);
+            border-radius: 8px;
+
+            .blog-preview {
+                text-align: justify;
+            }
+
+            .corner-botton {
+                position: absolute;
+                right: 30px;
+                bottom: 30px;
+            }
+        }
+    }
+</style>
+
+<script >
+  import  list_en from "./blogdata_en.js";
+  import  list_zh from "./blogdata_zh.js";
+
+  export default {
+    data() {
+      return {
+        "jsonData": null
       }
-      .corner-botton{
-        position: absolute;
-        right: 30px;
-        bottom: 30px;
+    },
+    created() {
+      const lang = localStorage.getItem('locale');
+      if (lang === "en") {
+        this.jsonData = list_en;
+      } else {
+        this.jsonData = list_zh;
       }
     }
+
   }
-</style>
\ No newline at end of file
+</script>
diff --git a/src/pages/faq/index.vue b/src/pages/faq/index.vue
index 1e50e87..a7782df 100644
--- a/src/pages/faq/index.vue
+++ b/src/pages/faq/index.vue
@@ -11,30 +11,30 @@
     </main>
   </div>
 </template>
-<style lang="less">
-  .reading-area {
-    display: flex;
-    padding: 60px 0;
-    min-height: 600px;
+<!--<style lang="less">-->
+<!--  .reading-area {-->
+<!--    display: flex;-->
+<!--    padding: 60px 0;-->
+<!--    min-height: 600px;-->
 
-    .main-content {
-      width: 1200px;
-      padding: 30px;
-    }
+<!--    .main-content {-->
+<!--      width: 1200px;-->
+<!--      padding: 30px;-->
+<!--    }-->
 
-    .side-bar {
-      flex: 1;
-      padding: 18px 0;
-      border-left: 1px solid #eaecef;
+<!--    .side-bar {-->
+<!--      flex: 1;-->
+<!--      padding: 18px 0;-->
+<!--      border-left: 1px solid #eaecef;-->
 
-      .bar-item {
-        display: block;
-        padding: 5px 18px;
-        color: #4A4A4A;
-      }
-    }
-  }
-</style>
+<!--      .bar-item {-->
+<!--        display: block;-->
+<!--        padding: 5px 18px;-->
+<!--        color: #4A4A4A;-->
+<!--      }-->
+<!--    }-->
+<!--  }-->
+<!--</style>-->
 <script setup>
   import { ref } from "vue";
 
diff --git a/src/pages/home.vue b/src/pages/home.vue
index bc76c61..8876db3 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -1,148 +1,80 @@
 <template>
-  <div v-if="lang === 'en'" class="ctn-block home-page">
+  <div class="ctn-block home-page">
     <div class="banner text-center">
       <h1 class="home-title"><span class="apache">Apache</span> <span class="linkis">Linkis</span> <span class="badge">Incubating</span></h1>
       <p class="home-desc">{{$t('message.home.banner.slogan')}}</p>
       <div class="botton-row center">
-        <a href="/" class="corner-botton black">Get Started</a>
-        <a href="/" class="corner-botton white">GitHub</a>
+        <a href="/#/docs/deploy/linkis" class="corner-botton black">{{$t('message.common.get_start')}}</a>
+        <a :href="systemConfiguration.github.projectUrl" class="corner-botton white">GitHub</a>
       </div>
     </div>
-    <h1 class="home-block-title text-center">Computation Governance Concept</h1>
+    <h1 class="home-block-title text-center">{{$t('message.home.introduce.title')}}</h1>
     <div class="concept home-block">
       <div class="concept-item">
-        <h3 class="concept-title">Before</h3>
-        <p class="home-paragraph">Each upper application directly connects to and accesses various underlying engines in a tightly coupled way, which makes big data platform a complex network architecture.</p>
+        <h3 class="concept-title">{{$t('message.home.introduce.before')}}</h3>
+        <p class="home-paragraph">{{$t('message.home.introduce.before_text')}}
+
+        </p>
         <img src="../assets/home/before_linkis_en.png" alt="before" class="concept-image">
       </div>
       <div class="concept-item">
-        <h3 class="concept-title">After</h3>
-        <p class="home-paragraph">Build a common layer of "computation middleware" between the numerous upper-layer applications and the countless underlying engines to resolve these complex connection problems in a standardized reusable way</p>
-        <img src="../assets/home/after_linkis_en.png" alt="before" class="concept-image">
+        <h3 class="concept-title">{{$t('message.home.introduce.after')}}</h3>
+        <p class="home-paragraph">{{$t('message.home.introduce.after_text')}}</p>
+        <img src="../assets/home/after_linkis_en.png" alt="after" class="concept-image">
       </div>
     </div>
     <div class="description home-block">
       <div class="description-content">
-        <h1 class="home-block-title">Description</h1>
-        <p class="home-paragraph">Linkis provides standardized interfaces (REST, JDBC, WebSocket etc.) to easily connect to various underlying engines (Spark, Presto, Flink, etc.), and acts as a proxy between the upper applications layer and underlying engines layer. </p>
-        <p class="home-paragraph">Linkis is able to facilitate the connectivity, governance and orchestration capabilities of different kind of engines like OLAP, OLTP (developing), Streaming, and handle all these "computation governance" affairs in a standardized reusable way.</p>
+        <h1 class="home-block-title">{{$t('message.common.description')}}</h1>
+        <p class="home-paragraph">{{$t('message.home.description.paragraph1')}}
+        </p>
+        <p class="home-paragraph">{{$t('message.home.description.paragraph2')}}
+        </p>
         <div class="botton-row">
-          <a href="/" class="corner-botton blue">Learn More</a>
+          <a href="/#/docs/architecture/DifferenceBetween1.0&0.x" class="corner-botton blue">{{$t('message.common.learn_more')}}</a>
         </div>
       </div>
       <img src="../assets/home/description.png" alt="description" class="description-image">
     </div>
-    <h1 class="home-block-title text-center">Core Features</h1>
-    <div class="features home-block">
-      <div class="feature-item">
-        <div class="item-content">
-          <h3 class="item-title">Connectivity</h3>
-          <p class="item-desc">Simplify the operation environment; decouple the upper and lower layers, which make the upper layer insensitive when bottom layers changed</p>
-        </div>
-      </div>
-      <div class="feature-item">
-        <div class="item-content">
-          <h3 class="item-title">Scalability</h3>
-          <p class="item-desc">Distributed microservice architecture with great scalability and extensibility; quickly integrate with the new underlying engine</p>
-        </div>
-      </div>
-      <div class="feature-item">
-        <div class="item-content">
-          <h3 class="item-title">Controllability</h3>
-          <p class="item-desc">Converge engine entrance, unify identity verification, high-risk prevention and control, audit records; label-based multi-level refined resource control and recovery capabilities</p>
-        </div>
-      </div>
-      <div class="feature-item">
-        <div class="item-content">
-          <h3 class="item-title">Orchestration</h3>
-          <p class="item-desc">Computing strategy design based on active-active, mixed computing, transcation Orchestrator Service</p>
-        </div>
-      </div>
-      <div class="feature-item">
-        <div class="item-content">
-          <h3 class="item-title">Reusability</h3>
-          <p class="item-desc">Highly reduced the back-end development workload of upper-level applications development; Swiftly and efficiently build a data platform tool suite based on Linkis</p>
-        </div>
-      </div>
-    </div>
-    <h1 class="home-block-title text-center">Our Users</h1>
-    <div class="show-case home-block">
-      <div class="case-item"></div>
-      <div class="case-item"></div>
-      <div class="case-item"></div>
-      <div class="case-item"></div>
-      <div class="case-item"></div>
-      <div class="case-item"></div>
-      <div class="case-item"></div>
-    </div>
-  </div>
-  <div v-else class="ctn-block home-page">
-    <div class="banner text-center">
-      <h1 class="home-title"><span class="apache">Apache</span> <span class="linkis">Linkis</span> <span class="badge">Incubating</span></h1>
-      <p class="home-desc">{{$t('message.home.banner.slogan')}}</p>
-      <div class="botton-row center">
-        <a href="/" class="corner-botton black">开始</a>
-        <a href="/" class="corner-botton white">GitHub</a>
-      </div>
-    </div>
-    <h1 class="home-block-title text-center">计算治理理念</h1>
-    <div class="concept home-block">
-      <div class="concept-item">
-        <h3 class="concept-title">没有Linkis之前</h3>
-        <p class="home-paragraph">每个上层应用以紧耦合的方式直接连接和访问各种底层引擎,这使得大数据平台成为一个复杂的网络架构</p>
-        <img src="../assets/home/before_linkis_zh.png" alt="before" class="concept-image">
-      </div>
-      <div class="concept-item">
-        <h3 class="concept-title">有Linkis之后</h3>
-        <p class="home-paragraph">在丰富的上层应用和丰富的底层引擎之间构建一个公共的“计算中间件”层,以标准化的可复用方式解决这些复杂的连接问题</p>
-       <img src="../assets/home/after_linkis_zh.png" alt="before" class="concept-image">
-      </div>
-    </div>
-    <div class="description home-block">
-      <div class="description-content">
-        <h1 class="home-block-title">描述</h1>
-        <p class="home-paragraph">Linkis 提供标准化接口(REST、JDBC、WebSocket 等),方便连接各种底层引擎(Spark、Presto、Flink 等),充当上层应用层和底层引擎层之间的代理</p>
-        <p class="home-paragraph">Linkis 能够促进 OLAP、OLTP(开发)、Streaming 等不同类型引擎的连接、治理和编排能力,并以标准化的可重用方式处理所有这些“计算治理”事务.</p>
-        <div class="botton-row">
-          <a href="/" class="corner-botton blue">了解更多</a>
-        </div>
-      </div>
-     <img src="../assets/home/description.png" alt="description" class="description-image">
-    </div>
-    <h1 class="home-block-title text-center">核心功能</h1>
+    <h1 class="home-block-title text-center">{{$t('message.common.core_features')}}</h1>
     <div class="features home-block">
       <div class="feature-item">
         <div class="item-content">
-          <h3 class="item-title">连通性</h3>
-          <p class="item-desc">简化操作环境;上层和下层解耦,使上层在底层变化时不敏感</p>
+          <h3 class="item-title">{{$t('message.common.connectivity')}}</h3>
+          <p class="item-desc">{{$t('message.home.core.connectivity')}}
+          </p>
         </div>
       </div>
       <div class="feature-item">
         <div class="item-content">
-          <h3 class="item-title">可扩展性</h3>
-          <p class="item-desc">分布式微服务架构,具有很好的可伸缩性和扩展性;快速与新的底层引擎集成</p>
+          <h3 class="item-title">{{$t('message.common.scalability')}}</h3>
+          <p class="item-desc">{{$t('message.home.core.scalability')}}
+          </p>
         </div>
       </div>
       <div class="feature-item">
         <div class="item-content">
-          <h3 class="item-title">可控性</h3>
-          <p class="item-desc">融合引擎入口,统一身份验证,高风险防控,审计记录;基于标签的多级精细化资源控制和恢复能力</p>
+          <h3 class="item-title">{{$t('message.common.controllability')}}</h3>
+          <p class="item-desc">{{$t('message.home.core.controllability')}}
+          </p>
         </div>
       </div>
       <div class="feature-item">
         <div class="item-content">
-          <h3 class="item-title">编排</h3>
-          <p class="item-desc">基于双活、混合计算、事务Orchestrator服务的计算策略设计</p>
+          <h3 class="item-title">{{$t('message.common.orchestration')}}</h3>
+          <p class="item-desc">{{$t('message.home.core.orchestration')}}
+          </p>
         </div>
       </div>
       <div class="feature-item">
         <div class="item-content">
-          <h3 class="item-title">可复用性</h3>
-          <p class="item-desc">大大减少了上层应用开发的后端开发工作量;可基于Linkis快速高效搭建数据平台工具套件</p>
+          <h3 class="item-title">{{$t('message.common.reusability')}}</h3>
+          <p class="item-desc">{{$t('message.home.core.reusability')}}
+          </p>
         </div>
       </div>
     </div>
-    <h1 class="home-block-title text-center">我们的用户</h1>
+    <h1 class="home-block-title text-center">{{$t('message.common.our_users')}}</h1>
     <div class="show-case home-block">
       <div class="case-item"></div>
       <div class="case-item"></div>
@@ -289,6 +221,7 @@
 </style>
 <script setup>
   import { ref } from "vue"
+  import  systemConfiguration from  "../js/config"
   // 初始化语言
   const lang = ref(localStorage.getItem('locale') || 'en');
 </script>
diff --git a/src/pages/team.vue b/src/pages/team.vue
deleted file mode 100644
index 1c6e49e..0000000
--- a/src/pages/team.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <div class="ctn-block team-page">
-    <h3 class="team-title">PMC</h3>
-    <p class="team-desc">Use the links below to download the Apache Linkis (Incubating) Releases. See all Linkis releases in Github release page.</p>
-    <ul class="character-list">
-      <li class="character-item text-center">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item text-center">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item text-center">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item text-center">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item text-center">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item text-center">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item text-center">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-    </ul>
-    <h3 class="team-title">Committer</h3>
-    <p class="team-desc">Use the links below to download the Apache Linkis (Incubating) Releases. See all Linkis releases in Github release page.</p>
-    <ul class="character-list committer">
-      <li class="character-item">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-      <li class="character-item">
-        <div class="character-avatar"></div>
-        <div class="character-desc">
-          <h3 class="character-name">lululu</h3>
-          <a href="" class="character-link">@lululu</a>
-        </div>
-      </li>
-    </ul>
-    <h3 class="team-title">Contributors</h3>
-    <p class="team-desc">Use the links below to download the Apache Linkis (Incubating) Releases. See all Linkis releases in Github release page.</p>
-    <ul class="contributor-list">
-      <li class="contributor-item">apache/apisix-go-plugin-runner</li>
-    </ul>
-  </div>
-</template>
-<style lang="less" scoped>
-@import url('/src/style/variable.less');
-.team-page{
-  padding-top: 60px;
-  .team-title{
-    font-size: 24px;
-    line-height: 34px;
-  }
-  .team-desc{
-    color: @enhance-color;
-    font-weight: 400;
-  }
-  .contributor-list{
-    padding: 20px 0 40px;
-    .contributor-item{
-      display: inline-block;
-      margin-right: 20px;
-      margin-bottom: 20px;
-      padding: 16px 16px 16px 48px;
-      background-size: 24px;
-      background-position: 16px center;
-      background-repeat: no-repeat;
-      color: @enhance-color;
-      border: 1px solid rgba(15,18,34,0.20);
-      border-radius: 4px;
-      &:last-child{
-        margin-right: 0;
-      }
-    }
-  }
-  .character-list {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-column-gap: 20px;
-    grid-row-gap: 20px;
-    padding: 20px 0 60px;
-    &.committer{
-      grid-template-columns: repeat(5, 224px);
-      .character-item{
-        display: flex;
-        padding: 20px;
-        align-items: center;
-        .character-avatar{
-          width: 60px;
-          height: 60px;
-          margin: 0;
-        }
-        .character-desc{
-          flex: 1;
-          padding-left: 16px;
-          min-width: 0;
-        }
-      }
-    }
-    .character-item{
-      border: 1px solid rgba(15,18,34,0.20);
-      border-radius: 4px;
-      // 辅助处理文字溢出
-      min-width: 0;
-      padding: 0 20px 20px;
-      .character-avatar{
-        width: 120px;
-        height: 120px;
-        margin: 30px auto 10px;
-        background: #D8D8D8;
-        border-radius: 50%;
-      }
-      .character-name{
-        color: @enhance-color;
-        line-height: 24px;
-        font-size: 16px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .character-link{
-        color: rgba(15,18,34,0.65);
-        font-weight: 400;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-}
-</style>
-
diff --git a/src/pages/team/team.vue b/src/pages/team/team.vue
new file mode 100644
index 0000000..1dd51a1
--- /dev/null
+++ b/src/pages/team/team.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="ctn-block team-page">
+    <p>
+      {{jsonData.info.desc}}
+    </p>
+
+    <h3 class="team-title">PMC</h3>
+<!--    <p class="team-desc">Use the links below to download the Apache Linkis (Incubating) Releases. See all Linkis releases in Github release page.</p>-->
+    <ul  class="character-list">
+      <li v-for="item in jsonData.list" class="character-item text-center">
+        <img class="character-avatar" :src="item.avatarUrl" :alt="item.name"/>
+        <div class="character-desc">
+          <h3 class="character-name"><a href="{{utils.concatStr('https://github.com/','',item.githubId)}}" class="character-name">{{item.name}}</a></h3>
+        </div>
+      </li>
+    </ul>
+    <p v-html="jsonData.info.tip"></p>
+    <!--   <h3 class="team-title">Contributors</h3>
+     <p class="team-desc">Use the links below to download the Apache Linkis (Incubating) Releases. See all Linkis releases in Github release page.</p>
+    ]<ul class="contributor-list">
+      <li class="contributor-item">apache/apisix-go-plugin-runner</li>
+     </ul>-->
+  </div>
+</template>
+
+<script >
+   import utils  from "../../js/utils";
+   import  list_en from "./teamdata_en.js";
+   import  list_zh from "./teamdata_zh.js";
+
+    export default {
+        data() {
+            return {
+                utils,
+                "jsonData": null
+            }
+        },
+        created() {
+            const lang = localStorage.getItem('locale');
+            if (lang === "en") {
+                this.jsonData = list_en;
+            } else {
+                this.jsonData = list_zh;
+            }
+        }
+
+    }
+</script>
+
+
+
+<style lang="less" scoped>
+@import url('/src/style/variable.less');
+.team-page{
+  padding-top: 60px;
+  .team-title{
+    font-size: 24px;
+    line-height: 34px;
+  }
+  .team-desc{
+    color: @enhance-color;
+    font-weight: 400;
+  }
+  .contributor-list{
+    padding: 20px 0 40px;
+    .contributor-item{
+      display: inline-block;
+      margin-right: 20px;
+      margin-bottom: 20px;
+      padding: 16px 16px 16px 48px;
+      background-size: 24px;
+      background-position: 16px center;
+      background-repeat: no-repeat;
+      color: @enhance-color;
+      border: 1px solid rgba(15,18,34,0.20);
+      border-radius: 4px;
+      &:last-child{
+        margin-right: 0;
+      }
+    }
+  }
+  .character-list {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+    padding: 20px 0 60px;
+    &.committer{
+      grid-template-columns: repeat(5, 224px);
+      .character-item{
+        display: flex;
+        padding: 20px;
+        align-items: center;
+        .character-avatar{
+          width: 60px;
+          height: 60px;
+          margin: 0;
+        }
+        .character-desc{
+          flex: 1;
+          padding-left: 16px;
+          min-width: 0;
+        }
+      }
+    }
+    .character-item{
+      border: 1px solid rgba(15,18,34,0.20);
+      border-radius: 4px;
+      // 辅助处理文字溢出
+      min-width: 0;
+      padding: 0 20px 20px;
+      .character-avatar{
+        width: 120px;
+        height: 120px;
+        margin: 30px auto 10px;
+        background: #D8D8D8;
+        border-radius: 50%;
+      }
+      .character-name{
+        color: @enhance-color;
+        line-height: 24px;
+        font-size: 16px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .character-link{
+        color: rgba(15,18,34,0.65);
+        font-weight: 400;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+</style>
+
+
+
diff --git a/src/pages/team/teamdata_en.js b/src/pages/team/teamdata_en.js
new file mode 100644
index 0000000..e61ddb0
--- /dev/null
+++ b/src/pages/team/teamdata_en.js
@@ -0,0 +1,131 @@
+const data = {
+    info: {
+        desc: "The Linkis team is comprised of Members and Contributors. Members have direct access to the source of Linkis project and actively evolve the code-base. Contributors improve the project through submission of patches and suggestions to the Members. The number of Contributors to the project is unbounded. All contributions to Linkis are greatly appreciated, whether for trivial cleanups, big new features or other material rewards.",
+        tip: "If you want to contribute, you can go directly to the <a href=\"https://github.com/apache/incubator-linkis/\" target=\"_blank\" rel=\"noopener noreferrer\">Apache Linkis</a> and fork it."
+    },
+    list: [
+        {
+            "name": "Shuai Di",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/11204592?s=60&v=4",
+            "githubId": "sargentti",
+            "gitUrl": "https://github.com/sargentti",
+            "apacheId": "",
+            "email": "shuaidi1024@gmail.com",
+        },
+        {
+            "name": "Qiang Yin",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/13635442?s=60&v=4",
+            "githubId": "wushengyeyouya",
+            "gitUrl": "https://github.com/wushengyeyouya",
+            "apacheId": "",
+            "email": "enjoyyin91@gmail.com",
+        },
+        {
+            "name": "Heping Wang",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/11496700?s=60&v=4",
+            "githubId": "peacewong",
+            "gitUrl": "https://github.com/peacewong",
+            "apacheId": "",
+            "email": "wpeace1212@gmail.com",
+        },
+        {
+            "name": "Yongkun Yang",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/11203920?s=60&v=4",
+            "githubId": "Alexkun",
+            "gitUrl": "https://github.com/Alexkun",
+            "apacheId": "",
+            "email": "wimkunkun@gmail.com",
+        },
+        {
+            "name": "Zhiyue Yang",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/26363549?s=60&v=4",
+            "githubId": "yangzhiyue",
+            "gitUrl": "https://github.com/yangzhiyue",
+            "apacheId": "",
+            "email": "zjyzy19920513@gmail.com",
+        },
+        {
+            "name": "You Liu",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/12731931?s=60&v=4",
+            "githubId": "liuyou2",
+            "gitUrl": "https://github.com/liuyou2",
+            "apacheId": "",
+            "email": "liuyou181020@gmail.com",
+        },
+        {
+            "name": "Deyi Hua",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/13026864?s=60&v=4",
+            "githubId": "Davidhua1996",
+            "gitUrl": "https://github.com/Davidhua1996",
+            "apacheId": "",
+            "email": "david_hua1996@gmail.com",
+        },
+        {
+            "name": "Le Bai",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/13026864?s=60&v=4",
+            "githubId": "leeebai",
+            "gitUrl": "https://github.com/leeebai",
+            "apacheId": "",
+            "email": "blgg931026@gmail.com",
+        },
+        {
+            "name": "Xiaogang Wang",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39912100?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "Adamyuanyuan@gmail.com",
+        },
+        {
+            "name": "Hui Zhu",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39912100?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "huashuizhuhui@gmail.com",
+        },
+        {
+            "name": "Zhen Wang",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39912100?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "wangzhen077@gmail.com",
+        },
+        {
+            "name": "Rong Zhang",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39478871?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/brianzhangrong",
+            "apacheId": "",
+            "email": "brian.rongzhang@gmail.com",
+        },
+        {
+            "name": "Xiaohua Yi",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39478871?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "yixiaohuamax@gmail.com",
+        },
+        {
+            "name": "Ke Zhou",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/5548534?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "bleachzk@gmail.com",
+        },
+
+        {
+            "name": "Jian Xie",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/5548534?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "Jackyxxie@gmail.com",
+        }
+    ]
+}
+
+export default data
diff --git a/src/pages/team/teamdata_zh.js b/src/pages/team/teamdata_zh.js
new file mode 100644
index 0000000..75a96a5
--- /dev/null
+++ b/src/pages/team/teamdata_zh.js
@@ -0,0 +1,131 @@
+const data = {
+    info: {
+        desc: "Linkis 团队由成员和贡献者组成。 成员可以直接访问 Linkis 项目的源代码并积极开发代码库。 贡献者通过提交补丁和向成员提供建议来改进项目。 项目的贡献者数量不限。 非常感谢对 Linkis 的所有贡献,无论是琐碎的修改或清理、重大的新特性新功能,还是其他的物质奖励。",
+        tip:  '如果你想参与贡献,可以直接去<a href="https://github.com/apache/incubator-linkis" target="_blank" rel="noopener noreferrer" >Apache Linkis</a> 并fork.'
+    },
+    list: [
+        {
+            "name": "邸帅",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/11204592?s=60&v=4",
+            "githubId": "sargentti",
+            "gitUrl": "https://github.com/sargentti",
+            "apacheId": "",
+            "email": "shuaidi1024@gmail.com",
+        },
+        {
+            "name": "尹强",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/13635442?s=60&v=4",
+            "githubId": "wushengyeyouya",
+            "gitUrl": "https://github.com/wushengyeyouya",
+            "apacheId": "",
+            "email": "enjoyyin91@gmail.com",
+        },
+        {
+            "name": "王和平",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/11496700?s=60&v=4",
+            "githubId": "peacewong",
+            "gitUrl": "https://github.com/peacewong",
+            "apacheId": "",
+            "email": "wpeace1212@gmail.com",
+        },
+        {
+            "name": "杨永坤",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/11203920?s=60&v=4",
+            "githubId": "Alexkun",
+            "gitUrl": "https://github.com/Alexkun",
+            "apacheId": "",
+            "email": "wimkunkun@gmail.com",
+        },
+        {
+            "name": "杨峙岳",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/26363549?s=60&v=4",
+            "githubId": "yangzhiyue",
+            "gitUrl": "https://github.com/yangzhiyue",
+            "apacheId": "",
+            "email": "zjyzy19920513@gmail.com",
+        },
+        {
+            "name": "刘有",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/12731931?s=60&v=4",
+            "githubId": "liuyou2",
+            "gitUrl": "https://github.com/liuyou2",
+            "apacheId": "",
+            "email": "liuyou181020@gmail.com",
+        },
+        {
+            "name": "华德义",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/13026864?s=60&v=4",
+            "githubId": "Davidhua1996",
+            "gitUrl": "https://github.com/Davidhua1996",
+            "apacheId": "",
+            "email": "david_hua1996@gmail.com",
+        },
+        {
+            "name": "白乐",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/13026864?s=60&v=4",
+            "githubId": "leeebai",
+            "gitUrl": "https://github.com/leeebai",
+            "apacheId": "",
+            "email": "blgg931026@gmail.com",
+        },
+        {
+            "name": "王小刚",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39912100?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "Adamyuanyuan@gmail.com",
+        },
+        {
+            "name": "Hui Zhu",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39912100?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "huashuizhuhui@gmail.com",
+        },
+        {
+            "name": "Zhen Wang",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39912100?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "wangzhen077@gmail.com",
+        },
+        {
+            "name": "Rong Zhang",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39478871?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/brianzhangrong",
+            "apacheId": "",
+            "email": "brian.rongzhang@gmail.com",
+        },
+        {
+            "name": "Xiaohua Yi",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/39478871?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "yixiaohuamax@gmail.com",
+        },
+        {
+            "name": "周可",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/5548534?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "bleachzk@gmail.com",
+        },
+
+        {
+            "name": "谢建",
+            "avatarUrl": "https://avatars.githubusercontent.com/u/5548534?s=60&v=4",
+            "githubId": "?",
+            "gitUrl": "https://github.com/?",
+            "apacheId": "",
+            "email": "Jackyxxie@gmail.com",
+        }
+    ]
+}
+
+export default data
diff --git a/src/router.js b/src/router.js
index a803698..50891a8 100644
--- a/src/router.js
+++ b/src/router.js
@@ -84,7 +84,7 @@ const routes = [{
   {
     path: '/team',
     name: 'team',
-    component: () => import( /* webpackChunkName: "group-team" */ './pages/team.vue')
+    component: () => import( /* webpackChunkName: "group-team" */ './pages/team/team.vue')
   },
 ]
 

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@linkis.apache.org
For additional commands, e-mail: commits-help@linkis.apache.org