You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2021/08/22 11:45:39 UTC
[skywalking-website] branch master updated: feat: anchor (#318)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/master by this push:
new 7914b80 feat: anchor (#318)
7914b80 is described below
commit 7914b804140f66e85ca07e736aaaef4930ac9d06
Author: Juntao Zhang <71...@qq.com>
AuthorDate: Sun Aug 22 06:45:36 2021 -0500
feat: anchor (#318)
---
layouts/shortcodes/dockerhub-block.html | 4 ++++
layouts/shortcodes/downloads-block.html | 4 ++++
themes/docsy/assets/js/active.js | 27 +++++++++++++++++++++++
themes/docsy/assets/scss/_custom_docs.scss | 10 ++++++---
themes/docsy/assets/scss/_custom_downloads.scss | 8 +++++++
themes/docsy/layouts/docs/baseof.html | 7 +++++-
themes/docsy/layouts/downloads/baseof.html | 1 +
themes/docsy/layouts/partials/active-scripts.html | 8 +++++++
8 files changed, 65 insertions(+), 4 deletions(-)
diff --git a/layouts/shortcodes/dockerhub-block.html b/layouts/shortcodes/dockerhub-block.html
index b05f462..ee9c5f6 100644
--- a/layouts/shortcodes/dockerhub-block.html
+++ b/layouts/shortcodes/dockerhub-block.html
@@ -1,11 +1,15 @@
<div class="card-wrapper">
<div class="item-wrapper">
{{ range .Site.Data.dockerImages }}
+ {{$id := replace .name " " "" }}
<div class="card item">
<div class="card-body">
<div class="title-box">
<span class="icon">{{.icon}}</span>
<h5 class="card-title">{{.name}}</h5>
+ <a aria-hidden="true" href="#{{$id}}" id="{{$id}}" style="visibility: hidden;">
+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
+ </a>
</div>
<p class="card-text">{{.description}}</p>
<div class="doc-box">
diff --git a/layouts/shortcodes/downloads-block.html b/layouts/shortcodes/downloads-block.html
index 7f292f4..49da102 100755
--- a/layouts/shortcodes/downloads-block.html
+++ b/layouts/shortcodes/downloads-block.html
@@ -8,11 +8,15 @@
<div class="item-wrapper">
{{range .list}}
+ {{$id := replace .name " " "" }}
<div class="card item">
<div class="card-body">
<div class="title-box">
<span class="icon">{{.icon}}</span>
<h5 class="card-title">{{.name}}</h5>
+ <a aria-hidden="true" href="#{{$id}}" id="{{$id}}" style="visibility: hidden;">
+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
+ </a>
{{ $name := .name }}
</div>
<p class="card-text">{{.description}}</p>
diff --git a/themes/docsy/assets/js/active.js b/themes/docsy/assets/js/active.js
new file mode 100644
index 0000000..bb1a8be
--- /dev/null
+++ b/themes/docsy/assets/js/active.js
@@ -0,0 +1,27 @@
+$(function (){
+ init();
+ function init(){
+ bindClick();
+ setActive();
+ }
+ function bindClick(){
+ $('.title-box a').on('click', function (){
+ var hash = $(this).attr('href')
+ scrollTop(hash);
+ })
+ }
+ function scrollTop(hash){
+ if(!$(hash).length){
+ return;
+ }
+ $('html,body').animate({scrollTop: $(hash).offset().top - 100})
+ }
+ function setActive() {
+ var hash = location.hash;
+ if(!location.hash || !$(hash).length){
+ return;
+ }
+ $(hash).parents('.card').addClass('active');
+ scrollTop(hash)
+ }
+})
\ No newline at end of file
diff --git a/themes/docsy/assets/scss/_custom_docs.scss b/themes/docsy/assets/scss/_custom_docs.scss
index 26d2273..0a2da96 100644
--- a/themes/docsy/assets/scss/_custom_docs.scss
+++ b/themes/docsy/assets/scss/_custom_docs.scss
@@ -14,12 +14,14 @@
.item {
width: 31.33%;
margin: 0 1% 24px;
-
-
&:hover {
box-shadow: 0 0 8px #cccccc5e;
}
}
+ .item.active{
+ box-shadow: 0 0 4px #add5f3;
+ border-color: #85beec;
+ }
.btn {
background-color: #eee;
@@ -79,9 +81,11 @@
.title-box {
display: flex;
- //justify-content: center;
align-items: center;
padding-bottom: 10px;
+ &:hover a {
+ visibility: initial!important;
+ }
.card-title {
margin: 0;
diff --git a/themes/docsy/assets/scss/_custom_downloads.scss b/themes/docsy/assets/scss/_custom_downloads.scss
index 4cc6443..00340f3 100644
--- a/themes/docsy/assets/scss/_custom_downloads.scss
+++ b/themes/docsy/assets/scss/_custom_downloads.scss
@@ -48,6 +48,11 @@
}
}
+ .item.active{
+ box-shadow: 0 0 4px #add5f3;
+ border-color: #85beec;
+ }
+
.btn {
background-color: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fcfcfc), to(#eee));
@@ -128,6 +133,9 @@
display: flex;
align-items: center;
padding-bottom: 10px;
+ &:hover a {
+ visibility: initial!important;
+ }
.card-title {
margin: 0;
diff --git a/themes/docsy/layouts/docs/baseof.html b/themes/docsy/layouts/docs/baseof.html
index 7695b71..1647042 100644
--- a/themes/docsy/layouts/docs/baseof.html
+++ b/themes/docsy/layouts/docs/baseof.html
@@ -23,11 +23,15 @@
<div class="item-wrapper">
{{range .list}}
- <div class="card item">
+ {{$id := replace .name " " "" }}
+ <div class="card item">
<div class="card-body">
<div class="title-box">
<span class="icon">{{.icon}}</span>
<h5 class="card-title">{{.name}}</h5>
+ <a aria-hidden="true" href="#{{$id}}" id="{{$id}}" style="visibility: hidden;">
+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
+ </a>
</div>
<p class="card-text">{{.description}}</p>
<div class="doc-box">
@@ -61,6 +65,7 @@
</div>
{{ partial "event-popup.html" . }}
{{ partial "sidebar-skywalking.html" . }}
+ {{ partial "active-scripts.html" . }}
{{ partial "scripts.html" . }}
</body>
</html>
diff --git a/themes/docsy/layouts/downloads/baseof.html b/themes/docsy/layouts/downloads/baseof.html
index c2822e7..8e51919 100644
--- a/themes/docsy/layouts/downloads/baseof.html
+++ b/themes/docsy/layouts/downloads/baseof.html
@@ -22,6 +22,7 @@
</div>
{{ partial "event-popup.html" . }}
{{ partial "sidebar-skywalking.html" . }}
+{{ partial "active-scripts.html" . }}
{{ partial "scripts.html" . }}
<script>
$('.download-wrapper').on('click', function (e) {
diff --git a/themes/docsy/layouts/partials/active-scripts.html b/themes/docsy/layouts/partials/active-scripts.html
new file mode 100644
index 0000000..a1b16f0
--- /dev/null
+++ b/themes/docsy/layouts/partials/active-scripts.html
@@ -0,0 +1,8 @@
+{{ $jsActive := resources.Get "js/active.js" }}
+{{ $js := (slice $jsActive) | resources.Concat "js/active.js" }}
+{{ if .Site.IsServer }}
+<script src="{{ $js.RelPermalink }}"></script>
+{{ else }}
+{{ $js := $js | minify | fingerprint }}
+<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ end }}