启用评论系统

docusaurus.config.js

@@ -94,6 +94,16 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      // giscus 评论
+      giscus: {
+        repo: 'BetterECNU/SharedCourses',
+        repoId: 'R_kgDOMR1oyA',
+        category: 'Announcements',
+        categoryId: 'DIC_kwDOMR1oyM4CvymL',
+        theme: 'light_high_contrast',
+        darkTheme: 'dark_tritanopia'
+      },
+
       // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',
       navbar: {
@@ -174,6 +184,8 @@ const config = {
     mermaid: true,
   },
   themes:['@docusaurus/theme-mermaid'],
+  // 以下部分为启用giscus评论
+  clientModules: [require.resolve('./src/clientModules/routeModules.ts')]
 };
 
 export default config;

package.json

@@ -18,8 +18,10 @@
     "@docusaurus/preset-classic": "3.8.1",
     "@docusaurus/theme-mermaid": "^3.8.1",
     "@easyops-cn/docusaurus-search-local": "^0.52.1",
+    "@giscus/react": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "mitt": "^3.0.1",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/clientModules/routeModules.ts

@@ -0,0 +1,17 @@
+import mitt from 'mitt';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+const emitter = mitt();
+
+if (ExecutionEnvironment.canUseDOM) {
+  window.emitter = emitter;
+}
+
+export function onRouteDidUpdate() {
+  if (ExecutionEnvironment.canUseDOM) {
+    setTimeout(() => {
+      window.emitter.emit('onRouteDidUpdate');
+    });
+  }
+  // https://github.com/facebook/docusaurus/issues/8278
+}

src/components/comment/index.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import Giscus, { GiscusProps } from '@giscus/react';
+import {
+  useThemeConfig,
+  useColorMode,
+  ThemeConfig
+} from '@docusaurus/theme-common';
+interface CustomThemeConfig extends ThemeConfig {
+  giscus: GiscusProps & { darkTheme: string };
+}
+
+export const Comment = forwardRef<HTMLDivElement>((_props, ref) => {
+  const { giscus } = useThemeConfig() as CustomThemeConfig;
+  const { colorMode } = useColorMode();
+  const { theme = 'light', darkTheme = 'dark_dimmed' } = giscus;
+  const giscusTheme = colorMode === 'dark' ? darkTheme : theme;
+  const [routeDidUpdate, setRouteDidUpdate] = useState(false);
+
+  useEffect(() => {
+    function eventHandler(e) {
+      setRouteDidUpdate(true);
+    }
+
+    window.emitter.on('onRouteDidUpdate', eventHandler);
+
+    return () => {
+      window.emitter.off('onRouteDidUpdate', eventHandler);
+    };
+  }, []);
+
+  if (!routeDidUpdate) {
+    return null;
+  }
+
+  return (
+    <BrowserOnly fallback={<div>Loading Comments...</div>}>
+      {() => (
+        <div ref={ref} id="comment" style={{ paddingTop: 50 }}>
+          <Giscus
+            id="comments"
+            mapping="title"
+            strict="1"
+            reactionsEnabled="1"
+            emitMetadata="0"
+            inputPosition="bottom"
+            lang="zh-CN"
+            loading="lazy"
+            {...giscus}
+            theme={giscusTheme}
+          />
+        </div>
+      )}
+    </BrowserOnly>
+  );
+});
+
+export default Comment;

src/theme/BlogPostPage/Metadata/index.tsx

@@ -0,0 +1,37 @@
+import React, {type ReactNode} from 'react';
+import {PageMetadata} from '@docusaurus/theme-common';
+import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
+
+export default function BlogPostPageMetadata(): ReactNode {
+  const {assets, metadata} = useBlogPost();
+  const {title, description, date, tags, authors, frontMatter} = metadata;
+
+  const {keywords} = frontMatter;
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <PageMetadata
+      title={frontMatter.title_meta ?? title}
+      description={description}
+      keywords={keywords}
+      image={image}>
+      <meta property="og:type" content="article" />
+      <meta property="article:published_time" content={date} />
+      {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
+      {authors.some((author) => author.url) && (
+        <meta
+          property="article:author"
+          content={authors
+            .map((author) => author.url)
+            .filter(Boolean)
+            .join(',')}
+        />
+      )}
+      {tags.length > 0 && (
+        <meta
+          property="article:tag"
+          content={tags.map((tag) => tag.label).join(',')}
+        />
+      )}
+    </PageMetadata>
+  );
+}

src/theme/BlogPostPage/StructuredData/index.tsx

@@ -0,0 +1,14 @@
+import React, {type ReactNode} from 'react';
+import Head from '@docusaurus/Head';
+import {useBlogPostStructuredData} from '@docusaurus/plugin-content-blog/client';
+
+export default function BlogPostStructuredData(): ReactNode {
+  const structuredData = useBlogPostStructuredData();
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Head>
+  );
+}

src/theme/BlogPostPage/index.tsx

@@ -0,0 +1,75 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  BlogPostProvider,
+  useBlogPost,
+} from '@docusaurus/plugin-content-blog/client';
+import BlogLayout from '@theme/BlogLayout';
+import BlogPostItem from '@theme/BlogPostItem';
+import BlogPostPaginator from '@theme/BlogPostPaginator';
+import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata';
+import BlogPostPageStructuredData from '@theme/BlogPostPage/StructuredData';
+import TOC from '@theme/TOC';
+import ContentVisibility from '@theme/ContentVisibility';
+import type {Props} from '@theme/BlogPostPage';
+import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
+import Comment from '../../components/comment';
+
+function BlogPostPageContent({
+  sidebar,
+  children,
+}: {
+  sidebar: BlogSidebar;
+  children: ReactNode;
+}): ReactNode {
+  const {metadata, toc} = useBlogPost();
+  const {nextItem, prevItem, frontMatter} = metadata;
+  const {
+    hide_table_of_contents: hideTableOfContents,
+    toc_min_heading_level: tocMinHeadingLevel,
+    toc_max_heading_level: tocMaxHeadingLevel,
+    hide_comment: hideComment
+  } = frontMatter;
+  return (
+    <BlogLayout
+      sidebar={sidebar}
+      toc={
+        !hideTableOfContents && toc.length > 0 ? (
+          <TOC
+            toc={toc}
+            minHeadingLevel={tocMinHeadingLevel}
+            maxHeadingLevel={tocMaxHeadingLevel}
+          />
+        ) : undefined
+      }>
+      <ContentVisibility metadata={metadata} />
+
+      <BlogPostItem>{children}</BlogPostItem>
+
+      {(nextItem || prevItem) && (
+        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
+      )}
+      {!hideComment && <Comment />}
+    </BlogLayout>
+  );
+}
+
+export default function BlogPostPage(props: Props): ReactNode {
+  const BlogPostContent = props.content;
+  return (
+    <BlogPostProvider content={props.content} isBlogPostPage>
+      <HtmlClassNameProvider
+        className={clsx(
+          ThemeClassNames.wrapper.blogPages,
+          ThemeClassNames.page.blogPostPage,
+        )}>
+        <BlogPostPageMetadata />
+        <BlogPostPageStructuredData />
+        <BlogPostPageContent sidebar={props.sidebar}>
+          <BlogPostContent />
+        </BlogPostPageContent>
+      </HtmlClassNameProvider>
+    </BlogPostProvider>
+  );
+}