Add custom TOC component with ad image (#569)

Author: ruibaby

src/images/pro-ad.png

@@ -0,0 +1,31 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import TOCItems from '@theme/TOCItems';
+import type {Props} from '@theme/TOC';
+
+import styles from './styles.module.css';
+
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
+import proAd from '../../images/pro-ad.png';
+
+export default function TOC({className, ...props}: Props): ReactNode {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+       <div style={{
+        marginTop: '12px',
+      }}>
+        <a href='https://www.lxware.cn/halo-shop?code=mcYhwMkn'>
+          <img src={proAd} />
+        </a>
+      </div>
+    </div>
+  );
+}

src/theme/TOC/index.tsx

@@ -0,0 +1,16 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}