1. Upgrade Docusaurus to 3.5.1

2. Adjust pangu.js logic 3. Adjust DocItem and BlogPostPage template for giscus
Ouch1978 · Aug 24, 2024 · ebace69 · ebace69
1 parent 774f71d
commit ebace69
Show file tree

Hide file tree

Showing 11 changed files with 2,361 additions and 594 deletions.
diff --git a/blog/2016-11-01-roaming-extension-manager/index.md b/blog/2016-11-01-roaming-extension-manager/index.md
@@ -12,6 +12,8 @@ keywords:
 
 常常在工作的時候找到不錯用的 Visual Studio 擴充功能，但是往往回家又得再安裝一次，有時候忙過頭隔個幾天想安裝就忘記名字叫什麼了。一直在想說怎麼沒有一個功能可以在不同的電腦之間同步安裝過的擴充功能，果不其然，還真的有耶!!
 
+<!-- truncate -->
+
 前一陣子重灌了工作機的作業系統，也重新安裝了 Visual Studio 2015 ，雖說 Visual Studio 會自動透過 Microsoft Account 把我的設定同步回來，但是卻不包含擴充功能的同步，所以之後又得要再手動把之前裝過的擴充功能一個一個安裝回來，真的是蠻花時間也蠻讓我頭痛的。
 
 向谷歌大神求救之後，發現有不少人有相同的問題，而微軟也從善如流的就開發出了這樣的一個擴充功能，也就是我們今天的主角 -- [Roaming Extension Manager](https://visualstudiogallery.msdn.microsoft.com/7b421a95-c32c-4433-a2be-a41b276013ab "Roaming Extension Manager")

diff --git a/docs/04-docusaurus/03-customization/07-add-giscus-to-docusaurus/index.md b/docs/04-docusaurus/03-customization/07-add-giscus-to-docusaurus/index.md
@@ -12,7 +12,7 @@ keywords:
   - Docs
   - Blog
 last_update:
-  date: 2023/12/14 GMT+8
+  date: 2024/08/24 GMT+8
   author: Ouch Liu
 ---
 
@@ -216,41 +216,65 @@ yarn run swizzle @docusaurus/theme-classic DocItem/Footer --wrap --typescript
 
 抽取出原始碼之後，對 `src/theme/DocItem/Footer/index.tsx` 進行下列的調整：
 
+### Docusaurus 3.5.1 版 DocItem/Footer 適用
+
+```jsx title="src/theme/DocItem/Footer/index.tsx"
+import React from 'react';
+import Footer from '@theme-original/DocItem/Footer';
+import type FooterType from '@theme/DocItem/Footer';
+import type {WrapperProps} from '@docusaurus/types';
+
+/* highlight-start */
+//import GiscusComment
+import GiscusComment from '@site/src/components/GiscusComment';
+/* highlight-end */
+
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+
+type Props = WrapperProps<typeof FooterType>;
+
+export default function FooterWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <Footer {...props} />
+
+      {/* highlight-next-line */}
+      <GiscusComment />
+    </>
+  );
+}
+```
+
+### Docusaurus 3.2.1 版 DocItem/Footer 適用
+
 ```jsx title="src/theme/DocItem/Footer/index.tsx"
 import React from "react";
 import Footer from "@theme-original/DocItem/Footer";
 import type FooterType from "@theme/DocItem/Footer";
 import type { WrapperProps } from "@docusaurus/types";
 
-{
-  /* highlight-start */
-}
+
+/* highlight-start */
 import GiscusComment from '@site/src/components/GiscusComment';
 import { useDoc } from "@docusaurus/theme-common/internal";
-{
-  /* highlight-end */
-}
+/* highlight-end */
+
 
 type Props = WrapperProps<typeof FooterType>;
 
 export default function FooterWrapper(props: Props): JSX.Element {
-  {
-    /* highlight-start */
-  }
+
+  /* highlight-start */
   const { metadata, frontMatter, assets } = useDoc();
-  const { no_comments } = frontMatter;
   const { title, slug } = metadata;
-  {
-    /* highlight-end */
-  }
+  /* highlight-end */
+
   return (
     <>
       <Footer {...props} />
-      {/* highlight-start */}
-      {!no_comments && (
-        <GiscusComment />
-      )}
-      {/* highlight-end */}
+
+      {/* highlight-next-line */}
+      <GiscusComment />
     </>
   );
 }
@@ -268,7 +292,92 @@ export default function FooterWrapper(props: Props): JSX.Element {
 yarn run swizzle @docusaurus/theme-classic BlogPostPage --eject --typescript
 ```
 
-然後編輯抽出來的 `src/theme/BlogPostPage/index.tsx` 這個檔案：
+### Docusaurus 3.5.1 版 BlogPostPage 適用
+
+編輯抽出來的 `src/theme/BlogPostPage/index.tsx` 這個檔案：
+
+```jsx title="src/theme/BlogPostPage/index.tsx"
+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';
+
+/* highlight-start */
+//import GiscusComment
+import GiscusComment from '@site/src/components/GiscusComment';
+/* highlight-end */
+
+function BlogPostPageContent({
+  sidebar,
+  children,
+}: {
+  sidebar: BlogSidebar;
+  children: ReactNode;
+}): JSX.Element {
+  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,
+  } = frontMatter;
+  return (
+    <BlogLayout
+      sidebar={sidebar}
+      toc={
+        !hideTableOfContents && toc.length > 0 ? (
+          <TOC toc={toc} minHeadingLevel={tocMinHeadingLevel} maxHeadingLevel={tocMaxHeadingLevel} />
+        ) : undefined
+      }
+    >
+      <ContentVisibility metadata={metadata} />
+
+      <BlogPostItem>{children}</BlogPostItem>
+
+      {/* highlight-next-line */}
+      <GiscusComment />
+
+      {(nextItem || prevItem) && <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />}
+    </BlogLayout>
+  );
+}
+
+export default function BlogPostPage(props: Props): JSX.Element {
+  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>
+  );
+}
+
+```
+
+### Docusaurus 3.2.1 版 BlogPostPage 適用
+
+編輯抽出來的 `src/theme/BlogPostPage/index.tsx` 這個檔案：
 
 ```jsx title="src/theme/BlogPostPage/index.tsx"
 import React, { type ReactNode } from "react";
@@ -283,7 +392,7 @@ import TOC from "@theme/TOC";
 import type { Props } from "@theme/BlogPostPage";
 import type { BlogSidebar } from "@docusaurus/plugin-content-blog";
 
-{/* highlight-next-line */}
+/* highlight-next-line */
 import GiscusComment from '@site/src/components/GiscusComment';
 
 function BlogPostPageContent({ sidebar, children }: { sidebar: BlogSidebar; children: ReactNode }): JSX.Element {
@@ -293,9 +402,6 @@ function BlogPostPageContent({ sidebar, children }: { sidebar: BlogSidebar; chil
     hide_table_of_contents: hideTableOfContents,
     toc_min_heading_level: tocMinHeadingLevel,
     toc_max_heading_level: tocMaxHeadingLevel,
-    {/* highlight-start */}
-    no_comments
-    {/* highlight-end */}
   } = frontMatter;
   return (
     <BlogLayout
@@ -308,11 +414,8 @@ function BlogPostPageContent({ sidebar, children }: { sidebar: BlogSidebar; chil
     >
       <BlogPostItem>{children}</BlogPostItem>
 
-      {/* highlight-start */}
-      {!no_comments && (
-        <GiscusComment />
-      )}
-      {/* highlight-end */}
+      {/* highlight-next-line */}
+      <GiscusComment />
 
       {(nextItem || prevItem) && <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />}
     </BlogLayout>
@@ -333,7 +436,3 @@ export default function BlogPostPage(props: Props): JSX.Element {
   );
 }
 ```
-
-:::tip 小提示
-可以透過文章 front matter 中的 `no_comments` 這個屬性來決定是否要顯示 gisqus 留言區。
-:::
diff --git a/package.json b/package.json
@@ -20,9 +20,9 @@
   },
   "dependencies": {
     "@babel/plugin-syntax-import-assertions": "^7.20.0",
-    "@docusaurus/core": "^3.2.1",
-    "@docusaurus/plugin-google-analytics": "^3.2.1",
-    "@docusaurus/preset-classic": "^3.2.1",
+    "@docusaurus/core": "^3.5.2",
+    "@docusaurus/plugin-google-analytics": "^3.5.1",
+    "@docusaurus/preset-classic": "^3.5.2",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.0.0",
     "@fortawesome/free-regular-svg-icons": "^6.0.0",

diff --git a/src/components/LatestPosts/latest-blog-posts.json b/src/components/LatestPosts/latest-blog-posts.json
@@ -5,10 +5,12 @@
     "description": "Skype 自動更新之後... 咦!? 分割模式怎麼又不見了咧!?(為什麼我說又?) 沒了分割模式的 Skype 用起來真的很不習慣，就讓我們把熟悉的分割模式救回來吧!!",
     "tags": [
       {
+        "inline": true,
         "label": "Windows",
         "permalink": "/blog/tags/windows"
       },
       {
+        "inline": true,
         "label": "偷吃步",
         "permalink": "/blog/tags/偷吃步"
       }
@@ -23,14 +25,17 @@
     "description": "早在 Windows 11 正式推出之前，微軟就多次在各種不同的場合放話說 Windows 11 會支援 Android App。 總算，在 2022 年的 3 月推出了正式版；然而，都已經過了快一年了，台灣的使用者還是看得到吃不到。 這篇就來分享一個我最近找到的懶人包，可以超超超超超快速的搞定 Windows Subsystem for Android，而且連 Play Store 都幫你裝好了。",
     "tags": [
       {
+        "inline": true,
         "label": "Windows",
         "permalink": "/blog/tags/windows"
       },
       {
+        "inline": true,
         "label": "Android",
         "permalink": "/blog/tags/android"
       },
       {
+        "inline": true,
         "label": "偷吃步",
         "permalink": "/blog/tags/偷吃步"
       }
@@ -45,14 +50,17 @@
     "description": "最近在整理部門 Skype 機器人的程式，發現原來透過程式發送訊息給某個群組時只能透過它的 ID 來發送。前人都是透過 Skype Web 搭配開發者工具來擷取 Group ID，我就好奇，難道沒有更聰明一點的方法嗎?",
     "tags": [
       {
+        "inline": true,
         "label": "Windows",
         "permalink": "/blog/tags/windows"
       },
       {
+        "inline": true,
         "label": "Skype",
         "permalink": "/blog/tags/skype"
       },
       {
+        "inline": true,
         "label": "Python",
         "permalink": "/blog/tags/python"
       }
@@ -67,14 +75,17 @@
     "description": "在使用 VSCode 撰寫 Python 抓取 Skype 對話群組的時候，發現當群組名稱有中文時會噴 UnicodeEncodeError: 'cp950' codec can't encode 這個錯誤訊息，就算在程式中調整了編碼，顯示出來的也還是亂碼...",
     "tags": [
       {
+        "inline": true,
         "label": "Windows",
         "permalink": "/blog/tags/windows"
       },
       {
+        "inline": true,
         "label": "VSCode",
         "permalink": "/blog/tags/vs-code"
       },
       {
+        "inline": true,
         "label": "Python",
         "permalink": "/blog/tags/python"
       }
@@ -89,14 +100,17 @@
     "description": "Windows Subsystem for Linux (WSL) 下的 Ubuntu 原本就有內建 SSH 服務，但是預設是關閉的，所以無法從外部連進去。 這篇文章就來分享怎麼設定 SSH 服務，讓它支援從外部透過 SSH 遠端連線進去操作。",
     "tags": [
       {
+        "inline": true,
         "label": "Windows",
         "permalink": "/blog/tags/windows"
       },
       {
+        "inline": true,
         "label": "小技巧",
         "permalink": "/blog/tags/小技巧"
       },
       {
+        "inline": true,
         "label": "WSL2",
         "permalink": "/blog/tags/wsl-2"
       }