Table Of Contents - Customization

[ccamusso]

TODO
I want add a new image url paramiter inside head of md file and show this image inside table of contents in right sidebar.

---
sidebar_position: 1
title: my title page
description: my description page
**image_url: https://www.site.com/asset/img.png**
---

What kind of customization should I do to make this possible?

[slorber]

inside table of contents in right sidebar.

This is confusing me:

• right is TOC
• left is sidebar

TOC and sidebar are 2 separate things.

You can find a way to display images in the left (sidebar) with customProps attribute or custom_props frontmatter + swizzling

You can find a way to display an image in the right (TOC) by swizzling the TOC component and using frontmatter here. For example swizzle DocItem/TOC/Desktop and add your image where you want.

import React from 'react';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/theme-common/internal';

import TOC from '@theme/TOC';

export default function DocItemTOCDesktop(): JSX.Element {
  const {toc, frontMatter} = useDoc();
  return (
    <>
      <img src={frontMatter.my_custom_image}/>
      <TOC
        toc={toc}
        minHeadingLevel={frontMatter.toc_min_heading_level}
        maxHeadingLevel={frontMatter.toc_max_heading_level}
        className={ThemeClassNames.docs.docTocDesktop}
      />
    </>
  );
}

Remember that the doc TOC renders differently on desktop and mobile: make sure you handle both cases independently. I also assume you only want to enhance the TOC of docs, not blog posts.

It would be easier to help you if you provided a mockup of what you want to achieve

[ccamusso]

I want swizzing TOC component but DocItem/TOC/Desktop not exist in Docusaurus 2.0 ?!?!?

I try with this command:
npm run swizzle @docusaurus/theme-classic DocItem/TOC/Desktop -- --eject
bat the component DocItem/TOC/Desktop is not found (I using Docusaurus 2.0)

DocItem/TOC/Desktop component is not in this swizzle list output:
npm run swizzle --list

Can you help me?

[ccamusso]

I solved with swizzle only DocItem
npm run swizzle @docusaurus/theme-classic DocItem -- --eject

and update TOC column in row 104.