4.0.12

2026-05-14 07:26:52 +00:00 · 2023-08-07 18:22:39 +08:00
parent 9197b3c6bb
commit cfab52c569
8 changed files with 9501 additions and 29 deletions
--- a/.env.local
+++ b/.env.local
@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.0.11
+NEXT_PUBLIC_VERSION=4.0.12
--- a/blog.config.js
+++ b/blog.config.js
@@ -232,7 +232,7 @@ const BLOG = {
  // twikoo
  COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', // TWIKOO后端地址 腾讯云环境填envId；Vercel环境填域名，教程：https://tangly1024.com/article/notionnext-twikoo
  COMMENT_TWIKOO_COUNT_ENABLE: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_COUNT_ENABLE || false, // 博客列表是否显示评论数
-  COMMENT_TWIKOO_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL || 'https://cdn.staticfile.org/twikoo/1.6.16/twikoo.all.min.js', // twikoo客户端cdn
+  COMMENT_TWIKOO_CDN_URL: process.env.NEXT_PUBLIC_COMMENT_TWIKOO_CDN_URL || 'https://cdn.staticfile.org/twikoo/1.6.16/twikoo.min.js', // twikoo客户端cdn

  // utterance
  COMMENT_UTTERRANCES_REPO:
@@ -262,7 +262,7 @@ const BLOG = {
        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
+        '/js/cusdis.es.js', // change this if you're using self-hosted version

  // gitalk评论插件 更多参考 https://gitalk.github.io/
  COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // 你的Github仓库名，例如 'NotionNext'
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -38,7 +38,9 @@ const CommonScript = () => {
      />
    </>)}

-    {BLOG.COMMENT_CUSDIS_APP_ID && <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />}
+    {BLOG.COMMENT_CUSDIS_APP_ID && <script defer src={`https://cusdis.com/js/widget/lang/${BLOG.LANG.toLowerCase()}.js`} />}
+
+    {BLOG.COMMENT_TWIKOO_ENV_ID && <script defer src={BLOG.COMMENT_TWIKOO_CDN_URL}/> }

    {BLOG.COMMENT_TIDIO_ID && <script async src={`//code.tidio.co/${BLOG.COMMENT_TIDIO_ID}.js`} />}

--- a/components/Twikoo.js
+++ b/components/Twikoo.js
@@ -1,7 +1,6 @@
 import BLOG from '@/blog.config'
-import { loadExternalResource } from '@/lib/utils'
+// import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
-// import twikoo from 'twikoo'

 /**
 * Giscus评论 @see https://giscus.app/zh-CN
@@ -11,25 +10,15 @@ import { useEffect } from 'react'
 */

 const Twikoo = ({ isDarkMode }) => {
-  const loadTwikoo = async () => {
-    try {
-      await loadExternalResource(BLOG.COMMENT_TWIKOO_CDN_URL, 'js')
-      const twikoo = window.twikoo
-      twikoo?.init({
-        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，需传此参数
-      })
-    } catch (error) {
-      console.error('twikoo 加载失败', error)
-    }
-  }
-
  useEffect(() => {
-    loadTwikoo()
-  }, [])
+    window?.twikoo?.init({
+      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，需传此参数
+    })
+  }, [isDarkMode])
  return (
        <div id="twikoo"></div>
  )
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -24,11 +24,14 @@ export const memorize = (Component) => {
 */
 export function loadExternalResource(url, type) {
  // 检查是否已存在
-  const elements = document.querySelectorAll(`[href='${url}']`)
-  if (elements.length > 0 || !url) {
-    return
-  }
+  const elements = type === 'js' ? document.querySelectorAll(`[src='${url}']`) : document.querySelectorAll(`[href='${url}']`)
+
  return new Promise((resolve, reject) => {
+    if (elements.length > 0 || !url) {
+      resolve(url)
+      return url
+    }
+
    let tag

    if (type === 'css') {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "4.0.11",
+  "version": "4.0.12",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
--- a/public/js/cusdis.es.js
+++ b/public/js/cusdis.es.js
@@ -0,0 +1,107 @@
+/* eslint-disable no-useless-escape */
+window.CUSDIS = {}
+let cusdisIframe
+
+function createIframe(targetElement) {
+  if (!cusdisIframe) {
+    cusdisIframe = document.createElement('iframe')
+    setupIframe(cusdisIframe, targetElement)
+  }
+  cusdisIframe.srcdoc = generateIframeContent(targetElement)
+  cusdisIframe.style.width = '100%'
+  cusdisIframe.style.border = '0'
+}
+
+function setupIframe(iframe, targetElement) {
+  const colorSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+  const messageHandler = event => {
+    try {
+      const message = JSON.parse(event.data)
+      if (message.from === 'cusdis') {
+        switch (message.event) {
+          case 'onload':
+            if (targetElement.dataset.theme === 'auto') {
+              setTheme(colorSchemeMediaQuery.matches ? 'dark' : 'light')
+            }
+            break
+          case 'resize':
+            iframe.style.height = message.data + 'px'
+            break
+        }
+      }
+    } catch (error) {}
+  }
+
+  const colorSchemeChangeHandler = e => {
+    const isDarkMode = e.matches
+    if (targetElement.dataset.theme === 'auto') {
+      setTheme(isDarkMode ? 'dark' : 'light')
+    }
+  }
+  window.addEventListener('message', messageHandler)
+  colorSchemeMediaQuery.addEventListener('change', colorSchemeChangeHandler)
+}
+
+function generateIframeContent(element) {
+  const cusdisHost = element.dataset.host || 'https://cusdis.com'
+  const iframeSrc = element.dataset.iframe || `${cusdisHost}/js/iframe.umd.js`
+  return `<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="${cusdisHost}/js/style.css">
+    <base target="_parent" />
+    <link>
+    <script>
+      window.CUSDIS_LOCALE = ${JSON.stringify(window.CUSDIS_LOCALE)}
+      window.__DATA__ = ${JSON.stringify(element.dataset)}
+    <\/script>
+    <style>
+      :root {
+        color-scheme: light;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="${iframeSrc}" type="module">
+      
+    <\/script>
+  </body>
+</html>`
+}
+
+function setTheme(theme, data) {
+  if (cusdisIframe) {
+    cusdisIframe.contentWindow.postMessage(JSON.stringify({ from: 'cusdis', event: theme, data: data }))
+  }
+}
+
+function renderTo(element) {
+  if (element) {
+    element.innerHTML = ''
+    createIframe(element)
+    element.appendChild(cusdisIframe)
+  }
+}
+
+function initialRender() {
+  let element
+  if (window.cusdisElementId) {
+    element = document.querySelector(`#${window.cusdisElementId}`)
+  } else if (document.querySelector('#cusdis_thread')) {
+    element = document.querySelector('#cusdis_thread')
+  } else if (document.querySelector('#cusdis')) {
+    console.warn('id `cusdis` is deprecated. Please use `cusdis_thread` instead')
+    element = document.querySelector('#cusdis')
+  }
+
+  if (!window.CUSDIS_PREVENT_INITIAL_RENDER && element) {
+    renderTo(element)
+  }
+}
+
+window.renderCusdis = renderTo
+window.CUSDIS.renderTo = renderTo
+window.CUSDIS.setTheme = setTheme
+window.CUSDIS.initial = initialRender
+initialRender()