Footnotes widget

Footnotes are an essential tool that enhances reader comprehension by providing additional context, references, and citations without interrupting the flow of the main text. They help readers dive deeper into the content, verify sources, and gain a fuller understanding of the subject matter.

Integrating a Footnotes widget in your Ghost CMS can significantly elevate the quality of your articles. This widget seamlessly adds footnotes to your posts, making your writing more professional and reader-friendly. Follow the steps below to add the footnotes widget to your Ghost CMS website using Ghost code injection.

Footnotes widget script

<script>
  const contentSelector = 'article.ghost-content'
  const contentElement = document.querySelector(contentSelector);
  let htmlContent = contentElement.innerHTML;
  // Define the regular expression pattern to match [^ some_text_here ]
  const regexPattern = /\[\^(.*?)\]/g;
  
  const footnoteList = document.createElement('ol');
  footnoteList.classList.add('footnote-list');
	footnoteList.id = 'footnotes';
    
  let index = 1;
  
  // Replace the matched pattern with the desired HTML tag
  htmlContent = htmlContent.replace(regexPattern, (match, p1) => {
      index = index + 1
      footnoteList.innerHTML = footnoteList.innerHTML + `<li id="footnote-${index -1}">${p1}</li>`
      return `<sup class="footnote"><a href="#footnote-${index -1}">[${index - 1}]</a></sup>`;
  });

  // Set the updated HTML content back to the element
  contentElement.innerHTML = htmlContent;
  contentElement.append(footnoteList);
</script>

The script converts in-text footnote markers into clickable links that refer to a list of footnotes appended at the end of the content. It processes the content of an HTML element (specifically an <article> with the class ghost-content) by identifying footnote markers and converting them into footnote links. Here’s a detailed explanation:

1. Select Content: It selects the HTML element with the selector 'article.ghost-content'.
2. Get HTML: It retrieves the inner HTML of this element.
3. Pattern Matching: It defines a regular expression to match footnote markers in the format [^ some_text_here ].
4. Create Footnote List: It creates an ordered list (<ol>) element to store footnotes.
5. Initialize Index: It initializes a counter index to keep track of footnote numbers.
6. Replace Footnotes: It replaces each footnote marker in the content with a superscript link to the corresponding footnote. The original footnote text is added as a list item in the ordered list.
7. Update Content: It updates the original HTML content with the modified content and appends the ordered list of footnotes at the end of the selected element.

Footnotes widget styles

<style>
.footnote { margin-left: 0.25rem; }
.footnote a { text-decoration: none; font-weight: 700; }

.footnote-list {
  margin-top: 2rem;
  border-top: 1px solid #e4e4e4;
  padding-top: 2rem;
  font-size: 0.95rem;
  font-style: italic;
}
</style>

This style defines the appearance of footnotes in content and the footnote list at the end of the article. You can adjust any of the styles based on what you need.

Footnotes widget markup

Place footnote markers in the text using the format [^ footnote text ]. This will be automatically converted into a clickable footnote link by the script.

For example:

will be converted to:

The text [^ First footnote text ] will be replaced with a superscript number [1] linked to the footnote at the bottom. The original footnote text will appear in an ordered list at the end of the article. This way, readers can click on the superscript number to jump to the corresponding footnote.