15308555518/ website
1
0
Fork 0
mirror of https://github.com/kubesphere/website.git synced 2025-12-26 00:12:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add download btn 

Signed-off-by: liuboaibc <kukudehero@gmail.com>
This commit is contained in:
liuboaibc 2021-05-27 18:37:44 +08:00
parent 67ea8c7dc3
commit aae766df93
16 changed files with 85 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
assets/scss/common.scss
View File

@ -402,3 +402,27 @@ section {
/* Avoid pushing up the copy buttons. */
margin: 0;
}
.download-btn {
height: 56px;
border-radius: 28px;
font-size: 16px;
}
.download-btn1 {
width: 211px;
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(76, 169, 134, 0.05);
background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1) 97%),linear-gradient(to bottom,#242e42,#242e42);
}
.download-btn2 {
width: 195px;
margin-left: 12px;
color: #36435c;
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(76, 169, 134, 0.05);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 97%), linear-gradient(to bottom, #ffffff, #ffffff);
@media only screen and (max-width: $mobile-max-width) {
margin-left: 0px;
margin-top: 12px;
}
}

20
assets/scss/index.scss
View File

@ -70,26 +70,6 @@
color: #ffffff;
}
button {
height: 56px;
border-radius: 28px;
font-size: 16px;
}
.btn1 {
width: 211px;
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(76, 169, 134, 0.05);
background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1) 97%),linear-gradient(to bottom,#242e42,#242e42);
}
.btn2 {
width: 195px;
margin-left: 12px;
color: #36435c;
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(76, 169, 134, 0.05);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 97%), linear-gradient(to bottom, #ffffff, #ffffff);
}
img {
position: absolute;
}

27
assets/scss/scenario.scss
View File

@ -10,7 +10,8 @@ html {
padding-top: 129px;
.title-div {
padding-bottom: 60px;
position: relative;
padding-bottom: 68px;
h1 {
width: 1060px;
}
@ -23,10 +24,18 @@ html {
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.left-p {
max-width: 730px;
}
.download-div {
position: absolute;
right: 0;
bottom: 64px;
}
@media only screen and (max-width: $mobile-max-width) {
width: 100%;
top: 100px;
h1 {
width: 100%;
}
@ -34,6 +43,13 @@ html {
p {
width: 100%;
}
.download-div {
position: relative;
margin-top: 20px;
text-align: center;
bottom: 0;
}
}
}
}
@ -169,7 +185,7 @@ html {
iframe {
margin-top: 40px;
margin-bottom: 56px;
@media only screen and (max-width: $mobile-max-width) {
width: 100%;
height: 300px;
@ -177,12 +193,11 @@ html {
}
p {
margin-top: 56px;
letter-spacing: -0.04px;
color: #31383e;
}
button {
.lab {
width: 263px;
height: 56px;
margin-top: 20px;

4
content/en/_index.md
View File

@ -9,10 +9,6 @@ section1:
title: KubeSphere Container Platform
topic: The Kubernetes platform tailored for hybrid multicloud
content: KubeSphere is a distributed operating system managing cloud native applications with Kubernetes as its kernel, and provides plug-and-play architecture for the seamless integration of third-party applications to boost its ecosystem.
btnContent1: Install on Kubernetes
downloadLink1: "https://kubesphere.io/docs/quick-start/minimal-kubesphere-on-k8s/"
btnContent2: Install on Linux
downloadLink2: "https://kubesphere.io/docs/quick-start/all-in-one-on-linux/"
section2:
title: One Kubernetes Platform for Full Stack Solutions

2
content/en/devops/_index.md
View File

@ -46,7 +46,7 @@ section3:
image: /images/service-mesh/15.jpg
content: Want to get started in action by following the hands-on lab?
btnContent: Start Hands-on Lab
link: https://kubesphere.io/docs/pluggable-components/devops/
link: docs/pluggable-components/devops/
bgLeft: /images/service-mesh/3-2.svg
bgRight: /images/service-mesh/3.svg
---

6
content/en/observability/_index.md
View File

@ -8,6 +8,8 @@ section1:
title: KubeSphere allows you to build visualizations simply and intuitively.
content: KubeSphere provides rich observability from infrastructure to applications. It integrates your favorite tools for multi-dimensional monitoring metrics, multi-tenant log query and collection, alerting and notification.
image: /images/observability/banner.jpg
showDownload: true
image: /images/observability/observability.jpg
@ -43,9 +45,7 @@ section2:
section3:
title: See Cloud Native Observability in KubeSphere
videoLink: https://www.youtube.com/embed/uf0TTowc56I
content: Want to get started in action by following the hands-on lab?
btnContent: Start Hands-on Lab
link: https://kubesphere.io/docs/pluggable-components/
showDownload: true
bgLeft: /images/service-mesh/3-2.svg
bgRight: /images/service-mesh/3.svg
---

2
content/en/service-mesh/_index.md
View File

@ -39,7 +39,7 @@ section3:
videoLink: https://www.youtube.com/embed/EkGWtwcsdE4
content: Want to get started in action by following the hands-on lab?
btnContent: Start Hands-on Lab
link: https://kubesphere.io/docs/pluggable-components/service-mesh/
link: docs/pluggable-components/service-mesh/
bgLeft: /images/service-mesh/3-2.svg
bgRight: /images/service-mesh/3.svg
---

4
content/zh/_index.md
View File

@ -9,10 +9,6 @@ section1:
title: KubeSphere 容器平台
topic: 面向云原生应用的<br>容器混合云
content: KubeSphere 愿景是打造一个以 Kubernetes 为内核的云原生分布式操作系统，它的架构可以非常方便地使第三方应用与云原生生态组件进行即插即用（plug-and-play）的集成，支持云原生应用在多云与多集群的统一分发和运维管理。
btnContent1: 在 Kubernetes 安装
downloadLink1: "https://kubesphere.com.cn/docs/quick-start/minimal-kubesphere-on-k8s/"
btnContent2: 在 Linux 安装
downloadLink2: "https://kubesphere.com.cn/docs/quick-start/all-in-one-on-linux/"
section2:
title: 全栈的平台级解决方案

2
content/zh/devops/_index.md
View File

@ -46,7 +46,7 @@ section3:
image: /images/service-mesh/15.jpg
content: 想自己动手体验实际操作？
btnContent: 开始动手实验
link: https://kubesphere.com.cn/docs/pluggable-components/devops/
link: docs/pluggable-components/devops/
bgLeft: /images/service-mesh/3-2.svg
bgRight: /images/service-mesh/3.svg
---

5
content/zh/observability/_index.md
View File

@ -8,6 +8,7 @@ section1:
title: KubeSphere 助您轻松实现可视化
content: KubeSphere 提供了丰富的可视化功能，支持从基础设施到应用的多维度指标监控。此外，KubeSphere 还集成了许多常用的工具，包括多租户日志查询和收集、告警和通知等功能。
image: /images/observability/banner.jpg
showDownload: true
image: /images/observability/observability.jpg
@ -43,9 +44,7 @@ section2:
section3:
title: 观看 KubeSphere 云原生可观测性演示
videoLink: https://www.youtube.com/embed/uf0TTowc56I
content: 想自己动手体验实际操作？
btnContent: 开始动手实验
link: https://kubesphere.com.cn/docs/pluggable-components/
showDownload: true
bgLeft: /images/service-mesh/3-2.svg
bgRight: /images/service-mesh/3.svg
---

2
content/zh/service-mesh/_index.md
View File

@ -39,7 +39,7 @@ section3:
videoLink: https://www.youtube.com/embed/EkGWtwcsdE4
content: 想自己动手体验实际操作？
btnContent: 开始动手实验
link: https://kubesphere.com.cn/docs/pluggable-components/service-mesh/
link: docs/pluggable-components/service-mesh/
bgLeft: /images/service-mesh/3-2.svg
bgRight: /images/service-mesh/3.svg
---

6
i18n/en.yaml
View File

@ -121,4 +121,8 @@
- id: Cookie Statement
translation: Your privacy is important to us. We use cookies to remember subscription details, optimize site functionality, and deliver content tailored to your interests. To find out more, see our <a href="{{.}}">privacy policy</a>.
- id: Accept and continue
translation: Accept and continue
translation: Accept and continue
- id: Install on Kubernetes
translation: Install on Kubernetes
- id: Install on Linux
translation: Install on Linux

6
i18n/zh.yaml
View File

@ -123,4 +123,8 @@
- id: Cookie Statement
translation: 您的隐私对我们很重要。我们使用Cookie来记住订阅详细信息，优化网站功能并交付根据您的兴趣量身定制的内容。要了解更多信息，请参阅我们的<a href="{{.}}">隐私政策</a>.
- id: Accept and continue
translation: 接受并继续
translation: 接受并继续
- id: Install on Kubernetes
translation: 在 Kubernetes 安装
- id: Install on Linux
translation: 在 Linux 安装

15
layouts/_default/scenario.html
View File

@ -3,7 +3,14 @@
<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
<div class="title-div common-layout">
<h1 class="title-h1">{{ .title }}</h1>
{{ if .showDownload }}
<p class="common-p left-p">{{ .content }}</p>
<div class="download-div">
{{ partial "downloadButton" . }}
</div>
{{ else }}
<p class="common-p">{{ .content }}</p>
{{ end }}
</div>
</section>
{{ end }}
@ -62,8 +69,14 @@
{{ else }}
<img src="{{ .image }}" alt="">
{{ end }}
{{ if .showDownload }}
<div>
{{ partial "downloadButton" . }}
</div>
{{ else }}
<p class="common-p">{{ .content }}</p>
<a href="{{ .link }}"><button class="common-btn">{{ .btnContent }}</button></a>
<a href="{{ .link | relLangURL }}"><button class="common-btn lab">{{ .btnContent }}</button></a>
{{ end }}
</div>
{{ end }}
</section>

7
layouts/index.html
View File

@ -7,12 +7,7 @@
<p class='p1'>{{ .title | safeHTML }}</p>
<h1>{{ .topic | safeHTML }}</h1>
<p class='p2'>{{ .content | safeHTML }}</p>
<a href="{{ .downloadLink1 }}" target="_blank" rel="noopener noreferrer">
<button class='btn1 common-btn'>{{ .btnContent1 }}</button>
</a>
<a href="{{ .downloadLink2 }}" target="_blank" rel="noopener noreferrer">
<button class='btn2 common-btn'>{{ .btnContent2 }}</button>
</a>
{{ partial "downloadButton" . }}
</div>
<img class='img1' src="/images/home/53.png" alt="{{ i18n "kubesphere console screenshot"}}">
<img class='img2' src="/images/home/left.svg" alt="{{ i18n "background image"}}">

6
layouts/partials/downloadButton.html Normal file
View File

@ -0,0 +1,6 @@
<a href="{{ "docs/quick-start/minimal-kubesphere-on-k8s/" | relLangURL }}" target="_blank" rel="noopener noreferrer">
<button class='download-btn download-btn1 common-btn'>{{ i18n "Install on Kubernetes" }}</button>
</a>
<a href="{{ "docs/quick-start/all-in-one-on-linux/" | relLangURL }}" target="_blank" rel="noopener noreferrer">
<button class='download-btn download-btn2 common-btn'>{{ i18n "Install on Linux" }}</button>
</a>