【add】添加样式

src/theme/BlogLayout.tsx

@@ -18,10 +18,7 @@ export default function BlogLayout(props) {
           >
             {children}
           </main>
-          <div className="col col--3">
-            <BlogSidebar sidebar={sidebar} />
-            {toc && toc}
-          </div>
+          <div className="col col--4">{toc && toc}</div>
         </div>
       </div>
     </Layout>

src/theme/BlogListPage.tsx

@@ -59,10 +59,7 @@ export default function BlogListPage(props) {
                 height: "70%",
               }}
             />
-            <div>
-              <BlogPostItem data={content} />
-            </div>
-
+            <span>{content?.metadata?.description}</span>
             <footer>{dayjs(content.metadata.date).format("YYYY/MM/DD")}</footer>
           </article>
         ))}

src/theme/BlogPostItem.tsx

@@ -1,30 +1,28 @@
-
 // import BlogPostItem from "@theme-original/BlogPostItem";
-import React from 'react';
-import clsx from 'clsx';
+import React from "react";
+import clsx from "clsx";
 // import {useBlogPost} from '@docusaurus/theme-common/internal';
-import BlogPostItemContainer from '@theme/BlogPostItem/Container';
-import BlogPostItemHeader from '@theme/BlogPostItem/Header';
-import BlogPostItemContent from '@theme/BlogPostItem/Content';
-import BlogPostItemFooter from '@theme/BlogPostItem/Footer';
-import type {Props} from '@theme/BlogPostItem';
+import BlogPostItemContainer from "@theme/BlogPostItem/Container";
+import BlogPostItemHeader from "@theme/BlogPostItem/Header";
+import BlogPostItemContent from "@theme/BlogPostItem/Content";
+import BlogPostItemFooter from "@theme/BlogPostItem/Footer";
+import type { Props } from "@theme/BlogPostItem";
 
-// apply a bottom margin in list view
-function useContainerClassName() {
-  // const {isBlogPostPage} = useBlogPost();
-  // return !isBlogPostPage ? 'margin-bottom--xl' : undefined;
-}
+export default function BlogPostItem(props): JSX.Element {
+  // const {
+  //   children: {
+  //     type: { metadata },
+  //   },
+  // } = props;
+  // console.log("propos", props);
+
+  const { children } = props;
 
-export default function BlogPostItem({
-  children,
-  className,
-}: Props): JSX.Element {
-  const containerClassName = useContainerClassName();
   return (
-    <BlogPostItemContainer className={clsx('margin-bottom--xl', className)}>
+    <>
       <BlogPostItemHeader />
       <BlogPostItemContent>{children}</BlogPostItemContent>
       <BlogPostItemFooter />
-    </BlogPostItemContainer>
+    </>
   );
-}
+}

src/theme/BlogPostItem/Container/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import type {Props} from '@theme/BlogPostItem/Container';
+
+export default function BlogPostItemContainer({
+  children,
+  className,
+}: Props): JSX.Element {
+  const {frontMatter, assets} = useBlogPost();
+  const {withBaseUrl} = useBaseUrlUtils();
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <article
+      className={className}
+      itemProp="blogPost"
+      itemScope
+      itemType="http://schema.org/BlogPosting">
+      {image && (
+        <meta itemProp="image" content={withBaseUrl(image, {absolute: true})} />
+      )}
+      {children}
+    </article>
+  );
+}

src/theme/BlogPostItem/Content/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import clsx from "clsx";
+import { blogPostContainerID } from "@docusaurus/utils-common";
+import { useBlogPost } from "@docusaurus/theme-common/internal";
+import MDXContent from "@theme/MDXContent";
+import type { Props } from "@theme/BlogPostItem/Content";
+
+export default function BlogPostItemContent({
+  children,
+  className,
+}: Props): JSX.Element {
+  // const {isBlogPostPage} = useBlogPost();
+  return (
+    <div
+      // This ID is used for the feed generation to locate the main content
+      // id={isBlogPostPage ? blogPostContainerID : undefined}
+      className={clsx("markdown", className)}
+      itemProp="articleBody"
+    >
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}

src/theme/BlogPostItem/Footer/ReadMoreLink/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Translate, {translate} from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogPostItem/Footer/ReadMoreLink';
+
+function ReadMoreLabel() {
+  return (
+    <b>
+      <Translate
+        id="theme.blog.post.readMore"
+        description="The label used in blog post item excerpts to link to full blog posts">
+        Read More
+      </Translate>
+    </b>
+  );
+}
+
+export default function BlogPostItemFooterReadMoreLink(
+  props: Props,
+): JSX.Element {
+  const {blogPostTitle, ...linkProps} = props;
+  return (
+    <Link
+      aria-label={translate(
+        {
+          message: 'Read more about {title}',
+          id: 'theme.blog.post.readMoreLabel',
+          description:
+            'The ARIA label for the link to full blog posts from excerpts',
+        },
+        {title: blogPostTitle},
+      )}
+      {...linkProps}>
+      <ReadMoreLabel />
+    </Link>
+  );
+}

src/theme/BlogPostItem/Footer/index.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import EditThisPage from '@theme/EditThisPage';
+import TagsListInline from '@theme/TagsListInline';
+import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
+
+import styles from './styles.module.css';
+
+export default function BlogPostItemFooter(): JSX.Element | null {
+  const {metadata, isBlogPostPage} = useBlogPost();
+  const {tags, title, editUrl, hasTruncateMarker} = metadata;
+
+  // A post is truncated if it's in the "list view" and it has a truncate marker
+  const truncatedPost = !isBlogPostPage && hasTruncateMarker;
+
+  const tagsExists = tags.length > 0;
+
+  const renderFooter = tagsExists || truncatedPost || editUrl;
+
+  if (!renderFooter) {
+    return null;
+  }
+
+  return (
+    <footer
+      className={clsx(
+        'row docusaurus-mt-lg',
+        isBlogPostPage && styles.blogPostFooterDetailsFull,
+      )}>
+      {tagsExists && (
+        <div className={clsx('col', {'col--9': truncatedPost})}>
+          <TagsListInline tags={tags} />
+        </div>
+      )}
+
+      {isBlogPostPage && editUrl && (
+        <div className="col margin-top--sm">
+          <EditThisPage editUrl={editUrl} />
+        </div>
+      )}
+
+      {truncatedPost && (
+        <div
+          className={clsx('col text--right', {
+            'col--3': tagsExists,
+          })}>
+          <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
+        </div>
+      )}
+    </footer>
+  );
+}

src/theme/BlogPostItem/Footer/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.blogPostFooterDetailsFull {
+  flex-direction: column;
+}

src/theme/BlogPostItem/Header/Author/index.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import Link, {type Props as LinkProps} from '@docusaurus/Link';
+
+import type {Props} from '@theme/BlogPostItem/Header/Author';
+
+function MaybeLink(props: LinkProps): JSX.Element {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+  return <>{props.children}</>;
+}
+
+export default function BlogPostItemHeaderAuthor({
+  author,
+  className,
+}: Props): JSX.Element {
+  const {name, title, url, imageURL, email} = author;
+  const link = url || (email && `mailto:${email}`) || undefined;
+  return (
+    <div className={clsx('avatar margin-bottom--sm', className)}>
+      {imageURL && (
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img className="avatar__photo" src={imageURL} alt={name} />
+        </MaybeLink>
+      )}
+
+      {name && (
+        <div
+          className="avatar__intro"
+          itemProp="author"
+          itemScope
+          itemType="https://schema.org/Person">
+          <div className="avatar__name">
+            <MaybeLink href={link} itemProp="url">
+              <span itemProp="name">{name}</span>
+            </MaybeLink>
+          </div>
+          {title && (
+            <small className="avatar__subtitle" itemProp="description">
+              {title}
+            </small>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/theme/BlogPostItem/Header/Authors/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import BlogPostItemHeaderAuthor from '@theme/BlogPostItem/Header/Author';
+import type {Props} from '@theme/BlogPostItem/Header/Authors';
+import styles from './styles.module.css';
+
+// Component responsible for the authors layout
+export default function BlogPostItemHeaderAuthors({
+  className,
+}: Props): JSX.Element | null {
+  const {
+    metadata: {authors},
+    assets,
+  } = useBlogPost();
+  const authorsCount = authors.length;
+  if (authorsCount === 0) {
+    return null;
+  }
+  const imageOnly = authors.every(({name}) => !name);
+  return (
+    <div
+      className={clsx(
+        'margin-top--md margin-bottom--sm',
+        imageOnly ? styles.imageOnlyAuthorRow : 'row',
+        className,
+      )}>
+      {authors.map((author, idx) => (
+        <div
+          className={clsx(
+            !imageOnly && 'col col--6',
+            imageOnly ? styles.imageOnlyAuthorCol : styles.authorCol,
+          )}
+          key={idx}>
+          <BlogPostItemHeaderAuthor
+            author={{
+              ...author,
+              // Handle author images using relative paths
+              imageURL: assets.authorsImageUrls[idx] ?? author.imageURL,
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

src/theme/BlogPostItem/Header/Authors/styles.module.css

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.authorCol {
+  max-width: inherit !important;
+  flex-grow: 1 !important;
+}
+
+.imageOnlyAuthorRow {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.imageOnlyAuthorCol {
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
+}