permalinks - Hugo：自动链接标题

Question

使用 Hugo 静态站点生成器，是否可以让它自动在标题元素周围放置链接？我看到它确实填写了 ID 属性，因此可以引用它，但我也想自动创建链接，如下所示：

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

我在文档中没有看到这样做，我认为这对用户在冗长的帖子中链接到特定点会有所帮助。

Answer 1

据我所知，不可能实现out-of-the-box，即out-of-the-hugo。

我自己也有同样的愿望；我通过 jQuery解决了这个问题，用链接动态包装了所有 h2 和 h3，随时随地生成 slug：

然后我有一个粘性侧边栏导航，它可以作为在标题之间平滑滚动的一种方式，而且它会突出显示当前标题：

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

Answer 2

使用 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>

Answer 3

这似乎不可能开箱即用。我可以想到两种解决方法：使用 JavaScript，正如 revelt 建议的那样，或者在你的 markdown 中使用 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 为你做，这并不理想。）

这种方法的缺点是您不能使用正常的 markdown 标题语法，并且您没有获得 Hugo内置的重复锚点解析。但它会完成工作。