mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
add popular docs link (#928)
* add popular docs link Signed-off-by: liuboaibc <kukudehero@gmail.com> * update style Signed-off-by: liuboaibc <kukudehero@gmail.com>
This commit is contained in:
LiuBo
GitHub
parent
a68c82cbd2
commit
54acfd787c
|
|
@ -43,18 +43,127 @@
|
|||
}
|
||||
}
|
||||
|
||||
.section-link {
|
||||
transform: translateY(-40px);
|
||||
|
||||
.common-layout {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 30px 40px;
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
background-color: #36435c;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left bottom;
|
||||
background-image: url("/images/docs/26.svg");
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
ul {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
width: 50%;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
color: #84f5be;
|
||||
list-style: circle;
|
||||
list-style-position: inside;
|
||||
@include ellipsis;
|
||||
|
||||
a {
|
||||
color: #84f5be;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 333px;
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
ul {
|
||||
margin-top: 20px;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px 20px;
|
||||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-color: #ffffff;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #31383e;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url("/images/docs/22.svg");
|
||||
|
||||
&:hover {
|
||||
background-image: url("/images/docs/22-hover.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
}
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
& > div {
|
||||
position: relative;
|
||||
& > ul {
|
||||
transform: translateY(-60px);
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
justify-content: center;
|
||||
}
|
||||
& > li {
|
||||
width: 373px;
|
||||
height: 470px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-color: #ffffff;
|
||||
|
|
@ -130,6 +239,7 @@
|
|||
}
|
||||
|
||||
.section-3 {
|
||||
margin-top: 60px;
|
||||
.common-layout {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,23 @@ section1:
|
|||
content: Learn how to build and manage cloud-native applications using KubeSphere Container Platform. Get documentation, example code, tutorials, and more.
|
||||
image: /images/docs/banner.png
|
||||
|
||||
sectionLink:
|
||||
docs:
|
||||
title: Popular Documentation
|
||||
description: Learn Docker basics and the benefits of containerizing your applications.
|
||||
list:
|
||||
- /docs/installing-on-linux/public-cloud/install-kubesphere-on-azure-vms
|
||||
- /docs/installing-on-linux/public-cloud/install-kubesphere-on-qingcloud-vms
|
||||
|
||||
videos:
|
||||
title: How do I?
|
||||
description: Learn Docker basics and the benefits
|
||||
list:
|
||||
- link: /docs/installing-on-linux/public-cloud/install-kubesphere-on-azure-vms/
|
||||
text: Write a Dockerfile
|
||||
- link: /docs/installing-on-linux/public-cloud/install-kubesphere-on-azure-vms/
|
||||
text: Write a Docker Compose file
|
||||
|
||||
section3:
|
||||
title: Run KubeSphere and Kubernetes Stack from the Cloud Service
|
||||
description: Cloud Providers are providing KubeSphere as a cloud-hosted service for users, helping you to create a highly available cluster within minutes via several clicks. These services will be available starting from September 2020.
|
||||
|
|
|
|||
|
|
@ -103,4 +103,4 @@
|
|||
- id: PPT courseware
|
||||
translation: PPT 课件
|
||||
- id: Self-test
|
||||
translation: 考题自测
|
||||
translation: 考题自测
|
||||
|
|
|
|||
|
|
@ -11,6 +11,42 @@
|
|||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ $Site := .Site }}
|
||||
{{ with .Params.sectionLink }}
|
||||
<section class="section-link">
|
||||
<div class="common-layout">
|
||||
{{ with .docs}}
|
||||
<div class="left">
|
||||
<h2>{{ .title }}</h2>
|
||||
<p>{{ .description }}</p>
|
||||
<ul>
|
||||
{{ range .list }}
|
||||
<li>
|
||||
{{ with $Site.GetPage . }}
|
||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ with .videos}}
|
||||
<div class="right">
|
||||
<h2>{{ .title }}</h2>
|
||||
<p>{{ .description }}</p>
|
||||
<ul>
|
||||
{{ range .list }}
|
||||
<li>
|
||||
<span>{{ .text }}</span>
|
||||
<a href="{{ .link }}" target="_blank"></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<section class="section-2">
|
||||
<div class="common-layout">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<linearGradient id="6js54ddskb" x1="50%" x2="50%" y1="0%" y2="96.807%">
|
||||
<stop offset="0%" stop-opacity="0"/>
|
||||
<stop offset="100%" stop-opacity=".1"/>
|
||||
</linearGradient>
|
||||
<rect id="4h6iseb8xa" width="40" height="40" x="0" y="0" rx="20"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g transform="translate(-1199 -491) translate(926 483) translate(273 8)">
|
||||
<use fill="#86DBA2" xlink:href="#4h6iseb8xa"/>
|
||||
<use fill="url(#6js54ddskb)" xlink:href="#4h6iseb8xa"/>
|
||||
</g>
|
||||
<g fill-rule="nonzero">
|
||||
<path fill="#FFF" d="M14.018 9.329l-7.26 4.868c-.734.492-1.728.296-2.22-.438-.177-.264-.271-.574-.271-.891V3.132c0-.883.716-1.6 1.6-1.6.317 0 .627.095.89.271l7.26 4.868c.735.492.93 1.486.439 2.22-.116.173-.265.322-.438.438z" transform="translate(-1199 -491) translate(926 483) translate(273 8) translate(12 12)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<linearGradient id="x2roophgib" x1="50%" x2="50%" y1="0%" y2="96.807%">
|
||||
<stop offset="0%" stop-opacity="0"/>
|
||||
<stop offset="100%" stop-opacity=".1"/>
|
||||
</linearGradient>
|
||||
<rect id="oup9cb8fka" width="40" height="40" x="0" y="0" rx="20"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd" opacity=".502">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g transform="translate(-1199 -427) translate(926 419) translate(273 8)">
|
||||
<use fill="#D5DEE7" xlink:href="#oup9cb8fka"/>
|
||||
<use fill="url(#x2roophgib)" xlink:href="#oup9cb8fka"/>
|
||||
</g>
|
||||
<g fill-rule="nonzero">
|
||||
<path fill="#3D3E49" d="M14.018 9.329l-7.26 4.868c-.734.492-1.728.296-2.22-.438-.177-.264-.271-.574-.271-.891V3.132c0-.883.716-1.6 1.6-1.6.317 0 .627.095.89.271l7.26 4.868c.735.492.93 1.486.439 2.22-.116.173-.265.322-.438.438z" transform="translate(-1199 -427) translate(926 419) translate(273 8) translate(12 12)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="288" height="83" viewBox="0 0 288 83">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g transform="translate(-140 -614) translate(140 303) translate(-28 336)">
|
||||
<circle cx="253.5" cy="101.5" r="50.5" stroke="#FFF" stroke-width="50" opacity=".062"/>
|
||||
<circle cx="104.5" cy="104.5" r="104.5" stroke="#38FFB4" stroke-opacity=".153" stroke-width="50"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 539 B |
Loading…
Reference in New Issue