add notice and tabs

assets/scss/common.scss

@@ -225,3 +225,112 @@ section {
     }
   }
 }
+
+.notices {
+  margin: 20px 0;
+  position: relative;
+
+  p {
+    padding: 0 10px;
+    margin: 0!important;
+    height: 30px;
+    line-height: 30px;
+    color: #ffffff;
+  }
+
+  div {
+    padding: 10px;
+  }
+}
+
+.notices.note {
+  p {
+    background: #6ab0de
+  }
+  div {
+    background: #e7f2fa;
+  }
+}
+
+.notices.tip {
+  p {
+    background: #78C578
+  }
+  div {
+    background: #E6F9E6;
+  }
+}
+
+.notices.info {
+  p {
+    background: #F0B37E
+  }
+  div {
+    background: #FFF2DB;
+  }
+}
+
+.notices.warning {
+  p {
+    background: #E06F6C
+  }
+  div {
+    background: #FAE2E2;
+  }
+}
+
+/* content tabs */
+.code-tabs {
+  border: 1px solid #dee2e6;
+  overflow: hidden;
+  margin: 20px 0px;
+}
+
+.code-tabs .tab-content {
+  padding: 20px 15px;
+  margin-bottom: 0;
+}
+
+.code-tabs .tab-content .tab-pane{
+  margin-bottom: 0;
+}
+
+.code-tabs .nav-tabs {
+  padding-left: 0;
+  margin-bottom: 0;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.code-tabs .nav-tabs .nav-item {
+  display: inline-block;
+  padding: 10px;
+  margin-top: 0;
+  border-right: 1px solid #dee2e6;
+}
+
+.code-tabs .nav-tabs .nav-item .nav-link {
+  text-decoration: none;
+  font-weight: 500;
+  border: 0;
+  margin-bottom: 0;
+}
+
+.code-tabs .nav-tabs .nav-item::before {
+  display: none;
+}
+
+.code-tabs .nav-tabs .nav-item.active {
+  background: #55bc8a;
+}
+
+.code-tabs .nav-tabs .nav-item.active .nav-link {
+  color: #ffffff;
+}
+
+.code-tabs .tab-pane {
+  display: none;
+}
+
+.code-tabs .active {
+  display: block;
+}

config/_default/config.toml

@@ -1,4 +1,4 @@
-baseURL = "https://hugo-first.netlify.app"
+baseURL = "https://kubesphere-v3.netlify.app"
 
 [markup]
   [markup.tableOfContents]

content/en/docs/introduction/advantages.md

@@ -8,6 +8,40 @@ weight: 1400
 
 ## Vision
 
+{{< notice note >}} 
+### This is a simple note. 
+{{</ notice >}}
+
+{{< notice tip >}} 
+This is a simple tip. 
+{{</ notice >}}
+
+{{< notice info >}} 
+This is a simple info. 
+{{</ notice >}}
+
+{{< notice warning >}} 
+This is a simple warning. 
+{{</ notice >}}
+
+{{< tabs >}}
+
+{{< tab "first" >}} 
+### Why KubeSphere
+{{</ tab >}}
+
+{{< tab "second" >}} 
+```
+console.log('test')
+```
+{{</ tab >}}
+
+{{< tab "third" >}} 
+this is third tab 
+{{</ tab >}} 
+
+{{</ tabs >}}
+
 KubeSphere is a distributed operating system that provides full stack system services and a pluggable framework for third-party software integration for enterprise-critical containerized workloads running in data center.
 
 Kubernetes has now become the de facto standard for deploying containerized applications at scale in private, public and hybrid cloud environments. However, many people easily get confused when they start to use Kubernetes as it is complicated and has many additional components to manage, some of which need to be installed and deployed by users themselves, such as storage service and network service. At present, Kubernetes only provides open source solutions or projects, which may be difficult to install, maintain and operate to some extent. For users, learning costs and barrier to entry are both high. In a word, it is not easy to get started quickly.

i18n/en.yaml

@@ -70,6 +70,14 @@
   translation: Feedback
 - id: share
   translation: Share
+- id: note
+  translation: Note
+- id: tip
+  translation: Tip
+- id: info
+  translation: Info
+- id: warning
+  translation: Warning
 
 
 

layouts/docs/list.html

@@ -14,5 +14,5 @@
         {{ partial "section" . }}
     </div>
 </section>
-
+<script src='{{ "js/markdown-tab.js" | relURL }}'></script>
 {{ end }}

layouts/docs/single.html

@@ -138,6 +138,8 @@
 </section>
 {{ if .IsPage }}
 <script src='{{ "js/aside.js" | relURL }}'></script>
+<script src='{{ "js/markdown-tab.js" | relURL }}'></script>
+
 {{ end }}
 <script>
     var languageCode = '{{.Site.Language.Lang}}'

layouts/shortcodes/notice.html

@@ -0,0 +1,5 @@
+<div class="notices {{ .Get 0 }}">
+  {{ $type := .Get 0}}
+  <p>{{ i18n $type }}</p>
+  <div>{{ .Inner | markdownify }}</div>
+</div>

layouts/shortcodes/tab.html

@@ -0,0 +1,3 @@
+<div class="tab-pane" title="{{ .Get 0 }}">
+  {{ .Inner | markdownify }}
+</div>

layouts/shortcodes/tabs.html

@@ -0,0 +1,4 @@
+<div class="code-tabs">
+  <ul class="nav nav-tabs"></ul>
+  <div class="tab-content">{{ .Inner }}</div>
+</div>

static/js/markdown-tab.js

@@ -0,0 +1,25 @@
+  // tab
+  $('.tab-content').find('.tab-pane').each(function (idx, item) {
+    var navTabs = $(this).closest('.code-tabs').find('.nav-tabs'),
+      title = $(this).attr('title');
+    navTabs.append('<li class="nav-item"><a class="nav-link" href="#">' + title + '</a></li>');
+  });
+
+  $('.code-tabs ul.nav-tabs').each(function () {
+    $(this).find("li:first").addClass('active');
+  })
+
+  $('.code-tabs .tab-content').each(function () {
+    $(this).find("div:first").addClass('active');
+  });
+
+  $('.nav-tabs a').click(function (e) {
+    e.preventDefault();
+    var tab = $(this).parent(),
+      tabIndex = tab.index(),
+      tabPanel = $(this).closest('.code-tabs'),
+      tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
+    tabPanel.find('.active').removeClass('active');
+    tab.addClass('active');
+    tabPane.addClass('active');
+  });