add news page

assets/scss/news.scss

@@ -0,0 +1,91 @@
+@import 'variables';
+@import 'mixin';
+
+.section-1 {
+  position: relative;
+  padding-top: 138px;
+  padding-bottom: 100px;
+
+  .title-div {
+    text-align: center;
+  }
+
+  p {
+    margin: 12px auto 0;
+    letter-spacing: -0.04px;
+    color: #ffffff;
+  }
+}
+
+.section-2 {
+  padding-top: 60px;
+  padding-bottom: 70px;
+  background-color: #ffffff;
+  .news-div {
+    position: relative;
+    padding: 32px;
+    padding-right: 274px;
+    margin-bottom: 12px;
+    border-radius: 4px;
+    border: solid 1px rgba(145, 154, 163, 0.6);
+
+    @media only screen and (max-width: $mobile-max-width) {
+      padding: 10px;
+    }
+
+    h2 {
+      a {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 1.6;
+        color: #36435c;
+
+        &:hover {
+          color: #55bc8a;
+        }
+      }
+    }
+
+    p {
+      margin-top: 12px;
+      font-size: 16px;
+      line-height: 2;
+      color: #919aa3; 
+    }
+
+    img {
+      position: absolute;
+      top: 50%;
+      right: 32px;
+      transform: translateY(-50%);
+      max-width: 158px;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        display: none;
+      }
+    }
+  }
+
+  #pagination {
+    margin-top: 40px;
+    text-align: center;
+
+    li {
+      display: inline-block;
+      margin: 0 10px;
+    }
+
+    .disabled {
+      a {
+        color: #ccd3db;
+      }
+    }
+
+    .active {
+      a {
+        color: #55bc8a;
+      }
+    }
+  }
+
+}

config/_default/config.toml

@@ -112,11 +112,17 @@ name = "Community"
     URL = "partner/"
     weight = 3
 
+    [[languages.en.menu.main]]
+    parent = "Community"
+    name = "News"
+    URL = "news/"
+    weight = 4
+
     [[languages.en.menu.main]]
     parent = "Community"
     name = "RoadMap"
     URL = "https://github.com/kubesphere/kubesphere/blob/master/docs/roadmap.md"
-    weight = 4
+    weight = 5
 
 [languages.zh]
 weight = 2
@@ -203,17 +209,23 @@ name = "开源社区"
     URL = "partner/"
     weight = 3
 
+    [[languages.zh.menu.main]]
+    parent = "开源社区"
+    name = "动态"
+    URL = "news/"
+    weight = 4
+
     [[languages.zh.menu.main]]
     parent = "开源社区"
     name = "版本计划"
     URL = "https://github.com/kubesphere/kubesphere/blob/master/docs/roadmap.md"
-    weight = 4
+    weight = 5
 
     [[languages.zh.menu.main]]
     parent = "开源社区"
     name = "中国站"
     URL = "https://kubesphere.com.cn/"
-    weight = 5
+    weight = 6
 
 [[languages.zh.menu.main]]
 weight = 6

content/en/news/_index.md

@@ -0,0 +1,37 @@
+---
+title: "news"
+
+css: "scss/news.scss"
+
+section1:
+  title: news
+  content: This is KubeSphere News reports 
+  topImage: /images/news/news-top.jpg
+
+section2:
+  news:
+    - title: 谷歌开源的K8S太“难”用？青云推KubeSphere抢占容器市场
+      description: 青云QingCloud一边模仿Red Hat，一边想要吃掉单一生态的容器创业公司，云计算未来的竞争之路应该怎么走？
+      image: /images/news/tmtpost.jpg
+      link: ''
+    - title: 一把利剑，青云容器新品KubeSphere之六大核心功能
+      description: 一个基于 Kubernetes（K8S） 基础构建的企业级分布式多租户容器管理平台，是青云在今年Cloud Insight大会上推出7大年度新品的核心产品，它有哪些功能亮点？
+      image: /images/news/doit.jpg
+      link: ''
+    - title: KubeSphere：CNCF 容器新贵能否解决 K8s 的诸多问题？
+      description: 近日，KubeSphere 容器平台高级版 2.0 正式发布并加入开源组织 CNCF，这是否足以解决 Kubernetes 存在的诸多问题？
+      image: /images/news/info.jpg
+      link: ''
+    - title: 为什么说KubeSphere容器平台是云原生时代的“集大成者”？
+      description: 从定义来看，云原生意味着企业的应用程序要在云中，而不是在传统的数据中心。而CNCF(Cloud Native Computing Foundation 云原生计算基金会)则认为，使用开源软件堆栈进行容器化，这才是真正的云原生
+      image: /images/news/it168.jpg
+      link: ''
+    - title: 专访青云KubeSphere容器团队：我们为何不放过这个新赛道？
+      description: Kubernetes这一容器工具的发起者是远在美国山景城的谷歌，但眼下，这一技术正跨越太平洋，被中国的青云QingCloud做了更多优化升级。那么，其背后的团队是经过怎样曲折的过程才打磨成功这款产品？经历了多少故事？
+      image: /images/news/leifeng.jpg
+      link: ''
+    - title: 三问KubeSphere 容器平台有何过人之处？
+      description: 数字孪生、数字化、万物互联&5G、AI、区块链……层出不穷的新技术迎面而来，数字化转型也从1.0进入到了2.0时代，如何将生产、销售、运营等所有环节赋予数字力量，经由业务全面满足顾客所需，构建未来竞争优势，青云QingCloud深谙此道。
+      image: /images/news/ccid.jpg
+      link: ''
+---

content/zh/news/_index.md

@@ -0,0 +1,37 @@
+---
+title: "动态"
+
+css: "scss/news.scss"
+
+section1:
+  title: 动态
+  content: 为您分享KubeSphere 的最佳实践及媒体报道
+  topImage: /images/news/news-top.jpg
+
+section2:
+  news:
+    - title: 谷歌开源的K8S太“难”用？青云推KubeSphere抢占容器市场
+      description: 青云QingCloud一边模仿Red Hat，一边想要吃掉单一生态的容器创业公司，云计算未来的竞争之路应该怎么走？
+      image: /images/news/tmtpost.jpg
+      link: ''
+    - title: 一把利剑，青云容器新品KubeSphere之六大核心功能
+      description: 一个基于 Kubernetes（K8S） 基础构建的企业级分布式多租户容器管理平台，是青云在今年Cloud Insight大会上推出7大年度新品的核心产品，它有哪些功能亮点？
+      image: /images/news/doit.jpg
+      link: ''
+    - title: KubeSphere：CNCF 容器新贵能否解决 K8s 的诸多问题？
+      description: 近日，KubeSphere 容器平台高级版 2.0 正式发布并加入开源组织 CNCF，这是否足以解决 Kubernetes 存在的诸多问题？
+      image: /images/news/info.jpg
+      link: ''
+    - title: 为什么说KubeSphere容器平台是云原生时代的“集大成者”？
+      description: 从定义来看，云原生意味着企业的应用程序要在云中，而不是在传统的数据中心。而CNCF(Cloud Native Computing Foundation 云原生计算基金会)则认为，使用开源软件堆栈进行容器化，这才是真正的云原生
+      image: /images/news/it168.jpg
+      link: ''
+    - title: 专访青云KubeSphere容器团队：我们为何不放过这个新赛道？
+      description: Kubernetes这一容器工具的发起者是远在美国山景城的谷歌，但眼下，这一技术正跨越太平洋，被中国的青云QingCloud做了更多优化升级。那么，其背后的团队是经过怎样曲折的过程才打磨成功这款产品？经历了多少故事？
+      image: /images/news/leifeng.jpg
+      link: ''
+    - title: 三问KubeSphere 容器平台有何过人之处？
+      description: 数字孪生、数字化、万物互联&5G、AI、区块链……层出不穷的新技术迎面而来，数字化转型也从1.0进入到了2.0时代，如何将生产、销售、运营等所有环节赋予数字力量，经由业务全面满足顾客所需，构建未来竞争优势，青云QingCloud深谙此道。
+      image: /images/news/ccid.jpg
+      link: ''
+---

layouts/news/list.html

@@ -0,0 +1,74 @@
+{{ define "main" }}
+
+{{ with .Params.section1 }}
+<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
+    <div class="title-div common-layout">
+        <h1 class="title-center-h1">{{ .title }}</h1>
+        <p class="common-p">{{ .content }}</p>
+    </div>
+</section>
+{{ end }}
+
+{{ with .Params.section2 }}
+<section class="section-2">
+    <div class="common-layout">
+      <div class='news-list' data-origin='{{ .news | jsonify }}'>
+        {{ range .news }}
+        <div class="news-div">
+          <h2>
+            <a href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .title }}</a>
+          </h2>
+          <p>{{ .description }}</p>
+          <img src="{{ .image }}" alt="{{ .title }}">
+        </div>
+        {{ end }}
+      </div>
+      <div id='pagination'></div>
+    </div>
+</section>
+{{ end }}
+
+<script src='{{ "js/pagination.min.js" | relURL }}'></script>
+<script>
+    var createNews = function(news) {
+        var a = '<a href="' + news.link + '" target="_blank" rel="noopener noreferrer">' + news.title + '</a>'
+        var h2 = '<h2>' + a + '</h2>'
+        var p = '<p>' + news.description + '</p>'
+        var img = '<img src="' + news.image + '" alt="' + news.title + '">'
+        var s = '<div class="news-div">' + h2 + p + img + '</div>'
+        return s
+    }
+
+    var createNewsList = function(news) {
+        var result = ''
+        for (var i = 0; i < news.length; i++) {
+            var n = news[i]
+            var s = createNews(n)
+            result += s
+        }
+        return result
+    }
+
+    var initPagination = function(dataSource) {
+        $('#pagination').pagination({
+            dataSource: dataSource,
+            pageSize: 10,
+            prevText: '<<',
+            nextText: '>>',
+            callback: function(data, pagination) {
+                var newsList =createNewsList(data)
+                $('.news-list').empty().append(newsList)
+            }
+        })
+    }
+
+    var initNews = function() {
+        var news =  $('.news-list').data('origin')
+        initPagination(news)
+    }
+
+    initNews()
+
+</script>
+
+{{ end }}