diff --git a/assets/scss/learn-page.scss b/assets/scss/learn-page.scss new file mode 100644 index 000000000..4fdcdc513 --- /dev/null +++ b/assets/scss/learn-page.scss @@ -0,0 +1,274 @@ +@import "variables"; + +.navigation { + box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05); + background-image: linear-gradient(to bottom, rgba(134, 219, 162, 0.9), rgba(0, 170, 114, 0.9)); +} + +.section-1 { + padding-top: 98px; + @media only screen and (max-width: $mobile-max-width) { + padding-top: 128px; + } + span { + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.04px; + color: #3d3e49; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + a { + color: #3d3e49; + + &:hover { + color: #00aa72; + } + } + + &:last-child { + opacity: 0.6; + } + } +} + +.section-2 { + margin-top: 4px; + + .common-layout { + display: flex; + align-items: flex-start; + + .left { + position: relative; + box-sizing: border-box; + width: 781px; + padding: 20px; + background-color: #ffffff; + + iframe { + width: 100%; + height: 800px; + } + + & > video { + width: 100%; + margin-bottom: 10px; + outline: none; + } + + .date { + display: flex; + align-items: center; + font-size: 14px; + line-height: 1.43; + color: #919aa3; + + .time { + display: inline-block; + margin-right: 4px; + width: 14px; + height: 14px; + background-image: url("/images/learn/time.svg"); + } + } + + .pdf-div { + margin-top: 10px; + } + + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + padding: 10px; + + iframe { + height: 600px; + } + } + } + + .right { + box-sizing: border-box; + width: 368px; + padding: 24px; + max-height: 600px; + margin-left: 15px; + overflow: auto; + background-color: #ffffff; + + @media only screen and (max-width: $mobile-max-width) { + display: none; + } + + .lesson-div { + margin-top: 20px; + + &:first-child { + margin-top: 0; + } + + & > p { + position: relative; + padding-left: 9px; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + letter-spacing: -0.04px; + + &::before { + position: absolute; + top: 10px; + left: 0; + content: ""; + width: 4px; + height: 4px; + border-radius: 50%; + background-color: #36435c; + } + + a { + color: #36435c; + &:hover { + color: #55bc8a; + } + } + + .icon { + display: inline-block; + margin-left: 6px; + width: 12px; + height: 12px; + background-image: url("/images/learn/video.svg"); + } + + .play-span { + display: none; + height: 12px; + font-size: 0; + span { + display: inline-block; + width: 2px; + height: 100%; + margin-right: 2px; + background-color: #55bc8a; + } + } + + .playing { + display: inline-block; + span { + animation-name: playing; + animation-duration: 1s; + animation-timing-function: ease; + animation-delay: 0s; + animation-iteration-count: infinite; + + &:first-child { + animation-delay: 0.3s; + } + &:last-child { + animation-delay: 0.5s; + } + } + } + } + & > p.active { + a { + color: #55bc8a; + } + + &::before { + background-color: #55bc8a; + } + } + } + + .lesson-link-div { + margin-top: 10px; + display: flex; + a { + display: block; + box-sizing: border-box; + width: 100px; + height: 72px; + padding: 11px 20px 10px; + margin-left: 10px; + margin-right: 0; + font-size: 14px; + line-height: 24px; + text-align: center; + color: #8f94a1; + border-radius: 4px; + background-color: #f5f9fa; + border: solid 1px transparent; + + &:first-child { + margin-left: 0; + } + + &:hover { + border: solid 1px #4ca986; + } + + span { + display: inline-block; + width: 24px; + height: 24px; + } + } + + .active { + color: #00a971; + border: solid 1px #55bc8a; + background-color: #cdf6d5; + } + + .lesson { + span { + background-image: url("/images/learn/icon-image.svg"); + } + } + + .lesson.active { + span { + background-image: url("/images/learn/icon-image-active.svg"); + } + } + + .courseware { + span { + background-image: url("/images/learn/icon-ppt.svg"); + } + } + + .courseware.active { + span { + background-image: url("/images/learn/icon-ppt-active.svg"); + } + } + + .examination { + span { + background-image: url("/images/learn/icon-download.svg"); + } + } + + .examination.active { + span { + background-image: url("/images/learn/icon-download-active.svg"); + } + } + } + } + } +} + +@keyframes playing { + 0% { + height: 100%; + } + 50% { + height: 50%; + } + 100% { + height: 100%; + } +} \ No newline at end of file diff --git a/assets/scss/learn.scss b/assets/scss/learn.scss new file mode 100644 index 000000000..6e05c8998 --- /dev/null +++ b/assets/scss/learn.scss @@ -0,0 +1,501 @@ +@import 'variables'; +@import 'mixin'; + +h2 { + text-align: center; + text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1); + font-size: 32px; + font-weight: 600; + line-height: 1.5; + color: #3d3e49; +} + +.section-1 { + position: relative; + padding-top: 138px; + padding-bottom: 100px; + + .title-div { + text-align: center; + } + + p { + margin-top: 12px; + letter-spacing: -0.04px; + color: #ffffff; + line-height: 24px; + } +} + +.top-shadow { + box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05); +} + +.section-2 { + + & > div { + width: 100%; + background-color: #ffffff; + height: 48px; + z-index: 10; + } + + ul { + display: flex; + justify-content: center; + align-items: center; + height: 48px; + white-space: nowrap; + overflow: auto; + li { + margin: 0 25px; + } + + .active { + position: relative; + color: #00aa72; + + &::before { + content: ''; + position: absolute; + bottom: -16px; + left: 0; + right: 0; + height: 2px; + background-color: #00a971; + } + } + + a { + font-size: 16px; + font-weight: 600; + color: #36435c; + + &:hover { + color: #00aa72; + } + } + } +} + +.section-3 { + padding-top: 40px; + + .video-div { + position: relative; + margin-top: 80px; + padding: 30px 80px 30px 600px; + background-image: url('/images/learn/section3.png'); + + video { + position: absolute; + top: 50%; + left: 50px; + transform: translateY(-50%); + width: 500px; + height: 285px; + outline: none; + } + + p { + font-size: 14px; + line-height: 1.71; + color: #36435c; + } + + @media only screen and (max-width: $mobile-max-width) { + background-image: none; + padding: 0; + margin-top: 0px; + video { + position: relative; + width: 100%; + height: auto; + top: 0; + left: 0; + transform: none; + } + + p { + margin-top: 20px; + } + } + } +} + +.section-4 { + padding-top: 67px; + padding-bottom: 60px; + + .common-layout { + & > p { + margin: 40px auto; + width: 760px; + font-size: 14px; + line-height: 1.71; + color: #36435c; + + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + } + } + + ul { + font-size: 0; + overflow-x: auto; + white-space: nowrap; + + li { + position: relative; + display: inline-block; + box-sizing: border-box; + white-space: normal; + width: 323px; + height: 237px; + padding: 30px 20px 30px 62px; + margin-left: 70px; + font-size: 14px; + line-height: 1.71; + border-radius: 4px; + background-color: #ffffff; + + &:first-child { + margin-left: 50px; + } + + img { + position: absolute; + top: 20px; + left: -50px; + width: 100px; + height: 100px; + border-radius: 50%; + } + + .name { + font-size: 16px; + line-height: 1.5; + color: #36435c; + } + + .profession { + margin-top: 6px; + margin-bottom: 12px; + color: #a1a6ab; + } + + p { + color: #36435c; + @include block-ellipsis(4); + } + } + } + } +} + +.section-5 { + background-color: #ffffff; + padding-top: 62px; + padding-bottom: 60px; + + ul { + margin-top: 42px; + font-size: 0; + @media only screen and (max-width: $mobile-max-width) { + text-align: center; + } + li { + position: relative; + display: inline-block; + box-sizing: border-box; + width: 274px; + height: 153px; + padding: 30px; + font-size: 14px; + line-height: 2; + color: #36435c; + margin-left: 21px; + background-color: #f5f8f9; + &:first-child { + margin-left: 0; + } + + p { + @include block-ellipsis(3); + } + + img { + position: absolute; + right: 0; + bottom: 0; + } + + @media only screen and (max-width: $mobile-max-width) { + margin: 10px; + } + } + } +} + +.section-6 { + padding-top: 60px; + padding-bottom: 96px; + background-image: linear-gradient(151deg, #4a499a 15%, #8552c3 85%); + + h2 { + color: #ffffff; + } + + .level { + margin-top: 68px; + & > li { + position: relative; + padding: 50px 39px 20px 40px; + margin-bottom: 58px; + border-radius: 8px; + background-color: #ffffff; + + @media only screen and (max-width: $mobile-max-width) { + padding: 10px; + } + + &:last-child { + margin-bottom: 0; + } + + .title { + position: absolute; + top: -29px; + left: 58px; + padding: 17px 41px 17px 42px; + border-radius: 35px; + background-image: linear-gradient(87deg, #ecaf24 17%, #fff8cb 175%); + + @media only screen and (max-width: $mobile-max-width) { + padding: 10px 20px; + top: -20px; + left: 30px; + border-radius: 5px; + } + } + + table { + width: 100%; + text-align: left; + overflow: auto; + border-collapse: collapse; + th, td { + font-size: 14px; + line-height: 1.5; + padding: 15px 10px; + } + + thead { + background-color: #f0f5f2; + th { + font-weight: 600; + color: #3d3e49; + margin: 0; + + &:first-child { + padding-left: 38px; + width: 300px; + + @media only screen and (max-width: $mobile-max-width) { + padding-left: 0; + width: 60px; + } + } + } + } + + tbody { + tr { + td { + color: #36435c; + border-bottom: 1px solid #f0f5f2; + + &:first-child { + padding-left: 38px; + width: 300px; + + @media only screen and (max-width: $mobile-max-width) { + padding-left: 0; + width: 60px; + } + } + } + } + } + + a { + display: inline-block; + height: 34px; + width: 124px; + line-height: 34px; + font-size: 12px; + font-weight: 600; + color: #ffffff; + border-radius: 17px; + box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2); + + &:hover { + box-shadow: none; + } + + @media only screen and (max-width: $mobile-max-width) { + width: 60px; + } + } + + .video-link { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a); + } + + .content-link { + box-shadow: none; + color: #36435c; + border: solid 1px #ccd3db; + + &:hover { + background-color: #ccd3db; + } + } + + .center { + width: 140px; + text-align: center; + + @media only screen and (max-width: $mobile-max-width) { + width: 70px; + } + } + } + } + } +} + +.section-7 { + padding-top: 55px; + padding-bottom: 60px; + + ul { + margin-top: 33px; + font-size: 0; + overflow-x: auto; + white-space: nowrap; + + li { + position: relative; + display: inline-block; + box-sizing: border-box; + white-space: normal; + margin-left: 21px; + width: 274px; + height: 152px; + padding: 30px; + font-size: 14px; + border-radius: 4px; + color: #36435c; + background-color: #ffffff; + overflow: hidden; + &:first-child { + margin-left: 0; + } + &:hover { + .apply { + display: block; + } + } + + .tip { + position: absolute; + top: 35px; + left: 0; + width: 6px; + height: 16px; + background-color: #4ca986; + } + + .name { + margin-bottom: 10px; + font-size: 16px; + line-height: 1.75; + } + + p { + display: flex; + line-height: 2; + align-items: center; + span { + display: inline-block; + &:first-child { + width: 14px; + height: 14px; + margin-right: 4px; + background-repeat: no-repeat; + background-position: center; + } + } + + .profession { + background-image: url("/images/learn/profession.svg"); + } + .base { + background-image: url("/images/learn/base.svg"); + } + } + + .apply { + display: none; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba($color: #171c34, $alpha: 0.6); + + a { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: inline-block; + width: 148px; + height: 34px; + text-align: center; + line-height: 34px; + font-size: 12px; + color: #ffffff; + border-radius: 17px; + box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #65c194, #65c194); + &:hover { + box-shadow: none; + } + } + } + } + + } + + .more { + margin-top: 34px; + text-align: center; + a { + display: inline-block; + width: 148px; + height: 34px; + border-radius: 17px; + font-size: 12px; + text-align: center; + line-height: 34px; + color: #ffffff; + box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42); + &:hover { + box-shadow: none; + } + } + } +} \ No newline at end of file diff --git a/assets/scss/mixin.scss b/assets/scss/mixin.scss index 139597f9c..033bf13d6 100644 --- a/assets/scss/mixin.scss +++ b/assets/scss/mixin.scss @@ -1,2 +1,57 @@ +@import 'variables'; +@mixin clearfix { + zoom: 1; + + &:after { + content: '.'; + display: block; + clear: both; + overflow: hidden; + height: 0; + visibility: hidden; + } +} + +@mixin ellipsis { + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; + overflow: hidden; +} + +@mixin block-ellipsis($line: 2) { + display: -webkit-box; + overflow: hidden; + -webkit-line-clamp: $line; + -webkit-box-orient: vertical; +} + +@mixin nowrap { + white-space: nowrap; + word-wrap: normal; +} + +@mixin break-all { + word-break: break-all; + white-space: normal; +} + +@mixin break-word { + word-wrap: break-word; + white-space: normal; +} + +@mixin vertical-center { + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +@mixin middle { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} diff --git a/content/zh/learn/_index.md b/content/zh/learn/_index.md new file mode 100644 index 000000000..1e867154b --- /dev/null +++ b/content/zh/learn/_index.md @@ -0,0 +1,85 @@ +--- +title: KubeSphere 云原生技术课堂 +css: "scss/learn.scss" + +section1: + title: KubeSphere 云原生技术课堂 + content: KubeSphere x CNCF
最完善的知识体系，从零到一带您入门以 Kubernete 为核心的云原生技术生态 + topImage: "/images/learn/banner.png" + +section2: + list: + - name: 课程简介 + id: section3 + - name: 讲师阵容 + id: section4 + - name: 受益人群 + id: section5 + - name: 课程详情 + id: section6 + - name: 职位推荐 + id: section7 + +section3: + title: 课程简介 + snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png + videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.mp4 + description: Kubernetes 已经成为了容器编排的实施标准，而以 Kubernetes 为核心的云原生技术以及生态正在快速和蓬勃地发展。然而，仅 Kubernetes 本身就有复杂的架构和很高的学习成本，包括集群的安装运维、存储、网络、可观察性DevOps、应用管理、多租户等等。而为了解决这一系列难题，KubeSphere 应运而生。我们将使用 KubeSphere 作为教学工具，通过手把手的云原生技术课程，将理论结合实践帮助您快速入门 Kubernetes 以及其生态相关工具，从零到一构建开源的企业级容器 PaaS 平台。 + +section4: + title: 讲师阵容 + description: 本课程由 KubeSphere 开源社区联合 CNCF 倾力制作，课程和资料一切开源免费，特邀 KubeSphere 团队核心研发成员与 DevOps 教练参与录制。 + list: + - name: 王老师 + profession: KubeSphere DevOps 研发 + description: 本课程由 KubeSphere 开源社区联合 CNCF 倾力制作，特邀 KubeSphere 团队核心研发成员与 DevOps 教练参与录制。 + image: + - name: 王老师 + profession: KubeSphere DevOps 研发 + description: 本课程由 KubeSphere 开源社区联合 CNCF 倾力制作，特邀 KubeSphere 团队核心研发成员与 DevOps 教练参与录制。 + image: + - name: 王老师 + profession: KubeSphere DevOps 研发 + description: 本课程由 KubeSphere 开源社区联合 CNCF 倾力制作，特邀 KubeSphere 团队核心研发成员与 DevOps 教练参与录制。 + image: +section5: + title: 受益人群 + list: + - content: 希望使用 Kubernetes 为核心的云原生技术的应用程序开发者 + icon: /images/learn/orbit.svg + - content: IT相关专业的在校学生，以及对云原生技术研究的爱好者 + icon: /images/learn/molecule.svg + - content: 运维工程师，架构师，技术经理，DevOps工程师等 + icon: /images/learn/pendulum.svg + - content: KubeSphere用户，合作伙伴，ISV，系统管理员等 + icon: /images/learn/three-dimensional.svg + +section6: + title: 课程详情 + +section7: + title: 优选内推 + link: + list: + - company: 青云QingCloud + profession: 容器网络开发工程师 + base: 成都/武汉 + workYears: 3〜5年 + link: + - company: 青云QingCloud + profession: 容器网络开发工程师 + base: 成都/武汉 + workYears: 3〜5年 + link: + - company: 青云QingCloud + profession: 容器网络开发工程师 + base: 成都/武汉 + workYears: 3〜5年 + link: + - company: 青云QingCloud + profession: 容器网络开发工程师 + base: 成都/武汉 + workYears: 3〜5年 + link: +--- + diff --git a/content/zh/learn/level_1/_index.md b/content/zh/learn/level_1/_index.md new file mode 100644 index 000000000..3c18eefeb --- /dev/null +++ b/content/zh/learn/level_1/_index.md @@ -0,0 +1,6 @@ +--- +linkTitle: Level 1：容器与 Kubernetes 技术基础 + +_build: + render: false +--- \ No newline at end of file diff --git a/content/zh/learn/level_1/lesson_1/_index.md b/content/zh/learn/level_1/lesson_1/_index.md new file mode 100644 index 000000000..37260b1e3 --- /dev/null +++ b/content/zh/learn/level_1/lesson_1/_index.md @@ -0,0 +1,10 @@ +--- +linkTitle: 第一堂“云原生”课 +weight: 1 + +_build: + render: false + +profit: 了解容器技术的概念、本质、发展趋势等 +time: 2020-10-13 20:00-20:40 +--- \ No newline at end of file diff --git a/content/zh/learn/level_1/lesson_1/content.md b/content/zh/learn/level_1/lesson_1/content.md new file mode 100644 index 000000000..1d1ca093b --- /dev/null +++ b/content/zh/learn/level_1/lesson_1/content.md @@ -0,0 +1,9 @@ +--- +title: Kubesphere | 第一堂“云原生”课 +keywords: Kubesphere, Kubesphere learn +description: Kubesphere + +pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/Lab_Docker%20%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8_20201019.pdf + +--- + diff --git a/content/zh/learn/level_1/lesson_1/courseware.md b/content/zh/learn/level_1/lesson_1/courseware.md new file mode 100644 index 000000000..0c7746296 --- /dev/null +++ b/content/zh/learn/level_1/lesson_1/courseware.md @@ -0,0 +1,7 @@ +--- +title: Kubesphere | 第一堂“云原生”课 +keywords: Kubesphere, Kubesphere learn +description: Kubesphere + +pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B_20201016.pdf +--- \ No newline at end of file diff --git a/content/zh/learn/level_1/lesson_1/examination.md b/content/zh/learn/level_1/lesson_1/examination.md new file mode 100644 index 000000000..291bf7ff9 --- /dev/null +++ b/content/zh/learn/level_1/lesson_1/examination.md @@ -0,0 +1,7 @@ +--- +title: Kubesphere | 第一堂“云原生”课 +keywords: Kubesphere, Kubesphere learn +description: Kubesphere + +pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E8%80%83%E9%A2%98-%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.pdf +--- \ No newline at end of file diff --git a/content/zh/learn/level_1/lesson_1/video.md b/content/zh/learn/level_1/lesson_1/video.md new file mode 100644 index 000000000..a117362dd --- /dev/null +++ b/content/zh/learn/level_1/lesson_1/video.md @@ -0,0 +1,10 @@ +--- +title: Kubesphere | 第一堂“云原生”课 +keywords: Kubesphere, Kubesphere learn +description: Kubesphere + +video: + snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png + videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.mp4 + +--- \ No newline at end of file diff --git a/content/zh/learn/level_1/lesson_2/_index.md b/content/zh/learn/level_1/lesson_2/_index.md new file mode 100644 index 000000000..a2985cd7e --- /dev/null +++ b/content/zh/learn/level_1/lesson_2/_index.md @@ -0,0 +1,10 @@ +--- +linkTitle: 容器环境准备-Docker +weight: 2 + +_build: + render: false + +profit: 了解容器技术的概念、本质、发展趋势等 +time: 2020-10-13 20:00-20:40 +--- \ No newline at end of file diff --git a/content/zh/learn/level_1/lesson_2/content.md b/content/zh/learn/level_1/lesson_2/content.md new file mode 100644 index 000000000..831cf699b --- /dev/null +++ b/content/zh/learn/level_1/lesson_2/content.md @@ -0,0 +1,7 @@ +--- +title: Kubesphere | 第二堂“云原生”课 + +pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/Lab_Docker%20%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8_20201019.pdf + +--- + diff --git a/content/zh/learn/level_1/lesson_2/courseware.md b/content/zh/learn/level_1/lesson_2/courseware.md new file mode 100644 index 000000000..e6916b405 --- /dev/null +++ b/content/zh/learn/level_1/lesson_2/courseware.md @@ -0,0 +1,5 @@ +--- +title: Kubesphere | 第二堂“云原生”课 + +pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B_20201016.pdf +--- \ No newline at end of file diff --git a/content/zh/learn/level_1/lesson_2/video.md b/content/zh/learn/level_1/lesson_2/video.md new file mode 100644 index 000000000..ddcfd7857 --- /dev/null +++ b/content/zh/learn/level_1/lesson_2/video.md @@ -0,0 +1,7 @@ +--- +title: Kubesphere | 第二堂“云原生”课 + +video: + snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png + videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/meetup/meetup-final-1226.mp4 +--- \ No newline at end of file diff --git a/content/zh/learn/level_2/_index.md b/content/zh/learn/level_2/_index.md new file mode 100644 index 000000000..b75a7003c --- /dev/null +++ b/content/zh/learn/level_2/_index.md @@ -0,0 +1,6 @@ +--- +linkTitle: Level 2：动手实践之扩大建造与运维 + +_build: + render: false +--- \ No newline at end of file diff --git a/content/zh/learn/level_2/lesson_3/_index.md b/content/zh/learn/level_2/lesson_3/_index.md new file mode 100644 index 000000000..9091bdfb1 --- /dev/null +++ b/content/zh/learn/level_2/lesson_3/_index.md @@ -0,0 +1,10 @@ +--- +linkTitle: 容器技术发展简介 +weight: 3 + +_build: + render: false + +profit: 了解容器技术的概念、本质、发展趋势等 本质、发展趋势等 发展趋势等 本质、发展趋势等 +time: 2020-10-13 20:00-20:40 +--- \ No newline at end of file diff --git a/content/zh/learn/level_2/lesson_3/content.md b/content/zh/learn/level_2/lesson_3/content.md new file mode 100644 index 000000000..c2dde02b1 --- /dev/null +++ b/content/zh/learn/level_2/lesson_3/content.md @@ -0,0 +1,7 @@ +--- +title: Kubesphere | 第三堂“云原生”课 + +pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/Lab_Docker%20%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8_20201019.pdf + +--- + diff --git a/content/zh/learn/level_2/lesson_3/examination.md b/content/zh/learn/level_2/lesson_3/examination.md new file mode 100644 index 000000000..2ea5601c2 --- /dev/null +++ b/content/zh/learn/level_2/lesson_3/examination.md @@ -0,0 +1,5 @@ +--- +title: Kubesphere | 第三堂“云原生”课 + +pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E8%80%83%E9%A2%98-%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.pdf +--- \ No newline at end of file diff --git a/content/zh/learn/level_2/lesson_3/video.md b/content/zh/learn/level_2/lesson_3/video.md new file mode 100644 index 000000000..9523ecb66 --- /dev/null +++ b/content/zh/learn/level_2/lesson_3/video.md @@ -0,0 +1,7 @@ +--- +title: Kubesphere | 第三堂“云原生”课 + +video: + snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png + videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/meetup/meetup-final-1226.mp4 +--- \ No newline at end of file diff --git a/content/zh/learn/level_2/lesson_4/_index.md b/content/zh/learn/level_2/lesson_4/_index.md new file mode 100644 index 000000000..477060bce --- /dev/null +++ b/content/zh/learn/level_2/lesson_4/_index.md @@ -0,0 +1,10 @@ +--- +linkTitle: 第四堂“云原生”课 +weight: 4 + +_build: + render: false + +profit: 了解容器技术的概念、本质、发展趋势等 本质、发展趋势等 发展趋势等 本质、发展趋势等 +time: 2020-10-13 20:00-20:40 +--- \ No newline at end of file diff --git a/content/zh/learn/level_2/lesson_4/courseware.md b/content/zh/learn/level_2/lesson_4/courseware.md new file mode 100644 index 000000000..3e146bd49 --- /dev/null +++ b/content/zh/learn/level_2/lesson_4/courseware.md @@ -0,0 +1,5 @@ +--- +title: Kubesphere | 第四堂“云原生”课 + +pdfUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B_20201016.pdf +--- \ No newline at end of file diff --git a/content/zh/learn/level_2/lesson_4/video.md b/content/zh/learn/level_2/lesson_4/video.md new file mode 100644 index 000000000..0d0af6da6 --- /dev/null +++ b/content/zh/learn/level_2/lesson_4/video.md @@ -0,0 +1,8 @@ +--- +title: Kubesphere | 第四堂“云原生”课 + +video: + snapshot: https://pek3b.qingstor.com/kubesphere-docs/png/20200206170305.png + videoUrl: https://kubesphere-docs.pek3b.qingstor.com/website/%E4%BA%91%E5%8E%9F%E7%94%9F%E8%AF%BE%E7%A8%8B/lesson1/%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5_1_%E5%AE%B9%E5%99%A8%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%AE%80%E4%BB%8B.mp4 + +--- \ No newline at end of file diff --git a/i18n/en.yaml b/i18n/en.yaml index db58b918b..2dbe5a2fe 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -80,5 +80,27 @@ translation: Warning - id: Search Documentation translation: Search Documentation - - +- id: Course theme + translation: Course theme +- id: Course benefits + translation: Course benefits +- id: Video tutorial + translation: Video tutorial +- id: Graphic Course + translation: Graphic Course +- id: Start learning + translation: Start learning +- id: View graphic + translation: View graphic +- id: Apply for the job + translation: Apply for the job +- id: View more jobs + translation: View more jobs +- id: Cloud Native Technology Class + translation: Cloud Native Technology Class +- id: warnGraphic explanation + translation: Graphic explanation +- id: PPT courseware + translation: PPT courseware +- id: Self-test + translation: Self-test diff --git a/i18n/zh.yaml b/i18n/zh.yaml index e4cdb5b43..3585426e0 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -79,4 +79,28 @@ - id: warning translation: 警告 - id: Search Documentation - translation: 搜索文档 \ No newline at end of file + translation: 搜索文档 +- id: Course theme + translation: 课程主题 +- id: Course benefits + translation: 课程收益 +- id: Video tutorial + translation: 视频教程 +- id: Graphic Course + translation: 图文课程 +- id: Start learning + translation: 开始学习 +- id: View graphic + translation: 查看图文 +- id: Apply for the job + translation: 申请职位 +- id: View more jobs + translation: 查看更多职位 +- id: Cloud Native Technology Class + translation: 云原生技术课堂 +- id: warnGraphic explanation + translation: 图文讲解 +- id: PPT courseware + translation: PPT 课件 +- id: Self-test + translation: 考题自测 \ No newline at end of file diff --git a/layouts/learn/list.html b/layouts/learn/list.html new file mode 100644 index 000000000..d4c3423c6 --- /dev/null +++ b/layouts/learn/list.html @@ -0,0 +1,218 @@ +{{ define "main" }} + +{{ with .Params.section1 }} +
+
+

{{ .title }}

+

{{ .content | safeHTML }}

+
+
+{{ end }} + +{{ with .Params.section2 }} +
+
+
+ +
+
+ +
+{{ end }} + +
+ {{ with .Params.section3 }} +
+

{{ .title }}

+
+ +

{{ .description }}

+
+
+ {{ end }} +
+ +
+ {{ with .Params.section4 }} +
+

{{ .title }}

+

{{ .description }}

+ +
+ {{ end }} +
+ +
+ {{ with .Params.section5 }} +
+

{{ .title }}

+ +
+ {{ end }} +
+ +
+
+

{{ .Params.section6.title }}

+ +
+
+ +
+ {{ with .Params.section7 }} +
+

{{ .title }}

+ +
+ {{ i18n "View more jobs" }} +
+
+ {{ end }} +
+ + +{{ end }} \ No newline at end of file diff --git a/layouts/learn/single.html b/layouts/learn/single.html new file mode 100644 index 000000000..ec3f82d9e --- /dev/null +++ b/layouts/learn/single.html @@ -0,0 +1,91 @@ +{{ define "main" }} + +
+
+ ← {{ i18n "Cloud Native Technology Class"}} / {{ .CurrentSection.LinkTitle }} +
+
+ +
+
+
+ {{ with .Params.video }} + + {{ end }} + + {{ with .Params.time }} +

{{ . }}

+ {{ else }} +

{{ .CurrentSection.Params.time }}

+ {{ end }} + + {{ with .Params.pdfUrl }} +
+ +
+ {{ end }} +
+
+ {{ $relPermalink := .RelPermalink }} + + {{ with .Site.GetPage "/learn" }} + {{ range .Sections }} + {{ range .Sections}} +
+

+ + {{ .LinkTitle }} + {{ if eq (.GetPage "video").RelPermalink $relPermalink }} + + + + + + {{ else }} + + {{ end }} + +

+
+ {{ with .GetPage "content" }} + + +

{{ i18n "warnGraphic explanation" }}

+ + {{ end }} + + {{ with .GetPage "courseware" }} + + +

{{ i18n "PPT courseware" }}

+ + {{ end }} + + {{ with .GetPage "examination" }} + + +

{{ i18n "Self-test" }}

+ + {{ end }} +
+
+ + {{ end }} + {{ end }} + {{ end }} +
+
+ +
+ +{{ end }} \ No newline at end of file diff --git a/layouts/partials/css.html b/layouts/partials/css.html index bd6eb1188..dbb01f9e5 100644 --- a/layouts/partials/css.html +++ b/layouts/partials/css.html @@ -31,4 +31,11 @@ {{ end }} {{ end }} +{{ if .IsDescendant (.GetPage "/learn") }} +{{ if not (eq . (.GetPage "/learn"))}} +{{ $style := resources.Get "scss/learn-page.scss" | toCSS | minify | fingerprint }} + +{{ end }} +{{ end }} + diff --git a/static/images/learn/banner.png b/static/images/learn/banner.png new file mode 100644 index 000000000..f7476578b Binary files /dev/null and b/static/images/learn/banner.png differ diff --git a/static/images/learn/base.svg b/static/images/learn/base.svg new file mode 100755 index 000000000..dd753c916 --- /dev/null +++ b/static/images/learn/base.svg @@ -0,0 +1,26 @@ + + + + icon / time + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/learn/icon-download-active.svg b/static/images/learn/icon-download-active.svg new file mode 100644 index 000000000..906234c0e --- /dev/null +++ b/static/images/learn/icon-download-active.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/learn/icon-download.svg b/static/images/learn/icon-download.svg new file mode 100644 index 000000000..04fda96fa --- /dev/null +++ b/static/images/learn/icon-download.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/static/images/learn/icon-image-active.svg b/static/images/learn/icon-image-active.svg new file mode 100644 index 000000000..7d50d405f --- /dev/null +++ b/static/images/learn/icon-image-active.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/learn/icon-image.svg b/static/images/learn/icon-image.svg new file mode 100644 index 000000000..dd1298f70 --- /dev/null +++ b/static/images/learn/icon-image.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/static/images/learn/icon-ppt-active.svg b/static/images/learn/icon-ppt-active.svg new file mode 100644 index 000000000..264bbd861 --- /dev/null +++ b/static/images/learn/icon-ppt-active.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/learn/icon-ppt.svg b/static/images/learn/icon-ppt.svg new file mode 100644 index 000000000..db61d841e --- /dev/null +++ b/static/images/learn/icon-ppt.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/static/images/learn/molecule.svg b/static/images/learn/molecule.svg new file mode 100644 index 000000000..07a25afab --- /dev/null +++ b/static/images/learn/molecule.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/learn/orbit.svg b/static/images/learn/orbit.svg new file mode 100644 index 000000000..5dd075151 --- /dev/null +++ b/static/images/learn/orbit.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/static/images/learn/pendulum.svg b/static/images/learn/pendulum.svg new file mode 100644 index 000000000..de6d11c81 --- /dev/null +++ b/static/images/learn/pendulum.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/static/images/learn/profession.svg b/static/images/learn/profession.svg new file mode 100755 index 000000000..4762f6150 --- /dev/null +++ b/static/images/learn/profession.svg @@ -0,0 +1,24 @@ + + + + icon/position + Created with Sketch. + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/learn/section3.png b/static/images/learn/section3.png new file mode 100644 index 000000000..3e025919b Binary files /dev/null and b/static/images/learn/section3.png differ diff --git a/static/images/learn/three-dimensional.svg b/static/images/learn/three-dimensional.svg new file mode 100644 index 000000000..d6b85515e --- /dev/null +++ b/static/images/learn/three-dimensional.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/static/images/learn/time.svg b/static/images/learn/time.svg new file mode 100755 index 000000000..c6daf02f2 --- /dev/null +++ b/static/images/learn/time.svg @@ -0,0 +1,18 @@ + + + + 时间 + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/learn/video.svg b/static/images/learn/video.svg new file mode 100755 index 000000000..276ec02ed --- /dev/null +++ b/static/images/learn/video.svg @@ -0,0 +1,19 @@ + + + + 视频 + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file