From 187b173ead4e21dc065900d000a640c6ba7fd3de Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Mon, 31 Jul 2023 21:30:38 +0800
Subject: [PATCH] =?UTF-8?q?qrcode=20=E6=94=B9=E4=B8=BAcdn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js              |  2 ++
 components/GoogleAdsense.js |  2 +-
 components/PrismMac.js      |  1 -
 components/QrCode.js        | 34 ++++++++++++++++++++++++++++++++++
 components/ShareButtons.js  |  7 +++++--
 lib/utils.js                | 10 ++++++++--
 themes/gitbook/index.js     |  1 -
 7 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 components/QrCode.js

diff --git a/blog.config.js b/blog.config.js
index fab696b8..9f8511b8 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -119,6 +119,8 @@ const BLOG = {
 
   // Mermaid 图表CDN
   MERMAID_CDN: process.env.NEXT_PUBLIC_MERMAID_CDN || 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.4/mermaid.min.js', // CDN
+  // QRCodeCDN
+  QR_CODE_CDN: process.env.NEXT_PUBLIC_QR_CODE_CDN || 'https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js',
 
   BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
   BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
diff --git a/components/GoogleAdsense.js b/components/GoogleAdsense.js
index 22fca879..420dc993 100644
--- a/components/GoogleAdsense.js
+++ b/components/GoogleAdsense.js
@@ -21,7 +21,7 @@ export default function GoogleAdsense() {
           for (let i = 0; i <= ads.length; i++) {
             try {
               adsbygoogle.push(ads[i])
-              console.log('adsbygoogle', i, ads[i], adsbygoogle)
+            //   console.log('adsbygoogle', i, ads[i], adsbygoogle)
             } catch (e) {
 
             }
diff --git a/components/PrismMac.js b/components/PrismMac.js
index 172c6ceb..38742281 100644
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -141,7 +141,6 @@ const renderMermaid = async() => {
           if (needLoad) {
             loadExternalResource(BLOG.MERMAID_CDN, 'js').then(url => {
               const mermaid = window.mermaid
-              console.log('mermaid加载成功', url, mermaid)
               mermaid.contentLoaded()
             })
           }
diff --git a/components/QrCode.js b/components/QrCode.js
new file mode 100644
index 00000000..ca78c881
--- /dev/null
+++ b/components/QrCode.js
@@ -0,0 +1,34 @@
+import BLOG from '@/blog.config'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+
+/**
+ * 二维码生成
+ */
+export default function QrCode({ value }) {
+  useEffect(() => {
+    let qrcode
+    if (!value) {
+      return
+    }
+    loadExternalResource(BLOG.QR_CODE_CDN, 'js').then(url => {
+      const QRCode = window.QRCode
+      qrcode = new QRCode(document.getElementById('qrcode'), {
+        text: value,
+        width: 256,
+        height: 256,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.H
+      })
+      console.log('二维码', qrcode, value)
+    })
+    return () => {
+      if (qrcode) {
+        qrcode.clear() // clear the code.
+      }
+    }
+  }, [])
+
+  return <div id="qrcode"></div>
+}
diff --git a/components/ShareButtons.js b/components/ShareButtons.js
index 02ca7230..efd3ab87 100644
--- a/components/ShareButtons.js
+++ b/components/ShareButtons.js
@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import copy from 'copy-to-clipboard'
+import dynamic from 'next/dynamic'
 import { useState } from 'react'
 
 import {
@@ -48,6 +49,8 @@ import {
   HatenaIcon
 } from 'react-share'
 
+const QrCode = dynamic(() => import('@/components/QrCode'), { ssr: false })
+
 /**
  * @author https://github.com/txs
  * @param {*} param0
@@ -345,8 +348,8 @@ const ShareButtons = ({ shareUrl, title, body, image }) => {
                         </div>
                         <div className='absolute'>
                         <div id='pop' className={(qrCodeShow ? 'opacity-100 ' : ' invisible opacity-0') + ' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'}>
-                                <div className='p-2 mt-1'>
-                                    {/* <QRCode value={shareUrl} fgColor='#000000' /> */}
+                                <div className='p-2 mt-1 w-28 h-28'>
+                                    <QrCode value={shareUrl}/>
                                 </div>
                                 <span className='text-black font-semibold p-1 rounded-t-lg text-sm mx-auto mb-1'>
                                     {locale.COMMON.SCAN_QR_CODE}
diff --git a/lib/utils.js b/lib/utils.js
index e13b192f..ef419793 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -39,8 +39,14 @@ export function loadExternalResource(url, type) {
       tag.src = url
     }
     if (tag) {
-      tag.onload = () => resolve(url)
-      tag.onerror = () => reject(url)
+      tag.onload = () => {
+        console.log(url, '加载成功')
+        resolve(url)
+      }
+      tag.onerror = () => {
+        console.log(url, '加载失败')
+        reject(url)
+      }
       document.head.appendChild(tag)
     }
   })
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index e5fcaeac..cde4c530 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -53,7 +53,6 @@ const LayoutBase = (props) => {
   const showTocButton = post?.toc?.length > 1
 
   useEffect(() => {
-    console.log('更新导航', allNavPages)
     setFilteredNavPages(allNavPages)
   }, [post])