diff --git a/assets/scss/footer.scss b/assets/scss/footer.scss index e46354f10..41722f217 100644 --- a/assets/scss/footer.scss +++ b/assets/scss/footer.scss @@ -190,6 +190,14 @@ } } + .bilibili-a { + background-image: url("/images/footer/bilibili.svg"); + + &:hover { + background-image: url("/images/footer/bilibili-hover.svg"); + } + } + .facebook-a { background-image: url("/images/footer/facebook.svg"); diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 2af1b85be..6c29b0d63 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -1082,6 +1082,106 @@ } } +.join-us { + display: none; + position: fixed; + z-index: 10; + right: 20px; + bottom: 16px; + width: 336px; + height: 383px; + text-align: center; + background-color: #ffffff; + background-image: url('/images/home/modal-bg.svg'); + background-size: cover; + box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06); + border-radius: 4px; + + @media (min-width: 1360px) { + right: 50%; + transform: translateX(580px); + } + + .bg { + position: absolute; + top: 0; + left: 0; + right: 0; + } + + .close { + position: absolute; + top: 24px; + right: 24px; + cursor: pointer; + } + + .modalImage { + margin-top: 40px; + } + + h2 { + font-weight: 500; + font-size: 22px; + line-height: 22px; + color: #242E42; + } + + .title { + font-size: 20px; + line-height: 20px; + } + + & > p { + margin: 8px 14px 0; + text-align: left; + font-size: 14px; + line-height: 24px; + color: #404F68; + } + + & > div { + margin-top: 4px; + display: flex; + justify-content: center; + font-size: 0; + + p { + font-size: 12px; + } + } + + .slack { + p { + width: 90px; + height: 28px; + text-align: center; + background: #059669; + border: 1px solid #479E88; + box-sizing: border-box; + border-radius: 2px; + + a { + line-height: 28px; + color: #FFFFFF; + &:hover { + text-decoration: underline; + } + } + } + } + + .wechat { + margin-left: 48px; + img { + margin-top: 12px; + } + p { + margin-top: 16px; + } + } +} + footer { background: #ffffff; diff --git a/config/_default/config.toml b/config/_default/config.toml index 6dbce8664..7652d116e 100644 --- a/config/_default/config.toml +++ b/config/_default/config.toml @@ -25,13 +25,11 @@ gcs_engine_id = "018068616810858123755%3Apb1pt8sx6ve" githubLink = "https://github.com/kubesphere/kubesphere" slackLink = "https://join.slack.com/t/kubesphere/shared_invite/enQtNTE3MDIxNzUxNzQ0LTZkNTdkYWNiYTVkMTM5ZThhODY1MjAyZmVlYWEwZmQ3ODQ1NmM1MGVkNWEzZTRhNzk0MzM5MmY4NDc3ZWVhMjE" -youtubeLink = "https://www.youtube.com/channel/UCyTdUQUYjf7XLjxECx63Hpw" facebookLink = "https://www.facebook.com/kubesphere" twitterLink = "https://twitter.com/KubeSphere" mediumLink = "https://itnext.io/@kubesphere" linkedinLink = "https://www.linkedin.com/company/kubesphere/" - [languages.en] contentDir = "content/en" weight = 1 diff --git a/config/upstream-zh/config.toml b/config/upstream-zh/config.toml index b4664e082..955694d34 100644 --- a/config/upstream-zh/config.toml +++ b/config/upstream-zh/config.toml @@ -4,4 +4,5 @@ defaultContentLanguage = "zh" [params] showCaseNumber = true +bilibiliLink = "https://space.bilibili.com/438908638" mailchimpSubscribeUrl = "https://yunify.us2.list-manage.com/subscribe/post?u=f29f08cef80223b46bad069b5&id=4838e610c2" \ No newline at end of file diff --git a/config/upstream/config.toml b/config/upstream/config.toml index 5bc9f16cd..6da1c34b3 100644 --- a/config/upstream/config.toml +++ b/config/upstream/config.toml @@ -4,4 +4,5 @@ baseURL = "https://kubesphere.io" addGoogleAnalytics = true addGoogleTag = true -hotjarTracking = true \ No newline at end of file +hotjarTracking = true +youtubeLink = "https://www.youtube.com/channel/UCyTdUQUYjf7XLjxECx63Hpw" \ No newline at end of file diff --git a/i18n/en.yaml b/i18n/en.yaml index 6aeb1ec19..03256a79f 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -110,3 +110,11 @@ translation: PPT courseware - id: Self-test translation: Self-test +- id: Join Us + translation: Join us! +- id: Join Us Content + translation: Join KubeSphere Community ! Connect with us on Slack channel or WeChat group! +- id: Join Slack + translation: Join Slack +- id: Join Wechat + translation: Scan the QR code \ No newline at end of file diff --git a/i18n/zh.yaml b/i18n/zh.yaml index ad7b9f850..4008d8c79 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -110,3 +110,11 @@ translation: PPT 课件 - id: Self-test translation: 考题自测 +- id: Join Us + translation: 欢迎加入！ +- id: Join Us Content + translation: 加入 KubeSphere 社区，在 Slack 或微信群与开发者和用户保持沟通！ +- id: Join Slack + translation: 加入 Slack +- id: Join Wechat + translation: 扫码加入微信群 \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 06e18b5bd..98e372c52 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -201,6 +201,27 @@ {{ end }} --> +
+ close + icon +

{{ i18n "Join Us" }}

+

{{ i18n "Join Us Content" }}

+
+
+ +

+ + {{ i18n "Join Slack" }} + +

+
+
+ +

{{ i18n "Join Wechat" }}

+
+
+
+ diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 71a746c86..be8dad1f8 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -58,7 +58,12 @@

进群请备注 “公司 - 姓名”

--> + {{ if .Site.Params.bilibiliLink }} + + {{ end }} + {{ if .Site.Params.youtubeLink }} + {{ end }} diff --git a/static/images/footer/bilibili-hover.svg b/static/images/footer/bilibili-hover.svg new file mode 100644 index 000000000..1255bc699 --- /dev/null +++ b/static/images/footer/bilibili-hover.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/images/footer/bilibili.svg b/static/images/footer/bilibili.svg new file mode 100644 index 000000000..fd547d0b2 --- /dev/null +++ b/static/images/footer/bilibili.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/images/home/close.svg b/static/images/home/close.svg index 2be4625dd..93569bb50 100644 --- a/static/images/home/close.svg +++ b/static/images/home/close.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/static/images/home/modal-bg.svg b/static/images/home/modal-bg.svg new file mode 100644 index 000000000..3218ed57c --- /dev/null +++ b/static/images/home/modal-bg.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/home/modal-content.svg b/static/images/home/modal-content.svg new file mode 100644 index 000000000..530e43492 --- /dev/null +++ b/static/images/home/modal-content.svg @@ -0,0 +1,237 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/home/slack.svg b/static/images/home/slack.svg new file mode 100644 index 000000000..9a9025cb9 --- /dev/null +++ b/static/images/home/slack.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/home/wechat.svg b/static/images/home/wechat.svg new file mode 100644 index 000000000..bc19527a9 --- /dev/null +++ b/static/images/home/wechat.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + +