This is an automated email from the ASF dual-hosted git repository.
liujun pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dubbo-website.git
The following commit(s) were added to refs/heads/master by this push:
new 7f7a63a6bb homepage optimization (#2335)
7f7a63a6bb is described below
commit 7f7a63a6bb5bcee026bd93485ab7ee1b8279e3a0
Author: kwtboom <[email protected]>
AuthorDate: Tue Feb 28 19:20:24 2023 +0800
homepage optimization (#2335)
---
assets/scss/_base.scss | 46 ++++++++++++++--------
assets/scss/_custom.scss | 11 +++++-
content/zh-cn/_index.html | 72 +++++++++++++++++++++--------------
layouts/partials/footer.html | 4 +-
layouts/partials/head.html | 1 +
layouts/shortcodes/blocks/cover.html | 10 ++---
package.json | 3 +-
static/css/community.css | 1 +
static/css/contactus.css | 23 +++++------
static/css/language.css | 52 +++++++++++++++++++++++++
static/imgs/language/go.png | Bin 0 -> 3104 bytes
static/imgs/language/java.png | Bin 0 -> 5224 bytes
static/imgs/language/node.png | Bin 0 -> 3882 bytes
static/imgs/language/python.png | Bin 0 -> 4518 bytes
static/imgs/language/rust.png | Bin 0 -> 3229 bytes
15 files changed, 159 insertions(+), 64 deletions(-)
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index 4d17fee328..a17243619a 100755
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -506,6 +506,7 @@ section#cncf {
// Video thingy
#video {
height: $video-section-height;
+ // min-height: 400px;
}
#video {
@@ -513,15 +514,12 @@ section#cncf {
position: relative;
background-position: center center;
background-size: cover;
-
& > .light-text {
- display: none;
- // position: absolute;
- // top: 50%;
- // left: 75%;
- width: 500px;
+ height: 100%;
+ overflow-y: scroll;
+ margin-left: 50vw;
+ word-wrap: break-word;
padding-top: 2rem;
- // transform: translate(-50%, -50%);
color: white;
}
@@ -536,33 +534,51 @@ section#cncf {
}
#desktopKCButton {
- position: absolute;
+ // position: absolute;
+ display: block;
+ max-width: 80%;
font-size: 18px;
background-color: $dark-grey;
border-radius: 8px;
color: $white;
padding: 20px 10px 20px 10px;
+ margin-bottom: 24px;
}
#desktopShowVideoButton {
+ max-width: 200px;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
position: relative;
font-size: 24px;
background-color: white;
border-radius: 8px;
color: $blue;
- padding: 15px 30px 15px 80px;
- margin-bottom: 15px;
-
- &:before {
+ // padding: 15px 30px 15px 80px;
+ padding: 8px 12px;
+ margin-bottom: 24px;
+ .desktopShowVideoButton-icon{
content: "";
- position: absolute;
- @include pureCenter(40px);
+ // position: absolute;
+ // @include pureCenter(40px);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent $blue;
}
+
+ // &:before {
+ // content: "";
+ // position: absolute;
+ // @include pureCenter(40px);
+ // width: 0;
+ // height: 0;
+ // border-style: solid;
+ // border-width: 10px 0 10px 20px;
+ // border-color: transparent transparent transparent $blue;
+ // }
}
#mobileShowVideoButton {
@@ -658,7 +674,7 @@ section#cncf {
// Features
#features {
padding-top: 140px;
- background-color: $light-grey;
+ // background-color: $light-grey;
background-image: url(/imgs/dubbo_colorful.png);
background-position: center 60px;
background-repeat: no-repeat;
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index e1499c02f9..54e8090444 100755
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -26,6 +26,10 @@ $announcement-size-adjustment: 8px;
}
}
+.footer-margin-0{
+ margin: 0px !important;
+}
+
.header-hero #quickstartButton.button {
margin-top: 1em;
}
@@ -171,8 +175,8 @@ body.td-404 main .error-details {
// Flip-Nav
.flip-nav .td-navbar {
background-color: white !important;
- box-shadow: 0 1px 2px $medium-grey;
-
+ // box-shadow: 0 1px 2px $medium-grey;
+ border: 1px solid #ddd;
.navbar-nav {
.nav-item {
&.show .nav-link,
@@ -761,6 +765,9 @@ figure.release-logo {
font-size: inherit !important;
}
}
+.td-content > pre, .td-content > .highlight, .td-content > .lead, .td-content
> h1, .td-content > h2, .td-content > ul, .td-content > ol, .td-content > p,
.td-content > blockquote, .td-content > dl dd, .td-content .footnotes,
.td-content > .alert{
+ max-width: 100% !important;
+}
/* Force size constraints on figures */
figure {
diff --git a/content/zh-cn/_index.html b/content/zh-cn/_index.html
index fa5b90043b..caa15e34b8 100644
--- a/content/zh-cn/_index.html
+++ b/content/zh-cn/_index.html
@@ -42,30 +42,48 @@ description = "Apache Dubbo 官网"
<!--<div class="mx-auto">-->
<!-- <p class="display-4 lead font-weight-light">一款易用的、具备高性能 RPC
通信及服务治理能力的微服务开发框架</p>-->
<!--</div>-->
+{{< /blocks/cover >}}
+
+<div id="language">
+ <h1 class="font-weight-normal">选择编程语言后快速体验!</h1>
+ <div class="language-content">
+ <a class="language-card" href='docs3-v2/java-sdk'>
+ <div class="card-title">Java</div>
+ <div class="card-img">
+ <img src="/imgs/language/java.png" alt="java">
+ </div>
+ </a>
+ <a class="language-card" href='docs3-v2/golang-sdk'>
+ <div class="card-title">Go</div>
+ <div class="card-img img-go">
+ <img src="/imgs/language/go.png" alt="golang" >
+ </div>
+ </a>
+ <a class="language-card" href='docs3-v2/rust-sdk'>
+ <div class="card-title">Rust</div>
+ <div class="card-img">
+ <img src="/imgs/language/rust.png" alt="rust">
+ </div>
+ </a>
+ <a class="language-card" target="_blank"
href='https://github.com/apache/dubbo-js'>
+ <div class="card-title">Node.js</div>
+ <div class="card-img">
+ <img src="/imgs/language/node.png" alt="node.js">
+ </div>
+ </a>
+ <a class="language-card" target="_blank"
href='https://github.com/apache/dubbo-python2'>
+ <div class="card-title">Python</div>
+ <div class="card-img">
+ <img src="/imgs/language/python.png" alt="python2">
+ </div>
+ </a>
+ <a class="language-card" href='docs3-v2/dubbo-go-pixiu'>
+ <div class="language-card-more"> 更多</div>
+ </a>
+ </div>
-<div class="mx-auto mt-3">
- <div class="mt-2 mb-3 font-weight-normal">选择编程语言后快速体验!</div>
- <a class="btn btn-lg btn-info rounded mr-3 font-weight-normal"
href='docs3-v2/java-sdk'>
- Java
- </a>
- <a class="btn btn-lg btn-info rounded mr-3 font-weight-normal"
href='docs3-v2/golang-sdk'>
- Go
- </a>
- <a class="btn btn-lg btn-info rounded mr-3 font-weight-normal"
href='docs3-v2/rust-sdk'>
- Rust
- </a>
- <a class="btn btn-lg btn-info rounded mr-3 font-weight-normal"
target="_blank" href='https://github.com/apache/dubbo-js'>
- Node.js
- </a>
- <a class="btn btn-lg btn-info rounded mr-3 font-weight-normal"
target="_blank" href='https://github.com/apache/dubbo-python2'>
- Python
- </a>
- <a class="btn btn-lg btn-info rounded mr-3 font-weight-normal"
href='docs3-v2/dubbo-go-pixiu'>
- 更多
- </a>
</div>
-{{< /blocks/cover >}}
{{% blocks/lead color="white" height="min" id="whyDubbo" %}}
<h1 class="font-weight-normal">Why Dubbo?</h1>
@@ -120,16 +138,14 @@ description = "Apache Dubbo 官网"
<div class="light-text">
<h2>快速掌握基于 Apache Dubbo 的微服务开发与治理</h2>
<p>By 刘军，Apache Dubbo PMC Chair</p>
- <button id="desktopShowVideoButton" onclick="kub.showVideo()">观看视频</button>
- <br>
- <br>
+ <div id="desktopShowVideoButton" onclick="kub.showVideo()">
+ <span class="desktopShowVideoButton-icon"></span>
+ <span>观看视频</span>
+ </div>
<a href="./overview/tasks/" button id="desktopKCButton">跟随示例任务学习 Dubbo！</a>
- <br>
- <br>
- <br>
- <br>
<a href="./blog/news/" button id="desktopKCButton">探索 Dubbo
生态、社区动态并参与线下活动！</a>
</div>
+
<div id="videoPlayer">
<iframe
data-url="//player.bilibili.com/player.html?aid=598998096&bvid=BV1vB4y1C7wL&cid=787938568&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" frameborder="0"
allowfullscreen="true"></iframe>
<button id="closeButton"></button>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 486ba7cb97..dafed9c723 100755
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
{{ $links := .Site.Params.links }}
-<footer class="bg-dark py-5 row d-print-none">
+<footer class="bg-dark py-5 row d-print-none footer-margin-0">
<div class="container-fluid mx-sm-5">
<div class="row">
<div class="col-6 col-sm-4 text-xs-center order-sm-2">
@@ -27,7 +27,7 @@
</div>
</footer>
-<div class="row pt-2 pb-2">
+<div class="row pt-2 pb-2 footer-margin-0">
<div class="container-fluid mx-sm-5">
<div class="text-center" id="my-footer">
<img style="float:left;" alt="apache_logo" src="/imgs/apache_logo.png"/>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 13a14e43be..f842119815 100755
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -84,6 +84,7 @@
<link href="/css/community.css" rel="stylesheet">
<link href="/css/contactus.css" rel="stylesheet">
+<link href="/css/language.css" rel="stylesheet">
<!--<script defer src="https://platform.twitter.com/widgets.js";
charset="utf-8"></script>-->
<script src="{{ "js/script.js" | relURL }}"></script>
diff --git a/layouts/shortcodes/blocks/cover.html
b/layouts/shortcodes/blocks/cover.html
index cdfff1abd0..d57af0d87f 100644
--- a/layouts/shortcodes/blocks/cover.html
+++ b/layouts/shortcodes/blocks/cover.html
@@ -45,19 +45,19 @@
{{ T "homepage_description_paragraph2" }}
</p>
<!-- <div id="docsearch_zh_home" class="btn btn-lg mr-3
mb-4"></div>-->
- <div style="display:flex;justify-content: center;" >
- <a class="btn btn-lg btn-secondary mr-5 mb-4 mt-3 rounded"
href="overview/what/">
+ <div style="display:flex;justify-content: center;align-items:
center;flex-wrap: wrap;" >
+ <a class="btn btn-lg btn-secondary mb-4 ml-2 mr-2 rounded"
href="overview/what/">
<span style="margin: 1rem !important;">{{ T "homepage_button_1"
}}</span>
</a>
- <a class="btn btn-lg btn-secondary mr-5 mb-4 mt-3 rounded"
href="overview/quickstart/">
+ <a class="btn btn-lg btn-secondary mb-4 ml-2 mr-2 rounded"
href="overview/quickstart/">
<span style="margin: 2rem !important;">{{ T "homepage_button_2"
}}</span>
</a>
</div>
</div>
<div class="col-lg-6 mt-5 mt-lg-3 d-sm-block">
- <div class="column bg-texture center">
- <iframe style="height: 315px;position:relative;" width="560"
height="315"
src="//player.bilibili.com/player.html?aid=737424422&bvid=BV1YD4y1g7Qk&cid=1024306839&page=1"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
+ <div class="column bg-texture center" style="min-height:320px" >
+ <iframe style="height: 315px;position:relative;width: 100%;
max-width:560px;" height="315"
src="//player.bilibili.com/player.html?aid=737424422&bvid=BV1YD4y1g7Qk&cid=1024306839&page=1"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-12 pt-3">
diff --git a/package.json b/package.json
index 26de4177fa..59b5683632 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
},
"homepage": "https://dubbo.apache.org";,
"devDependencies": {
- "autoprefixer": "^9.8.6",
+ "autoprefixer": "^9.8.8",
+ "postcss": "^8.4.21",
"postcss-cli": "^7.1.2"
}
}
diff --git a/static/css/community.css b/static/css/community.css
index 99ad2948fa..cac75d18a6 100755
--- a/static/css/community.css
+++ b/static/css/community.css
@@ -299,6 +299,7 @@ body.cid-community #resources .container >
.community-resource {
flex-basis: auto;
width: 100%;
flex-shrink: 1;
+ border: 1px solid #eee;
}
body.cid-community #resources .container > .community-resource img {
diff --git a/static/css/contactus.css b/static/css/contactus.css
index 8cbce38516..2f4acdb570 100755
--- a/static/css/contactus.css
+++ b/static/css/contactus.css
@@ -17,7 +17,7 @@
text-transform: uppercase;
}
-.community-section h2:before,
+/* .community-section h2:before,
.community-section h2:after {
background-color: #aaaaaa;
content: "";
@@ -36,23 +36,23 @@
.community-section h2:after {
left: 0.5em;
margin-right: -50%;
-}
+} */
.community-section, #navigation-items {
- max-width: min(85vw,100em);
+ /* max-width: min(85vw,100em); */
margin-left: auto;
margin-right: auto;
}
.community-section {
- margin-top: 1em;
- margin-bottom: 1em;
- padding: 0.5em 0;
+ width: 100%;
+ padding: 4em 0;
justify-content: space-evenly;
align-items: baseline;
align-content: space-between;
min-height: 10em;
text-align: center; /* overridden for paragraphs */
+ background-color: #eee;
}
.community-section:first-child {
@@ -279,11 +279,6 @@ a.community-cta-button > span.community-cta {
aspect-ratio: 16 / 9;
}
-#resources {
- margin-top: 5%;
- margin-bottom: 3%;
-}
-
#resources .container {
width: 100%;
display: flex;
@@ -296,9 +291,15 @@ a.community-cta-button > span.community-cta {
#resources .container > .community-resource {
+ background-color: #fff;
+ border-radius: 4px;
flex-basis: auto;
width: 100%;
flex-shrink: 1;
+ padding: 12px 8px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
}
#resources .container > .community-resource img {
diff --git a/static/css/language.css b/static/css/language.css
new file mode 100644
index 0000000000..ddc8df7f63
--- /dev/null
+++ b/static/css/language.css
@@ -0,0 +1,52 @@
+#language {
+ width: 100%;
+ padding: 4rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #ededed;
+}
+
+#language .language-content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ width: 80%;
+ margin-top: 20px;
+}
+
+#language .language-content .language-card {
+ width: 32%;
+ min-width: 300px;
+ height: 120px;
+ margin-bottom: 12px;
+ border-radius: 4px;
+ padding: 8px;
+ background-color: #fff;
+}
+
+#language .language-content .language-card .card-title{
+ color: #222 !important;
+ margin-bottom: 0px;
+ margin-left: 12px;
+}
+
+#language .language-content .language-card .card-img {
+ width: 100%;
+ height: 70px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.img-go {
+ width: 100px;
+}
+
+.language-card-more{
+ color: #222;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px;
+}
diff --git a/static/imgs/language/go.png b/static/imgs/language/go.png
new file mode 100644
index 0000000000..5ebe8d9f0c
Binary files /dev/null and b/static/imgs/language/go.png differ
diff --git a/static/imgs/language/java.png b/static/imgs/language/java.png
new file mode 100644
index 0000000000..2d3c59f0df
Binary files /dev/null and b/static/imgs/language/java.png differ
diff --git a/static/imgs/language/node.png b/static/imgs/language/node.png
new file mode 100644
index 0000000000..e2c3956288
Binary files /dev/null and b/static/imgs/language/node.png differ
diff --git a/static/imgs/language/python.png b/static/imgs/language/python.png
new file mode 100644
index 0000000000..28f96a5766
Binary files /dev/null and b/static/imgs/language/python.png differ
diff --git a/static/imgs/language/rust.png b/static/imgs/language/rust.png
new file mode 100644
index 0000000000..82b36743d1
Binary files /dev/null and b/static/imgs/language/rust.png differ
