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
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