From b98af6a924abfa398176ce4d9081fe9cc6a2d594 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 20 Jul 2023 19:16:52 +0800
Subject: [PATCH] heo , seo + google ads

---
 components/CommonScript.js            |  4 ----
 components/GoogleAdsense.js           | 30 +++++++++++++++++----------
 themes/heo/components/CategoryBar.js  |  2 +-
 themes/heo/components/Footer.js       |  2 ++
 themes/heo/components/Hero.js         |  6 +++---
 themes/heo/components/SearchButton.js |  6 ++++--
 6 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/components/CommonScript.js b/components/CommonScript.js
index f659c6b9..6912c3cc 100644
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -38,10 +38,6 @@ const CommonScript = () => {
       />
     </>)}
 
-    {/* GoogleAdsense 本地开发请加入 data-adbreak-test="on" */}
-    {BLOG.ADSENSE_GOOGLE_ID && <script async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.ADSENSE_GOOGLE_ID}`}
-     crossOrigin="anonymous" />}
-
     {BLOG.COMMENT_CUSDIS_APP_ID && <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />}
 
     {BLOG.COMMENT_TIDIO_ID && <script async src={`//code.tidio.co/${BLOG.COMMENT_TIDIO_ID}.js`} />}
diff --git a/components/GoogleAdsense.js b/components/GoogleAdsense.js
index d9718369..b2edc130 100644
--- a/components/GoogleAdsense.js
+++ b/components/GoogleAdsense.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
@@ -8,20 +9,27 @@ import { useEffect } from 'react'
  */
 export default function GoogleAdsense() {
   const initGoogleAdsense = () => {
-    setTimeout(() => {
-      const ads = document.getElementsByClassName('adsbygoogle')
-      const adsbygoogle = window.adsbygoogle
-      if (ads.length > 0) {
-        for (let i = 0; i <= ads.length; i++) {
-          try {
-            adsbygoogle.push(ads[i])
-            console.log('adsbygoogle', i, ads[i], adsbygoogle)
-          } catch (e) {
+    // GoogleAdsense 本地开发请加入 data-adbreak-test="on"
+    // {BLOG.ADSENSE_GOOGLE_ID && <script async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.ADSENSE_GOOGLE_ID}`}
+    //  crossOrigin="anonymous" />}
 
+    loadExternalResource(`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.ADSENSE_GOOGLE_ID}`, 'js').then(url => {
+      setTimeout(() => {
+        const ads = document.getElementsByClassName('adsbygoogle')
+        const adsbygoogle = window.adsbygoogle
+        console.log('google-ads', adsbygoogle)
+        if (ads.length > 0) {
+          for (let i = 0; i <= ads.length; i++) {
+            try {
+              adsbygoogle.push(ads[i])
+              console.log('adsbygoogle', i, ads[i], adsbygoogle)
+            } catch (e) {
+
+            }
           }
         }
-      }
-    }, 100)
+      }, 100)
+    })
   }
 
   const router = useRouter()
diff --git a/themes/heo/components/CategoryBar.js b/themes/heo/components/CategoryBar.js
index bdc19e32..ee0a7a0c 100644
--- a/themes/heo/components/CategoryBar.js
+++ b/themes/heo/components/CategoryBar.js
@@ -41,7 +41,7 @@ export default function CategoryBar(props) {
             {scrollRight ? <ChevronDoubleLeft className={'w-5 h-5'} /> : <ChevronDoubleRight className={'w-5 h-5'} /> }
             </div>
             <Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
-                {locale.COMMON.MORE}
+                {locale.MENU.CATEGORY}
             </Link>
         </div>
     </div>
diff --git a/themes/heo/components/Footer.js b/themes/heo/components/Footer.js
index 190d0f06..e1590998 100644
--- a/themes/heo/components/Footer.js
+++ b/themes/heo/components/Footer.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import BLOG from '@/blog.config'
 import SocialButton from './SocialButton'
+import { AdSlot } from '@/components/GoogleAdsense'
 // import DarkModeButton from '@/components/DarkModeButton'
 
 const Footer = ({ title }) => {
@@ -28,6 +29,7 @@ const Footer = ({ title }) => {
                 <SocialButton />
             </div>
 
+            <AdSlot type='native'/>
             <br />
 
             {/* 底部页面信息 */}
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index 5c781e67..211e3db7 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -162,11 +162,11 @@ function TopGroup(props) {
         <div id='hero-right-wrapper' onMouseLeave={handleMouseLeave} className='flex-1 relative w-full'>
             {/* 制定最新文章 */}
             <div id='top-group' className='w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3 xl:h-[342px]'>
-                {latestPosts?.map(p => {
-                  return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={p.id}>
+                {latestPosts?.map((p, index) => {
+                  return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={index}>
                         <div className='cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl'>
                             {/* eslint-disable-next-line */}
-                            <img className='h-24 object-cover' src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
+                            <img className='h-24 object-cover' alt={p?.title} src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
                             <div className='group-hover:text-indigo-600 dark:group-hover:text-yellow-600 line-clamp-2 overflow-hidden m-2 font-semibold'>{p?.title}</div>
                             {/* hover 悬浮的 ‘荐’ 字 */}
                             <div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600  text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>
diff --git a/themes/heo/components/SearchButton.js b/themes/heo/components/SearchButton.js
index 137d6c95..aee73e49 100644
--- a/themes/heo/components/SearchButton.js
+++ b/themes/heo/components/SearchButton.js
@@ -1,7 +1,9 @@
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 
 export default function SearchButton() {
-  return <Link href="/search" className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'>
-    <i className="fa-solid fa-magnifying-glass"></i>
+  const { locale } = useGlobal()
+  return <Link href="/search" title={locale.NAV.SEARCH} alt={locale.NAV.SEARCH} className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'>
+    <i title={locale.NAV.SEARCH} className="fa-solid fa-magnifying-glass"/>
 </Link>
 }