Hugo静的サイト生成ツールを使用すると、ヘッダー要素の周りにリンクを自動的に置くことは可能ですか？Hugo：ヘッダーを自動的にリンクする
<a href="/post/cool-blog-post#some-interesting-title">
<h2 id="some-interesting-title">Some Interesting Title</h2>
</a>
私はこれを行うために文書でとにかく見て私はしませんでした。このように、私はそれがreferencedことができるので、それはID属性を記入しないことがわかりますが、私も自動的にリンクを作成したいです長いポストの特定のポイントにリンクしているユーザーにとっては役立つと思います。私の知る限り、それはアウト・オブ・ボックスアウトオブヒューゴ、ある、それを達成することはできません承知しているよう
。
私はこの同じ希望を自分で持っていました。私はjQuery経由solved it、リンクを使用して動的にすべてのH2のとH3のを包む、外出先でナメクジを生成：
その後、私は見出しの間smooth-scrollへの道として機能スティッキーサイドバーナビゲーションを持って、プラスそれは、現在の見出しをhighlights：
今日は違ったコードワイズ（おそらく、jQueryのなしで）それをコーディングだろうが、私はそれがどのように動作するかではかなり満足しています。私はJSのオーバーヘッドは、特にきれいにコード化されている場合は、最小限だと思う。
これは箱の外では可能ではないようです。私は考えることができる2つの方法があります：JavaScriptを使う、reveltを提案する、またはあなたのマークダウンでHTMLを使うなどです。
たとえば、上記で指定したHTMLを考えてみましょう。
<a href="/post/cool-blog-post#some-interesting-title">
<h2 id="some-interesting-title">Some Interesting Title</h2>
</a>
このコードをHugoのマークダウン文書に直接入力すると、探している種類のリンクが生成されます。しかし、これは毎回入力する痛みですので、作業を減らすためにはshortcodeとすることができます。 layouts/shortcodes/link-heading.htmlで
：
あなたの値下げ文書で{{ $id := .Get 0 | lower | replaceRE "[^0-9a-z]" "-" | replaceRE "-+" "-" -}}
<a href="#{{ $id }}">
<h2 id="{{ $id }}">{{ .Get 0 }}</h2>
</a>
：
{{< link-heading "Some Interesting Title" >}}
私はここにベースURLを残しているが、あなたがしたい場合は、あなたの値下げドキュメントから、それをパラメータとして渡すことができます。 （もちろん、あなたはHugoがあなたのためにそれをすることなくURLが何であるか知る必要がありますが、これは理想的ではありません）。
このアプローチには、通常のマークダウン見出し構文を使用できないという欠点があります。あなたはHugoのbuilt-in resolution of duplicate anchorsを手に入れません。しかし、それは仕事を完了させるでしょう。 JavaScriptを使用して十分に簡単
、あなたの終値</body>タグの前に、このスニペットを追加します。
<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>
なぜdownvoteを？私は説明を感謝します。ありがとう。 –
私は同意する、downvoteは不公平だった。私はそれを解決したので、問題を解決した:) – revelt