diff options
| author | FujiHaruka <fizzyjohn1427@gmail.com> | 2019-08-04 12:03:08 +0300 |
|---|---|---|
| committer | FujiHaruka <fizzyjohn1427@gmail.com> | 2019-08-04 12:03:08 +0300 |
| commit | 15d306cf147061e4ff65d7ceedee72acac007c53 (patch) | |
| tree | be73535ca6618db4464006f189add883948d2111 | |
| parent | d39f310357f1f1322f7244ed03d6acc520e37958 (diff) | |
Enable to add anchor to header elements
| -rw-r--r-- | assets/js/scripts.js | 26 | ||||
| -rw-r--r-- | assets/scss/components/_anchor.scss | 10 | ||||
| -rwxr-xr-x | assets/scss/style.scss | 1 | ||||
| -rw-r--r-- | layouts/_default/single.html | 2 |
4 files changed, 38 insertions, 1 deletions
diff --git a/assets/js/scripts.js b/assets/js/scripts.js index 19d4ec6..0c697d0 100644 --- a/assets/js/scripts.js +++ b/assets/js/scripts.js @@ -7,3 +7,29 @@ menuTrigger.onclick = function() { menuTrigger.classList.toggle('is-active') body.classList.toggle('lock-scroll') } + +var content = document.querySelector('.content.anchor-link-enabled') +if (content) { + addHeaderAnchors(content); +} + +function addHeaderAnchors(content) { + var headers = content.querySelectorAll('h1, h2, h3, h4'); + // SVG data from https://iconmonstr.com/link-1-svg/ + var linkSvg = ' <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M6.188 8.719c.439-.439.926-.801 1.444-1.087 2.887-1.591 6.589-.745 8.445 2.069l-2.246 2.245c-.644-1.469-2.243-2.305-3.834-1.949-.599.134-1.168.433-1.633.898l-4.304 4.306c-1.307 1.307-1.307 3.433 0 4.74 1.307 1.307 3.433 1.307 4.74 0l1.327-1.327c1.207.479 2.501.67 3.779.575l-2.929 2.929c-2.511 2.511-6.582 2.511-9.093 0s-2.511-6.582 0-9.093l4.304-4.306zm6.836-6.836l-2.929 2.929c1.277-.096 2.572.096 3.779.574l1.326-1.326c1.307-1.307 3.433-1.307 4.74 0 1.307 1.307 1.307 3.433 0 4.74l-4.305 4.305c-1.311 1.311-3.44 1.3-4.74 0-.303-.303-.564-.68-.727-1.051l-2.246 2.245c.236.358.481.667.796.982.812.812 1.846 1.417 3.036 1.704 1.542.371 3.194.166 4.613-.617.518-.286 1.005-.648 1.444-1.087l4.304-4.305c2.512-2.511 2.512-6.582.001-9.093-2.511-2.51-6.581-2.51-9.092 0z"/></svg>'; + var anchorForId = function (id) { + var anchor = document.createElement('a'); + anchor.classList.add('header-anchor'); + anchor.href = "#" + id; + anchor.innerHTML = linkSvg; + return anchor; + }; + + for (var h = 0; h < headers.length; h++) { + var header = headers[h]; + + if (typeof header.id !== "undefined" && header.id !== "") { + header.appendChild(anchorForId(header.id)); + } + } +} diff --git a/assets/scss/components/_anchor.scss b/assets/scss/components/_anchor.scss new file mode 100644 index 0000000..8b494e6 --- /dev/null +++ b/assets/scss/components/_anchor.scss @@ -0,0 +1,10 @@ +.content { + .header-anchor { + text-decoration: none; + fill: currentColor; + opacity: 0.6; + } + .header-anchor:hover { + opacity: 1; + } +} diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 31373c2..ee54235 100755 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -33,6 +33,7 @@ @import 'components/strip'; @import 'components/whitebox'; @import 'components/overview'; +@import 'components/anchor'; // Pages @import 'pages/home'; diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 3c930e1..67d1129 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -4,7 +4,7 @@ {{ define "main" }} <h1 class="title">{{.Title}}</h1> -<div class="content"> +<div class="content {{if .Site.Params.enable_anchor_link}}{{ "anchor-link-enabled" }}{{ end }}"> {{.Content}} </div> </div> |