Comments (1)
It's done!
The JavaScript code is designed to create backlinks for footnotes (the 538 byte minified version is the file that's actually loaded).
To enable it, set footnote_backlinks = true
either in the [extra]
section of either config.toml
(globally enabled) or the individual post's front matter.
How it Works
assignReferenceIds()
This function is used to assign unique IDs to all footnote references within the document. It does this by:
- Selecting all elements with the class
.footnote-reference
. - Iterating over each reference and assigning a unique ID to it. This ID is created by using the hash of the reference's first child, prefixing it with
"ref:"
.
This ensures that each reference in the document has a unique and easily identifiable ID.
createFootnoteBacklinks()
This function takes care of creating backlinks for each footnote definition if a corresponding reference exists in the text. This is done by:
- Selecting all elements with the class
.footnote-definition
. - Iterating over each footnote and generating a backlink ID by concatenating
"ref:"
with the footnote's ID. - Checking whether a corresponding reference with that ID exists in the document; it's possible for a footnote to not be referenced in the text.
- If it exists, creating an anchor element (
<a>
) with an href pointing to the corresponding reference ID and appending a backlink symbol (↩) to the last child element of the footnote.
This creates a backlink next to each footnote that the reader can click on to navigate back to the corresponding reference in the text.
initFootnotes()
This is the main function that brings everything together by calling both assignReferenceIds()
and createFootnoteBacklinks()
. It ensures that both functions are executed in order to set up the references and backlinks as described above.
Event Listener
Finally, the code waits for the window to load by attaching an event listener to the load
event. Once the window is fully loaded, the initFootnotes
function is executed, initializing the footnote handling mechanism.
Styling
I've added some very basic styling to the footnote-backlink
class:
Lines 141 to 144 in 5cdc18e
Live Example
I've enabled the feature in the Markdown examples page.
from tabi.
Related Issues (20)
- list_posts should show draft status HOT 1
- Regression in RSS feed styles HOT 1
- How to contribute back from a fork HOT 2
- Nested lists have too much whitespace between items HOT 5
- Isso moderation comments have broken links when `page_id_is_slug = true` HOT 1
- Incorrect handling of external URLs in `footer_menu` HOT 4
- Keep copyright translations in config.toml HOT 9
- Apply XML styling to the sitemap
- Comply with the default_theme value for the first load of the website (when theme_switcher = true) HOT 2
- Hrefs at the start of new lines highlight in incorrect places HOT 2
- Is it possible to center-align text? HOT 2
- Default taxonomies HOT 6
- Compact tags option HOT 5
- TailwindCSS vs Plain CSS HOT 3
- Enable discussion page HOT 1
- Support Webmentions for comments HOT 1
- tag list date not localized HOT 1
- previos and next link in page HOT 2
- How to archived more than one directory in content? HOT 4
- Previous/next nav hans inconsistent width HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tabi.