Table Of Contents

InstallCopy Anchor Link

npx ghostcn@1.4.0 add table-of-contents --skip-existing

UsageCopy Anchor Link

Place next to your article content inside {{#post}}. The script scans .ghcn-article-content by default. Pass contentSelector=".your-article-content" for a different selector or heading="In this article" for a custom title. It lists H2/H3 headings, excludes editor-card UI headings, adds unique anchors, moves keyboard focus on navigation, and stays hidden with fewer than two headings. linkClass styles the generated links.

Ghostcn links its deferred script in default.hbs. If you use another layout, link it there manually:

<script defer src="{{asset "js/components/table-of-contents.js"}}"></script>

{{#post}}
    {{> "components/table-of-contents"}}
{{/post}}

Customize this instanceCopy Anchor Link

{{#post}}
    {{> "components/table-of-contents" class="my-6 rounded-xl" linkClass="underline"}}
{{/post}}

Styling parametersCopy Anchor Link

Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.

Installed filesCopy Anchor Link

• partials/components/table-of-contents.hbs
• assets/css/components/table-of-contents.css
• assets/js/components/table-of-contents.js

View the registry source