(Disclaimer: This is a pre-release.)

A field-method for the Kirby CMS which automagically enumerates your headings, generates IDs for them and inserts matching anchor links. Customizable to it's core. 🤘

Note: Please dive into this advanced use case if you want to build something like the GIF above.

• wottpal.com (my personal site)
• Submit yours

Use Kirby's CLI and install the plugin via: kirby plugin:install wottpal/kirby-anchor-headings or place the repo manually under site/plugins.

🎉 That's it.

This is a kirby field-method, so you can basically just do:

<?= $page->text()->kirbytext()->headingAnchors() ?>

The following options can be set globally in your config.php with c::set($key, $value = null). You can also set multiple keys with c::set([$key => $value, ..]). 🤓

Please prefix every key with anchorheadings.!

Even if id.prefix defaults to false I encourage you to set it to something like section- to prevent namespace-conflicts all over your site.

You can either pass a regular expression as the replacement or a callback-function. They will be used with preg_replace_callback or preg_replace, respectively.

[
  // characters to replace with an hyphen
  '/[_ ~\/,.]/' => '-',
  // replace German umlauts (YES, even the large ß)
  '/ä/' => 'ae', '/ö/' => 'oe', '/ü/' => 'ue',
  '/Ä/' => 'Ae', '/Ö/' => 'Oe', '/Ü/' => 'Ue',
  '/ß/' => 'ss', '/ẞ/' => 'SS',
  // remove all remaining characters that are not letters/digits
  '/[^A-Za-z0-9\-]/' => '',
  // remove trailing hyphens and squash multiple occurences
  '/- $/' => '',
  '/-{2,}/' => '-',
  // convert everything to lowercase (using a callback-function)
  '/([A-Z] )/' => function($x) { return strtolower($x[1]); }
]

<a href='#{id}'>{enum}.</a> {heading}

You can use the following template-literals in your markup: {id}, {enum} and {heading}. I think they are self-explanatory, but feel free to reach out if you need further guidance.

Have a look at the releases page.

• Add an example with advanced markup & styling to the README.md
• Improve ID generation by collapsing consecutive '-' to one
• Allow non integer values for enum.start like A or i and conitnue enumeration with this style.

Just kidding. This plugin is totally free. Please consider following me on Twitter if it saved your day.

You can also check out one of my other Kirby-plugins:

• Lightbox-Gallery - Easily inline beautifully aligned galleries with lightbox-support powered by PhotoSwipe.
• HTML5-Video Kirbytag - Adds a kirbytag for embedding HTML5-videos with a variety of features.