Hugo: Автоматически связывать заголовки

Question

С генератором статического сайта Hugo, возможно ли, чтобы он автоматически помещал ссылки вокруг элементов заголовка? Я вижу, что это заполнить атрибут ID, поэтому он может быть referenced, но я хотел бы, чтобы автоматически создать ссылку, как хорошо, как это:

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

я не видел, так или иначе в документации, чтобы сделать это, и я подумайте, что это было бы полезно для пользователей, связанных с определенной точкой в ​​длинном сообщении.

Answer 1

Насколько я знаю, что это не возможно достичь его вне коробки, то есть из-оф-Гуго.

У меня было такое же желание; Я solved it с помощью JQuery, обернув все h2-х и h3 динамически со связями, генерируя слизень на ходе:

Тогда я получил липкий боковую панель СЧ, которая действует как способ smooth-scroll между заголовками, а также это highlights текущий курс:

Сегодня я бы закодировать его по-разному мудрёный код (возможно без JQuery), но я очень доволен тем, как он работает. Я думаю, что накладные расходы JS минимальны, особенно если они закодированы аккуратно.

Answer 2

Это не представляется возможным из коробки. Есть два способа обойти это, о котором я могу думать: используя JavaScript, как предлагаемый вариант, или используя 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 здесь, но вы можете передать его в качестве параметра из вашей уценки документа, если вы хотите , (Конечно, тогда вы должны знать, что URL-адрес, не имея Hugo делать это за вас, что не идеально.)

Этот подход имеет недостатки, что вы не можете использовать синтаксис заголовка нормального уценки, и что вы не получите Hugo's built-in resolution of duplicate anchors. Но он выполнит свою работу.

Answer 3

достаточно просто с 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>