googleAdsense

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" />}
 

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 }

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>
 }