add anchor links for headlines

This commit is contained in:
Robert Kaussow 2020-02-26 23:59:30 +01:00
parent 8e3958bd09
commit 14567a6df4
9 changed files with 31 additions and 7 deletions

View File

@ -1,2 +1,2 @@
* BUGFIX * FEATURE
* remove mobile menu button on error page * Add anchor links for headlines

View File

@ -2,6 +2,6 @@
{{ partial "page-header" . }} {{ partial "page-header" . }}
<article class="gdoc-markdown"> <article class="gdoc-markdown">
<h1>{{ partial "title" . }}</h1> <h1>{{ partial "title" . }}</h1>
{{ .Content }} {{ partial "content" . }}
</article> </article>
{{ end }} {{ end }}

View File

@ -3,6 +3,6 @@
<article class="gdoc-markdown"> <article class="gdoc-markdown">
<h1>{{ partial "title" . }}</h1> <h1>{{ partial "title" . }}</h1>
{{ .Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML }} {{ partial "content" . }}
</article> </article>
{{ end }} {{ end }}

View File

@ -0,0 +1,8 @@
{{ $showAnchor := (and (default true .Page.Params.geekdocAnchor) (default true .Site.Params.geekdocAnchor)) }}
{{ $.Scratch.Set "content" (.Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML) }}
{{ if $showAnchor }}
{{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" `${1}&nbsp;<a class="gdoc-page__anchor" href="#${2}"><svg class="icon link"><use xlink:href="#link"></use></svg></a> ${3}</h>` | safeHTML) }}
{{ end }}
{{ $.Scratch.Get "content" }}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

View File

@ -5,6 +5,6 @@
<h5> <h5>
<strong>{{ .Date.Format $dateFormat }}</strong> <strong>{{ .Date.Format $dateFormat }}</strong>
</h5> </h5>
{{ .Content }} {{ partial "content" . }}
</article> </article>
{{ end }} {{ end }}

4
src/icons/link.svg Normal file
View File

@ -0,0 +1,4 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>link</title>
<path d="M17.016 6.984q2.063 0 3.516 1.477t1.453 3.539-1.453 3.539-3.516 1.477h-4.031v-1.922h4.031q1.266 0 2.18-0.914t0.914-2.18-0.914-2.18-2.18-0.914h-4.031v-1.922h4.031zM8.016 12.984v-1.969h7.969v1.969h-7.969zM3.891 12q0 1.266 0.914 2.18t2.18 0.914h4.031v1.922h-4.031q-2.063 0-3.516-1.477t-1.453-3.539 1.453-3.539 3.516-1.477h4.031v1.922h-4.031q-1.266 0-2.18 0.914t-0.914 2.18z"></path></svg>

After

Width:  |  Height:  |  Size: 546 B

View File

@ -30,8 +30,12 @@ h1,
h2, h2,
h3, h3,
h4, h4,
h5 { h5,
h6 {
font-weight: $body-font-weight; font-weight: $body-font-weight;
display: flex;
align-items: center;
text-align: center;
} }
a { a {
@ -217,6 +221,10 @@ img {
content: "\1f82a"; content: "\1f82a";
} }
} }
&__anchor .icon {
color: $gray-400;
}
} }
.gdoc-post { .gdoc-post {

View File

@ -70,6 +70,10 @@
min-width: $body-min-width * 0.66; min-width: $body-min-width * 0.66;
padding: 0 $padding-16; padding: 0 $padding-16;
} }
.gdoc-page__anchor {
display: none;
}
} }
// {{< button >}} // {{< button >}}