From 133fdd7c77581a49398e1fb5bd513d013eb09058 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Mon, 19 Jun 2023 16:00:31 +0800
Subject: [PATCH] googleAdsense

---
 components/CommonScript.js                  |  2 +-
 components/GoogleAdsense.js                 | 52 ++++++++++++++++++++-
 components/NotionPage.js                    |  3 ++
 themes/fukasawa/components/ArticleDetail.js | 11 -----
 themes/hexo/LayoutSlug.js                   | 11 -----
 themes/matery/LayoutSlug.js                 | 10 ----
 themes/medium/LayoutSlug.js                 | 13 ------
 themes/next/components/ArticleDetail.js     | 11 -----
 themes/next/components/SideBar.js           | 13 +-----
 themes/simple/LayoutBase.js                 |  3 ++
 themes/simple/components/BlogListPage.js    |  2 +
 themes/simple/components/SideBar.js         | 10 +++-
 12 files changed, 70 insertions(+), 71 deletions(-)

diff --git a/components/CommonScript.js b/components/CommonScript.js
index 57adf07a..29af09a6 100644
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -26,7 +26,7 @@ const CommonScript = () => {
       />
     </>)}
 
-    {/* GoogleAdsense */}
+    {/* 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" />}
 
diff --git a/components/GoogleAdsense.js b/components/GoogleAdsense.js
index dd9ec543..a633196c 100644
--- a/components/GoogleAdsense.js
+++ b/components/GoogleAdsense.js
@@ -1,7 +1,8 @@
+import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
-export default function GoogleAdsense () {
+export default function GoogleAdsense() {
   const initGoogleAdsense = () => {
     const ads = document.getElementsByClassName('adsbygoogle').length
     const newAdsCount = ads
@@ -27,3 +28,52 @@ export default function GoogleAdsense () {
   }, [router.events])
   return null
 }
+
+/**
+ * 文章内嵌广告单元
+ * 请在GoogleAdsense后台配置创建对应广告，并且获取相应代码
+ * 修改下面广告单元中的 data-ad-slot data-ad-format data-ad-layout-key(如果有)
+ */
+const AdSlot = ({ type = 'show' }) => {
+  if (!BLOG.ADSENSE_GOOGLE_ID) {
+    return null
+  }
+  // 文章内嵌广告
+  if (type === 'in-article') {
+    return <ins className="adsbygoogle"
+            style={{ display: 'block', textAlign: 'center' }}
+            data-ad-layout="in-article"
+            data-ad-format="fluid"
+            data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
+            data-ad-slot="3806269138"></ins>
+  }
+
+  //   信息流广告
+  if (type === 'flow') {
+    return <ins className="adsbygoogle"
+            data-ad-format="fluid"
+            data-ad-layout-key="-5j+cz+30-f7+bf"
+            style={{ display: 'block' }}
+            data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
+            data-ad-slot="1510444138"></ins>
+  }
+
+  // 原生广告
+  if (type === 'native') {
+    return <ins className="adsbygoogle"
+            style={{ display: 'block' }}
+            data-ad-format="autorelaxed"
+            data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
+            data-ad-slot="4980048999"></ins>
+  }
+
+  //  展示广告
+  return <ins className="adsbygoogle"
+        style={{ display: 'block' }}
+        data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
+        data-ad-slot="8807314373"
+        data-ad-format="auto"
+        data-full-width-responsive="true"></ins>
+}
+
+export { AdSlot }
diff --git a/components/NotionPage.js b/components/NotionPage.js
index 862af760..76ed4f96 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -7,6 +7,7 @@ import TweetEmbed from 'react-tweet-embed'
 
 import 'katex/dist/katex.min.css'
 import { mapImgUrl } from '@/lib/notion/mapImage'
+import { AdSlot } from './GoogleAdsense'
 
 const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then(async (m) => {
@@ -79,6 +80,8 @@ const NotionPage = ({ post, className }) => {
 
       <PrismMac />
 
+      <AdSlot type={'in-article'}/>
+
   </div>
 }
 
diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js
index 78f2f47f..b9a339d3 100644
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -95,17 +95,6 @@ export default function ArticleDetail(props) {
            <ShareBar post={post} />
         </section>
 
-        <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
-          {/* 文章内嵌广告 */}
-          <ins className="adsbygoogle"
-            style={{ display: 'block', textAlign: 'center' }}
-            data-adtest="on"
-            data-ad-layout="in-article"
-            data-ad-format="fluid"
-            data-ad-client="ca-pub-2708419466378217"
-            data-ad-slot="3806269138" />
-        </section>
-
       </article>
 
       {post.type === 'Post' && <ArticleAround prev={prev} next={next} /> }
diff --git a/themes/hexo/LayoutSlug.js b/themes/hexo/LayoutSlug.js
index 9c8ff361..514a3c4e 100644
--- a/themes/hexo/LayoutSlug.js
+++ b/themes/hexo/LayoutSlug.js
@@ -58,17 +58,6 @@ export const LayoutSlug = props => {
               {post && <NotionPage post={post} />}
             </section>
 
-            <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
-              {/* 文章内嵌广告 */}
-              <ins className="adsbygoogle"
-                style={{ display: 'block', textAlign: 'center' }}
-                data-adtest="on"
-                data-ad-layout="in-article"
-                data-ad-format="fluid"
-                data-ad-client="ca-pub-2708419466378217"
-                data-ad-slot="3806269138" />
-            </section>
-
             {/* 分享 */}
             <ShareBar post={post} />
             {post.type === 'Post' && <ArticleCopyright {...props} /> }
diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index 6e98ceb3..d3753764 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -74,16 +74,6 @@ export const LayoutSlug = props => {
                                 {post && <NotionPage post={post} />}
                             </section>
 
-                            <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
-                                {/* 文章内嵌广告 */}
-                                <ins className="adsbygoogle"
-                                    style={{ display: 'block', textAlign: 'center' }}
-                                    data-adtest="on"
-                                    data-ad-layout="in-article"
-                                    data-ad-format="fluid"
-                                    data-ad-client="ca-pub-2708419466378217"
-                                    data-ad-slot="3806269138" />
-                            </section>
                             {/* 分享 */}
                             <ShareBar post={post} />
                             {/* 文章版权说明 */}
diff --git a/themes/medium/LayoutSlug.js b/themes/medium/LayoutSlug.js
index dab24ed0..9217f281 100644
--- a/themes/medium/LayoutSlug.js
+++ b/themes/medium/LayoutSlug.js
@@ -72,19 +72,6 @@ export const LayoutSlug = props => {
                     {post && (<NotionPage post={post} />)}
                 </section>
 
-                <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
-                    {/* 文章内嵌广告 */}
-                    <ins
-                        className="adsbygoogle"
-                        style={{ display: 'block', textAlign: 'center' }}
-                        data-adtest="on"
-                        data-ad-layout="in-article"
-                        data-ad-format="fluid"
-                        data-ad-client="ca-pub-2708419466378217"
-                        data-ad-slot="3806269138"
-                    />
-                </section>
-
                 <section>
 
                     {/* 分享 */}
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
index d443f374..09da7426 100644
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -83,17 +83,6 @@ export default function ArticleDetail(props) {
                     {post && (<NotionPage post={post} />)}
                 </article>
 
-                <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
-                    {/* 文章内嵌广告 */}
-                    <ins className="adsbygoogle"
-                        style={{ display: 'block', textAlign: 'center' }}
-                        data-adtest="on"
-                        data-ad-layout="in-article"
-                        data-ad-format="fluid"
-                        data-ad-client="ca-pub-2708419466378217"
-                        data-ad-slot="3806269138" />
-                </section>
-
                 {showArticleInfo && <>
 
                     {/* 分享 */}
diff --git a/themes/next/components/SideBar.js b/themes/next/components/SideBar.js
index 8525859a..3af651c5 100644
--- a/themes/next/components/SideBar.js
+++ b/themes/next/components/SideBar.js
@@ -70,18 +70,7 @@ const SideBar = (props) => {
 
       </div>
 
-      <section className='bg-white dark:bg-gray-900'>
-        {/* 信息流广告 */}
-        <ins className="adsbygoogle"
-        style={{ display: 'block' }}
-        data-adtest="on"
-        data-ad-format="fluid"
-        data-ad-layout-key="-5j+cz+30-f7+bf"
-        data-ad-client="ca-pub-2708419466378217"
-        data-ad-slot="1510444138"/>
-      </section>
-
     </aside>
-  );
+  )
 }
 export default SideBar
diff --git a/themes/simple/LayoutBase.js b/themes/simple/LayoutBase.js
index ec6920d8..f0b7c20c 100644
--- a/themes/simple/LayoutBase.js
+++ b/themes/simple/LayoutBase.js
@@ -11,6 +11,7 @@ import { TopBar } from './components/TopBar'
 import CONFIG_SIMPLE from './config_simple'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
 import { useGlobal } from '@/lib/global'
+import { AdSlot } from '@/components/GoogleAdsense'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -62,6 +63,8 @@ const LayoutBase = props => {
                 <JumpToTopButton />
             </div>
 
+            <AdSlot type='native'/>
+
             <Footer {...props} />
 
         </div>
diff --git a/themes/simple/components/BlogListPage.js b/themes/simple/components/BlogListPage.js
index 7247552b..7238e843 100644
--- a/themes/simple/components/BlogListPage.js
+++ b/themes/simple/components/BlogListPage.js
@@ -3,6 +3,7 @@ import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { BlogItem } from './BlogItem'
+import { AdSlot } from '@/components/GoogleAdsense'
 
 export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
@@ -18,6 +19,7 @@ export const BlogListPage = props => {
       <div className="w-full md:pr-8 mb-12">
 
             <div id="container">
+                <AdSlot type='flow'/>
                 {posts?.map(p => (
                     <BlogItem key={p.id} post={p}/>
                 ))}
diff --git a/themes/simple/components/SideBar.js b/themes/simple/components/SideBar.js
index b3cdf2ce..44c4bd0b 100644
--- a/themes/simple/components/SideBar.js
+++ b/themes/simple/components/SideBar.js
@@ -1,3 +1,4 @@
+import { AdSlot } from '@/components/GoogleAdsense'
 import Live2D from '@/components/Live2D'
 import Announcement from './Announcement'
 import Catalog from './Catalog'
@@ -5,15 +6,22 @@ import Catalog from './Catalog'
 export const SideBar = (props) => {
   const { notice } = props
   return (<>
+
         <aside>
             <Catalog {...props} />
         </aside>
 
-        <aside className="overflow-hidden mb-6">
+        <aside>
             <Live2D />
         </aside>
+
         <aside>
             <Announcement post={notice} />
         </aside>
+
+        <aside>
+            <AdSlot/>
+        </aside>
+
     </>)
 }