Merge branch 'tangly1024:main' into main

.env.local

@@ -1,15 +1,15 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.1.5
+NEXT_PUBLIC_VERSION=4.2.1
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可
 # Notion页面ID,必须
-# NOTION_PAGE_ID= 
+# NOTION_PAGE_ID=097e5f674880459d8e1b4407758dc4fb
 
 # 非必须
 # NEXT_PUBLIC_PSEUDO_STATIC=
 # NEXT_PUBLIC_REVALIDATE_SECOND=  
-# NEXT_PUBLIC_THEME=
+# NEXT_PUBLIC_THEME=matery
 # NEXT_PUBLIC_THEME_SWITCH=
 # NEXT_PUBLIC_LANG=
 # NEXT_PUBLIC_APPEARANCE=

blog.config.js

@@ -185,6 +185,11 @@ const BLOG = {
   STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || true, // 开关
 
   //   ********挂件组件相关********
+  // AI 文章摘要生成 @see https://docs_s.tianli0.top/
+  TianliGPT_CSS: process.env.NEXT_PUBLIC_TIANLI_GPT_CSS || 'https://cdn1.tianli0.top/gh/zhheo/[email protected]/tianli_gpt.css',
+  TianliGPT_JS: process.env.NEXT_PUBLIC_TIANLI_GPT_JS || 'https://cdn1.tianli0.top/gh/zhheo/[email protected]/tianli_gpt.js',
+  TianliGPT_KEY: process.env.NEXT_PUBLIC_TIANLI_GPT_KEY || '',
+
   // Chatbase 是否显示chatbase机器人 https://www.chatbase.co/
   CHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null,
   // WebwhizAI 机器人 @see https://github.com/webwhiz-ai/webwhiz
@@ -239,6 +244,8 @@ const BLOG = {
   //   ********挂件组件相关********
   // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK
 
+  COMMENT_HIDE_SINGLE_TAB: process.env.NEXT_PUBLIC_COMMENT_HIDE_SINGLE_TAB || false, //Whether hide the tab when there's no tabs. 只有一个评论组件时是否隐藏切换组件的标签页
+
   // artalk 评论插件
   COMMENT_ARTALK_SERVER: process.env.NEXT_PUBLIC_COMMENT_ARTALK_SERVER || '', // ArtalkServert后端地址 https://artalk.js.org/guide/deploy.html
   COMMENT_ARTALK_JS: process.env.NEXT_PUBLIC_COMMENT_ARTALK_JS || 'https://cdnjs.cloudflare.com/ajax/libs/artalk/2.5.5/Artalk.js', // ArtalkServert js cdn
@@ -345,6 +352,9 @@ const BLOG = {
   SEO_BAIDU_SITE_VERIFICATION:
         process.env.NEXT_PUBLIC_SEO_BAIDU_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
 
+  // 微软 Clarity 站点分析
+  CLARITY_ID: process.env.NEXT_PUBLIC_CLARITY_ID || null , // 只需要复制Clarity脚本中的ID部分，ID是一个十位的英文数字组合
+
   // <---- 站点统计
 
   // START---->营收相关

components/Artalk.js

@@ -1,11 +1,9 @@
 import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
-// import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
 
 /**
- * Giscus评论 @see https://giscus.app/zh-CN
- * Contribute by @txs https://github.com/txs/NotionNext/commit/1bf7179d0af21fb433e4c7773504f244998678cb
+ * Artalk 自托管评论系统 @see https://artalk.js.org/
  * @returns {JSX.Element}
  * @constructor
  */

components/Busuanzi.js

@@ -2,22 +2,22 @@ import busuanzi from '@/lib/busuanzi'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 // import { useRouter } from 'next/router'
-import React from 'react'
+import { useEffect } from 'react'
 
 let path = ''
 
 export default function Busuanzi () {
   const { theme } = useGlobal()
-  const Router = useRouter()
-  Router.events.on('routeChangeComplete', (url, option) => {
+  const router = useRouter()
+  router.events.on('routeChangeComplete', (url, option) => {
     if (url !== path) {
       path = url
       busuanzi.fetch()
     }
   })
 
   // 更换主题时更新
-  React.useEffect(() => {
+  useEffect(() => {
     if (theme) {
       busuanzi.fetch()
     }

components/ExternalPlugins.js

@@ -2,6 +2,11 @@ import { siteConfig } from '@/lib/config'
 import dynamic from 'next/dynamic'
 import LA51 from './LA51'
 import WebWhiz from './Webwhiz'
+import TianLiGPT from './TianliGPT'
+import { GlobalStyle } from './GlobalStyle'
+
+import { CUSTOM_EXTERNAL_CSS, CUSTOM_EXTERNAL_JS, IMG_SHADOW } from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false })
 const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false })
@@ -71,12 +76,46 @@ const ExternalPlugin = (props) => {
   const ANALYTICS_51LA_ID = siteConfig('ANALYTICS_51LA_ID')
   const ANALYTICS_51LA_CK = siteConfig('ANALYTICS_51LA_CK')
   const DIFY_CHATBOT_ENABLED = siteConfig('DIFY_CHATBOT_ENABLED')
+  const TIANLI_KEY = siteConfig('TianliGPT_KEY')
+  const GLOBAL_JS = siteConfig('GLOBAL_JS')
+  const CLARITY_ID = siteConfig('CLARITY_ID')
+
+  // 自定义样式css和js引入
+  if (isBrowser) {
+    // 初始化AOS动画
+    // 静态导入本地自定义样式
+    loadExternalResource('/css/custom.css', 'css')
+    loadExternalResource('/js/custom.js', 'js')
+
+    // 自动添加图片阴影
+    if (IMG_SHADOW) {
+      loadExternalResource('/css/img-shadow.css', 'css')
+    }
+
+    // 导入外部自定义脚本
+    if (CUSTOM_EXTERNAL_JS && CUSTOM_EXTERNAL_JS.length > 0) {
+      for (const url of CUSTOM_EXTERNAL_JS) {
+        loadExternalResource(url, 'js')
+      }
+    }
+
+    // 导入外部自定义样式
+    if (CUSTOM_EXTERNAL_CSS && CUSTOM_EXTERNAL_CSS.length > 0) {
+      for (const url of CUSTOM_EXTERNAL_CSS) {
+        loadExternalResource(url, 'css')
+      }
+    }
+  }
 
   if (DISABLE_PLUGIN) {
     return null
   }
 
   return <>
+
+        {/* 全局样式嵌入 */}
+        <GlobalStyle/>
+
         {THEME_SWITCH && <ThemeSwitch />}
         {DEBUG && <DebugPanel />}
         {ANALYTICS_ACKEE_TRACKER && <Ackee />}
@@ -98,6 +137,7 @@ const ExternalPlugin = (props) => {
         {!CAN_COPY && <DisableCopy />}
         {WEB_WHIZ_ENABLED && <WebWhiz />}
         {AD_WWADS_BLOCK_DETECT && <AdBlockDetect />}
+        {TIANLI_KEY && <TianLiGPT/>}
         <VConsole />
         <LoadingProgress />
         <AosAnimation />
@@ -112,6 +152,11 @@ const ExternalPlugin = (props) => {
             }} /> */}
         </>)}
 
+        {/* 注入JS脚本 */}
+        {GLOBAL_JS && <script async dangerouslySetInnerHTML={{
+          __html: GLOBAL_JS
+        }} />}
+
         {CHATBASE_ID && (<>
             <script id={CHATBASE_ID} src="https://www.chatbase.co/embed.min.js" defer />
             <script async dangerouslySetInnerHTML={{
@@ -123,6 +168,18 @@ const ExternalPlugin = (props) => {
             }} />
         </>)}
 
+        {CLARITY_ID && (<>
+          <script async dangerouslySetInnerHTML={{
+            __html: `
+                (function(c,l,a,r,i,t,y){
+                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+                })(window, document, "clarity", "script", "${CLARITY_ID}");
+                `
+          }} />
+        </>)}
+
         {COMMENT_DAO_VOICE_ID && (<>
             {/* DaoVoice 反馈 */}
             <script async dangerouslySetInnerHTML={{

components/GlobalStyle.js

@@ -0,0 +1,20 @@
+/* eslint-disable react/no-unknown-property */
+
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 这里的css样式对全局生效
+ * 主题客制化css
+ * @returns
+ */
+const GlobalStyle = () => {
+  // 从NotionConfig中读取样式
+  const GLOBAL_CSS = siteConfig('GLOBAL_CSS')
+  return (<style jsx global>{`
+
+    ${GLOBAL_CSS}
+
+  `}</style>)
+}
+
+export { GlobalStyle }

components/Tabs.js

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { siteConfig } from '@/lib/config'
 
 /**
  * Tabs切换标签
@@ -16,21 +17,23 @@ const Tabs = ({ className, children }) => {
 
   return (
     <div className={`mb-5 duration-200 ${className}`}>
-      <ul className="flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto">
-        {validChildren.map((item, index) => (
-          <li key={index}
-            className={`${currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello' : 'font-extralight cursor-pointer'} text-sm font-sans`}
-            onClick={() => setCurrentTab(index)}>
-            {item.key}
-          </li>
-        ))}
-      </ul>
+      {!(validChildren.length === 1 && siteConfig('COMMENT_HIDE_SINGLE_TAB')) && (
+        <ul className="flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto">
+          {validChildren.map((item, index) => (
+            <li key={index}
+              className={`${currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello' : 'font-extralight cursor-pointer'} text-sm font-sans`}
+              onClick={() => setCurrentTab(index)}>
+              {item.key}
+            </li>
+          ))}
+        </ul>
+      )}
       {/* 标签切换的时候不销毁 DOM 元素，使用 CSS 样式进行隐藏 */}
       <div>
         {validChildren.map((item, index) => (
           <section
             key={index}
-            className={`${currentTab === index ? 'opacity-100 static h-auto' : 'opacity-0 absolute h-0'}`}>
+            className={`${currentTab === index ? 'opacity-100 static h-auto' : 'opacity-0 absolute h-0 pointer-events-none overflow-hidden'}`}>
             {item}
           </section>
         ))}

components/TianliGPT.js

@@ -0,0 +1,41 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable camelcase */
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+/**
+ * TianliGpt AI文章摘要生成工具 @see https://docs_s.tianli0.top/
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const TianLiGPT = () => {
+  const tianliKey = siteConfig('TianliGPT_KEY')
+  const tianliCss = siteConfig('TianliGPT_CSS')
+  const tianliJs = siteConfig('TianliGPT_JS')
+
+  useEffect(() => {
+    initArtalk()
+  }, [])
+
+  if (!tianliKey) {
+    return null
+  }
+
+  const initArtalk = async () => {
+    console.log('loading tianliGPT', tianliKey, tianliCss, tianliJs)
+
+    if (!tianliKey) {
+      return
+    }
+    await loadExternalResource(tianliCss, 'css')
+
+    window.tianliGPT_postSelector = '#notion-article';
+    window.tianliGPT_key = tianliKey;
+
+    await loadExternalResource(tianliJs, 'js')
+  }
+  return <></>
+}
+
+export default TianLiGPT

components/Twikoo.js

@@ -1,6 +1,6 @@
 import { siteConfig } from '@/lib/config'
-// import { loadExternalResource } from '@/lib/utils'
-import { useEffect } from 'react'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect, useRef, useState } from 'react'
 
 /**
  * Giscus评论 @see https://giscus.app/zh-CN
@@ -12,23 +12,46 @@ import { useEffect } from 'react'
 const Twikoo = ({ isDarkMode }) => {
   const envId = siteConfig('COMMENT_TWIKOO_ENV_ID')
   const el = siteConfig('COMMENT_TWIKOO_ELEMENT_ID', '#twikoo')
-
+  const twikooCDNURL = siteConfig('COMMENT_TWIKOO_CDN_URL')
   const lang = siteConfig('LANG')
-  useEffect(() => {
-    const twikoo = window?.twikoo
-    if (typeof twikoo !== 'undefined' && twikoo && typeof twikoo.init === 'function') {
-      twikoo.init({
-        envId: envId, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
-        el: el, // 容器元素
-        lang: 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，需传此参数
-      })
+  const [isInit] = useState(useRef(false))
+
+  const loadTwikoo = async () => {
+    try {
+      await loadExternalResource(twikooCDNURL, 'js')
+      const twikoo = window?.twikoo
+      if (
+        typeof twikoo !== 'undefined' &&
+        twikoo &&
+        typeof twikoo.init === 'function'
+      ) {
+        twikoo.init({
+          envId: envId, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+          el: el, // 容器元素
+          lang: 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，需传此参数
+        })
+        console.log('twikoo init', twikoo)
+        isInit.current = true
+      }
+    } catch (error) {
+      console.error('twikoo 加载失败', error)
     }
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (isInit.current) {
+        console.log('twioo init! clear interval')
+        clearInterval(interval)
+      } else {
+        loadTwikoo()
+      }
+    }, 1000)
+    return () => clearInterval(interval)
   }, [isDarkMode])
-  return (
-        <div id="twikoo"></div>
-  )
+  return <div id="twikoo"></div>
 }
 
 export default Twikoo

components/Utterances.js

@@ -15,8 +15,11 @@ const Utterances = ({ issueTerm, layout }) => {
   const [isLoading, setLoading] = useState(true);
 
   useEffect(() => {
-    const script = document.createElement('script');
     const anchor = document.getElementById('comments');
+    if (!anchor) {
+      return
+    }
+    const script = document.createElement('script');
     script.onload = () => setLoading(false);
     script.setAttribute('src', 'https://utteranc.es/client.js');
     script.setAttribute('crossorigin', 'anonymous');
@@ -25,7 +28,7 @@ const Utterances = ({ issueTerm, layout }) => {
     script.setAttribute('issue-term', 'title');
     // 初始主题
     script.setAttribute('theme', isDarkMode ? 'github-dark' : 'github-light');
-    anchor.appendChild(script);
+    anchor?.appendChild(script);
 
     return () => {
       // anchor.innerHTML = ''