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

update: fix bugs and update style 

Signed-off-by: liuboaibc <kukudehero@gmail.com>
This commit is contained in:
liuboaibc 2020-09-22 18:29:03 +08:00
parent 12344340ee
commit 8f466739bf
21 changed files with 273 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/scss/common.scss
View File

@ -23,6 +23,10 @@ section {
}
}
::-webkit-scrollbar-track {
background: transparent;
}
.padding {
padding-top: 40px;
}
@ -374,6 +378,7 @@ section {
.code-over-div {
position: relative;
overflow: auto;
padding: 1em;
}
.copy-code-button {
display: none;

35
assets/scss/content.scss
View File

@ -78,7 +78,6 @@
}
.md-body h2 {
font-size: 24px;
font-weight: 500;
line-height: 64px;
color: #171c34;
@ -89,7 +88,6 @@
}
.md-body h3 {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: #171c34;
@ -142,12 +140,22 @@
}
.aside {
position: fixed;
top: 150px;
left: 50%;
bottom: 10px;
transform: translateX(350px);
width: 230px;
max-height: 700px;
overflow: scroll;
@media only screen and (max-width: $mobile-max-width) {
display: none;
}
.inner-div {
max-height: 100%;
position: relative;
overflow: scroll;
}
.title {
height: 32px;
font-size: 24px;
@ -178,26 +186,15 @@
color: #55bc8a;
}
}
.active {
color: #55bc8a;
}
}
li li {
padding-left: 20px;
}
}
}
.aside-fixed {
position: fixed;
top: 150px;
left: 50%;
transform: translateX(350px);
}
.aside-absolute {
position: absolute;
right: 0;
bottom: 0;
top: none;
left: none;
}
}
}

130
assets/scss/doc.scss
View File

@ -153,20 +153,33 @@ body {
}
.left-div {
position: absolute;
top: 0;
left: 0;
width: 274px;
background-color: #ffffff;
position: fixed;
top: 260px;
bottom: 20px;
left: 50%;
transform: translateX(-580px);
width: 200px;
z-index: 2;
transition: all 0.5s;
@media only screen and (max-width: 1160px) {
left: 0;
transform: translateX(0px);
}
@media only screen and (max-width: $mobile-max-width) {
left: -274px;
transition: all 0.5s;
left: -200px;
}
.inner-tree {
max-height: 100%;
position: relative;
overflow: scroll;
background-color: #ffffff;
}
.nav-menu {
padding: 20px;
padding: 10px;
font-size: 14px;
color: #31383e;
background-color: #f6f8fa;
@ -229,7 +242,6 @@ body {
}
.download-div {
width: 274px;
height: 44px;
margin-top: 10px;
line-height: 44px;
@ -258,9 +270,9 @@ body {
.middle-div {
position: relative;
margin-left: 274px;
margin-right: 80px;
padding: 10px 20px;
margin-left: 200px;
margin-right: 160px;
padding: 10px 10px;
@media only screen and (max-width: $mobile-max-width) {
margin: 0;
@ -415,21 +427,18 @@ body {
.content-div {
.md-body {
font-size: 16px;
line-height: 1.71;
line-height: 2.29;
color: #36435c;
}
.md-body h2 {
font-size: 24px;
font-weight: 500;
line-height: 40px;
color: #171c34;
text-shadow: none;
text-align: left;
}
.md-body h3 {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: #171c34;
@ -579,65 +588,58 @@ body {
}
.aside {
position: relative;
width: 174px;
padding-left: 10px;
border-left: 1px solid #dde1e6;
max-height: 600px;
overflow: scroll;
position: fixed;
top: 260px;
bottom: 10px;
left: 50%;
transform: translateX(420px);
width: 160px;
@media only screen and (max-width: $mobile-max-width) {
display: none;
display: none;
}
.inner-div {
max-height: 100%;
position: relative;
overflow: scroll;
padding-left: 10px;
border-left: 1px solid #dde1e6;
}
.title {
font-size: 14px;
line-height: 1.71;
color: #3e464c;
font-size: 14px;
line-height: 1.71;
color: #3e464c;
}
.tabs {
#TableOfContents > ul > li > a {
font-weight: 500;
}
li {
margin: 8px 0;
font-size: 14px;
a {
display: block;
width: 100%;
font-weight: 400;
line-height: 24px;
color: #68747f;
&:hover {
color: #00a971;
}
#TableOfContents > ul > li > a {
font-weight: 500;
}
li {
margin: 8px 0;
font-size: 14px;
a {
display: block;
width: 100%;
font-weight: 400;
line-height: 24px;
color: #68747f;
&:hover {
color: #00a971;
}
}
.active {
color: #00a971;
.active {
color: #00a971;
}
}
li li {
padding-left: 20px;
}
}
li li {
padding-left: 20px;
}
}
}
.aside-fixed {
position: fixed;
top: 260px;
left: 50%;
transform: translateX(500px);
}
.aside-absolute {
position: absolute;
right: -104px;
bottom: 0;
top: none;
left: none;
}
}

5
assets/scss/docs.scss
View File

@ -183,13 +183,16 @@
font-size: 11px;
line-height: 34px;
text-align: center;
color: #ffffff;
border-radius: 17px;
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, #242e42, #242e42);
&:hover {
box-shadow: none;
}
a {
color: #ffffff;
}
}
}
}

2
assets/scss/markdown.scss
View File

@ -164,7 +164,7 @@
}
.md-body h2 {
font-size: 32px;
font-size: 1.8em;
font-weight: normal;
line-height: 1.63;
text-align: center;

1
assets/scss/partner.scss
View File

@ -360,6 +360,7 @@
font-size: 14px;
line-height: 1.71;
color: #ffffff;
overflow: auto;
}
}
}

6
config/_default/config.toml
View File

@ -2,7 +2,7 @@ baseURL = "https://kubesphere-v3.netlify.app"
[markup]
[markup.tableOfContents]
endLevel = 4
endLevel = 3
ordered = false
startLevel = 2
@ -100,7 +100,7 @@ hasChildren = true
[[languages.en.menu.main]]
parent = "Documentation"
name = "v3.0.0"
name = "v3.0.0 <img src='/images/header/star.svg' alt='star'>"
URL = "docs/"
weight = 1
@ -226,7 +226,7 @@ hasChildren = true
name = "文档中心"
[[languages.zh.menu.main]]
parent = "文档中心"
name = "v3.0.0"
name = "v3.0.0 <img src='/images/header/star.svg' alt='star'>"
URL = "docs/"
weight = 1

13
content/en/support/_index.md Normal file
View File

@ -0,0 +1,13 @@
---
title: "support"
css: "scss/contribution.scss"
section1:
title: 'Community is the Soul of KubeSphere'
content: 'Join the community to get help, get involved, or get updates and KubeSphere news!'
topImage: "/images/contribution/contribution-top.jpg"
sectionIframe:
formUrl: https://jinshuju.net/f/bDS8me/embedded.js?inner_redirect=false&banner=show&background=white&height=1838
---

13
content/zh/support/_index.md Normal file
View File

@ -0,0 +1,13 @@
---
title: "support"
css: "scss/contribution.scss"
section1:
title: 'Community is the Soul of KubeSphere'
content: 'Join the community to get help, get involved, or get updates and KubeSphere news!'
topImage: "/images/contribution/contribution-top.jpg"
sectionIframe:
formUrl: https://jinshuju.net/f/bDS8me/embedded.js?inner_redirect=false&banner=show&background=white&height=1838
---

1
layouts/_default/_markup/render-link.html Normal file
View File

@ -0,0 +1 @@
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text }}</a>

22
layouts/_default/search.html
View File

@ -1,22 +0,0 @@
{{ define "main" }}
<section class="td-search-result">
<div class="">
<h2 style="margin-top: 200px;" class="ml-4">{{ .Title }}</h2>
{{ with .Site.Params.gcs_engine_id }}
<script>
(function() {
var cx = '{{ . }}';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
{{ end }}
</div>
</section>
{{ end }}

15
layouts/_default/support.html Normal file
View File

@ -0,0 +1,15 @@
{{ define "main" }}
{{ with .Params.section1 }}
<section class="section-1 bg-cover" style='background-image: url("{{ .topImage }}");'>
<div class="title-div common-layout">
<h1 class="title-center-h1">{{ .title }}</h1>
<p class="common-p">{{ .content }}</p>
</div>
</section>
{{ end }}
{{ with .Params.sectionIframe }}
<script src="{{ .formUrl }}"></script>
{{ end }}
{{ end }}

2
layouts/docs/list.html
View File

@ -28,7 +28,7 @@
{{ range .list }}
<div>
<img src="{{ .image }}" alt="">
<p>{{ .content }}</p>
<p><a href="{{ .link }}">{{ .content }}</a></p>
</div>
{{ end }}
</div>

36
layouts/docs/single.html
View File

@ -37,12 +37,14 @@
<section class="section-2">
<div class="common-layout">
<div class="left-div">
{{ partial "tree.html" . }}
<!-- <div class="download-div">
<span class="download-icon"></span>
<span>{{ i18n "Download this page (PDF)" }}</span>
</div> -->
<div class="left-div left-tree">
<div class="inner-tree">
{{ partial "tree.html" . }}
<!-- <div class="download-div">
<span class="download-icon"></span>
<span>{{ i18n "Download this page (PDF)" }}</span>
</div> -->
</div>
</div>
<div class="second-section-menu">
<div></div>
@ -80,15 +82,15 @@
<ul>
<li>
<img src="/images/docs/twitter.svg" alt="twitter">
<a data-type="twitter" href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">twitter</a>
<a href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">twitter</a>
</li>
<li>
<img src="/images/docs/linkedIn.svg" alt="linkedIn">
<a data-type="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">linkedIn</a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">linkedIn</a>
</li>
<li>
<img src="/images/docs/facebook.svg" alt="facebook">
<a data-type="facebook" href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">facebook</a>
<a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">facebook</a>
</li>
<li>
<img src="/images/docs/email.svg" alt="email" >
@ -131,20 +133,20 @@
<div></div>
</div>
{{ if .IsPage }}
<div class="aside aside-fixed">
<div class='title'>
{{ i18n "What’s on this Page" }}
</div>
<div class='tabs'>
{{ .TableOfContents }}
<div class="aside">
<div class="inner-div">
<div class='title'>
{{ i18n "What’s on this Page" }}
</div>
<div class='tabs'>
{{ .TableOfContents }}
</div>
</div>
</div>
{{ end }}
</div>
</section>
{{ if .IsPage }}
<script src='{{ "js/aside.js" | relURL }}'></script>
{{ end }}
<script src='{{ "js/markdown-tab.js" | relURL }}'></script>
<script>
var languageCode = '{{.Site.Language.Lang}}'

10
layouts/partials/content.html
View File

@ -23,7 +23,7 @@
<span><a href='{{ $parent | relLangURL }}'>{{ i18n $text }}</a> > </span>
<span>{{ $context.Title }}</span>
</div>
<div class='main-div'>
<div class='main-div middle-div'>
<div class='author'>{{ $context.Params.author }}</div>
<div class='date'>{{ i18n "Published on" }}：{{ string $context.Params.createTime }}</div>
<h1>{{ $context.Title }}</h1>
@ -39,9 +39,11 @@
{{ partial "share.html" }}
</div>
</div>
<div class='aside aside-fixed'>
<div class='title'>{{ i18n "Table of Contents" }}</div>
<div class='tabs'>{{ $context.TableOfContents }}</div>
<div class='aside'>
<div class="inner-div">
<div class='title'>{{ i18n "Table of Contents" }}</div>
<div class='tabs'>{{ $context.TableOfContents }}</div>
</div>
</div>
</div>
</section>

12
layouts/partials/firstPageInSection.html
View File

@ -2,8 +2,12 @@
{{ $firstSection := .firstSection }}
{{ $pages := (union $s.Pages $s.Sections).ByWeight }}
{{ $first := index $s.Pages 0}}
{{ if $first.IsPage }}
<a href="{{ $first.RelPermalink }}">{{ $firstSection.LinkTitle }}</a>
{{ if $first }}
{{ if $first.IsPage }}
<a href="{{ $first.RelPermalink }}">{{ $firstSection.LinkTitle }}</a>
{{ else }}
{{ partial "firstPageInSection" (dict "section" $first "firstSection" $firstSection) }}
{{ end }}
{{ else }}
{{ partial "firstPageInSection" (dict "section" $first "firstSection" $firstSection) }}
{{ end }}
<a href="{{ $s.RelPermalink }}">{{ $firstSection.LinkTitle }}</a>
{{ end }}

4
layouts/partials/header.html
View File

@ -33,9 +33,9 @@
{{ range .Children }}
<li {{ if eq $section .URL }} class="active"{{ end}}>
{{ if hasPrefix .URL "http" }}
<a href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name }}</a>
<a href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name | safeHTML }}</a>
{{ else }}
<a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
<a href="{{ .URL | relLangURL }}">{{ .Name | safeHTML }}</a>
{{ end }}
</li>
{{ end }}

10
layouts/partials/share.html
View File

@ -1,17 +1,17 @@
<div class="share">
<a data-type="twitter" href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">
<a href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">
<img src="/images/share/Twitter.svg" alt="twitter icon">
</a>
<a data-type="reddit" href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" rel="noopener noreferrer">
<a href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" rel="noopener noreferrer">
<img src="/images/share/Reddit.svg" alt="reddit icon">
</a>
<a data-type="facebook" href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">
<a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">
<img src="/images/share/Facebook.svg" alt="facebook icon">
</a>
<a data-type="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">
<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">
<img src="/images/share/Linkedin.svg" alt="linkedin icon">
</a>
<a data-type="hackernews" href="https://news.ycombinator.com/submitlink?u={{ .Permalink }}&t={{ .Title }}" target="_blank" rel="noopener noreferrer">
<a href="https://news.ycombinator.com/submitlink?u={{ .Permalink }}&t={{ .Title }}" target="_blank" rel="noopener noreferrer">
<img src="/images/share/HackerNews.svg" alt="hackernews icon">
</a>
</div>

23
static/images/header/star.svg Normal file
View File

@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<defs>
<linearGradient id="kedyptodua" x1="71.36%" x2="71.36%" y1="50%" y2="-49.077%">
<stop offset="0%" stop-color="#ECAF24"/>
<stop offset="100%" stop-color="#FFF8CB"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g fill-rule="nonzero">
<g>
<g>
<g>
<g>
<g>
<path fill="url(#kedyptodua)" d="M4.462.828l.631 1.335c.076.158.22.268.388.293l1.411.214c.422.064.59.605.285.916L6.156 4.624c-.122.124-.177.302-.148.476l.241 1.466c.072.44-.37.774-.747.567L4.24 6.44c-.15-.082-.33-.082-.48 0l-1.262.693c-.378.207-.82-.128-.747-.567L1.992 5.1c.029-.174-.026-.352-.148-.476L.823 3.587c-.306-.311-.137-.852.285-.916l1.411-.214c.168-.025.312-.135.388-.293L3.539.828c.189-.399.734-.399.923 0z" transform="translate(-800 -85) translate(738 69) translate(0 15) translate(20) translate(42 1)"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

82
static/js/aside.js
View File

@ -4,29 +4,61 @@ var getElementTopToScreenTop = function(element) {
return elementOffsetTop - windowScrollTop
}
var getElementBottomToScreenBottom = function(element) {
return $(window).height() + $(document).scrollTop() - element.offset().top - element.height()
}
var getElementBottomToTop = function(element) {
var elementHeight = element.outerHeight()
var elementOffsetTop = element.offset().top
return elementOffsetTop + elementHeight
}
var asideOriginOffsetHeight = $('.aside').offset().top
var bindAsideScroll = function() {
var screenWidth = $(window).width()
if (screenWidth <= 768) {
return false
}
var content = $('.main-div')
var content = $('.middle-div')
var mdBody = $('.md-body')
var aside = $('.aside')
var contentToTop = getElementTopToScreenTop(content)
aside.css("top", contentToTop)
var asideInner = $('.aside .inner-div')
scrollEvent(content, mdBody, aside, asideInner)
}
var bindLeftTreeScroll = function() {
var screenWidth = $(window).width()
if (screenWidth <= 768) {
return false
}
var content = $('.middle-div')
var mdBody = $('.md-body')
var aside = $('.common-layout .left-tree')
var contentToTop = getElementTopToScreenTop(content)
aside.css("top", contentToTop)
var asideInner = $('.left-div .inner-tree')
scrollEvent(content, mdBody, aside, asideInner)
}
var scrollEvent = function(content, mdBody, aside, asideInner) {
$( window ).scroll(function() {
var s1 = getElementBottomToTop(content)
var s2 = getElementBottomToTop(aside)
if (s2 > s1) {
aside.addClass('aside-absolute').removeClass('aside-fixed')
}
if (getElementTopToScreenTop(aside) > asideOriginOffsetHeight) {
aside.removeClass('aside-absolute').addClass('aside-fixed')
var headerHeight = $('header').outerHeight()
var contentToTop = getElementTopToScreenTop(content)
if (contentToTop < headerHeight) {
aside.css("top", headerHeight + 10)
aside.css("bottom", 10)
var s1 = getElementBottomToTop(mdBody)
var s2 = getElementBottomToTop(asideInner)
if (s2 > s1) {
var bottom = getElementBottomToScreenBottom(mdBody)
aside.css("bottom", bottom)
aside.css("top", "auto")
}
} else {
aside.css("top", contentToTop)
aside.css("bottom", 10)
}
});
}
@ -47,5 +79,31 @@ var scrollToElement = function(id, headerHeight) {
window.scrollTo(0, toTop - headerHeight)
}
bindAsideScroll()
bindClickLink()
var bindScrollTableActive = function() {
var screenWidth = $(window).width()
if (screenWidth <= 768) {
return false
}
var aside = $('.aside')
var headerHeight = $('header').outerHeight()
$( window ).scroll(function() {
aside.find('a').each(function() {
var id = $(this).attr('href')
var h = $(id)
var elementToTop = getElementTopToScreenTop(h)
if (elementToTop < headerHeight + 10) {
aside.find('.active').removeClass('active')
$(this).addClass('active')
}
})
})
}
if ($('.aside').length > 0) {
bindAsideScroll()
bindScrollTableActive()
}
if ($('.common-layout .left-tree').length > 0) {
bindLeftTreeScroll()
}
bindClickLink()

1
static/js/markdown-tab.js
View File

@ -44,6 +44,7 @@ function addCopyButtons(clipboard) {
pre.appendChild(div)
});
}
$('pre').css('background', '#242e42')
if (navigator && navigator.clipboard) {
addCopyButtons(navigator.clipboard);
}