Set slugified title as the default ID of manual heading anchor

This commit is contained in:
Helen Chong 2024-06-10 17:29:14 +08:00
parent c2410dce82
commit b813634da0
1 changed files with 3 additions and 1 deletions

View File

@ -4,6 +4,8 @@ const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
const metagen = require('eleventy-plugin-metagen'); const metagen = require('eleventy-plugin-metagen');
const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime"); const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");
const slugify = require("slugify");
module.exports = function (eleventyConfig) { module.exports = function (eleventyConfig) {
// Copy files // Copy files
eleventyConfig.addPassthroughCopy("./src/assets/"); eleventyConfig.addPassthroughCopy("./src/assets/");
@ -62,7 +64,7 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addShortcode('cite', (str) => `<cite>${str}</cite>`); eleventyConfig.addShortcode('cite', (str) => `<cite>${str}</cite>`);
// Paired shortcode: Manual heading anchor // Paired shortcode: Manual heading anchor
eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id) => { eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id=slugify(title)) => {
return `<div class="heading-wrapper h${hLevel}"> return `<div class="heading-wrapper h${hLevel}">
<h${hLevel} id="${id}">${title}</h2> <h${hLevel} id="${id}">${title}</h2>
<a class="heading-anchor" href="#${id}" aria-labelledby="${id}"><span hidden="">#</span></a> <a class="heading-anchor" href="#${id}" aria-labelledby="${id}"><span hidden="">#</span></a>