Table of COntent

Display a table of content for your content types

Install now

Strapi v5 - Plugin Table of Content

Strapi Plugin that displays a table of content for your content types

A plugin for Strapi Headless CMS that displays a table of content for your content types

Features

Display a table of content for your content types

Usage

To configure the Table of Content plugin, add your configuration to the plugin settings. The configuration consist of an object with the content types:

type Config = {
  contentTypes: {
    uid: string;
    fields: {
      type: "separator";
    } | {
      type: "primitive";
      name: string;
      displayLabel?: boolean;
      displayIcon?: boolean;
    } | {
      type: "dynamiczone";
      name: string;
      displayLabel?: boolean;
      components?: {
        name: string;
        level?: null | number | {
          field: string;
        };
        displayIcon?: boolean;
      }[];
    }[];
  }[];
}

Example Configuration

// config/plugins.ts
import type { Config as TableOfContentConfig } from 'strapi-plugin-table-of-content/dist/server/src/config'

import packageJson from '../package.json'

export default () => ({
  'table-of-content': {
    enabled: true,
    config: {
      contentTypes: [
        {
          uid: 'api::page.page',
          fields: [
            {
              type: 'primitive',
              name: 'title',
              displayLabel: true,
              displayIcon: true,
            },
            {
              type: 'separator',
            },
            {
              type: 'dynamiczone',
              name: 'content',
              displayLabel: true,
              components: [
                { name: 'content.title', level: { field: 'level' } },
              ],
            },
            {
              type: 'separator',
            },
            {
              type: 'dynamiczone',
              name: 'extraContent',
              displayLabel: true,
              components: [
                { name: 'content.title', level: { field: 'level' } },
                { name: 'content.rich-text', level: null }, // null means the component is not displayed
                { name: 'content.image-text', level: null }, // null means the component is not displayed
              ],
            },
          ],
        },
      ],
    } satisfies TableOfContentConfig,
  }
})