如何自动创建本地href链接？

Question

我有一个 MediaWiki 1.33.0 网站，其中一些文章包含脚注。我的问题是这些脚注没有本地链接（没有从脚注编号到“脚注”或“参考”章节的链接）。

我通过以下 Wiki 语法 模板和相应的 JavaScript 代码块创建文章脚注：

1。脚注模板

<includeonly><ol id="footnotes_list"></ol></includeonly><noinclude>

[[קטגוריה:תבניות]]
</noinclude>

2。脚注模板

<includeonly><span dir="rtl" class="footnote"><sup class="footnote_inner">{{{1}}}</sup></span></includeonly><noinclude>

[[קטגוריה:תבניות]]
</noinclude>

3。对应的JavaScript

const list = document.querySelector("#footnotes_list");
document.querySelectorAll(".footnote>sup").forEach((footnote, i) => {
    const li = document.createElement("li");
    li.append(...footnote.childNodes); // move content
    list.appendChild(li);
    footnote.textContent = i+1;
});

_{Credit for user:trincot for developing that code;}

---

脚注文章示例：

תוכן{{הערה|תוכן ההערה}}

==Footnotes Chapter==
{{הערות שוליים}}

我的文章

¹תוכן

脚注章节

1. תוכן ההערה

上述三个代码块的PHP执行允许这样的脚注解析和渲染。

---

我的问题

由上述代码创建的脚注不包含本地 href 属性，因此脚注编号不可点击（就像它们在英文维基百科中一样）。

我希望脚注编号是可点击的，并且点击它们会引导用户找到相应的脚注。

注意

手动创建本地 href 链接我会执行以下操作（单击 X 导致 Y）但我不知道如何自动创建此链接：

<a href="#my_manual_href">X</a>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h2 id="my_manual_href">Y</h2>

我的问题

如何自动创建本地href链接？

Answer 1

一个选项是给每个 li 项目一个 id，如下所示：

const list = document.querySelector("#footnotes_list");
document.querySelectorAll(".footnote>sup").forEach((footnote, i) => {
    const li = document.createElement("li");
    li.id = `footnote-${i}`
    li.append(...footnote.childNodes); // move content
    list.appendChild(li);
    footnote.textContent = i+1;
});

然后将 href 属性添加到文章中的“[1]”元素。

假设您通过代码插入脚注链接，添加href 属性可能如下所示：

document.querySelectorAll(".footnote-link").forEach((element, i) => {
    element.href = `#footnote-${i}`;
});