diff --git a/config.toml b/config.toml
index 3b55b7b..675efd9 100644
--- a/config.toml
+++ b/config.toml
@@ -140,6 +140,9 @@ theme_switcher = true
# Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
copy_button = true
+# Adds backlinks to footnotes (loads ~500 bytes of JavaScripts).
+footnote_backlinks = false
+
# Date format used when listing posts (main page, /blog section, tag posts list…)
# Default is "6th July 2049" in English and "%d %B %Y" in other languages.
long_date_format = "%d %B %Y"
diff --git a/content/blog/javascript.ca.md b/content/blog/javascript.ca.md
index 2c037f6..8e9c265 100644
--- a/content/blog/javascript.ca.md
+++ b/content/blog/javascript.ca.md
@@ -1,7 +1,7 @@
+++
title = "Sense JavaScript obligatori"
date = 2023-01-06
-updated = 2023-08-01
+updated = 2023-08-02
description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
[taxonomies]
@@ -10,20 +10,25 @@ tags = ["funcionalitat", "tutorial"]
Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una quantitat mínima per afegir algunes característiques que són impossibles d'aconseguir amb HTML i CSS.
-### Opcions globals
+## Opcions globals
+
+Pots habilitar les següents opcions per a totes les pàgines:
- **Canvi de mode clar/fosc**. Habilitat configurant `theme_switcher = true`. (~900 bytes)
- **Còpia de blocs de codi amb un sol clic**. Habilitat configurant `copy_button = true`. (~700 bytes)
+- **Enllaços de retorn de notes a peu de pàgina**. Habilitats configurant `footnote_backlinks = true` (~500 bytes).
+
Aquestes dues configuracions es poden aplicar a la secció `[extra]` del teu fitxer `config.toml`.
- [**Comentaris**](@/blog/comments.ca.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) es poden habilitar globalment configurant `enabled_for_all_posts = true` a la secció correcta de `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`).
-### Configuracions específiques de la pàgina
+## Configuracions específiques de la pàgina
Les següents configuracions es poden habilitar en posts específics configurant certes variables a la secció `[extra]` del front matter de la publicació.
- [**KaTeX**](@/blog/markdown.ca.md#katex) (274 KB) es pot habilitar amb `katex = true`.
-- [**Comentaris**](@/blog/comments.ca.md). Es poden habilitar a publicacions específiques assignant el nom del sistema `= true` (per exemple, `hyvortalk = true`).
+- [**Comentaris**](@/blog/comments.ca.md). Es poden habilitar assignant el nom del sistema `= true` (per exemple, `hyvortalk = true`).
+- **Enllaços de retorn de notes a peu de pàgina**. Es poden habilitar amb `footnote_backlinks = true`.
A part d'això, és un tema ràpid amb HTML i CSS que funciona sense JavaScript. Just com hauria de ser (la majoria de) la web :-)
diff --git a/content/blog/javascript.es.md b/content/blog/javascript.es.md
index dd56be5..e6c4938 100644
--- a/content/blog/javascript.es.md
+++ b/content/blog/javascript.es.md
@@ -1,7 +1,7 @@
+++
title = "Sin JavaScript obligatorio"
date = 2023-01-06
-updated = 2023-08-01
+updated = 2023-08-02
description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
[taxonomies]
@@ -10,20 +10,24 @@ tags = ["funcionalidad", "tutorial"]
Este tema no tiene JavaScript obligatorio. Opcionalmente, puede cargar una cantidad mínima para agregar algunas características que son imposibles de lograr con HTML y CSS.
-### Opciones globales
+## Opciones globales
+
+Puedes habilitar las siguientes opciones en todas las páginas:
- **Interruptor de modo claro/oscuro**. Habilitado configurando `theme_switcher = true`. (~900 bytes)
- **Copia de bloques de código con un solo clic**. Habilitado configurando `copy_button = true`. (~700 bytes)
+- **Enlaces de retorno de notas al pie**. Habilitados configurando `footnote_backlinks = true` (~500 bytes).
Estas dos configuraciones se pueden aplicar en la sección `[extra]` de tu `config.toml`.
- [**Comentarios**](@/blog/comments.es.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) se pueden habilitar globalmente configurando `enabled_for_all_posts = true` en la sección apropiada de tu archivo `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`).
-### Opciones para publicaciones individuales
+## Opciones para publicaciones individuales
Las siguientes configuraciones se pueden habilitar en publicaciones específicas configurando ciertas variables en la sección `[extra]` del front matter del post.
- [**KaTeX**](@/blog/markdown.es.md#katex) (274 KB) se puede habilitar con `katex = true`.
-- [**Comentarios**](@/blog/comments.es.md). Se pueden habilitar en posts específicos configurando el nombre del sistema `= true` (por ejemplo, `hyvortalk = true`).
+- [**Comentarios**](@/blog/comments.es.md). Se pueden habilitar con el nombre del sistema `= true` (por ejemplo, `hyvortalk = true`).
+- **Enlaces de retorno de notas al pie**. Se pueden habilitar con `footnote_backlinks = true`.
Aparte de eso, es un tema rápido con HTML y CSS que funciona con JavaScript deshabilitado. Como debería ser (en su mayoría) la web :-)
diff --git a/content/blog/javascript.md b/content/blog/javascript.md
index 6a7a970..9efc708 100644
--- a/content/blog/javascript.md
+++ b/content/blog/javascript.md
@@ -1,7 +1,7 @@
+++
title = "No mandatory JavaScript"
date = 2023-01-06
-updated = 2023-08-01
+updated = 2023-08-02
description = "JavaScript is only used when HTML and CSS aren't enough."
[taxonomies]
@@ -10,20 +10,24 @@ tags = ["showcase", "tutorial"]
This theme has no mandatory JavaScript. Optionally, it can load a minimal amount to add some features that are impossible to achieve with HTML and CSS.
-### Globally enabled settings
+## Globally enabled settings
+
+You can enable the following settings for all pages:
- **Light/dark mode switch**. Enabled by setting `theme_switcher = true`. (~900 bytes)
- **One-click copy of code blocks**. Enabled by setting `copy_button = true`. (~700 bytes)
+- **Footnote backlinks**. Enabled by setting `footnote_backlinks = true` (~500 bytes).
-These two settings can be applied in the `[extra]` section of your `config.toml` file.
+These settings can be applied in the `[extra]` section of your `config.toml` file.
- [**Comments**](@/blog/comments.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) or Isso (1KB) can be globally enabled by setting `enabled_for_all_posts = true` in the right section of your `config.toml` (i.e. `[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` or `[extra.isso]`).
-### Page-specific settings
+## Page-specific settings
The following settings can be enabled on specific posts by setting certain variables in the `[extra]` section of the post's front matter.
-- [**KaTeX** support](@/blog/markdown.md#katex) (274 KB) can be enabled it by setting `katex = true`.
-- [**Comments**](@/blog/comments.md) can be enabled on individual posts by setting the name of the system `= true` (e.g. `hyvortalk = true`).
+- [**KaTeX** support](@/blog/markdown.md#katex) (274 KB) can be enabled by setting `katex = true`.
+- [**Comments**](@/blog/comments.md) can be enabled by setting the name of the system `= true` (e.g. `hyvortalk = true`).
+- **Footnote backlinks** can be enabled by setting `footnote_backlinks = true`.
Other than that, it's a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-)
diff --git a/content/blog/markdown.ca.md b/content/blog/markdown.ca.md
index a0b9ec6..ddcb1e9 100644
--- a/content/blog/markdown.ca.md
+++ b/content/blog/markdown.ca.md
@@ -9,6 +9,7 @@ tags = ["markdown", "funcionalitat"]
[extra]
katex = true
+footnote_backlinks = true
+++
## $\KaTeX$
diff --git a/content/blog/markdown.es.md b/content/blog/markdown.es.md
index d913e33..f51f67d 100644
--- a/content/blog/markdown.es.md
+++ b/content/blog/markdown.es.md
@@ -9,6 +9,7 @@ tags = ["markdown", "funcionalidad"]
[extra]
katex = true
+footnote_backlinks = true
+++
## $\KaTeX$
diff --git a/content/blog/markdown.md b/content/blog/markdown.md
index a1a99b9..9fc50bc 100644
--- a/content/blog/markdown.md
+++ b/content/blog/markdown.md
@@ -9,6 +9,7 @@ tags = ["markdown", "showcase"]
[extra]
katex = true
+footnote_backlinks = true
+++
## $\KaTeX$
diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss
index 4cdbaab..20caf1b 100644
--- a/sass/parts/_misc.scss
+++ b/sass/parts/_misc.scss
@@ -138,6 +138,11 @@ hr {
}
}
+.footnote-backlink {
+ font-size: 0.8rem;
+ margin-left: 0.2rem;
+}
+
.references p {
text-indent: -2.4rem;
margin-left: 2.4rem;
diff --git a/static/js/footnoteBacklinks.js b/static/js/footnoteBacklinks.js
new file mode 100644
index 0000000..8c20098
--- /dev/null
+++ b/static/js/footnoteBacklinks.js
@@ -0,0 +1,33 @@
+// Assign unique IDs to the footnote references based on their hashes.
+function assignReferenceIds() {
+ const references = document.querySelectorAll('.footnote-reference');
+ for (const ref of references) {
+ ref.id = `ref:${ref.children[0].hash.substring(1)}`;
+ }
+}
+
+// Create backlinks for each footnote definition if a corresponding reference exists.
+function createFootnoteBacklinks() {
+ const footnotes = document.querySelectorAll('.footnote-definition');
+ for (const footnote of footnotes) {
+ const backlinkId = `ref:${footnote.id}`;
+
+ // Skip if there's no corresponding reference in the text (i.e. the footnote doesn't reference anything).
+ if (!document.getElementById(backlinkId)) continue;
+
+ const backlink = document.createElement('a');
+ backlink.href = `#${backlinkId}`;
+ backlink.className = 'footnote-backlink';
+ backlink.textContent = '↩';
+ footnote.lastElementChild.appendChild(backlink);
+ }
+}
+
+// Initialise the handlers for the footnote references and definitions.
+function initFootnotes() {
+ assignReferenceIds();
+ createFootnoteBacklinks();
+}
+
+// Wait for the window to load, then execute the main function.
+window.addEventListener('load', initFootnotes);
diff --git a/static/js/footnoteBacklinks.min.js b/static/js/footnoteBacklinks.min.js
new file mode 100644
index 0000000..c2175a7
--- /dev/null
+++ b/static/js/footnoteBacklinks.min.js
@@ -0,0 +1 @@
+function assignReferenceIds(){for(const e of document.querySelectorAll(".footnote-reference"))e.id="ref:"+e.children[0].hash.substring(1)}function createFootnoteBacklinks(){for(const n of document.querySelectorAll(".footnote-definition")){var e,t="ref:"+n.id;document.getElementById(t)&&((e=document.createElement("a")).href="#"+t,e.className="footnote-backlink",e.textContent="↩",n.lastElementChild.appendChild(e))}}function initFootnotes(){assignReferenceIds(),createFootnoteBacklinks()}window.addEventListener("load",initFootnotes);
diff --git a/templates/base.html b/templates/base.html
index d34f61f..0e30b54 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -33,6 +33,11 @@
{%- if config.extra.copy_button and config.extra.copy_button == true -%}
{%- endif -%}
+
+ {# Add backlinks to footnotes #}
+ {%- if config.extra.footnote_backlinks and config.extra.footnote_backlinks == true or page.extra.footnote_backlinks and page.extra.footnote_backlinks == true -%}
+
+ {%- endif -%}