雨果：自动链接标题

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

据我所知，它不可能实现开箱即用，即 out-of-the-hugo 。< / p> 我自己也有同样的愿望;我通过jQuery solved it，用链接动态包装所有h2和h3，在旅途中产生slu ::

然后我有一个粘性侧边栏导航，作为标题之间smooth-scroll的一种方式，加上highlights当前标题：

今天我会以不同的代码编写代码（可能没有jQuery），但我对它的工作方式非常满意。我认为JS开销很小，特别是如果编码整齐。

Answer 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 markdown文档中，它将生成您正在寻找的那种链接。但是，每次输入都很难，所以为了减少你的工作，你可以制作一个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" >}}

我已将基本网址保留在此处，但您可以根据需要将其作为参数从您的降价文档传递出去。 （当然，如果没有Hugo为你做这个，你必须知道URL是什么，这不是理想的。）

这种方法的缺点是你不能使用正常的降价标题语法，而且你没有得到Hugo的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>