Hugo: Header automatisch verknüpfen

Question

Mit Hugo statische Site Generator, ist es möglich, es automatisch Links um Header-Elemente setzen? Ich sehe, dass es in der ID-Attribut zu füllen, so dass es referenced sein kann, aber ich möchte auch automatisch den Link erstellen, wie folgt aus:

<a href="/post/cool-blog-post#some-interesting-title"> 
    <h2 id="some-interesting-title">Some Interesting Title</h2> 
</a> 

ich nicht sehen ohnehin in der Dokumentation, dies zu tun und ich denke, es wäre hilfreich für Benutzer, die zu einem bestimmten Punkt in einem längeren Post verlinken.

Answer 1

Soweit mir bekannt ist, es ist nicht möglich, es zu erreichen out-of-the-box, das heißt, out-of-the-hugo.

Ich hatte diesen gleichen Wunsch selbst; Ich solved it über jQuery, Verpackung all h2 die und h3 der dynamisch mit Links, Schnecken auf dem Sprung zu erzeugen:

Dann habe ich eine klebrige Sidebar nav, die als eine Möglichkeit, wirkt auf smooth-scroll zwischen den Positionen plus es highlights die aktuelle Position:

Heute habe ich es anders Code-weise Code würde (wahrscheinlich ohne jQuery), aber ich bin ganz zufrieden, wie es funktioniert. Ich denke JS Overhead ist minimal, vor allem, wenn sauber codiert.

Answer 2

Dies scheint nicht aus der Box möglich zu sein. Es gibt zwei Möglichkeiten, wie ich daran denken kann: JavaScript zu verwenden, wie es vorgeschlagen wurde, oder HTML in Ihrem Markdown zu verwenden.

Betrachten Sie zum Beispiel den HTML-Code, den Sie oben angegeben haben.

Wenn Sie diesen Code direkt in ein Hugo Rabattdokument einbinden, wird er die Art von Link, die Sie finden möchten, erzeugen. Es ist jedoch immer ein Problem, jedes Mal zu tippen. Um Ihre Arbeit zu reduzieren, können Sie eine shortcode erstellen.

In layouts/shortcodes/link-heading.html:

{{ $id := .Get 0 | lower | replaceRE "[^0-9a-z]" "-" | replaceRE "-+" "-" -}} 
<a href="#{{ $id }}"> 
    <h2 id="{{ $id }}">{{ .Get 0 }}</h2> 
</a> 

In Ihrem Abschlag Dokument:

{{< link-heading "Some Interesting Title" >}} 

ich die Basis-URL hier aus verlassen habe, aber man kann es als Parameter von Ihrem Abschlag Dokument übergeben, wenn Sie möchten, . (Natürlich, dann müssen Sie wissen, was die URL ist, ohne dass Hugo es für Sie tut, was nicht ideal ist.)

Dieser Ansatz hat die Nachteile, dass Sie die normale Markdown-Überschriftsyntax nicht verwenden können, und das Du bekommst Hugos built-in resolution of duplicate anchors nicht. Aber es wird die Arbeit erledigen.

Answer 3

leicht genug, um mit Javascript, fügen Sie diesen Schnipsel vor Ihrer Schließung </body> tag:

<script> 
    (function addHeadingLinks(){ 
    var article = document.getElementById('article'); 
    var headings = article.querySelectorAll('h1, h2, h3, h4, h5, h6'); 
    headings.forEach(function(heading){ 
     if(heading.id){ 
     var a = document.createElement('a'); 
     a.innerHTML = heading.innerHTML; 
     a.href = '#'+heading.id; 
     heading.innerHTML = ''; 
     heading.appendChild(a); 
     } 
    }); 
    })(); 
</script>