You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@shardingsphere.apache.org by zh...@apache.org on 2022/04/14 08:42:05 UTC

[shardingsphere-elasticjob] branch master updated: feat:add skins (#2065)

This is an automated email from the ASF dual-hosted git repository.

zhangliang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shardingsphere-elasticjob.git


The following commit(s) were added to refs/heads/master by this push:
     new 127efa369 feat:add skins (#2065)
127efa369 is described below

commit 127efa369858fe3de19ce3394f85d141dda74810
Author: davidChan3000 <ch...@163.com>
AuthorDate: Thu Apr 14 16:42:00 2022 +0800

    feat:add skins (#2065)
---
 docs/.hugo_build.lock                              |   0
 docs/config.toml                                   |   4 +-
 docs/layouts/partials/logo.html                    |  12 +-
 docs/static/css/theme-white.css                    | 707 +++++++++++++++++++++
 docs/static/img/elasticjob-blue.png                | Bin 0 -> 36161 bytes
 .../layouts/partials/change-theme.html             |  57 ++
 .../hugo-theme-learn/layouts/partials/footer.html  |  14 +-
 .../hugo-theme-learn/layouts/partials/header.html  |  30 +-
 .../layouts/partials/language.html                 |  40 ++
 .../hugo-theme-learn/layouts/partials/menu.html    |  10 +-
 .../hugo-theme-learn/static/js/jquery.sticky.js    | 483 +++++++-------
 docs/themes/hugo-theme-learn/static/js/learn.js    |  97 ++-
 12 files changed, 1200 insertions(+), 254 deletions(-)

diff --git a/docs/.hugo_build.lock b/docs/.hugo_build.lock
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/config.toml b/docs/config.toml
index f8ac7fd90..ad57047d8 100644
--- a/docs/config.toml
+++ b/docs/config.toml
@@ -22,9 +22,9 @@ languageName = "简体中文"
 
 [params]
 # Change default color scheme with a variant one. Can be "red", "blue", "green".
-themeVariant = "black"
+themeVariant = "white"
 # Disable search function. It will hide search bar
-disableSearch = true
+disableSearch = false
 editURL = "https://github.com/apache/shardingsphere-elasticjob/tree/master/docs/content/"
 
 [markup]
diff --git a/docs/layouts/partials/logo.html b/docs/layouts/partials/logo.html
index 74076167a..958ea9a80 100644
--- a/docs/layouts/partials/logo.html
+++ b/docs/layouts/partials/logo.html
@@ -1 +1,11 @@
-<img src="https://shardingsphere.apache.org/elasticjob/current/img/elasticjob.png" />
+<!--
+ * @Author: your name
+ * @Date: 2022-04-14 15:05:07
+ * @LastEditTime: 2022-04-14 16:32:03
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /discourse/Users/david/Documents/expmle/shardingsphere-elasticjob/docs/layouts/partials/logo.html
+-->
+<!-- <img src="https://shardingsphere.apache.org/elasticjob/current/img/elasticjob.png" /> -->
+<img src="https://shardingsphere.apache.org/elasticjob/current/img/elasticjob-blue.png" />
+
diff --git a/docs/static/css/theme-white.css b/docs/static/css/theme-white.css
new file mode 100644
index 000000000..bb7d903fa
--- /dev/null
+++ b/docs/static/css/theme-white.css
@@ -0,0 +1,707 @@
+body{
+    font-family: 'roboto,sans-serif';
+    letter-spacing: .33px;
+    font-weight: 400;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+}
+.wrap{
+    max-width: 1440px;
+    margin: 0 auto;
+    display: flex;
+}
+
+header{
+    background-color: #F7F7FB;
+    height: 80px;
+}
+
+header .wrap{
+    justify-content: space-between;
+    align-items: center;
+    height: 80px;
+    padding: 0 20px 0 20px;
+}
+
+header li a{
+    color:#393C4E;
+}
+
+header .select-style{
+    width: 80px;
+}
+header .select-style svg{
+    fill:#000;
+}
+
+header img{
+    height: 50px;
+}
+
+header li{list-style: none;}
+header .select-style select{
+    color:#000;
+}
+
+#body img,
+#body .video-container {
+    margin: auto;
+    text-align: left;
+    display: inherit;
+    max-width: 100%;
+    
+    /* set img size */
+}
+
+#sidebar{
+    width:350px;
+    position: sticky;
+    flex: 350px 0 0;
+    padding:0 16px 0 16px;
+    background-color: transparent;
+    bottom:initial;
+    font-weight: 400!important;
+    z-index: 2;
+}
+
+#header-wrapper{
+    position:sticky;
+    background-color: #fff;
+    border-bottom: none;
+    padding:0;
+    top:0px;
+}
+
+.searchbox{
+    height: 48px;
+    background-color: #F7F8FA;
+    border-color: #F7F8FA;
+    border-radius: 8px;
+}
+
+.searchbox input{
+    height: 48px;
+    color:#000;
+    box-shadow: none;
+}
+
+.searchbox label,.searchbox span{
+    color:#6B6D7A;
+    top:10px;
+}
+.searchbox span:hover{
+    color:#6B6D7A;
+}
+
+#sidebar a{
+    color:#000;
+}
+
+#sidebar a:hover{
+    color:#F6651C;
+}
+
+#sidebar ul li a{
+   margin-bottom: .625rem;
+}
+
+#sidebar ul li.active > a{
+    color: #F6651C!important;
+}
+
+#sidebar ul.topics > li > a{
+    font-size: 1rem;
+}
+
+#sidebar .highlightable{
+    position:sticky;
+    top:48px;
+}
+
+#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active{
+    background-color: #fff;
+}
+
+#sidebar ul.topics > li > a b{
+    font-weight: 400;
+    opacity: 1;
+}
+
+#sidebar ul li i{
+    position: relative;
+    top:3px;
+}
+
+#sidebar a.padding{
+    display: block;
+    width: 224px;
+    height: 48px;
+    border-radius: 8px 8px 8px 8px;
+    opacity: 1;
+    border: 2px solid #3A49CF;
+    text-align: center;
+    line-height: 45px;
+    color:#3A49CF;
+    font-size: 16px;
+    margin:24px  auto 0;
+    font-weight: bold;
+}
+
+#sidebar a.padding:hover{
+    color:#F6651C;
+    border-color: #F6651C;
+}
+
+#body{
+    margin-left:0;
+    min-width: 15em;
+    flex-grow: 1;
+}
+
+#body .padding{padding:1rem;}
+
+#chapter p {
+    text-align: left;
+}
+
+#chapter #body-inner{
+    max-width: 95%;
+    
+}
+
+#body-inner{
+    padding-right: 250px;
+}
+
+#chapter img{
+    /* background-color: #F3F4F6;
+    padding:10px;
+    border-radius: 41px; */
+}
+
+#TableOfContents{
+    position: fixed;
+    left: 50%;
+    width: 230px;
+    transform: translateX(calc(85% + 280px));
+    transition: top .1s ease;
+    top:192px;
+    padding-left: 20px!important;
+}
+
+#TableOfContents.sticky{
+    top: 63px;
+}
+
+
+#TableOfContents li{
+    list-style: none;
+}
+#TableOfContents a.active{
+    color:#F6651C;
+}
+#TableOfContents>ul{font-size: 1rem;padding-left:0}
+#TableOfContents > ul > li > a{padding: 0;font-weight: bold;}
+#TableOfContents>ul>li{list-style: outside;}
+#TableOfContents>ul>li>a:before{
+    display: none;
+}
+#TableOfContents>ul>li:first-child{
+    margin-top:0;
+}
+#TableOfContents>ul>li>ul{
+    font-size: 0.875rem;
+    position: relative;
+    padding-left: 17px;
+}
+#TableOfContents>ul>li>ul:before{
+    content:' ';
+    border-left: 1px solid #C4C4C4;
+    position:absolute;
+    left:2px;
+    height: 100%;
+}
+#TableOfContents>ul>li>ul>li>a{
+    position: relative;
+}
+#TableOfContents>ul>li>ul>li>a.active{
+    color:#F6651C;
+}
+#TableOfContents>ul>li>ul>li>a.active::before{
+    border-color:#F6651C ;
+    background-color: #F6651C;
+}
+#TableOfContents>ul>li>ul>li>a::before{
+    content:'';
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    border:1px solid #C4C4C4;
+    position: absolute;
+    left:-20px;
+    top:3px;
+    background-color: #fff;
+}
+#TableOfContents>ul>li>ul>li>a:hover:before{
+    border-color:#F6651C ;
+    background-color: #F6651C;
+}
+#TableOfContents>ul li{
+    margin:1.5em 0 1em;
+}
+
+#chapter table em{font-style: normal;}
+
+a{
+    color:#6B6D7A
+}
+a:hover{
+    color: #F6651C;
+}
+#body a.highlight:after{
+    background-color: #F6651C;
+}
+
+#top-bar{
+    background-color: #F7F7FB;
+}
+
+#body #navigation{
+    max-width: 95%;
+    margin:0 auto 3rem;
+    display: flex;
+    justify-content: space-between;
+    padding-right:245px;
+}
+
+#chapter #body-inner{
+    padding-bottom: 0rem;
+    margin-bottom: 0rem;
+}
+
+#body .nav{
+    position:static;
+    width: 7rem;
+    font-size: 16px;
+    line-height: 26px;
+    font-weight: bold;
+    color:#3A49CF;
+}
+#body .nav-prev{
+    text-align: left;
+}
+#body .nav-prev i{padding-right: 7px;}
+#body .nav-next{
+    text-align: right;
+}
+#body .nav:hover{
+    background:transparent;
+}
+
+#body .nav i{
+    padding-top:3px;
+}
+
+
+h1, h2, h3, h4, h5, h6{font-weight: bold;font-family:'roboto,sans-serif' ;}
+h1{
+    text-align: left;
+}
+
+h2{
+    margin:2rem 0 1rem;
+}
+h2:first-of-type{
+    margin-top:0;
+}
+
+table{
+    table-layout: fixed;
+}
+
+table td,p,code{
+    word-break:break-all;
+    white-space: inherit;
+}
+
+.icon-1{
+    position:fixed;
+    top:659px;
+    width: 50px;
+    height: 24px;
+    left:50%;
+    background:url('../img/icon-1.png') no-repeat;
+    background-size: contain;
+    transform: translate(554px, 0);
+    animation: mymove 5s ease infinite;
+}
+.icon-2{
+    position: fixed;
+    top:862px;
+    left:50%;
+    width: 30px;
+    height: 30px;
+    background:url('../img/icon-2.png') no-repeat;
+    background-size: contain;
+    transform: translateX(-540px);
+    animation: mymove2 5s ease .5s infinite;
+}
+.icon-3{
+    position:fixed;
+    /* top:1020px; */
+    bottom:80px;
+    width: 150px;
+    height: 31px;
+    left:50%;
+    background:url('../img/icon-3.png') no-repeat;
+    background-size: contain;
+    transform: translateX(525px);
+    animation: mymove3 5s ease 1s infinite;
+}
+
+.change-theme{
+    height: 32px;
+    background:#111;
+    color: #fff;
+    line-height: 32px;
+}
+.change-theme .wrap{
+    justify-content: right;
+}
+.change-theme span{
+    margin:0 16px;
+    cursor: pointer;
+    font-size: 14px;
+}
+.change-theme span svg{
+    display: none;
+    vertical-align: middle;
+}
+.change-theme span.active{
+    position:relative;
+}
+.change-theme span.active svg{
+    display: inline-block;
+}
+.change-theme span.active.retro{
+    color:#F2EFDD;
+}
+.change-theme span.active.retro svg path{
+    fill: #F2EFDD;
+}
+.change-theme span.active.eyehelp{
+    color:#C7EBC9;
+}
+.change-theme span.active.eyehelp svg path{
+    fill: #C7EBC9;
+}
+.change-theme span.active.haitian{
+    color:#E5EDFF;
+}
+.change-theme span.active.haitian svg path{
+    fill: #E5EDFF;
+}
+.change-theme span.active.deep,.change-theme span.active.dark{
+    color:#65A4FF;
+}
+.change-theme span.active.deep svg path,.change-theme span.active.dark svg path{
+    fill: #65A4FF;
+}
+/* .change-theme span.active::before{
+    content: ' ';
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left:0;
+    top:7px;
+    background-image: url('../img/theme.svg');
+} */
+
+@media only all and (min-width: 48em) and (max-width: 89.99em) {
+    #TableOfContents{
+        right: 1rem;
+        transform: translateX(0);
+        left:auto;
+    }
+}
+@media only all and (min-width: 48em) and (max-width: 59.938em) {
+    body #chapter h1 {
+        font-size: 3rem;
+    }
+    #body-inner{padding-right: 0;}
+    #TableOfContents{
+        position: static;
+        transform: translateX(0);
+    }
+    #body #navigation{padding-right: 0;}
+    .icon-3,.icon-2,.icon-1{display: none;}
+}
+@media only all and (max-width: 59.938em){
+    #body #navigation{padding-right: 0;}
+}
+@media only all and (max-width: 47.938em) {
+    header .wrap{
+        padding: 0 20px;
+    }
+    header .wrap ul{
+        padding-left:30px;
+    }
+    .change-theme span{
+        margin:0 7px;
+    }
+    body #chapter h1 {
+        font-size: 2rem;
+    }
+    #sidebar{
+        position: fixed;
+        left:-300px;
+        width: 300px;
+        padding-left: 16px;
+    }
+
+    .sidebar-hidden #body{
+        margin-left: 300px;
+    }
+
+    #body{
+        min-width: 8rem;
+    }
+
+    #body-inner{padding-right: 0;}
+    #TableOfContents{
+        position: static;
+        transform: translateX(0);
+    }
+    .icon-3,.icon-2,.icon-1{display: none;}
+
+}
+
+@keyframes mymove {
+    0%{
+        transform: translate(554px, 0);
+    }
+    50%{
+        transform: translate(554px, 20px);
+    }
+    100%{
+        transform: translate(554px, 0);
+    }
+}
+
+@keyframes mymove2 {
+    0%{
+        transform: translate(-540px, 0);
+    }
+    50%{
+        transform: translate(-540px, 20px);
+    }
+    100%{
+        transform: translate(-540px, 0);
+    }
+}
+
+@keyframes mymove3 {
+    0%{
+        transform: translate(525px, 0);
+    }
+    50%{
+        transform: translate(525px, 20px);
+    }
+    100%{
+        transform: translate(525px, 0);
+    }
+}
+
+/*change theme*/
+/*retro*/
+.retro-theme{
+    background-color: #F2EFDD;
+}
+.retro-theme header{
+    background-color: #F8F5EA;
+}
+.retro-theme #header-wrapper, .retro-theme .searchbox{
+    background-color: #F8F5EA;
+    border-radius: 8px;
+    border-color: #F8F5EA;
+}
+.retro-theme #sidebar ul.topics > li.parent,.retro-theme #sidebar ul.topics > li.active{
+    background-color: #F2EFDD;
+}
+.retro-theme #sidebar ul li.active > a{
+    background-color: #F2EFDD;
+}
+.retro-theme #top-bar{
+    background-color: #F8F5EA;
+}
+.retro-theme #TableOfContents>ul>li>ul>li>a::before{
+    background-color: #F8F5EA;
+}
+.retro-theme th{
+    background-color: #F8F5EA;
+}
+.eyehelp-theme table,.retro-theme td,.retro-theme blockquote{
+    border-color: #dfdcdc;
+}
+/*eyehelp*/
+.eyehelp-theme{
+    background-color: #C7EBC9;
+}
+.eyehelp-theme header{
+    background-color: #D6F6D7;
+}
+.eyehelp-theme #header-wrapper, .eyehelp-theme .searchbox{
+    background-color: #D6F6D7;
+    border-radius: 8px;
+    border-color: #D6F6D7;
+}
+.eyehelp-theme #sidebar ul.topics > li.parent,.eyehelp-theme #sidebar ul.topics > li.active{
+    background-color: #C7EBC9;
+}
+.eyehelp-theme #sidebar ul li.active > a{
+    background-color: #C7EBC9;
+}
+.eyehelp-theme #top-bar{
+    background-color: #D6F6D7;
+}
+.eyehelp-theme #TableOfContents>ul>li>ul>li>a::before{
+    background-color: #D6F6D7;
+}
+.eyehelp-theme th{
+    background-color: #D6F6D7;
+}
+.eyehelp-theme table,.eyehelp-theme td,.eyehelp-theme blockquote{
+    border-color: #c1c1c1;
+}
+/*haitian*/
+.haitian-theme{
+    background-color: #E5EDFF;
+}
+.haitian-theme header{
+    background-color: #EDF2FF;
+}
+.haitian-theme #header-wrapper, .haitian-theme .searchbox{
+    background-color: #EDF2FF;
+    border-radius: 8px;
+    border-color: #EDF2FF;
+}
+.haitian-theme #sidebar ul.topics > li.parent,.haitian-theme #sidebar ul.topics > li.active{
+    background-color: #E5EDFF;
+}
+.haitian-theme #sidebar ul li.active > a{
+    background-color: #E5EDFF;
+}
+.haitian-theme #top-bar{
+    background-color: #EDF2FF;
+}
+.haitian-theme #TableOfContents>ul>li>ul>li>a::before{
+    background-color: #EDF2FF;
+}
+.haitian-theme th{
+    background-color: #EDF2FF;
+}
+.haitian-theme table,.haitian-theme td,.haitian-theme blockquote{
+    border-color: #c1c1c1;
+}
+/*Deep*/
+.deep-theme{
+    background-color: #15202F;
+    color: #b8c5d9 !important;
+}
+.deep-theme header{
+    background-color: #1B283B;
+}
+.deep-theme header img{
+    height: 50px;
+}
+.deep-theme #header-wrapper, .deep-theme .searchbox{
+    background-color: #1B283B;
+    border-radius: 8px;
+    border-color: #1B283B;
+}
+.deep-theme #sidebar ul.topics > li.parent,.deep-theme #sidebar ul.topics > li.active{
+    background-color: #15202F;
+}
+.deep-theme #sidebar ul li.active > a{
+    background-color: #15202F;
+}
+.deep-theme #top-bar{
+    background-color: #1B283B;
+}
+.deep-theme #TableOfContents>ul>li>ul>li>a::before{
+    background-color: #1B283B;
+}
+.deep-theme th{
+    background-color: #1B283B;
+}
+.deep-theme table,.deep-theme td,.deep-theme blockquote{
+    border-color: #c1c1c1;
+}
+.deep-theme #body img{
+    background-color: #EDF2FF;
+    border-radius: 20px;
+}
+.deep-theme h1,
+.deep-theme h2,
+.deep-theme h3,
+.deep-theme h4,
+.deep-theme h5,
+.deep-theme h6,
+.deep-theme #sidebar a,
+.deep-theme a,
+.deep-theme .searchbox input,
+.deep-theme .select-style select{
+    color: #b8c5d9
+}
+/*Dark*/
+.dark-theme{
+    background-color: #171717;
+    color: #B1B1B1 !important;
+}
+.dark-theme header{
+    background-color: #202020;
+}
+.dark-theme header img{
+    height: 50px;
+}
+.dark-theme #header-wrapper, .dark-theme .searchbox{
+    background-color: #202020;
+    border-radius: 8px;
+    border-color: #202020;
+}
+.dark-theme #sidebar ul.topics > li.parent,.dark-theme #sidebar ul.topics > li.active{
+    background-color: #171717;
+}
+.dark-theme #sidebar ul li.active > a{
+    background-color: #171717;
+}
+.dark-theme #top-bar{
+    background-color: #202020;
+}
+.dark-theme #TableOfContents>ul>li>ul>li>a::before{
+    background-color: #202020;
+}
+.dark-theme th{
+    background-color: #202020;
+}
+.dark-theme table,.dark-theme td,.dark-theme blockquote{
+    border-color: #c1c1c1;
+}
+.dark-theme #body img{
+    background-color: #EDF2FF;
+    border-radius: 20px;
+}
+.dark-theme h1,
+.dark-theme h2,
+.dark-theme h3,
+.dark-theme h4,
+.dark-theme h5,
+.dark-theme h6,
+.dark-theme #sidebar a,
+.dark-theme a,
+.dark-theme .searchbox input,
+.dark-theme .select-style select{
+    color: #B1B1B1
+}
+
+
diff --git a/docs/static/img/elasticjob-blue.png b/docs/static/img/elasticjob-blue.png
new file mode 100644
index 000000000..09c4d27ce
Binary files /dev/null and b/docs/static/img/elasticjob-blue.png differ
diff --git a/docs/themes/hugo-theme-learn/layouts/partials/change-theme.html b/docs/themes/hugo-theme-learn/layouts/partials/change-theme.html
new file mode 100644
index 000000000..3c22b25ee
--- /dev/null
+++ b/docs/themes/hugo-theme-learn/layouts/partials/change-theme.html
@@ -0,0 +1,57 @@
+<div class="change-theme">
+    <div class="wrap">
+        {{ if eq .Lang "en"}}
+        <span data-item="retro">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            Retro
+        </span>
+        <span data-item="eyehelp">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            Eye care
+        </span>
+        <span data-item="haitian">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            Haitian
+        </span>
+        <span data-item="deep">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            Deep
+        </span>
+        <span data-item="dark">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            Dark
+        </span>
+        <span class="active">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            Default
+        </span>
+        {{ else }}
+        <span data-item="retro">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            复古
+        </span>
+        <span data-item="eyehelp">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            护眼
+        </span>
+        <span data-item="haitian">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            海天
+        </span>
+        <span data-item="deep">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            深邃
+        </span>
+        <span data-item="dark">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            暗黑
+        </span>
+        <span class="active">
+            <svg t="1649761460834" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2052" width="16" height="16"><path d="M755.093336 61.436797a511.973304 511.973304 0 1 0 207.495466 693.650688l-99.615377-53.757197a398.827204 398.827204 0 1 1-161.637286-540.351253l53.757197-99.615378z" fill="#ffffff" p-id="2053"></path><path d="M1204.971593 188.84501L534.652259 736.217612l-285.242269-364.086159 86.304071-67.653615 216.199012 275.953611 583.64956 [...]
+            默认
+        </span>
+        {{ end }}
+    </div>
+</div>
+
+
diff --git a/docs/themes/hugo-theme-learn/layouts/partials/footer.html b/docs/themes/hugo-theme-learn/layouts/partials/footer.html
index 61a90cb7d..e1b943475 100644
--- a/docs/themes/hugo-theme-learn/layouts/partials/footer.html
+++ b/docs/themes/hugo-theme-learn/layouts/partials/footer.html
@@ -41,15 +41,23 @@
 
 
         {{with ($.Scratch.Get "prevPage")}}
-            <a class="nav nav-prev" href="{{.URL}}" title="{{.Title}}"> <i class="fa fa-chevron-left"></i></a>
+        {{ if eq .Lang "en"}}
+            <a class="nav nav-prev" href="{{.URL}}" title="{{.Title}}"> <i class="fa fa-long-arrow-left fa-lg"></i> Previous</a>
+        {{ else }} 
+            <a class="nav nav-prev" href="{{.URL}}" title="{{.Title}}"> <i class="fa fa-long-arrow-left fa-lg"></i> 上一篇</a>
+        {{end}}
         {{end}}
         {{with ($.Scratch.Get "nextPage")}}
-            <a class="nav nav-next" href="{{.URL}}" title="{{.Title}}" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>
+        {{ if eq .Lang "en"}}
+            <a class="nav nav-next" href="{{.URL}}" title="{{.Title}}" style="margin-right: 0px;">Next<i class="fa fa-long-arrow-right fa-lg"></i></a>
+        {{ else }} 
+            <a class="nav nav-next" href="{{.URL}}" title="{{.Title}}" style="margin-right: 0px;">下一篇 <i class="fa fa-long-arrow-right fa-lg"></i></a>
+        {{end}}
         {{end}}
     </div>
 
     </section>
-    
+</div>
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
diff --git a/docs/themes/hugo-theme-learn/layouts/partials/header.html b/docs/themes/hugo-theme-learn/layouts/partials/header.html
index 550c38250..f5ee119ff 100644
--- a/docs/themes/hugo-theme-learn/layouts/partials/header.html
+++ b/docs/themes/hugo-theme-learn/layouts/partials/header.html
@@ -22,7 +22,26 @@
     {{end}}
 
     <script src="{{"js/jquery-2.x.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
-    
+    <!-- baidu Analytics -->
+    <script>
+      var _hmt = _hmt || [];
+      (function() {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?d5a1dc8dcf63a64ee55b80de01c7fb1a";
+        var s = document.getElementsByTagName("script")[0]; 
+        s.parentNode.insertBefore(hm, s);
+      })();   
+    </script>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HETCF66YL0"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){window.dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-HETCF66YL0');
+    </script>
+
     <style type="text/css">
       :root #header + #content > #left > #rlblock_left{ 
           display:none !important;
@@ -68,6 +87,15 @@
     {{ partial "custom-header.html" . }}
   </head>
   <body class="" data-url="{{ .RelPermalink }}">
+    {{ partial "change-theme.html" . }}
+    <header>
+      <div class="wrap">
+        {{ partial "logo.html" . }}
+        
+        {{ partial "language.html" . }}
+      </div>
+    </header>
+    <div class="wrap">
     {{ partial "menu.html" . }}
         <section id="body">
         <div id="overlay"></div>
diff --git a/docs/themes/hugo-theme-learn/layouts/partials/language.html b/docs/themes/hugo-theme-learn/layouts/partials/language.html
new file mode 100644
index 000000000..9a2c313c8
--- /dev/null
+++ b/docs/themes/hugo-theme-learn/layouts/partials/language.html
@@ -0,0 +1,40 @@
+{{ $currentNode := . }}
+        {{ $showvisitedlinks := .Site.Params.showVisitedLinks }}
+        {{ if or .Site.IsMultiLingual $showvisitedlinks }}
+        <section id="prefooter">
+          <!-- <hr/> -->
+          <ul>
+          {{ if and .Site.IsMultiLingual (not .Site.Params.DisableLanguageSwitchingButton)}}
+            <li>
+              <a class="padding">
+                <i class="fa fa-fw fa-language"></i>
+              <div class="select-style">
+                <select id="select-language" onchange="location = this.value;">
+              {{ $siteLanguages := .Site.Languages}}
+              {{ $pageLang := .Page.Lang}}
+              {{ range .Page.AllTranslations }}
+                  {{ $translation := .}}
+                  {{ range $siteLanguages }}
+                      {{ if eq $translation.Lang .Lang }}
+                        {{ $selected := false }}
+                        {{ if eq $pageLang .Lang}}
+                          <option id="{{ $translation.Language }}" value="{{ $translation.URL }}" selected>{{ .LanguageName }}</option>
+                        {{ else }}
+                          <option id="{{ $translation.Language }}" value="{{ $translation.URL }}">{{ .LanguageName }}</option>
+                        {{ end }}
+                      {{ end }}
+                  {{ end }}
+              {{ end }}
+            </select>
+            <svg t="1645437162166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2449" width="32" height="32"><path d="M483.072 714.496l30.165333 30.208 415.957334-415.829333a42.837333 42.837333 0 0 0 0-60.288 42.538667 42.538667 0 0 0-60.330667-0.042667l-355.541333 355.413333-355.242667-355.413333a42.496 42.496 0 0 0-60.288 0 42.837333 42.837333 0 0 0-0.085333 60.330667l383.701333 383.872 1.706667 1.749333z" fill="#3D3D3D" p-id="2450"></path></svg>
+            </div>
+            </a>
+            </li>
+          {{end}} 
+          
+          {{ if $showvisitedlinks}}
+            <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fa fa-fw fa-history"></i> {{T "Clear-History"}}</a></li>         
+          {{ end }}
+          </ul>
+        </section>
+        {{ end }}
\ No newline at end of file
diff --git a/docs/themes/hugo-theme-learn/layouts/partials/menu.html b/docs/themes/hugo-theme-learn/layouts/partials/menu.html
index 0f2b5cbbe..79d2badd6 100644
--- a/docs/themes/hugo-theme-learn/layouts/partials/menu.html
+++ b/docs/themes/hugo-theme-learn/layouts/partials/menu.html
@@ -3,9 +3,9 @@
 {{ $currentNode := . }}
 {{ $showvisitedlinks := .Site.Params.showVisitedLinks }}
   <div id="header-wrapper">
-    <div id="header">
+    <!-- <div id="header">
       {{ partial "logo.html" . }}
-    </div>
+    </div> -->
     {{if not .Site.Params.disableSearch}}
         {{ partial "search.html" . }}
     {{end}}
@@ -39,7 +39,7 @@
       </section>
     {{end}}
 
-    {{ if or .Site.IsMultiLingual $showvisitedlinks }}
+    <!-- {{ if or .Site.IsMultiLingual $showvisitedlinks }}
     <section id="prefooter">
       <hr/>
       <ul>
@@ -83,10 +83,10 @@
       {{ end }}
       </ul>
     </section>
-    {{ end }}
+    {{ end }} -->
 
     <!-- download button -->
-    <hr />
+    <!-- <hr /> -->
     {{ if eq .Lang "en"}}
       <a class="padding" href="{{"https://shardingsphere.apache.org/pdf/shardingsphere-elasticjob_docs_en.pdf" | absURL}}">
         <i class="fa fa-fw fa-file-pdf-o" ></i>&nbsp;Download PDF&nbsp;&nbsp;<!-- &nbsp; is a placeholder -->
diff --git a/docs/themes/hugo-theme-learn/static/js/jquery.sticky.js b/docs/themes/hugo-theme-learn/static/js/jquery.sticky.js
index fe433c515..8df6db424 100644
--- a/docs/themes/hugo-theme-learn/static/js/jquery.sticky.js
+++ b/docs/themes/hugo-theme-learn/static/js/jquery.sticky.js
@@ -11,278 +11,281 @@
 //              might need to adjust the width in some cases.
 
 (function (factory) {
-    if (typeof define === 'function' && define.amd) {
-        // AMD. Register as an anonymous module.
-        define(['jquery'], factory);
-    } else if (typeof module === 'object' && module.exports) {
-        // Node/CommonJS
-        module.exports = factory(require('jquery'));
-    } else {
-        // Browser globals
-        factory(jQuery);
-    }
+  if (typeof define === 'function' && define.amd) {
+      // AMD. Register as an anonymous module.
+      define(['jquery'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+      // Node/CommonJS
+      module.exports = factory(require('jquery'));
+  } else {
+      // Browser globals
+      factory(jQuery);
+  }
 }(function ($) {
-    var slice = Array.prototype.slice; // save ref to original slice()
-    var splice = Array.prototype.splice; // save ref to original slice()
+  var slice = Array.prototype.slice; // save ref to original slice()
+  var splice = Array.prototype.splice; // save ref to original slice()
 
-  var defaults = {
-      topSpacing: 0,
-      bottomSpacing: 0,
-      className: 'is-sticky',
-      wrapperClassName: 'sticky-wrapper',
-      center: false,
-      getWidthFrom: '',
-      widthFromWrapper: true, // works only when .getWidthFrom is empty
-      responsiveWidth: false,
-      zIndex: 'inherit'
-    },
-    $window = $(window),
-    $document = $(document),
-    sticked = [],
-    windowHeight = $window.height(),
-    scroller = function() {
-      var scrollTop = $window.scrollTop(),
-        documentHeight = $document.height(),
-        dwh = documentHeight - windowHeight,
-        extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
+var defaults = {
+    topSpacing: 0,
+    bottomSpacing: 0,
+    className: 'is-sticky',
+    wrapperClassName: 'sticky-wrapper',
+    center: false,
+    getWidthFrom: '',
+    widthFromWrapper: true, // works only when .getWidthFrom is empty
+    responsiveWidth: false,
+    zIndex: 'inherit'
+  },
+  $window = $(window),
+  $document = $(document),
+  $TableOfContents = $('#TableOfContents'),
+  sticked = [],
+  windowHeight = $window.height(),
+  scroller = function() {
+    var scrollTop = $window.scrollTop(),
+      documentHeight = $document.height(),
+      dwh = documentHeight - windowHeight,
+      extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
 
-      for (var i = 0, l = sticked.length; i < l; i++) {
-        var s = sticked[i],
-          elementTop = s.stickyWrapper.offset().top,
-          etse = elementTop - s.topSpacing - extra;
+    for (var i = 0, l = sticked.length; i < l; i++) {
+      var s = sticked[i],
+        elementTop = s.stickyWrapper.offset().top,
+        etse = elementTop - s.topSpacing - extra;
 
-        //update height in case of dynamic content
-        s.stickyWrapper.css('height', s.stickyElement.outerHeight());
+      //update height in case of dynamic content
+      s.stickyWrapper.css('height', s.stickyElement.outerHeight());
 
-        if (scrollTop <= etse) {
-          if (s.currentTop !== null) {
-            s.stickyElement
-              .css({
-                'width': '',
-                'position': '',
-                'top': '',
-                'z-index': ''
-              });
-            s.stickyElement.parent().removeClass(s.className);
-            s.stickyElement.trigger('sticky-end', [s]);
-            s.currentTop = null;
-          }
+      if (scrollTop <= etse) {
+        if (s.currentTop !== null) {
+          s.stickyElement
+            .css({
+              'width': '',
+              'position': '',
+              'top': '',
+              'z-index': ''
+            });
+          s.stickyElement.parent().removeClass(s.className);
+          $TableOfContents.removeClass('sticky');
+          s.stickyElement.trigger('sticky-end', [s]);
+          s.currentTop = null;
         }
-        else {
-          var newTop = documentHeight - s.stickyElement.outerHeight()
-            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
-          if (newTop < 0) {
-            newTop = newTop + s.topSpacing;
-          } else {
-            newTop = s.topSpacing;
+      }
+      else {
+        var newTop = documentHeight - s.stickyElement.outerHeight()
+          - s.topSpacing - s.bottomSpacing - scrollTop - extra;
+        if (newTop < 0) {
+          newTop = newTop + s.topSpacing;
+        } else {
+          newTop = s.topSpacing;
+        }
+        if (s.currentTop !== newTop) {
+          var newWidth;
+          if (s.getWidthFrom) {
+              padding =  s.stickyElement.innerWidth() - s.stickyElement.width();
+              newWidth = $(s.getWidthFrom).width() - padding || null;
+          } else if (s.widthFromWrapper) {
+              newWidth = s.stickyWrapper.width();
           }
-          if (s.currentTop !== newTop) {
-            var newWidth;
-            if (s.getWidthFrom) {
-                padding =  s.stickyElement.innerWidth() - s.stickyElement.width();
-                newWidth = $(s.getWidthFrom).width() - padding || null;
-            } else if (s.widthFromWrapper) {
-                newWidth = s.stickyWrapper.width();
-            }
-            if (newWidth == null) {
-                newWidth = s.stickyElement.width();
-            }
-            s.stickyElement
-              .css('width', newWidth)
-              .css('position', 'fixed')
-              .css('top', newTop)
-              .css('z-index', s.zIndex);
-
-            s.stickyElement.parent().addClass(s.className);
-
-            if (s.currentTop === null) {
-              s.stickyElement.trigger('sticky-start', [s]);
-            } else {
-              // sticky is started but it have to be repositioned
-              s.stickyElement.trigger('sticky-update', [s]);
-            }
+          if (newWidth == null) {
+              newWidth = s.stickyElement.width();
+          }
+          s.stickyElement
+            .css('width', newWidth)
+            .css('position', 'fixed')
+            .css('top', newTop)
+            .css('z-index', s.zIndex);
+          
+          s.stickyElement.parent().addClass(s.className);
+          $TableOfContents.addClass('sticky')
 
-            if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) {
-              // just reached bottom || just started to stick but bottom is already reached
-              s.stickyElement.trigger('sticky-bottom-reached', [s]);
-            } else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
-              // sticky is started && sticked at topSpacing && overflowing from top just finished
-              s.stickyElement.trigger('sticky-bottom-unreached', [s]);
-            }
+          if (s.currentTop === null) {
+            s.stickyElement.trigger('sticky-start', [s]);
+          } else {
+            // sticky is started but it have to be repositioned
+            s.stickyElement.trigger('sticky-update', [s]);
+          }
 
-            s.currentTop = newTop;
+          if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) {
+            // just reached bottom || just started to stick but bottom is already reached
+            s.stickyElement.trigger('sticky-bottom-reached', [s]);
+          } else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) {
+            // sticky is started && sticked at topSpacing && overflowing from top just finished
+            s.stickyElement.trigger('sticky-bottom-unreached', [s]);
           }
 
-          // Check if sticky has reached end of container and stop sticking
-          var stickyWrapperContainer = s.stickyWrapper.parent();
-          var unstick = (s.stickyElement.offset().top + s.stickyElement.outerHeight() >= stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight()) && (s.stickyElement.offset().top <= s.topSpacing);
+          s.currentTop = newTop;
+        }
 
-          if( unstick ) {
-            s.stickyElement
-              .css('position', 'absolute')
-              .css('top', '')
-              .css('bottom', 0)
-              .css('z-index', '');
-          } else {
-            s.stickyElement
-              .css('position', 'fixed')
-              .css('top', newTop)
-              .css('bottom', '')
-              .css('z-index', s.zIndex);
-          }
+        // Check if sticky has reached end of container and stop sticking
+        var stickyWrapperContainer = s.stickyWrapper.parent();
+        var unstick = (s.stickyElement.offset().top + s.stickyElement.outerHeight() >= stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight()) && (s.stickyElement.offset().top <= s.topSpacing);
+
+        if( unstick ) {
+          s.stickyElement
+            .css('position', 'absolute')
+            .css('top', '')
+            .css('bottom', 0)
+            .css('z-index', '');
+        } else {
+          s.stickyElement
+            .css('position', 'fixed')
+            .css('top', newTop)
+            .css('bottom', '')
+            .css('z-index', s.zIndex);
         }
       }
-    },
-    resizer = function() {
-      windowHeight = $window.height();
+    }
+  },
+  resizer = function() {
+    windowHeight = $window.height();
 
-      for (var i = 0, l = sticked.length; i < l; i++) {
-        var s = sticked[i];
-        var newWidth = null;
-        if (s.getWidthFrom) {
-            if (s.responsiveWidth) {
-                newWidth = $(s.getWidthFrom).width();
-            }
-        } else if(s.widthFromWrapper) {
-            newWidth = s.stickyWrapper.width();
-        }
-        if (newWidth != null) {
-            s.stickyElement.css('width', newWidth);
-        }
+    for (var i = 0, l = sticked.length; i < l; i++) {
+      var s = sticked[i];
+      var newWidth = null;
+      if (s.getWidthFrom) {
+          if (s.responsiveWidth) {
+              newWidth = $(s.getWidthFrom).width();
+          }
+      } else if(s.widthFromWrapper) {
+          newWidth = s.stickyWrapper.width();
       }
-    },
-    methods = {
-      init: function(options) {
-        return this.each(function() {
-          var o = $.extend({}, defaults, options);
-          var stickyElement = $(this);
+      if (newWidth != null) {
+          s.stickyElement.css('width', newWidth);
+      }
+    }
+  },
+  methods = {
+    init: function(options) {
+      return this.each(function() {
+        var o = $.extend({}, defaults, options);
+        var stickyElement = $(this);
 
-          var stickyId = stickyElement.attr('id');
-          var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName;
-          var wrapper = $('<div></div>')
-            .attr('id', wrapperId)
-            .addClass(o.wrapperClassName);
+        var stickyId = stickyElement.attr('id');
+        var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName;
+        var wrapper = $('<div></div>')
+          .attr('id', wrapperId)
+          .addClass(o.wrapperClassName);
 
-          stickyElement.wrapAll(function() {
-            if ($(this).parent("#" + wrapperId).length == 0) {
-                    return wrapper;
-            }
+        stickyElement.wrapAll(function() {
+          if ($(this).parent("#" + wrapperId).length == 0) {
+                  return wrapper;
+          }
 });
 
-          var stickyWrapper = stickyElement.parent();
+        var stickyWrapper = stickyElement.parent();
 
-          if (o.center) {
-            stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
-          }
-
-          if (stickyElement.css("float") === "right") {
-            stickyElement.css({"float":"none"}).parent().css({"float":"right"});
-          }
+        if (o.center) {
+          stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
+        }
 
-          o.stickyElement = stickyElement;
-          o.stickyWrapper = stickyWrapper;
-          o.currentTop    = null;
+        if (stickyElement.css("float") === "right") {
+          stickyElement.css({"float":"none"}).parent().css({"float":"right"});
+        }
 
-          sticked.push(o);
+        o.stickyElement = stickyElement;
+        o.stickyWrapper = stickyWrapper;
+        o.currentTop    = null;
 
-          methods.setWrapperHeight(this);
-          methods.setupChangeListeners(this);
-        });
-      },
+        sticked.push(o);
 
-      setWrapperHeight: function(stickyElement) {
-        var element = $(stickyElement);
-        var stickyWrapper = element.parent();
-        if (stickyWrapper) {
-          stickyWrapper.css('height', element.outerHeight());
-        }
-      },
+        methods.setWrapperHeight(this);
+        methods.setupChangeListeners(this);
+      });
+    },
 
-      setupChangeListeners: function(stickyElement) {
-        if (window.MutationObserver) {
-          var mutationObserver = new window.MutationObserver(function(mutations) {
-            if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
-              methods.setWrapperHeight(stickyElement);
-            }
-          });
-          mutationObserver.observe(stickyElement, {subtree: true, childList: true});
-        } else {
-          if (window.addEventListener) {
-            stickyElement.addEventListener('DOMNodeInserted', function() {
-              methods.setWrapperHeight(stickyElement);
-            }, false);
-            stickyElement.addEventListener('DOMNodeRemoved', function() {
-              methods.setWrapperHeight(stickyElement);
-            }, false);
-          } else if (window.attachEvent) {
-            stickyElement.attachEvent('onDOMNodeInserted', function() {
-              methods.setWrapperHeight(stickyElement);
-            });
-            stickyElement.attachEvent('onDOMNodeRemoved', function() {
-              methods.setWrapperHeight(stickyElement);
-            });
-          }
-        }
-      },
-      update: scroller,
-      unstick: function(options) {
-        return this.each(function() {
-          var that = this;
-          var unstickyElement = $(that);
+    setWrapperHeight: function(stickyElement) {
+      var element = $(stickyElement);
+      var stickyWrapper = element.parent();
+      if (stickyWrapper) {
+        stickyWrapper.css('height', element.outerHeight());
+      }
+    },
 
-          var removeIdx = -1;
-          var i = sticked.length;
-          while (i-- > 0) {
-            if (sticked[i].stickyElement.get(0) === that) {
-                splice.call(sticked,i,1);
-                removeIdx = i;
-            }
-          }
-          if(removeIdx !== -1) {
-            unstickyElement.unwrap();
-            unstickyElement
-              .css({
-                'width': '',
-                'position': '',
-                'top': '',
-                'float': '',
-                'z-index': ''
-              })
-            ;
+    setupChangeListeners: function(stickyElement) {
+      if (window.MutationObserver) {
+        var mutationObserver = new window.MutationObserver(function(mutations) {
+          if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
+            methods.setWrapperHeight(stickyElement);
           }
         });
+        mutationObserver.observe(stickyElement, {subtree: true, childList: true});
+      } else {
+        if (window.addEventListener) {
+          stickyElement.addEventListener('DOMNodeInserted', function() {
+            methods.setWrapperHeight(stickyElement);
+          }, false);
+          stickyElement.addEventListener('DOMNodeRemoved', function() {
+            methods.setWrapperHeight(stickyElement);
+          }, false);
+        } else if (window.attachEvent) {
+          stickyElement.attachEvent('onDOMNodeInserted', function() {
+            methods.setWrapperHeight(stickyElement);
+          });
+          stickyElement.attachEvent('onDOMNodeRemoved', function() {
+            methods.setWrapperHeight(stickyElement);
+          });
+        }
       }
-    };
-
-  // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
-  if (window.addEventListener) {
-    window.addEventListener('scroll', scroller, false);
-    window.addEventListener('resize', resizer, false);
-  } else if (window.attachEvent) {
-    window.attachEvent('onscroll', scroller);
-    window.attachEvent('onresize', resizer);
-  }
+    },
+    update: scroller,
+    unstick: function(options) {
+      return this.each(function() {
+        var that = this;
+        var unstickyElement = $(that);
 
-  $.fn.sticky = function(method) {
-    if (methods[method]) {
-      return methods[method].apply(this, slice.call(arguments, 1));
-    } else if (typeof method === 'object' || !method ) {
-      return methods.init.apply( this, arguments );
-    } else {
-      $.error('Method ' + method + ' does not exist on jQuery.sticky');
+        var removeIdx = -1;
+        var i = sticked.length;
+        while (i-- > 0) {
+          if (sticked[i].stickyElement.get(0) === that) {
+              splice.call(sticked,i,1);
+              removeIdx = i;
+          }
+        }
+        if(removeIdx !== -1) {
+          unstickyElement.unwrap();
+          unstickyElement
+            .css({
+              'width': '',
+              'position': '',
+              'top': '',
+              'float': '',
+              'z-index': ''
+            })
+          ;
+        }
+      });
     }
   };
 
-  $.fn.unstick = function(method) {
-    if (methods[method]) {
-      return methods[method].apply(this, slice.call(arguments, 1));
-    } else if (typeof method === 'object' || !method ) {
-      return methods.unstick.apply( this, arguments );
-    } else {
-      $.error('Method ' + method + ' does not exist on jQuery.sticky');
-    }
-  };
-  $(function() {
-    setTimeout(scroller, 0);
-  });
+// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
+if (window.addEventListener) {
+  window.addEventListener('scroll', scroller, false);
+  window.addEventListener('resize', resizer, false);
+} else if (window.attachEvent) {
+  window.attachEvent('onscroll', scroller);
+  window.attachEvent('onresize', resizer);
+}
+
+$.fn.sticky = function(method) {
+  if (methods[method]) {
+    return methods[method].apply(this, slice.call(arguments, 1));
+  } else if (typeof method === 'object' || !method ) {
+    return methods.init.apply( this, arguments );
+  } else {
+    $.error('Method ' + method + ' does not exist on jQuery.sticky');
+  }
+};
+
+$.fn.unstick = function(method) {
+  if (methods[method]) {
+    return methods[method].apply(this, slice.call(arguments, 1));
+  } else if (typeof method === 'object' || !method ) {
+    return methods.unstick.apply( this, arguments );
+  } else {
+    $.error('Method ' + method + ' does not exist on jQuery.sticky');
+  }
+};
+$(function() {
+  setTimeout(scroller, 0);
+});
 }));
diff --git a/docs/themes/hugo-theme-learn/static/js/learn.js b/docs/themes/hugo-theme-learn/static/js/learn.js
index d1acd4c27..976300675 100644
--- a/docs/themes/hugo-theme-learn/static/js/learn.js
+++ b/docs/themes/hugo-theme-learn/static/js/learn.js
@@ -49,7 +49,7 @@ function fallbackMessage(action) {
 
 // for the window resize
 $(window).resize(function() {
-    setMenuHeight();
+    // setMenuHeight();
 });
 
 // debouncing function from John Hann
@@ -91,7 +91,7 @@ jQuery(document).ready(function() {
 
     var sidebarStatus = searchStatus = 'open';
     $('#sidebar .highlightable').perfectScrollbar();
-    setMenuHeight();
+    // setMenuHeight();
 
     jQuery('#overlay').on('click', function() {
         jQuery(document.body).toggleClass('sidebar-hidden');
@@ -375,8 +375,101 @@ $(function() {
     $('a[rel="lightbox"]').featherlight({
         root: 'section#body'
     });
+
+    var logo = $('header img')
+    var logosrc = logo.attr('src')
+    var loadTheme = localStorage.getItem('ss-theme')
+    if(loadTheme){
+        $('body').attr("class", loadTheme+'-theme');
+        $('.change-theme span').removeClass('active')
+        $('.change-theme span[data-item='+loadTheme+']').addClass('active')
+        $('.change-theme span[data-item='+loadTheme+']').addClass(loadTheme)
+    }  
+    // if(/dark|deep/.test(loadTheme)){
+    //     logo.attr('src', logosrc.replace('logo_v3','logo_v2'))
+    // }else{
+    //     logo.attr('src', logosrc.replace('logo_v2','logo_v3'))
+    // }
+
+    $('.change-theme span').click(function(){
+        var _this = $(this),
+        theme =  _this.data('item')
+        if(theme){
+            $('body').attr("class", theme+'-theme');
+            localStorage.setItem('ss-theme', theme)
+        }else{
+            $('body').attr("class", '');
+            localStorage.setItem('ss-theme', '')
+        }
+        // if(/dark|deep/.test(theme)){
+        //     logo.attr('src', logosrc.replace('logo_v3','logo_v2'))
+        // }else{
+        //     logo.attr('src', logosrc.replace('logo_v2','logo_v3'))
+        // }
+        _this.addClass('active')
+        _this.addClass(theme)
+        _this.siblings().attr('class','')
+    })
 });
 
+window.onload = function(){
+    var markdown = document.querySelector('#body'),
+    h2s = markdown.querySelectorAll('h2'),
+    bookToc = document.querySelector('#TableOfContents');
+    if(bookToc){
+      var bocs = bookToc.querySelectorAll('a'),
+      h2Info = [];
+      h2s.forEach(item=>{
+        h2Info.push({
+          top: item.offsetTop,
+          id: item.id
+        })
+      })
+      
+      function ScollPostion() {
+        var t, l, w, h;
+        if (document.documentElement && document.documentElement.scrollTop) {
+            t = document.documentElement.scrollTop;
+            l = document.documentElement.scrollLeft;
+            w = document.documentElement.scrollWidth;
+            h = document.documentElement.scrollHeight;
+        } else if (document.body) {
+            t = document.body.scrollTop;
+            l = document.body.scrollLeft;
+            w = document.body.scrollWidth;
+            h = document.body.scrollHeight;
+        }
+        return {
+            top: t,
+            left: l,
+            width: w,
+            height: h
+        };
+    }
+
+      function deal(str){
+        bocs.forEach(function(item){
+          if(item.getAttribute('href').split('#')[1] == str){
+            // console.log(item, str)
+            item.classList='active'
+          }else{
+            item.classList=''
+          }
+        })
+      }
+
+      document.body.onscroll = function(e){
+        var scrollTop = ScollPostion().top
+        h2Info.map(function(item){
+          if(Math.abs(scrollTop - item.top)<20){
+            deal(item.id)
+          }
+        })
+      }
+    }
+    
+  }
+
 jQuery.extend({
     highlight: function(node, re, nodeName, className) {
         if (node.nodeType === 3) {