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:

1type Config = {
2  contentTypes: {
3    uid: string;
4    fields: {
5      type: "separator";
6    } | {
7      type: "primitive";
8      name: string;
9      displayLabel?: boolean;
10      displayIcon?: boolean;
11    } | {
12      type: "dynamiczone";
13      name: string;
14      displayLabel?: boolean;
15      components?: {
16        name: string;
17        level?: null | number | {
18          field: string;
19        };
20        displayIcon?: boolean;
21      }[];
22    }[];
23  }[];
24}

Example Configuration

1// config/plugins.ts
2import type { Config as TableOfContentConfig } from 'strapi-plugin-table-of-content/dist/server/src/config'
3
4import packageJson from '../package.json'
5
6export default () => ({
7  'table-of-content': {
8    enabled: true,
9    config: {
10      contentTypes: [
11        {
12          uid: 'api::page.page',
13          fields: [
14            {
15              type: 'primitive',
16              name: 'title',
17              displayLabel: true,
18              displayIcon: true,
19            },
20            {
21              type: 'separator',
22            },
23            {
24              type: 'dynamiczone',
25              name: 'content',
26              displayLabel: true,
27              components: [
28                { name: 'content.title', level: { field: 'level' } },
29              ],
30            },
31            {
32              type: 'separator',
33            },
34            {
35              type: 'dynamiczone',
36              name: 'extraContent',
37              displayLabel: true,
38              components: [
39                { name: 'content.title', level: { field: 'level' } },
40                { name: 'content.rich-text', level: null }, // null means the component is not displayed
41                { name: 'content.image-text', level: null }, // null means the component is not displayed
42              ],
43            },
44          ],
45        },
46      ],
47    } satisfies TableOfContentConfig,
48  }
49})