Как автоматически создавать локальные ссылки href? - PullRequest
Новая
       85

Как автоматически создавать локальные ссылки href?

1 голос
/ 27 января 2020

У меня есть сайт 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;
});

Кредит на user:trincot за разработку этого кода;

Пример сноски: 

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

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

Моя статья

1 תוכן

Глава сносок

  1. תוכן ההערה

PHP выполнение трех указанных выше блоков кода позволяет выполнять такой анализ и отображение сносок.

Моя проблема

Сноски, созданные с помощью указанного кода, не не содержит локальных атрибутов href, поэтому номера сносок не активируются (как в Engli sh Wikipedia).

Я хочу, чтобы номера сносок были кликабельными, и нажатие на них приведет к пользователь к соответствующей сноске.

Примечание

К вручную создать локальную 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 ссылки?

1 Ответ

3 голосов
/ 30 января 2020

Можно было бы присвоить каждому элементу li идентификатор следующим образом: 

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}`;
});
...