From 7f0941524e30aeb61238fbb884a553eacaee0730 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=9B=99?=
 <49180735+littlefrogfromthenorth@users.noreply.github.com>
Date: Mon, 5 Sep 2022 09:17:06 +0800
Subject: [PATCH 1/7] 111

---
 gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts b/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
index 2683b10d..c643ea65 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core' 
 import Red from '@material-ui/core/colors/red'
 
 export const useStyles = makeStyles(theme => ({

From 6fb2356fe5f9f14a87bf6bc0a238ab5737662769 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=9B=99?=
 <49180735+littlefrogfromthenorth@users.noreply.github.com>
Date: Mon, 5 Sep 2022 10:07:21 +0800
Subject: [PATCH 2/7] Delete gh-pages.yml

---
 .github/workflows/gh-pages.yml | 54 ----------------------------------
 1 file changed, 54 deletions(-)
 delete mode 100644 .github/workflows/gh-pages.yml

diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
deleted file mode 100644
index 3f3c4ace..00000000
--- a/.github/workflows/gh-pages.yml
+++ /dev/null
@@ -1,54 +0,0 @@
-name: GitHub Pages
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  deploy:
-    env:
-      PRODUCTION: true
-    runs-on: ubuntu-18.04
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: "14"
-
-      - name: Get node version
-        id: node-version
-        run: |
-          echo "::set-output name=ver::$(node --version)"
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Cache install
-        uses: actions/cache@v1
-        with:
-          path: ./node_modules
-          key: ${{ runner.os }}-dep-${{ steps.node-version.outputs.ver }}-${{ hashFiles('**/yarn.lock') }}
-
-      - run: yarn install
-
-      - run: yarn build
-
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
-          publish_dir: ./public
-          force_orphan: true
-          user_name: "github-actions[bot]"
-          user_email: "github-actions[bot]@users.noreply.github.com"

From daf9afefceead4ddb2558829159d07641a5e14cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=9B=99?=
 <49180735+littlefrogfromthenorth@users.noreply.github.com>
Date: Mon, 5 Sep 2022 10:07:44 +0800
Subject: [PATCH 3/7] Create gh-pages.yml

---
 .github/workflows/gh-pages.yml | 54 ++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 .github/workflows/gh-pages.yml

diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
new file mode 100644
index 00000000..3f3c4ace
--- /dev/null
+++ b/.github/workflows/gh-pages.yml
@@ -0,0 +1,54 @@
+name: GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  deploy:
+    env:
+      PRODUCTION: true
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "14"
+
+      - name: Get node version
+        id: node-version
+        run: |
+          echo "::set-output name=ver::$(node --version)"
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Cache install
+        uses: actions/cache@v1
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-dep-${{ steps.node-version.outputs.ver }}-${{ hashFiles('**/yarn.lock') }}
+
+      - run: yarn install
+
+      - run: yarn build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+          publish_dir: ./public
+          force_orphan: true
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"

From 4beb80142d753d07ab335873e9722ca63e14036c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=9B=99?=
 <49180735+littlefrogfromthenorth@users.noreply.github.com>
Date: Tue, 6 Sep 2022 10:27:25 +0800
Subject: [PATCH 4/7] Implement giscus

---
 gatsby-theme-oi-wiki/package.json             |   3 +-
 .../Comment/Card/ReactionButton.tsx           |  76 -------
 .../src/components/Comment/Card/index.tsx     | 121 ----------
 .../src/components/Comment/Card/styles.ts     |  48 ----
 .../src/components/Comment/Comment.tsx        | 208 ++----------------
 .../src/components/Comment/CommentInput.tsx   |  87 --------
 .../src/components/Comment/api.ts             |  23 --
 .../src/components/Comment/index.tsx          |  20 +-
 .../src/components/Comment/inputContext.ts    |   9 -
 .../src/components/Comment/types.ts           |  16 --
 10 files changed, 28 insertions(+), 583 deletions(-)
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/api.ts
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/inputContext.ts
 delete mode 100644 gatsby-theme-oi-wiki/src/components/Comment/types.ts

diff --git a/gatsby-theme-oi-wiki/package.json b/gatsby-theme-oi-wiki/package.json
index f6949ee7..363cd20b 100644
--- a/gatsby-theme-oi-wiki/package.json
+++ b/gatsby-theme-oi-wiki/package.json
@@ -65,7 +65,8 @@
     "simple-git": "^2.41.1",
     "sitemap-manager": "^2.0.1",
     "unified": "^10.1.0",
-    "use-persisted-state": "^0.3.0"
+    "use-persisted-state": "^0.3.0",
+    "@giscus/react": "^1.2.0"
   },
   "devDependencies": {
     "@types/autosuggest-highlight": "^3.1.1",
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
deleted file mode 100644
index 61771de6..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {
-  Avatar,
-  Button,
-  CircularProgress,
-} from '@material-ui/core'
-
-import React, { useState } from 'react'
-import AvatarGroup from '@material-ui/lab/AvatarGroup'
-import clsx from 'clsx'
-import { User } from '@mgtd/vssue-api-github-v4/lib/types'
-import { useStyles } from './styles'
-
-import { SvgIconComponent } from '@material-ui/icons'
-
-const reactionButtonDefaultProps = {
-  initialCount: 0,
-  isClicked: false,
-}
-
-type ReactionButtonProps = {
-  icon: SvgIconComponent
-  clickedClass: string
-  disabled: boolean
-  currentUser: User
-  addReaction: () => Promise<void>,
-  removeReaction: () => Promise<void>,
-  users: User[],
-} & Partial<typeof reactionButtonDefaultProps>
-
-const ReactionButton: React.FC<ReactionButtonProps> = (props) => {
-  const classes = useStyles()
-  const propsMerged = { ...reactionButtonDefaultProps, ...props }
-  const [isClicked, setIsClicked] = useState(propsMerged.isClicked)
-  const [count, setCount] = useState(propsMerged.initialCount)
-  const [users, setUsers] = useState(propsMerged.users)
-  const [loading, setLoading] = useState(false)
-  const clickFunc = async (): Promise<void> => {
-    if (isClicked) {
-      setCount(count - 1)
-      setLoading(true)
-      await propsMerged.removeReaction()
-      setLoading(false)
-      const tmpUsers = users.filter(({ username }) => username !== propsMerged.currentUser.username)
-      setUsers(tmpUsers)
-    } else {
-      setCount(count + 1)
-      setLoading(true)
-      await propsMerged.addReaction()
-      setLoading(false)
-      const tmpUsers: User[] = [...users, propsMerged.currentUser]
-      setUsers(tmpUsers)
-    }
-    setIsClicked(!isClicked)
-  }
-  const SvgTag = props.icon
-  return (
-    <Button
-      color="default"
-      size="small"
-      disabled={propsMerged.disabled || loading}
-      startIcon={<SvgTag className={clsx(isClicked && props.clickedClass)} />}
-      className={clsx(count === 0 && classes.nullReaction, classes.reactionButton)}
-      onClick={clickFunc}
-      classes={count === 0 ? { startIcon: classes.nullReactionStartIcon, label: classes.labelMargin } : undefined}
-    >
-      {loading ? <CircularProgress size={24} style={{ marginLeft: '4px', marginRight: '4px' }} /> : (count !== 0 && count)}
-      {!loading && <AvatarGroup max={3} style={{ marginLeft: '4px' }} classes={{ avatar: classes.avatarSmall }}>
-        {users.map(({ avatar, username }) => (
-          <Avatar alt={username} src={avatar} key={username} />
-        ))}
-      </AvatarGroup>}
-    </Button>
-  )
-}
-
-export default ReactionButton
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
deleted file mode 100644
index 5ca22d2c..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import {
-  Avatar,
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CircularProgress,
-  IconButton,
-} from '@material-ui/core'
-
-import {
-  Favorite as FavoriteIcon,
-  ThumbUp as ThumbUpIcon,
-  ThumbDown as ThumbDownIcon,
-  Reply as ReplyIcon,
-  Delete as DeleteIcon,
-} from '@material-ui/icons'
-
-import React, { useState } from 'react'
-import { User } from '@mgtd/vssue-api-github-v4/lib/types'
-import Time from '../../Time'
-import { Reactions } from '../types'
-import { useInputContentContext } from '../inputContext'
-import { useStyles } from './styles'
-import ReactionButton from './ReactionButton'
-
-interface Props {
-  disabled: boolean,
-  currentUser: User,
-  commentID: string | number,
-  avatarLink: string,
-  name: string,
-  contentHTML: string,
-  contentRaw: string
-  time: number | string | Date,
-  reactions: Reactions,
-  deleteComment: (commentID: string | number, setLoading: (loading: boolean) => void) => Promise<void>,
-  addReaction: (commentID: string | number, reaction: 'heart' | 'unlike' | 'like') => Promise<void>,
-  removeReaction: (commentID: string | number, reaction: 'heart' | 'unlike' | 'like') => Promise<void>
-}
-
-const CommentCard: React.FC<Props> = (props) => {
-  const { name, time, disabled, currentUser, reactions, commentID } = props
-  const classes = useStyles()
-  const like = reactions.find(item => item.type === 'like')
-  const unlike = reactions.find(item => item.type === 'unlike')
-  const heart = reactions.find(item => item.type === 'heart')
-  const [deleteLoading, setDeleteLoading] = useState(false)
-  const { setInputContent } = useInputContentContext()
-  return (
-    <Card variant="outlined" className={classes.commentMargin}>
-      <CardHeader
-        avatar={<Avatar alt={name} src={props.avatarLink} />}
-        title={<>
-          {props.name} {currentUser.username === props.name &&
-            <IconButton
-              disabled={disabled}
-              size="small"
-              aria-label="delete"
-              className={classes.floatRight}
-              onClick={
-                () => { props.deleteComment(commentID, setDeleteLoading) }
-              }>
-              {deleteLoading
-                ? <CircularProgress size={20} />
-                : <DeleteIcon fontSize="small" />}
-            </IconButton>}
-          <IconButton
-            size="small"
-            aria-label="reply"
-            className={classes.floatRight}
-            onClick={() => {
-              setInputContent(`> ${props.contentRaw}`)
-            }}>
-            <ReplyIcon fontSize="small" />
-          </IconButton>
-        </>}
-        classes={{ root: classes.headerRoot }}
-        subheader={<Time time={time} />} />
-      <CardContent classes={{ root: classes.contentRoot }}>
-        <div dangerouslySetInnerHTML={{ __html: props.contentHTML }} />
-      </CardContent>
-      <CardActions>
-        <ReactionButton
-          icon={ThumbUpIcon}
-          clickedClass={classes.yellow}
-          disabled={disabled}
-          currentUser={currentUser}
-          initialCount={like.count}
-          isClicked={like.viewerHasReacted}
-          addReaction={async () => { await props.addReaction(commentID, 'like') }}
-          removeReaction={async () => { await props.removeReaction(commentID, 'like') }}
-          users={like.users}
-        />
-        <ReactionButton
-          icon={ThumbDownIcon}
-          clickedClass={classes.yellow}
-          disabled={disabled}
-          currentUser={currentUser}
-          initialCount={unlike.count}
-          isClicked={unlike.viewerHasReacted}
-          addReaction={async () => { await props.addReaction(commentID, 'unlike') }}
-          removeReaction={async () => { await props.removeReaction(commentID, 'unlike') }}
-          users={unlike.users}
-        />
-        <ReactionButton
-          icon={FavoriteIcon}
-          clickedClass={classes.red}
-          disabled={disabled}
-          currentUser={currentUser}
-          initialCount={heart.count}
-          isClicked={heart.viewerHasReacted}
-          addReaction={async () => { await props.addReaction(commentID, 'heart') }}
-          removeReaction={async () => { await props.removeReaction(commentID, 'heart') }}
-          users={heart.users}
-        />
-      </CardActions>
-    </Card>)
-}
-
-export default CommentCard
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts b/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
deleted file mode 100644
index c643ea65..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { makeStyles } from '@material-ui/core' 
-import Red from '@material-ui/core/colors/red'
-
-export const useStyles = makeStyles(theme => ({
-  contentRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-    paddingTop: '0px',
-  },
-  headerRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-    paddingTop: theme.spacing(2),
-  },
-  commentMargin: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
-  },
-  red: {
-    color: Red[500],
-  },
-  yellow: {
-    color: '#ffcf56',
-  },
-  nullReactionStartIcon: {
-    marginLeft: '0px',
-    marginRight: '0px',
-  },
-  nullReaction: {
-    padding: '5px 10px',
-  },
-  reactionButton: {
-    minWidth: '0px',
-  },
-  labelMargin: {
-    marginLeft: '1.5px',
-  },
-  avatarSmall: {
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-    fontSize: theme.spacing(1.5),
-  },
-  floatRight: {
-    float: 'right',
-  },
-}))
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
index 0d26fe2c..987f35f1 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
@@ -1,200 +1,38 @@
 import { Button, CircularProgress, Divider, makeStyles, Tooltip, Typography } from '@material-ui/core'
 import React, { useEffect, useState } from 'react'
-import GithubV3 from '@mgtd/vssue-api-github-v3'
-import GithubV4 from '@mgtd/vssue-api-github-v4'
-import createPersistedState from 'use-persisted-state'
-import CommentCard from './Card'
-import CommentInput from './CommentInput'
-import { Comments, Issue, User } from './types'
-import { InputContentProvider } from './inputContext'
-import { getComments } from './api'
+import Giscus from '@giscus/react'
+import useDarkMode from '../../lib/useDarkMode'
 
 const useToken = createPersistedState('github-access-token')
 
 interface Props {
-  clientID: string,
-  clientSecret: string,
-  repo: string,
-  owner: string,
-  admin: Array<string>,
-  id: string,
+  repo: string, // 存储库名
+  id: string, // 文章 id
+  repoid: string // giscus 上获取的 repoid
 }
 
-const useStyles = makeStyles((theme) => ({
-  link: {
-    color: theme.palette.text.primary,
-  },
-}))
-
 const CommentComponent: React.FC<Props> = (props) => {
-  const classes = useStyles()
-  const defaultUser = { username: '未登录用户', avatar: undefined, homepage: undefined }
-  const [token, setToken] = useToken(null)
-  const revokeToken = (): void => {
-    setToken(null)
-    setUser(defaultUser)
-  }
-  const [user, setUser] = useState<User>(defaultUser)
-  const [comments, setComments] = useState<Comments>({ count: 0, page: 0, perPage: 0, data: [] })
-  const [noIssue, setNoIssue] = useState(false)
-  const filteredComments = comments.data.filter(({ isMinimized }) => !isMinimized)
-  const [issue, setIssue] = useState<Issue>()
-  const [createIssueLoading, setCreateIssueLoading] = useState(false)
-  const authorized = user.username !== '未登录用户' && token && !noIssue
   const isAdmin = props.admin.indexOf(user.username) >= 0
-  const ghAPIV3 = new GithubV3({
-    baseURL: 'https://github.com',
-    owner: props.owner,
-    repo: props.repo,
-    labels: ['gitalk'],
-    clientId: props.clientID,
-    clientSecret: props.clientSecret,
-    state: '123',
-    proxy: url => `https://cors-anywhere.mgt.workers.dev/?${url}`,
-  })
-  const ghAPIV4 = new GithubV4({
-    baseURL: 'https://github.com',
-    owner: props.owner,
-    repo: props.repo,
-    labels: ['gitalk'],
-    clientId: props.clientID,
-    clientSecret: props.clientSecret,
-    state: '123',
-    proxy: url => `https://cors-anywhere.mgt.workers.dev/?${url}`,
-  })
-  useEffect(() => {
-    const asyncFunc = async (): Promise<void> => {
-      let tk = token
-      if (!tk) {
-        tk = await ghAPIV3.handleAuth()
-        if (tk !== null) {
-          setToken(tk)
-        }
-      }
-      const tmp = await getComments(ghAPIV3, ghAPIV4, props.id, revokeToken, tk)
-      if (tmp === 'noIssue') {
-        setNoIssue(true)
-      } else if (tmp !== 'invalidToken') {
-        const [i, c] = tmp
-        setComments(c)
-        setIssue(i)
-      }
-      const u: User = await ghAPIV3.getUser({ accessToken: tk })
-      setUser(u)
-    }
-
-    asyncFunc().catch(reject => {
-      console.log(reject)
-    })
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.clientID, props.clientSecret, props.id])
-  const updateComments = async (): Promise<void> => {
-    const tmp = await getComments(ghAPIV3, ghAPIV4, props.id, revokeToken, token)
-    if (tmp !== 'invalidToken' && tmp !== 'noIssue') {
-      const [, c] = tmp
-      setComments(c)
-    }
-  }
-  const NoIssueComponent = (): React.ReactElement => {
-    return isAdmin
-      ? <Typography variant="body1" style={{ padding: '24px', textAlign: 'center' }}>
-        <Button variant="outlined" color="primary" disabled={createIssueLoading}
-                onClick={async () => {
-                  setCreateIssueLoading(true)
-                  await ghAPIV4.postIssue({ accessToken: token, title: props.id, content: location.href })
-                  // sleep 1s, 直接查询会返回无结果，迷惑
-                  await new Promise(resolve => setTimeout(resolve, 1000))
-                  const tmp = await getComments(ghAPIV3, ghAPIV4, props.id, revokeToken, token)
-                  setCreateIssueLoading(false)
-                  if (tmp !== 'invalidToken' && tmp !== 'noIssue') {
-                    const [i, c] = tmp
-                    setNoIssue(false)
-                    setComments(c)
-                    setIssue(i)
-                  }
-                }}>
-          为本页面创建 Issue
-          {createIssueLoading && <CircularProgress size={20} style={{ marginLeft: '4px' }}/>}
-        </Button>
-      </Typography>
-      : <Typography variant="body1" style={{ padding: '24px', textAlign: 'center' }}>
-        没有找到与本页面相关联的 issue
-      </Typography>
+  let colorScheme = 'light'
+  if (useDarkMode) {
+    colorScheme = 'dark'
   }
   return (
-    <InputContentProvider>
-      <Typography variant="h6">
-        <Tooltip title="在 GitHub 上查看">
-          <a href={issue?.link} className={classes.link}>{`${filteredComments.length} 条评论`}</a>
-        </Tooltip>
-        <Tooltip title={authorized ? '登出' : '登录'}>
-          <div
-            style={{ float: 'right', cursor: 'pointer' }}
-            onClick={() => {
-              if (!token) {
-                ghAPIV3.redirectAuth()
-              } else {
-                setToken(null)
-                setUser(defaultUser)
-              }
-            }}
-          >
-            {user.username}
-          </div>
-        </Tooltip>
-      </Typography>
-      <Divider/>
-      <CommentInput
-        name={user.username}
-        avatarLink={user.avatar}
-        authorized={authorized}
-        showLogin={token === null}
-        handleLogin={() => {
-          ghAPIV3.redirectAuth()
-        }}
-        sendComment={async (v, setLoading) => {
-          setLoading(true)
-          try {
-            await ghAPIV3.postComment({ accessToken: token, issueId: issue.id, content: v })
-          } catch (e) {
-            setLoading(false)
-            return
-          }
-          updateComments()
-          setLoading(false)
-        }}
-      />
-      {noIssue
-        ? <NoIssueComponent/>
-        : filteredComments.map(({ content, author, createdAt, reactions, id, contentRaw }) => (
-          <CommentCard
-            avatarLink={author.avatar}
-            disabled={!authorized}
-            name={author.username}
-            contentHTML={content}
-            contentRaw={contentRaw}
-            time={createdAt}
-            key={id}
-            reactions={reactions}
-            currentUser={user}
-            commentID={id}
-            deleteComment={async (commentId, setDeleteLoading) => {
-              setDeleteLoading(true)
-              await ghAPIV4.deleteComment({ accessToken: token, commentId, issueId: issue.id })
-              updateComments()
-              setDeleteLoading(false)
-            }}
-            addReaction={async (commentId, reaction) => {
-              await ghAPIV4.postCommentReaction({ accessToken: token, commentId, reaction, issueId: issue.id })
-            }}
-            removeReaction={async (commentId, reaction) => {
-              await ghAPIV4.deleteCommentReaction({ accessToken: token, commentId, reaction, issueId: issue.id })
-            }}
-          />
-        ))
-      }
-    </InputContentProvider>
+    <Giscus
+      id = "comments"
+      repo = { props.repo }
+      repoId = { props.repoid }
+      category = "Announcements"
+      categoryId = "__________" // 到部署时候自己填!!!!!!!
+      mapping = "specific"
+      term = { props.id }
+      reactionsEnabled = "1"
+      emitMetadata = "0"
+      inputPosition = "top"
+      theme = { colorScheme }
+      lang = "zh_cn"
+      loading = "lazy"
+    />
   )
 }
 
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx b/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx
deleted file mode 100644
index 674c8dd0..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useState } from 'react'
-import { makeStyles, Avatar, TextField, Grid, Button, Hidden, LinearProgress } from '@material-ui/core'
-import { useInputContentContext } from './inputContext'
-
-interface Props {
-  avatarLink: string,
-  name: string
-  sendComment: (res: string, setLoading: (loading: boolean) => void) => Promise<void>,
-  showLogin: boolean,
-  handleLogin: () => void,
-  authorized: boolean,
-}
-
-const useStyles = makeStyles(theme => ({
-  contentRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-  },
-  headerRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-    paddingTop: theme.spacing(2),
-  },
-  commentMargin: {
-    marginTop: theme.spacing(1),
-  },
-  button: {
-    marginBottom: theme.spacing(1),
-    marginTop: theme.spacing(1),
-  },
-  buttonDiv: {
-    textAlign: 'right',
-    marginBottom: theme.spacing(1),
-  },
-}))
-
-const CommentInput: React.FC<Props> = (props) => {
-  const classes = useStyles()
-  const { inputContent, setInputContent } = useInputContentContext()
-  const [loading, setLoading] = useState<boolean>(false)
-  return (
-    <>
-      {loading && <LinearProgress />}
-      <Grid container className={classes.commentMargin} justify="space-around" spacing={2}>
-        <Hidden smDown>
-          <Grid item>
-            <Avatar alt={props.name} src={props.avatarLink}/>
-          </Grid>
-        </Hidden>
-        <Grid item xs>
-          <TextField
-            placeholder="我们鼓励在讨论区讨论有意义的内容及关于文章的勘误，无意义的讨论将会被管理员删除"
-            multiline
-            fullWidth
-            disabled={!props.authorized || loading}
-            rows={5}
-            value={inputContent}
-            onChange={(e) => { setInputContent(e.target.value) }}
-            variant="outlined"
-          />
-        </Grid>
-      </Grid>
-      <div className={classes.buttonDiv}>
-        <Button
-          variant="contained"
-          color="primary"
-          className={classes.button}
-          size="small"
-          // disabled={loading && props.showLogin ? false : !props.authorized}
-          onClick={() => {
-            if (props.showLogin) {
-              props.handleLogin()
-            } else {
-              props.sendComment(inputContent, setLoading)
-              setInputContent('')
-            }
-          }}>
-          {props.showLogin ? '登录' : '评论'}
-        </Button>
-      </div>
-    </>
-  )
-}
-
-export default CommentInput
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/api.ts b/gatsby-theme-oi-wiki/src/components/Comment/api.ts
deleted file mode 100644
index 017528df..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/api.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import GithubV3 from '@mgtd/vssue-api-github-v3'
-import GithubV4 from '@mgtd/vssue-api-github-v4'
-import { Comments, Issue } from './types'
-
-export async function getComments (ghAPIV3: GithubV3, ghAPIV4: GithubV4, id: string, revokeToken: () => void, token?: string): Promise<[Issue, Comments] | 'noIssue' | 'invalidToken'> {
-  let issue: Issue
-  try {
-    issue = await ghAPIV3.getIssue({ accessToken: token, issueTitle: id })
-  } catch (e) {
-    revokeToken()
-    return 'invalidToken'
-  }
-  if (issue === null) {
-    return 'noIssue'
-  }
-  let comments: Comments
-  if (!token) {
-    comments = await ghAPIV3.getComments({ accessToken: token, issueId: issue.id, query: { page: 1, perPage: 100 } })
-  } else {
-    comments = await ghAPIV4.getComments({ accessToken: token, issueId: issue.id, query: { page: 1, perPage: 100, sort: 'asce' } })
-  }
-  return [issue, comments]
-}
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/index.tsx b/gatsby-theme-oi-wiki/src/components/Comment/index.tsx
index 478ccaa4..2e105c8e 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/index.tsx
@@ -11,23 +11,9 @@ export type CommentComponentProps = CommentSystemProps
 
 const CommentSystem: React.FC<CommentSystemProps> = ({ title }) => (
   <CommentComponent
-    id={`${title} - OI Wiki`}
-    owner="OI-wiki"
-    repo="gitment"
-    admin={[
-      '24OI-bot',
-      'Enter-tainer',
-      'Ir1d',
-      'cjsoft',
-      'billchenchina',
-      'Xeonacid',
-      'StudyingFather',
-      'ouuan',
-      'sshwy',
-      'Marcythm',
-    ]}
-    clientID={process.env.GATSBY_GITHUB_CLIENT_ID || ''}
-    clientSecret={process.env.GATSBY_GITHUB_CLIENT_SECRET || ''}
+    id = {`${title}`}
+    repo = "_______"
+    repoid = "_______"
   />
 )
 
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/inputContext.ts b/gatsby-theme-oi-wiki/src/components/Comment/inputContext.ts
deleted file mode 100644
index c8dd802b..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/inputContext.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useState } from 'react'
-import constate from 'constate'
-
-const [InputContentProvider, useInputContentContext] = constate(() => {
-  const [inputContent, setInputContent] = useState('')
-  return { inputContent, setInputContent }
-})
-
-export { InputContentProvider, useInputContentContext }
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/types.ts b/gatsby-theme-oi-wiki/src/components/Comment/types.ts
deleted file mode 100644
index a2dfa92c..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Comments, Reactions } from '@mgtd/vssue-api-github-v4/lib/types'
-
-export interface User {
-  avatar: string,
-  homepage: string,
-  username: string
-}
-
-export interface Issue {
-  id: string,
-  title: string,
-  content: string,
-  link: string
-}
-
-export { Comments, Reactions }

From 5ac9e4642f3c60361baad641621f3c870b815a09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=9B=99?=
 <49180735+littlefrogfromthenorth@users.noreply.github.com>
Date: Tue, 6 Sep 2022 10:30:46 +0800
Subject: [PATCH 5/7] fix

---
 gatsby-theme-oi-wiki/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gatsby-theme-oi-wiki/package.json b/gatsby-theme-oi-wiki/package.json
index 363cd20b..5501bbd0 100644
--- a/gatsby-theme-oi-wiki/package.json
+++ b/gatsby-theme-oi-wiki/package.json
@@ -66,7 +66,7 @@
     "sitemap-manager": "^2.0.1",
     "unified": "^10.1.0",
     "use-persisted-state": "^0.3.0",
-    "@giscus/react": "^1.2.0"
+    "@giscus/react": "^1.0.0"
   },
   "devDependencies": {
     "@types/autosuggest-highlight": "^3.1.1",

From 65fa3f3b2b013177fff27c2d3684a07b32151822 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=9B=99?=
 <49180735+littlefrogfromthenorth@users.noreply.github.com>
Date: Tue, 6 Sep 2022 10:36:01 +0800
Subject: [PATCH 6/7] fix

---
 gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
index 987f35f1..7f9b64bc 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
@@ -3,8 +3,6 @@ import React, { useEffect, useState } from 'react'
 import Giscus from '@giscus/react'
 import useDarkMode from '../../lib/useDarkMode'
 
-const useToken = createPersistedState('github-access-token')
-
 interface Props {
   repo: string, // 存储库名
   id: string, // 文章 id

From fab28a6eb6c95a983634397eb624bf124746ec33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=9B=99?=
 <49180735+littlefrogfromthenorth@users.noreply.github.com>
Date: Tue, 6 Sep 2022 10:49:22 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=E6=96=A9=E8=8D=89=E9=99=A4=E6=A0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
index 7f9b64bc..1997282b 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
@@ -10,7 +10,6 @@ interface Props {
 }
 
 const CommentComponent: React.FC<Props> = (props) => {
-  const isAdmin = props.admin.indexOf(user.username) >= 0
   let colorScheme = 'light'
   if (useDarkMode) {
     colorScheme = 'dark'