雨果：自動鏈接頭

有了雨果靜態網站生成器，是否有可能讓它自動將鏈接放在標題元素周圍？我看到它在ID屬性填寫所以可以referenced但我想自動創建鏈接，以及像這樣：雨果：自動鏈接頭

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

我沒有看到反正文檔中要做到這一點，我認爲這將有助於用戶鏈接到一個冗長的帖子中的特定點。

來源

2017-02-13 Erik Berkun-Drevnig

爲什麼downvote？我會很感激一個解釋。謝謝。 –

我同意，downvote是不公平的。我upvoted它，所以問題解決:) – revelt

據我所知它不可能達到它外的開箱，就是出的最雨果。

我自己也有同樣的願望;我solved it通過jQuery，包裝全部H2，並且帶有鏈接H3的動態，在旅途中產生蛞蝓：

然後我有一個棘手的側欄導航充當方式標題之間smooth-scroll，加它highlights當前標題：

今天我想它的代碼不同的代碼，明智的（可能沒有jQuery的），但我與它的工作原理很高興。我認爲JS開銷很小，特別是如果編碼整齊。

來源

2017-02-17 13:41:03 revelt

這似乎不可能開箱即用。有兩種方法可以解決這個問題：使用JavaScript，或者在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在這裏，但你可以從你的降價文件把它作爲一個參數，如果你想。（當然，那麼你必須知道沒有Hugo爲你做什麼的URL，這是不理想的。）

這種方法的缺點是你不能使用普通的markdown標題語法，你沒有得到雨果的built-in resolution of duplicate anchors。但它會完成工作。

來源

2017-04-02 02:59:39

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

來源

2017-08-02 13:00:46 oodavid

雨果：自動鏈接頭

回答

相關問題