Jekyll Anchor Headings

screenshot of Jekyll Anchor Headings
jekyll

Jekyll Anchor Headings

A GitHub Pages compatible way of adding anchors to your headings without a plug-in or JavaScript :octocat:

Overview

The article discusses a solution for generating static heading anchors for Jekyll websites. It explains that while Jekyll websites can't run custom plugins on GitHub pages, users can still use JavaScript solutions to inject anchors for headings. However, this may not work if users have JavaScript disabled on their browsers. As an alternative, the article presents a Liquid snippet that modifies the generated HTML to inject anchors directly. It also highlights several websites that are already using this solution.

Features

  • Generates static heading anchors for Jekyll websites without relying on JavaScript
  • Allows users to include a Table of Contents in their Jekyll layouts without JavaScript or a plugin
  • Highly customizable with available parameters to change the behavior of the snippet
  • Does not force any specific method of handling accessibility, allowing developers to handle it as they prefer
  • Can be configured to be accessible as seen in examples in the wiki
  • Can be customized to add icons or screen reader-friendly markup to the anchors

Installation

To use this solution, follow these steps:

  1. Download the anchor_headings.html file from the latest release or the master branch.
  2. Place the downloaded file in your _includes folder.
  3. In your layout, replace the {{ content }} tag with the Liquid tag provided to output the page's content.

Summary

This article presents a solution for generating static heading anchors for Jekyll websites without relying on JavaScript. It provides a Liquid snippet that modifies the HTML output to include anchors directly. The solution is highly customizable and can be used to include a Table of Contents without JavaScript or a plugin. Developers have the flexibility to handle accessibility in their preferred way using this solution. The article also highlights several websites that are already using this approach.

jekyll
Jekyll

Jekyll is a static site generator written in Ruby that allows you to create simple, fast, and secure websites without the need for a database.

github-pages
GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading