Merge pull request #1214 from tangly1024/feat/gitbook-adsense

gitbook-adsense

blog.config.js

@@ -292,6 +292,7 @@ const BLOG = {
 
   // 谷歌广告
   ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx
+  ADSENSE_GOOGLE_TEST: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_TEST || false, // 谷歌广告ID测试模式，这种模式获取假的测试广告，用于开发 https://www.tangly1024.com/article/local-dev-google-adsense
 
   // 自定义配置notion数据库字段名
   NOTION_PROPERTY_NAME: {

components/GoogleAdsense.js

@@ -48,16 +48,18 @@ const AdSlot = ({ type = 'show' }) => {
             style={{ display: 'block', textAlign: 'center' }}
             data-ad-layout="in-article"
             data-ad-format="fluid"
+            data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
             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-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
             data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
             data-ad-slot="1510444138"></ins>
   }
@@ -67,6 +69,7 @@ const AdSlot = ({ type = 'show' }) => {
     return <ins className="adsbygoogle"
             style={{ display: 'block', textAlign: 'center' }}
             data-ad-format="autorelaxed"
+            data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
             data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
             data-ad-slot="4980048999"></ins>
   }
@@ -75,6 +78,7 @@ const AdSlot = ({ type = 'show' }) => {
   return <ins className="adsbygoogle"
         style={{ display: 'block' }}
         data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
+        data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
         data-ad-slot="8807314373"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>

themes/gitbook/LayoutBase.js

@@ -17,6 +17,7 @@ import { useRouter } from 'next/router'
 import Announcement from './components/Announcement'
 import PageNavDrawer from './components/PageNavDrawer'
 import FloatTocButton from './components/FloatTocButton'
+import { AdSlot } from '@/components/GoogleAdsense'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -65,6 +66,8 @@ const LayoutBase = (props) => {
                             {/* 所有文章列表 */}
                             <BlogPostListScroll posts={filterPosts} />
 
+                            <AdSlot />
+
                         </div>
                     </div>
 
@@ -73,8 +76,12 @@ const LayoutBase = (props) => {
                         <div id='container-inner' className='w-full px-7 max-w-3xl justify-center mx-auto'>
                             {slotTop}
 
+                            <AdSlot type='in-article' />
+
                             {onLoading ? LoadingCover : children}
 
+                            <AdSlot type='in-article' />
+
                             {/* 回顶按钮 */}
                             <div
                                 data-aos="fade-up"
@@ -88,6 +95,10 @@ const LayoutBase = (props) => {
 
                         {/* 底部 */}
                         <Footer title={siteInfo?.title} />
+
+                        <div className='text-center'>
+                            <AdSlot type='native' />
+                        </div>
                     </div>
 
                     {/*  右侧侧推拉抽屉 */}
@@ -95,7 +106,7 @@ const LayoutBase = (props) => {
                         <div className='py-14 px-6 sticky top-0'>
                             <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
-                            <div className='pt-6'>
+                            <div className='py-6'>
                                 <Catalog {...props} />
                                 {slotRight}
                                 {router.route === '/' && <>
@@ -107,16 +118,18 @@ const LayoutBase = (props) => {
                                 <Announcement {...props} />
                             </div>
 
+                            <AdSlot />
+
                         </div>
                     </div>
 
                 </main>
 
                 {showTocButton && !tocVisible && <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
-                    <FloatTocButton {...props}/>
+                    <FloatTocButton {...props} />
                 </div>}
 
-                <PageNavDrawer {...props}/>
+                <PageNavDrawer {...props} />
 
                 {/* 移动端底部导航栏 */}
                 <BottomMenuBar {...props} className='block md:hidden' />

themes/gitbook/LayoutSlug.js

@@ -9,6 +9,7 @@ import TocDrawer from './components/TocDrawer'
 import CategoryItem from './components/CategoryItem'
 import TagItemMini from './components/TagItemMini'
 import ShareBar from '@/components/ShareBar'
+import { AdSlot } from '@/components/GoogleAdsense'
 
 export const LayoutSlug = (props) => {
   const { post, prev, next, lock, validPassword } = props
@@ -41,6 +42,9 @@ export const LayoutSlug = (props) => {
                     </div>
 
                     {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
+
+                    <AdSlot/>
+
                     <Comment frontMatter={post} />
                 </section>