Merge branch 'theme-next' into main

2026-05-14 15:09:22 +00:00 · 2022-02-18 11:16:03 +08:00
parent ac6378806a 6ff655f689
commit ff330d82dd
11 changed files with 75 additions and 112 deletions
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -3,6 +3,8 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import 'gitalk/dist/gitalk.css'
 import Tabs from '@/components/Tabs'
+import { ReactCusdis } from 'react-cusdis'
+import { useGlobal } from '@/lib/global'

 const GitalkComponent = dynamic(
  () => {
@@ -16,26 +18,29 @@ const UtterancesComponent = dynamic(
  },
  { ssr: false }
 )
-const CusdisComponent = dynamic(
-  () => {
-    return import('@/components/Cusdis')
-  },
-  { ssr: false }
-)

 const Comment = ({ frontMatter }) => {
  const router = useRouter()
+  const { locale } = useGlobal()
  return (
    <div className='comment mt-5 text-gray-800 dark:text-gray-300'>
      <Tabs>
        {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-          <CusdisComponent id={frontMatter.id} url={BLOG.LINK + router.asPath} title={frontMatter.title} />
+          <ReactCusdis
+            lang={locale.LOCALE.toLowerCase()}
+            attrs={{
+              host: BLOG.COMMENT_CUSDIS_HOST,
+              appId: BLOG.COMMENT_CUSDIS_APP_ID,
+              pageId: frontMatter.id,
+              pageTitle: frontMatter.title,
+              pageUrl: BLOG.LINK + router.asPath
+            }}
+          />
        </div>)}

        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-        </div>
-        )}
+        </div>)}

        {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
          <GitalkComponent
@@ -51,7 +56,6 @@ const Comment = ({ frontMatter }) => {
            }}
          />
        </div>)}
-
      </Tabs>
    </div>
  )
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -85,12 +85,12 @@ const CommonScript = () => {

    {/* 谷歌统计 */}
    {BLOG.ANALYTICS_GOOGLE_ID && (<>
-        <script async
-                src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
-        />
-        <script async
-                dangerouslySetInnerHTML={{
-                  __html: `
+      <script async
+              src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
+      />
+      <script async
+              dangerouslySetInnerHTML={{
+                __html: `
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
@@ -98,9 +98,9 @@ const CommonScript = () => {
                      page_path: window.location.pathname,
                    });
                  `
-                }}
-        />
-      </>)}
+              }}
+      />
+    </>)}
  </>)
 }

--- a/components/Cusdis.js
+++ b/components/Cusdis.js
@@ -1,30 +0,0 @@
-import BLOG from '@/blog.config'
-import { useEffect } from 'react'
-const Cusdis = ({ id, url, title }) => {
-  useEffect(() => {
-    const script = document.createElement('script')
-    const anchor = document.getElementById('comments-cusdis')
-    script.setAttribute(
-      'src',
-      BLOG.COMMENT_CUSDIS_SCRIPT_SRC
-    )
-    script.setAttribute('async', true)
-    script.setAttribute('defer', true)
-    anchor.appendChild(script)
-  })
-  return (
-    <div id="comments-cusdis">
-      <div
-        id="cusdis_thread"
-        data-host={BLOG.COMMENT_CUSDIS_HOST}
-        data-app-id={BLOG.COMMENT_CUSDIS_APP_ID}
-        data-page-id={id}
-        data-page-url={url}
-        data-page-title={title}
-        lang={BLOG.LANG.toLowerCase()}
-      />
-    </div>
-  )
-}
-
-export default Cusdis
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -41,12 +41,14 @@ const Tabs = ({ className, children }) => {
        </li>
      })}
    </ul>
-    {children.map((item, index) => {
-      return <section key={index}
-                      className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
-        {item}
-      </section>
-    })}
+    <div>
+      {children.map((item, index) => {
+        return <section key={index}
+                        className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
+          {item}
+        </section>
+      })}
+    </div>
  </div>
 }

--- a/lib/utils.js
+++ b/lib/utils.js
@@ -0,0 +1,27 @@
+// 封装异步加载资源的方法
+
+/**
+ * 加载外部资源
+ * @param url 地址 例如 https://xx.com/xx.js
+ * @param type js 或 css
+ * @returns {Promise<unknown>}
+ */
+export function loadExternalResource (url, type) {
+  return new Promise((resolve, reject) => {
+    let tag
+
+    if (type === 'css') {
+      tag = document.createElement('link')
+      tag.rel = 'stylesheet'
+      tag.href = url
+    } else if (type === 'js') {
+      tag = document.createElement('script')
+      tag.src = url
+    }
+    if (tag) {
+      tag.onload = () => resolve(url)
+      tag.onerror = () => reject(url)
+      document.head.appendChild(tag)
+    }
+  })
+}
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
    "qrcode.react": "^1.0.1",
    "react": "17.0.2",
    "react-cookies": "^0.1.1",
+    "react-cusdis": "^2.1.3",
    "react-dom": "17.0.2",
    "react-notion-x": "4.14.2",
    "smoothscroll-polyfill": "^0.4.4",
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -151,8 +151,8 @@ nav {

 .glassmorphism{
  background: hsla(0, 0%, 100%, .75);
-  -webkit-backdrop-filter: blur(10px);    
-  backdrop-filter: blur(10px);   
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
 }

 .dark .glassmorphism{
@@ -184,7 +184,6 @@ nav {
  padding-top: 160px;
  bottom: -1px;
  margin-top: -200px;
-  text-align: center;
  width: 100%;
  background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
  padding-bottom: 34px;
@@ -192,4 +191,4 @@ nav {

 .shadow-text{
  text-shadow: 0.1em 0.1em 0.2em black;
-}
+}
--- a/themes/NEXT/components/ArticleDetail.js
+++ b/themes/NEXT/components/ArticleDetail.js
@@ -52,7 +52,7 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
  })

  return (<div id="container" className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
-    <article itemScope itemType="https://schema.org/Movie"
+    <div itemScope itemType="https://schema.org/Movie"
      className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-gray-800"
    >

@@ -118,7 +118,7 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
      </header>

      {/* Notion文章主体 */}
-      <section id='notion-article' className='px-1'>
+      <article id='notion-article' className='px-1'>
        {post.blockMap && (
          <NotionRenderer
            recordMap={post.blockMap}
@@ -131,7 +131,7 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
            }}
          />
        )}
-      </section>
+      </article>

      <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
        {/* 文章内嵌广告 */}
@@ -169,12 +169,12 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {

      <BlogAround prev={prev} next={next} />

-    </article>
-
-    {/* 评论互动 */}
-    <div className="duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-800">
-      <Comment frontMatter={post} />
+      {/* 评论互动 */}
+      <div className="duration-200 w-full dark:border-gray-700 bg-white dark:bg-gray-800">
+        <Comment frontMatter={post} />
+      </div>
    </div>
+
  </div>)
 }

--- a/themes/NEXT/components/BlogPostCard.js
+++ b/themes/NEXT/components/BlogPostCard.js
@@ -59,9 +59,9 @@ const BlogPostCard = ({ post, showSummary }) => {
          />
        </div> }

-        <div className='article-cover pointer-events-none'>
-          <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-              <a className='hover:bg-opacity-100 hover:scale-105 pointer-events-auto transform duration-300 rounded-md p-2 text-red-500 cursor-pointer'>
+        <div className='article-cover pointer-events-none text-right'>
+          <Link href={`${BLOG.PATH}/article/${post.slug}`}>
+              <a className='hover:bg-opacity-100 hover:scale-105 hover:underline pointer-events-auto transform duration-300 p-3 text-white bg-gray-800 cursor-pointer'>
                {locale.COMMON.ARTICLE_DETAIL}
                <FontAwesomeIcon className='ml-1' icon={faAngleRight} /></a>
          </Link>
--- a/themes/NEXT/components/Live2D.js
+++ b/themes/NEXT/components/Live2D.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-undef */
 import CONFIG_NEXT from '../config_next'
+import { loadExternalResource } from '@/lib/utils'

 let hasLoad = false
 export default function Live2D () {
@@ -29,24 +30,3 @@ function initLive2D () {
    })
  }
 }
-
-// 封装异步加载资源的方法
-function loadExternalResource (url, type) {
-  return new Promise((resolve, reject) => {
-    let tag
-
-    if (type === 'css') {
-      tag = document.createElement('link')
-      tag.rel = 'stylesheet'
-      tag.href = url
-    } else if (type === 'js') {
-      tag = document.createElement('script')
-      tag.src = url
-    }
-    if (tag) {
-      tag.onload = () => resolve(url)
-      tag.onerror = () => reject(url)
-      document.head.appendChild(tag)
-    }
-  })
-}
--- a/themes/NEXT/components/Live2DWaifu.js
+++ b/themes/NEXT/components/Live2DWaifu.js
@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import { useEffect } from 'react'
+import { loadExternalResource } from '@/lib/utils'

 export default function Live2DWife () {
  useEffect(() => {
@@ -17,27 +18,6 @@ function initLive2DWife () {
  const live2dPath = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/'
  // const live2d_path = "/live2d-widget/";

-  // 封装异步加载资源的方法
-  function loadExternalResource (url, type) {
-    return new Promise((resolve, reject) => {
-      let tag
-
-      if (type === 'css') {
-        tag = document.createElement('link')
-        tag.rel = 'stylesheet'
-        tag.href = url
-      } else if (type === 'js') {
-        tag = document.createElement('script')
-        tag.src = url
-      }
-      if (tag) {
-        tag.onload = () => resolve(url)
-        tag.onerror = () => reject(url)
-        document.head.appendChild(tag)
-      }
-    })
-  }
-
  // 加载 waifu.css live2d.min.js waifu-tips.js
  if (screen.width >= 768) {
    Promise.all([