Merge pull request #118 from tangly1024/preview

引入giscus评论插件
2026-05-14 07:26:52 +00:00 · 2022-03-28 18:26:50 +08:00
parent 69070ebbca 78c802de0e
commit fd834747d7
6 changed files with 70 additions and 9 deletions
--- 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
--- 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={{
--- a/components/Giscus.js
+++ 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
--- 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
  }
-}
+})
--- 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"
--- 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>