diff --git a/blog.config.js b/blog.config.js
index 460f9049..2088e10c 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -45,7 +45,20 @@ const BLOG = {
   WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
   WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
 
-  // 评论互动 可同时开启 CUSDIS UTTERRANCES GITALK
+  // 评论互动 可同时开启多个支持 GISCUS CUSDIS UTTERRANCES GITALK
+
+  // giscus @see https://giscus.app/
+  COMMENT_GISCUS_REPO: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO || '', // 你的Github仓库名 e.g 'tangly1024/NotionNext'
+  COMMENT_GISCUS_REPO_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID || '', // 你的Github Repo ID e.g ( 設定完 giscus 即可看到 )
+  COMMENT_GISCUS_CATEGORY_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 )
+  COMMENT_GISCUS_MAPPING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname'
+  COMMENT_GISCUS_REACTIONS_ENABLED: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟
+  COMMENT_GISCUS_EMIT_METADATA: process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉
+  COMMENT_GISCUS_INPUT_POSITION: process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom'
+  COMMENT_GISCUS_LANG: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LANG || 'zh-CN', // 你的 Giscus 語言 e.g 'en', 'zh-TW', 'zh-CN', 預設 'en'
+  COMMENT_GISCUS_LOADING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy'
+  COMMENT_GISCUS_CROSSORIGIN: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous'
+
   COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/
   COMMENT_CUSDIS_HOST: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version
   COMMENT_CUSDIS_SCRIPT_SRC: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC || 'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version
diff --git a/components/Comment.js b/components/Comment.js
index 87ae86dc..71c7bc09 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -18,14 +18,26 @@ const UtterancesComponent = dynamic(
   },
   { ssr: false }
 )
+const GiscusComponent = dynamic(
+  () => {
+    return import('@/components/Giscus')
+  },
+  { ssr: false }
+)
 
 const Comment = ({ frontMatter }) => {
   const router = useRouter()
-  const { locale } = useGlobal()
+  const { locale, isDarkMode } = useGlobal()
   return (
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
       <Tabs>
 
+        {BLOG.COMMENT_GISCUS_REPO && (
+          <div key="Giscus">
+            <GiscusComponent isDarkMode={isDarkMode} className="px-2" />
+          </div>
+        )}
+
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
           <GitalkComponent
             options={{
diff --git a/components/Giscus.js b/components/Giscus.js
new file mode 100644
index 00000000..db9cfb36
--- /dev/null
+++ b/components/Giscus.js
@@ -0,0 +1,29 @@
+import BLOG from '@/blog.config'
+import { Giscus } from '@giscus/react'
+
+/**
+ * Giscus评论 @see https://giscus.app/zh-CN
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const GiscusComponent = ({ isDarkMode }) => {
+  const theme = isDarkMode ? 'dark' : 'light'
+  return (
+    <Giscus
+      repo={BLOG.COMMENT_GISCUS_REPO}
+      repoId={BLOG.COMMENT_GISCUS_REPO_ID}
+      categoryId={BLOG.COMMENT_GISCUS_CATEGORY_ID}
+      mapping={BLOG.COMMENT_GISCUS_MAPPING}
+      reactionsEnabled={BLOG.COMMENT_GISCUS_REACTIONS_ENABLED}
+      emitMetadata={BLOG.COMMENT_GISCUS_EMIT_METADATA}
+      theme={theme}
+      inputPosition={BLOG.COMMENT_GISCUS_INPUT_POSITION}
+      lang={BLOG.COMMENT_GISCUS_LANG}
+      loading={BLOG.COMMENT_GISCUS_LOADING}
+      crossorigin={BLOG.COMMENT_GISCUS_CROSSORIGIN}
+    />
+  )
+}
+
+export default GiscusComponent
diff --git a/next.config.js b/next.config.js
index df99d7ac..43ff8b0d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,7 @@
-module.exports = {
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true'
+})
+module.exports = withBundleAnalyzer({
   future: {
     webpack5: true
   },
@@ -29,4 +32,4 @@ module.exports = {
     }
     return config
   }
-}
+})
diff --git a/package.json b/package.json
index b8b2de14..8925efcf 100644
--- a/package.json
+++ b/package.json
@@ -16,9 +16,12 @@
     "dev": "next dev",
     "build": "next build && next-sitemap --config next-sitemap.config.js",
     "start": "next start",
-    "post-build": "next-sitemap --config next-sitemap.config.js"
+    "post-build": "next-sitemap --config next-sitemap.config.js",
+    "bundle-report": "ANALYZE=true yarn build"
   },
   "dependencies": {
+    "@giscus/react": "^1.1.2",
+    "@next/bundle-analyzer": "^12.1.1",
     "@popperjs/core": "^2.9.3",
     "animate.css": "^4.1.1",
     "axios": ">=0.21.1",
@@ -53,7 +56,8 @@
     "eslint-plugin-react": "^7.23.2",
     "next-sitemap": "^1.6.203",
     "postcss": "^8.2.15",
-    "tailwindcss": "^2.1.2"
+    "tailwindcss": "^2.1.2",
+    "webpack-bundle-analyzer": "^4.5.0"
   },
   "resolutions": {
     "axios": ">=0.21.1"
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 3087ea17..89580723 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -57,11 +57,11 @@ const BlogPostCard = ({ post, showSummary }) => {
 
       {CONFIG_HEXO.POST_LIST_COVER && !showPreview && post?.page_cover && (
         <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-        <a className='w-full relative duration-200 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none cursor-pointer transform overflow-hidden'>
+        <div className='flex w-full relative duration-200 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none cursor-pointer transform overflow-hidden'>
           {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={post?.page_cover} alt={post.title} className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500'></img>
+          <img src={post?.page_cover} alt={post.title} className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform object-cover duration-500'/>
           {/* <Image className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
-        </a>
+        </div>
       </Link>
       )}
     </div>