Add manual heading anchor paired shortcode

This commit is contained in:
Helen Chong 2024-06-06 07:44:44 +08:00
parent 42ef599363
commit ddf10203f9
2 changed files with 12 additions and 4 deletions

View File

@ -61,6 +61,14 @@ module.exports = function (eleventyConfig) {
// Shortcode: <cite> tag
eleventyConfig.addShortcode('cite', (str) => `<cite>${str}</cite>`);
// Paired shortcode: Manual heading anchor
eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id) => {
return `<div class="heading-wrapper h${hLevel}">
<h${hLevel} id="${id}">${title}</h2>
<a class="heading-anchor" href="#${id}" aria-labelledby="${id}"><span hidden="">#</span></a>
</div>`;
});
return {
dir: {
input: "src"

View File

@ -1,7 +1,7 @@
{% for log in changelogList | reverse %}
<div class="heading-wrapper h2">
<h2 id="{{ log.fileSlug }}">{{ log.date | formatDate }}</h2>
<a class="heading-anchor" href="#{{ log.fileSlug }}" aria-labelledby="{{ log.fileSlug }}"><span hidden="">#</span></a>
</div>
{% headingAnchor 2, log.fileSlug %}
{{ log.date | formatDate }}
{% endheadingAnchor %}
{{ log.templateContent | safe }}
{%- endfor %}