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

feat: Add subescribe form in all blog page and document page 

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
This commit is contained in:
TheYoungManLi 2021-11-10 17:53:21 +08:00
parent 7b70b8469b
commit 0e297e7166
6 changed files with 132 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
assets/scss/content.scss
View File

@ -6,7 +6,7 @@
}
.main-section {
& > div {
&>div {
position: relative;
padding-top: 93px;
@ -50,7 +50,7 @@
h1 {
margin-top: 20px;
margin-bottom: 40px;
text-shadow: 0 8px 16px rgba(35,45,65,.1);
text-shadow: 0 8px 16px rgba(35, 45, 65, .1);
font-size: 40px;
font-weight: 500;
line-height: 1.4;
@ -80,7 +80,7 @@
line-height: 2.29;
color: #36435c;
}
.md-body h2 {
font-weight: 500;
line-height: 64px;
@ -90,13 +90,13 @@
margin-bottom: 20px;
border-bottom: 1px solid #ccd3db;
}
.md-body h3 {
font-weight: 600;
line-height: 1.5;
color: #171c34;
}
.md-body img {
max-width: 100%;
box-sizing: content-box;
@ -104,30 +104,30 @@
border-radius: 5px;
box-shadow: none;
}
.md-body blockquote {
padding: 4px 20px 4px 12px;
border-radius: 4px;
background-color: #ecf0f2;
}
&-metadata {
margin-bottom: 28px;
&-title {
font-size: 16px;
font-weight: 500;
line-height: 1.5;
color: #171c34;
}
&-time {
font-size: 14px;
line-height: 1.43;
color: #919aa3;
}
}
&-title {
text-shadow: 0 8px 16px rgba(35, 45, 65, 0.1);
font-size: 40px;
@ -135,7 +135,7 @@
line-height: 1.4;
color: #171c34;
margin-bottom: 40px;
@media only screen and (max-width: $mobile-max-width) {
font-size: 28px;
}
@ -150,6 +150,7 @@
bottom: 10px;
transform: translateX(350px);
width: 230px;
@media only screen and (max-width: $mobile-max-width) {
display: none;
}
@ -158,7 +159,7 @@
max-height: 100%;
position: relative;
overflow-y: auto;
}
}
.title {
height: 32px;
@ -166,13 +167,14 @@
line-height: 1.33;
color: #36435c;
padding-bottom: 10px;
border-bottom: solid 1px #ccd3db;;
border-bottom: solid 1px #ccd3db;
}
.tabs {
#TableOfContents > ul > li > a {
#TableOfContents>ul>li>a {
font-weight: 500;
}
li {
margin: 10px 0;
font-size: 16px;
@ -195,6 +197,7 @@
color: #55bc8a;
}
}
li li {
padding-left: 20px;
}
@ -202,121 +205,126 @@
}
}
}
.SubscribeForm {
position: fixed;
right: 49px;
bottom: 32px;
box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06);
.innerBox {
width: 440px;
height: 246px;
overflow: hidden;
background: url('/images/home/modal-noText.svg');
position: relative;
padding: -8px -16px;
background-position: -16px -8px;
@media only screen and (min-width: $mobile-max-width) {
.SubscribeForm {
position: fixed;
right: 49px;
bottom: 32px;
.close {
position: absolute;
top: 24px;
right: 24px;
cursor: pointer;
}
box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05),
0px 4px 8px rgba(36, 46, 66, 0.06);
p {
width: 360px;
height: 44px;
left: 40px;
top: 103px;
right: 40px;
position: absolute;
font-family: ProximaNova;
font-size: 16px;
line-height: 22px;
color: #919AA3;
.innerBox {
width: 440px;
height: 246px;
overflow: hidden;
background: url('/images/home/modal-noText.svg');
position: relative;
padding: -8px -16px;
background-position: -16px -8px;
}
div {
bottom: 32px;
left: 40px;
position: absolute;
width: 358px;
height: 48px;
margin-top: 20px;
border-radius: 24px;
border: solid 1px #ccd3db;
background-color: #f5f8f9;
@mixin placeholder {
font-family: PingFangSC;
font-size: 14px;
line-height: 16px;
text-align: right;
color: #CCD3DB;
.close {
position: absolute;
top: 24px;
right: 24px;
cursor: pointer;
}
input {
width: 207px;
height: 20px;
font-size: 14px;
margin-left: 16px;
color: #ccd3db;
border: none;
outline: none;
p {
width: 360px;
height: 44px;
left: 40px;
top: 103px;
right: 40px;
position: absolute;
font-family: ProximaNova;
font-size: 16px;
line-height: 22px;
color: #919AA3;
}
div {
bottom: 32px;
left: 40px;
position: absolute;
width: 358px;
height: 48px;
margin-top: 20px;
border-radius: 24px;
border: solid 1px #ccd3db;
background-color: #f5f8f9;
&:-webkit-input-placeholder {
@include placeholder();
@mixin placeholder {
font-family: PingFangSC;
font-size: 14px;
line-height: 16px;
text-align: right;
color: #CCD3DB;
}
&:-ms-input-placeholder {
@include placeholder();
}
&:-moz-placeholder {
@include placeholder();
}
&:-moz-placeholder {
@include placeholder();
}
}
button {
width: 111px;
height: 40px;
margin: 4px 5px 4px 14px;
border-radius: 20px;
border: none;
font-size: 14px;
color: #ffffff;
cursor: pointer;
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, #55bc8a, #55bc8a);
&:hover {
box-shadow: none;
}
}
@media only screen and (max-width: $mobile-max-width) {
width: 326px;
input {
width: 196px;
width: 207px;
height: 20px;
font-size: 14px;
margin-left: 16px;
color: #ccd3db;
border: none;
outline: none;
background-color: #f5f8f9;
&:-webkit-input-placeholder {
@include placeholder();
}
&:-ms-input-placeholder {
@include placeholder();
}
&:-moz-placeholder {
@include placeholder();
}
&:-moz-placeholder {
@include placeholder();
}
}
button {
width: 90px;
width: 111px;
height: 40px;
margin: 4px 5px 4px 14px;
border-radius: 20px;
border: none;
font-size: 14px;
color: #ffffff;
cursor: pointer;
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, #55bc8a, #55bc8a);
&:hover {
box-shadow: none;
}
}
@media only screen and (max-width: $mobile-max-width) {
width: 326px;
input {
width: 196px;
}
button {
width: 90px;
}
}
span {
color: red;
}
}
span {
color: red;
}
}
}
}

2
assets/scss/doc.scss
View File

@ -853,7 +853,7 @@ footer {
p {
width: 360px;
font-family: ProximaNova;
font-family: 'Proxima Nova';
font-size: 16px;
line-height: 22px;
color: #919AA3;

4
config/_default/config.toml
View File

@ -24,8 +24,6 @@ githubBlobUrl = "https://github.com/kubesphere/website/blob/master/content"
githubEditUrl = "https://github.com/kubesphere/website/edit/master/content"
mailchimpSubscribeUrl = "https://kubesphere.us10.list-manage.com/subscribe/post?u=c85ea2b944b08b951f607bdd4&id=83f673a2d9"
gcs_engine_id = "018068616810858123755%3Apb1pt8sx6ve"
githubLink = "https://github.com/kubesphere/kubesphere"
@ -49,6 +47,7 @@ title = "KubeSphere | The Kubernetes platform tailored for hybrid multicloud"
description = "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."
keywords = "KubeSphere, Kubernetes, container platform, DevOps, hybrid cloud, cloud native"
snapshot = "/images/common/snapshot-en.png"
mailchimpSubscribeUrl = "https://kubesphere.us10.list-manage.com/subscribe/post?u=c85ea2b944b08b951f607bdd4&id=83f673a2d9"
[[languages.en.menu.main]]
weight = 2
@ -195,6 +194,7 @@ title = "KubeSphere | 面向云原生应用的容器混合云"
description = "KubeSphere 是在 Kubernetes 之上构建的以应用为中心的多租户容器平台，提供全栈的 IT 自动化运维的能力，简化企业的 DevOps 工作流。KubeSphere 提供了运维友好的向导式操作界面，帮助企业快速构建一个强大和功能丰富的容器云平台。"
keywords = "KubeSphere, Kubernetes, 容器平台, DevOps, 混合云"
snapshot = "/images/common/snapshot-zh.png"
mailchimpSubscribeUrl = "https://yunify.us2.list-manage.com/subscribe/post?u=f29f08cef80223b46bad069b5&amp;id=4838e610c2"
[[languages.zh.menu.main]]
weight = 2

7
config/upstream-zh/config.toml
View File

@ -7,4 +7,9 @@ showCaseNumber = true
addBaiduAnalytics = true
bilibiliLink = "https://space.bilibili.com/438908638"
mailchimpSubscribeUrl = "https://yunify.us2.list-manage.com/subscribe/post?u=f29f08cef80223b46bad069b5&amp;id=4838e610c2"
[languages.en.params]
mailchimpSubscribeUrl = "https://yunify.us2.list-manage.com/subscribe/post?u=f29f08cef80223b46bad069b5&amp;id=4838e610c2"
[languages.zh.params]
mailchimpSubscribeUrl = "https://yunify.us2.list-manage.com/subscribe/post?u=f29f08cef80223b46bad069b5&amp;id=4838e610c2"

8
layouts/docs/single.html
View File

@ -137,12 +137,11 @@
<button class="Yes">{{ i18n "Yes" }}</button>
<button class="No">{{ i18n "No" }}</button>
</section>
{{if eq .Site.LanguageCode "en-US"}}
{{if .Params.showSubscribe }}
<div class="SubscribeForm">
<div class="innerBox">
<p class="description">
Sign up for latest tutorials and Kubernetes tips
{{ i18n "Receive the latest news, articles and updates from KubeSphere" }}
</p>
<div>
<form action="{{ .Site.Params.mailchimpSubscribeUrl }}" method="post"
@ -156,8 +155,7 @@
data-message2='{{ i18n "Please enter a valid email address." }}'></span>
</div>
</div>
{{end}}
{{end}}
<br>
<p class="msg-thank">{{ i18n "Msg-Thank" }}</p>
</div>

2
layouts/partials/content.html
View File

@ -59,7 +59,6 @@
</div>
</div>
</section>
{{ if eq $LanguageCode "en-US"}}
<div class="SubscribeForm">
<div class="innerBox">
<img class="close" src="/images/home/close.svg" alt="close">
@ -77,7 +76,6 @@
</div>
</div>
</div>
{{end}}
{{ partial "footer.html" $context }}
{{ $aside := resources.Get "js/aside.js" }}
{{ $asideJS := $aside | resources.Fingerprint "sha512" }}