Merge pull request #622 from tangly1024/develop

twikoo评论插件
2026-05-14 15:09:22 +00:00 · 2022-12-20 20:59:45 +08:00
parent b8d31a4726 c44e1d4c71
commit 89c40790f9
8 changed files with 57 additions and 9 deletions
--- a/blog.config.js
+++ b/blog.config.js
@@ -66,7 +66,13 @@ 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, // 点击宠物挂件切换博客主题

-  // 评论互动 可同时开启多个支持 GISCUS CUSDIS UTTERRANCES GITALK
+  // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
+
+  // twikoo
+  COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO地址 腾讯云环境填 envId；Vercel 环境域名地址（https://xxx.vercel.app)
+
+  // utterance
+  COMMENT_UTTERRANCES_REPO: process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/

  // giscus @see https://giscus.app/
  COMMENT_GISCUS_REPO: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO || '', // 你的Github仓库名 e.g 'tangly1024/NotionNext'
@@ -84,8 +90,6 @@ const BLOG = {
  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

-  COMMENT_UTTERRANCES_REPO: process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/
-
  // gitalk评论插件 更多参考 https://gitalk.github.io/
  COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // 你的Github仓库名，例如 'NotionNext'
  COMMENT_GITALK_OWNER: process.env.NEXT_PUBLIC_COMMENT_GITALK_OWNER || '', // 你的用户名 e.g tangly1024
@@ -106,7 +110,9 @@ const BLOG = {
  COMMENT_WALINE_SERVER_URL: process.env.NEXT_PUBLIC_WALINE_SERVER_URL || '', // 请配置完整的Waline评论地址 例如 hhttps://preview-waline.tangly1024.com @see https://waline.js.org/guide/get-started.html
  COMMENT_WALINE_RECENT: process.env.NEXT_PUBLIC_WALINE_RECENT || false, // 最新评论

-  // 站点统计
+  // <---- 评论插件
+
+  // ----> 站点统计
  ANALYTICS_BUSUANZI_ENABLE: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
  ANALYTICS_BAIDU_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
  ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
@@ -118,6 +124,8 @@ const BLOG = {

  SEO_GOOGLE_SITE_VERIFICATION: process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code

+  // <---- 站点统计
+
  // 谷歌广告
  ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx

--- a/components/Comment.js
+++ b/components/Comment.js
@@ -19,6 +19,13 @@ const CusdisComponent = dynamic(
  { ssr: false }
 )

+const TwikooCompenent = dynamic(
+  () => {
+    return import('@/components/Twikoo')
+  },
+  { ssr: false }
+)
+
 const GitalkComponent = dynamic(
  () => {
    return import('@/components/Gitalk')
@@ -66,6 +73,10 @@ const Comment = ({ frontMatter }) => {
    <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
      <Tabs>

+         { BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
+            <TwikooCompenent/>
+         </div>)}
+
        { BLOG.COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
            <WalineComponent/>
        </div>) }
--- a/components/Twikoo.js
+++ b/components/Twikoo.js
@@ -0,0 +1,27 @@
+import BLOG from '@/blog.config'
+import React from 'react'
+import twikoo from 'twikoo'
+
+/**
+ * Giscus评论 @see https://giscus.app/zh-CN
+ * Contribute by @txs https://github.com/txs/NotionNext/commit/1bf7179d0af21fb433e4c7773504f244998678cb
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const Twikoo = ({ isDarkMode }) => {
+  React.useEffect(() => {
+    twikoo({
+      envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+      el: '#twikoo', // 容器元素
+      lang: BLOG.LANG // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+      // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+      // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
+    })
+  })
+  return (
+   <div id="twikoo"></div>
+  )
+}
+
+export default Twikoo
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
    "react-notion-x": "6.15.6",
    "react-share": "^4.4.0",
    "smoothscroll-polyfill": "^0.4.4",
+    "twikoo": "^1.6.8",
    "typed.js": "^2.0.12",
    "use-ackee": "^3.0.0",
    "valine": "^1.4.18"
--- a/themes/medium/LayoutBase.js
+++ b/themes/medium/LayoutBase.js
@@ -24,7 +24,7 @@ const LayoutBase = props => {
  const router = useRouter()

  return (
-    <div className='bg-white dark:bg-black w-full h-full min-h-screen justify-center dark:text-gray-300'>
+    <div className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
      <CommonHead meta={meta} />
      <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
        {/* 桌面端左侧菜单 */}
--- a/themes/medium/components/ArticleAround.js
+++ b/themes/medium/components/ArticleAround.js
@@ -9,14 +9,14 @@ export default function ArticleAround ({ prev, next }) {
  if (!prev || !next) {
    return <></>
  }
-  return <section className='text-gray-800 h-12 flex items-center justify-between space-x-5 my-4'>
+  return <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
    <Link href={`/${prev.slug}`} passHref>
      <a className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
      </a>
    </Link>
    <Link href={`/${next.slug}`} passHref>
-      <a className='text-sm  cursor-pointer justify-end items-center flex hover:underline duration-300'>{next.title}
+      <a className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>{next.title}
        <i className='ml-1 my-1 fas fa-angle-double-right' />
      </a>
    </Link>
--- a/themes/medium/components/ArticleDetail.js
+++ b/themes/medium/components/ArticleDetail.js
@@ -21,7 +21,7 @@ export const ArticleDetail = props => {
  return <div id='container'>

        {/* title */}
-        <h1 className="text-3xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
+        <h1 className="text-3xl pt-12 font-sans dark:text-gray-300">{post?.title}</h1>

        {/* meta */}
        <section className="py-2 items-center text-sm font-sans px-1">
@@ -61,6 +61,7 @@ export const ArticleDetail = props => {
                data-ad-slot="3806269138"
            />
        </section>
+
        <section>
            <div className='flex justify-between'>
                {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
--- a/themes/medium/components/BlogPostCard.js
+++ b/themes/medium/components/BlogPostCard.js
@@ -19,7 +19,7 @@ const BlogPostCard = ({ post, showSummary }) => {
        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
          <a
            className={
-              'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'
+              'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
            }
          >
            {post.title}