TeamPiped-mirror/hugo-whisper-theme
1
0
Fork 0
mirror of https://github.com/TeamPiped/hugo-whisper-theme.git synced 2024-08-14 23:57:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #18 from FujiHaruka/anchor_link

Browse source 
Option to add anchor links to all header elements
This commit is contained in:
Robert Austin 2019-08-06 13:43:03 +10:00 committed by GitHub
commit 306a4bb3bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
assets/js/scripts.js
View file

@ -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));
}
}
}

10
assets/scss/components/_anchor.scss Normal file
View file

@ -0,0 +1,10 @@
.content {
.header-anchor {
text-decoration: none;
fill: currentColor;
opacity: 0.6;
}
.header-anchor:hover {
opacity: 1;
}
}

1
assets/scss/style.scss
View file

@ -33,6 +33,7 @@
@import 'components/strip';
@import 'components/whitebox';
@import 'components/overview';
@import 'components/anchor';
// Pages
@import 'pages/home';

3
exampleSite/config.toml
View file

@ -25,6 +25,9 @@ pygmentsUseClasses = true
homepage_intro = 'Whisper is a documentation theme built with Hugo. The design and functionality is intentionally minimal.'
homepage_image = '/images/terminal.gif'
## You can enable to add anchor links to header elements
# enable_anchor_link = true
[params.homepage_meta_tags]
meta_description = "Hugo Whisper is a documentation theme built with Hugo."
meta_og_title = "Hugo Whisper Theme"

2
layouts/_default/single.html
View file

@ -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>