From a0943e631a9866f787988a18e075ed3448b6291f Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Mon, 28 Mar 2022 18:08:14 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=84=E8=AE=BA=E6=8F=92=E4=BB=B6=20Giscus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 16 +++++++++++++++- components/Comment.js | 14 +++++++++++++- components/Giscus.js | 30 ++++++++++++++++++++++++++++++ package.json | 7 +++++-- 4 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 components/Giscus.js diff --git a/blog.config.js b/blog.config.js index 460f9049..50b15917 100644 --- a/blog.config.js +++ b/blog.config.js @@ -45,7 +45,21 @@ 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: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY || '', // 你的Github Discussions 內的 Category 名稱 e.g 'Comments' + 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 (
+ {BLOG.COMMENT_GISCUS_REPO && ( +
+ +
+ )} + {BLOG.COMMENT_GITALK_CLIENT_ID && (
{ + const theme = isDarkMode ? 'dark' : 'light' + return ( + + ) +} + +export default GiscusComponent diff --git a/package.json b/package.json index 3dc26fd2..8925efcf 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,11 @@ "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", @@ -54,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"