将 data-scroll 属性添加到 Kramdown 脚注答案

【问题标题】：Add data-scroll Attribute to Kramdown Footnote将 data-scroll 属性添加到 Kramdown 脚注
【发布时间】：2015-03-10 12:30:43
【问题描述】：

有没有一种简单的方法可以将data-scroll 的属性添加到 kramdown 脚注中。

[Battlezone](www.github.com) [^1]

我上面的脚注，呈现如下：

<sup id="fnref:1"><a href="#fn:1" class="footnote">1</a></sup>

是否可以在锚标记中添加 data-scroll 属性？

【问题讨论】：

标签： markdown jekyll kramdown

【解决方案1】：

您可以在脚注定义中为单个脚注添加属性。

This is some text with a footnote.[^note]

[^note]:{: .class #id other-attribute="attribute"}
    This footnote has some attributes.

输出：

<p>This is some text with a footnote.<sup id="fnref:note"><a href="#fn:note" class="footnote">1</a></sup></p>

<div class="footnotes">
    <ol>
        <li id="fn:note">
            <p class="class" id="id" other-attribute="attribute">This footnote has some attributes. <a href="#fnref:note" class="reversefootnote">&#8617;</a></p>
        </li>
    </ol>
</div>

【讨论】：

我希望能够为脚注按钮添加一个属性，而不是实际的脚注。这不可能吗？
不幸的是，我不知道有什么方法可以做到这一点。您可以使用 .reversefootnote 类来修改 CSS 中的所有脚注按钮，但据我所知，您需要使用 sed 之类的东西进行一些后期处理。

【解决方案2】：

我不确定你真正想在data-scroll 属性中写什么。但这里有一个示例 JS，它将这些属性添加到这些链接中。将此代码放在结束 </body> 标记之前。

您想要的是获取每个脚注链接（仅返回内容的链接），然后为所有这些添加属性。可以这样做：

仅限 JS

var footnoteLinks = document.getElementsByClassName("reversefootnote");
var i, hrefAttribute;
for (i = 0; i < footnoteLinks.length; i++) {
    hrefAttribute = footnoteLinks[i].getAttribute("href");
    footnoteLinks[i].setAttribute("data-scroll", hrefAttribute);
}

jQuery

如果你碰巧有可用的 jQuery，这更容易做到：

$('.reversefootnote').each(function(){
    var footNoteLink = $(this);
    footNoteLink.attr("data-scroll", footNoteLink.attr("href"));
});

如果您想将data-scroll 的值设置为一个值（例如，全部设置为"true"），代码会变得更加简单：

// JS only
var footnoteLinks = document.getElementsByClassName("reversefootnote");
var i;
for (i = 0; i < footnoteLinks.length; i++) {
    footnoteLinks[i].setAttribute("data-scroll", "true");
}
// jQuery
$('.reversefootnote').each(function(){
    footNoteLink.attr("data-scroll", "true");
});

如果这不是您想要的，那么这肯定会给您一个提示。

【讨论】：