update at 2024-04-11 12:16:02

content/cases/sidebars.ts

@@ -7,6 +7,9 @@ const sidebars: SidebarsConfig = {
       type: 'category',
       label: '云原生家庭网络',
       collapsed: false,
+      customProps: {
+
+      },
       link: {
         type: 'generated-index',
         slug: '/home-network'

src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -1,71 +1,17 @@
 import React from 'react';
-import {
-  PageMetadata,
-  useCurrentSidebarCategory,
-} from '@docusaurus/theme-common';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import DocCardList from '@theme/DocCardList';
-import DocPaginator from '@theme/DocPaginator';
-import DocVersionBanner from '@theme/DocVersionBanner';
-import DocVersionBadge from '@theme/DocVersionBadge';
-import DocBreadcrumbs from '@theme/DocBreadcrumbs';
-import Heading from '@theme/Heading';
-import type { Props } from '@theme/DocCategoryGeneratedIndexPage';
-
-import styles from './styles.module.css';
+import DocCategoryGeneratedIndexPage from '@theme-original/DocCategoryGeneratedIndexPage';
+import type DocCategoryGeneratedIndexPageType from '@theme/DocCategoryGeneratedIndexPage';
+import type { WrapperProps } from '@docusaurus/types';
+// highlight-add-line
 import Comment from '@site/src/components/Comment';
 
-function DocCategoryGeneratedIndexPageMetadata({
-  categoryGeneratedIndex,
-}: Props): JSX.Element {
-  return (
-    <PageMetadata
-      title={categoryGeneratedIndex.title}
-      description={categoryGeneratedIndex.description}
-      keywords={categoryGeneratedIndex.keywords}
-      // TODO `require` this?
-      image={useBaseUrl(categoryGeneratedIndex.image)}
-    />
-  );
-}
+type Props = WrapperProps<typeof DocCategoryGeneratedIndexPageType>;
 
-function DocCategoryGeneratedIndexPageContent({
-  categoryGeneratedIndex,
-}: Props): JSX.Element {
-  const category = useCurrentSidebarCategory();
-  return (
-    <div className={styles.generatedIndexPage}>
-      <DocVersionBanner />
-      <DocBreadcrumbs />
-      <DocVersionBadge />
-      <header>
-        <Heading as="h1" className={styles.title}>
-          {categoryGeneratedIndex.title}
-        </Heading>
-        {categoryGeneratedIndex.description && (
-          <p>{categoryGeneratedIndex.description}</p>
-        )}
-      </header>
-      <article className="margin-top--lg">
-        <DocCardList items={category.items} className={styles.list} />
-      </article>
-      <footer className="margin-top--lg">
-        <DocPaginator
-          previous={categoryGeneratedIndex.navigation.previous}
-          next={categoryGeneratedIndex.navigation.next}
-        />
-      </footer>
-    </div>
-  );
-}
-
-export default function DocCategoryGeneratedIndexPage(
-  props: Props,
-): JSX.Element {
+export default function DocCategoryGeneratedIndexPageWrapper(props: Props): JSX.Element {
   return (
     <>
-      <DocCategoryGeneratedIndexPageMetadata {...props} />
-      <DocCategoryGeneratedIndexPageContent {...props} />
+      <DocCategoryGeneratedIndexPage {...props} />
+      {/* highlight-add-line */}
       <Comment />
     </>
   );

src/theme/DocCategoryGeneratedIndexPage/styles.module.css

@@ -1,19 +0,0 @@
-@media (min-width: 997px) {
-  .generatedIndexPage {
-    max-width: 75% !important;
-  }
-
-  .list article:nth-last-child(-n + 2) {
-    margin-bottom: 0 !important;
-  }
-}
-
-/* Duplicated from .markdown h1 */
-.title {
-  --ifm-h1-font-size: 3rem;
-  margin-bottom: calc(1.25 * var(--ifm-leading));
-}
-
-.list article:last-child {
-  margin-bottom: 0 !important;
-}

src/theme/DocItem/Layout/index.tsx

@@ -1,70 +1,18 @@
 import React from 'react';
-import clsx from 'clsx';
-import { useWindowSize } from '@docusaurus/theme-common';
-import { useDoc } from '@docusaurus/theme-common/internal';
-import DocItemPaginator from '@theme/DocItem/Paginator';
-import DocVersionBanner from '@theme/DocVersionBanner';
-import DocVersionBadge from '@theme/DocVersionBadge';
-import DocItemFooter from '@theme/DocItem/Footer';
-import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
-import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
-import DocItemContent from '@theme/DocItem/Content';
-import DocBreadcrumbs from '@theme/DocBreadcrumbs';
-import Unlisted from '@theme/Unlisted';
-import type { Props } from '@theme/DocItem/Layout';
+import Layout from '@theme-original/DocItem/Layout';
+import type LayoutType from '@theme/DocItem/Layout';
+import type { WrapperProps } from '@docusaurus/types';
+// highlight-add-line
+import Comment from '@site/src/components/Comment';
 
-import styles from './styles.module.css';
-import Comment from '../../../components/Comment';
+type Props = WrapperProps<typeof LayoutType>;
 
-/**
- * Decide if the toc should be rendered, on mobile or desktop viewports
- */
-function useDocTOC() {
-  const { frontMatter, toc } = useDoc();
-  const windowSize = useWindowSize();
-
-  const hidden = frontMatter.hide_table_of_contents;
-  const canRender = !hidden && toc.length > 0;
-
-  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
-
-  const desktop =
-    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
-      <DocItemTOCDesktop />
-    ) : undefined;
-
-  return {
-    hidden,
-    mobile,
-    desktop,
-  };
-}
-
-export default function DocItemLayout({ children }: Props): JSX.Element {
-  const docTOC = useDocTOC();
-  const { frontMatter } = useDoc();
-  const { hide_comment: hideComment } = frontMatter;
-  const {
-    metadata: { unlisted },
-  } = useDoc();
+export default function LayoutWrapper(props: Props): JSX.Element {
   return (
-    <div className="row">
-      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
-        {unlisted && <Unlisted />}
-        <DocVersionBanner />
-        <div className={styles.docItemContainer}>
-          <article>
-            <DocBreadcrumbs />
-            <DocVersionBadge />
-            {docTOC.mobile}
-            <DocItemContent>{children}</DocItemContent>
-            <DocItemFooter />
-          </article>
-          <DocItemPaginator />
-        </div>
-        {!hideComment && <Comment />}
-      </div>
-      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
-    </div>
+    <>
+      <Layout {...props} />
+      {/* highlight-add-line */}
+      <Comment />
+    </>
   );
 }

src/theme/DocItem/Layout/styles.module.css

@@ -1,10 +0,0 @@
-.docItemContainer header + *,
-.docItemContainer article > *:first-child {
-  margin-top: 0;
-}
-
-@media (min-width: 997px) {
-  .docItemCol {
-    max-width: 75% !important;
-  }
-}