Add anchor links to heading (#38)

* Closes #36
This commit is contained in:
Track3 2019-01-27 12:20:29 +08:00 committed by GitHub
parent 503a9a3934
commit 545a122d6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 4 deletions

View file

@ -22,6 +22,7 @@ html {
background: $light-grey;
line-height: 1.6;
letter-spacing: .06em;
scroll-behavior: smooth;
}
body,
@ -534,6 +535,39 @@ hr.post-end {
padding: 0;
margin-left: 1.8em;
}
a.anchor {
float: left;
margin-left: -20px;
padding-right: 6px;
box-shadow: none;
opacity: .8;
&:hover {
background: none;
color: $theme;
opacity: 1;
}
svg {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: baseline;
visibility: hidden;
}
&:focus svg {
visibility: visible;
}
}
h1:hover a.anchor svg,
h2:hover a.anchor svg,
h3:hover a.anchor svg,
h4:hover a.anchor svg,
h5:hover a.anchor svg,
h6:hover a.anchor svg {
visibility: visible;
}
}
.footnotes {

View file

@ -19,7 +19,7 @@
<main class="site-main section-inner thin animated fadeIn faster">
<h1>{{ .Title }}</h1>
<div class="content">
{{ .Content }}
{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
</div>
{{- if .Params.comments }}
<div id="comments" class="thin">

View file

@ -23,7 +23,7 @@
<h1>{{ .Title }}</h1>
</header>
<div class="content">
{{ .Content }}
{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
</div>
<hr class="post-end">
<footer class="post-info">

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
{"Target":"css/style.min.9a30741782203507f3d35fe9cefabad487c72fc82dfbdf59121759fc2fa52f92.css","MediaType":"text/css","Data":{"Integrity":"sha256-mjB0F4IgNQfz01/pzvq61IfHL8gt+99ZEhdZ/C+lL5I="}}
{"Target":"css/style.min.bf17d429527cc9978ec99e8d5e3a5319fb29fb7f783e39f2fbe1260fabfbb57c.css","MediaType":"text/css","Data":{"Integrity":"sha256-vxfUKVJ8yZeOyZ6NXjpTGfsp+394Pjny++EmD6v7tXw="}}