fukasawa - adsense

components/GoogleAdsense.js

@@ -2,6 +2,10 @@ import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
+/**
+ * 初始化谷歌广告
+ * @returns
+ */
 export default function GoogleAdsense() {
   const initGoogleAdsense = () => {
     setTimeout(() => {
@@ -21,12 +25,8 @@ export default function GoogleAdsense() {
   }
 
   const router = useRouter()
-
   useEffect(() => {
-    router.events.on('routeChangeComplete', initGoogleAdsense)
-    return () => {
-      router.events.off('routeChangeComplete', initGoogleAdsense)
-    }
+    initGoogleAdsense()
   }, [router])
 
   return null

themes/fukasawa/components/ArticleDetail.js

@@ -5,6 +5,7 @@ import ShareBar from '@/components/ShareBar'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import ArticleAround from './ArticleAround'
+import { AdSlot } from '@/components/GoogleAdsense'
 
 /**
  *
@@ -79,6 +80,8 @@ export default function ArticleDetail(props) {
 
           </section>
 
+          <AdSlot type='in-article'/>
+
         </header>
 
         {/* Notion文章主体 */}

themes/fukasawa/components/AsideLeft.js

@@ -11,6 +11,7 @@ import DarkModeButton from '@/components/DarkModeButton'
 import SocialButton from './SocialButton'
 import { useFukasawaGlobal } from '..'
 import CONFIG from '@/themes/fukasawa/config'
+import { AdSlot } from '@/components/GoogleAdsense'
 
 // import { debounce } from 'lodash'
 // import { useEffect } from 'react'
@@ -53,7 +54,7 @@ function AsideLeft(props) {
   //     }
   //   }, [])
 
-  return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} ease-in-out duration-150 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
+  return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-150 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
         {/* 折叠按钮 */}
         {CONFIG.SIDEBAR_COLLAPSE_BUTTON && <div className={`${isCollapsed ? '' : 'ml-80'} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-150 px-3 py-2`} onClick={toggleOpen}>
             {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
@@ -82,6 +83,10 @@ function AsideLeft(props) {
                 <Announcement post={notice} />
             </section>
 
+            <section>
+                 <AdSlot type='in-article'/>
+            </section>
+
             {router.asPath !== '/tag' && <section className='flex flex-col'>
                 <div className='w-12 my-4' />
                 <GroupTag tags={tagOptions} currentTag={currentTag} />

themes/fukasawa/components/BlogListPage.js

@@ -5,6 +5,7 @@ import BlogPostListEmpty from './BlogListEmpty'
 import PaginationSimple from './PaginationSimple'
 import { useEffect, useState } from 'react'
 import { debounce } from 'lodash'
+import { AdSlot } from '@/components/GoogleAdsense'
 /**
  * 文章列表分页表格
  * @param page 当前页
@@ -58,6 +59,12 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
               <BlogCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo} />
             </div>
           ))}
+          {BLOG.ADSENSE_GOOGLE_ID && (
+            <div className='p-3'>
+                <AdSlot type='flow'/>
+            </div>
+          )}
+
         </div>
         <PaginationSimple page={page} showNext={showNext} />
       </div>

themes/fukasawa/index.js

@@ -18,6 +18,7 @@ import { createContext, useContext, useEffect, useState } from 'react'
 import Link from 'next/link'
 import { Transition } from '@headlessui/react'
 import dynamic from 'next/dynamic'
+import { AdSlot } from '@/components/GoogleAdsense'
 
 const Live2D = dynamic(() => import('@/components/Live2D'))
 const Mark = dynamic(() => import('mark.js'))
@@ -69,6 +70,7 @@ const LayoutBase = (props) => {
 
             <div id='theme-fukasawa'>
                 <CommonHead meta={meta} />
+
                 <TopNav {...props} />
 
                 <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
@@ -77,7 +79,6 @@ const LayoutBase = (props) => {
 
                     <main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
                         <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
-
                             <Transition
                                 show={!onLoading}
                                 appear={true}
@@ -94,6 +95,11 @@ const LayoutBase = (props) => {
                                 <div> {children} </div>
 
                             </Transition>
+
+                            <div className='mt-2'>
+                              <AdSlot type='native' />
+                            </div>
+
                         </div>
                     </main>
 
@@ -156,7 +162,7 @@ const LayoutSearch = props => {
       }
     }, 300)
   }, [router])
-  return <LayoutPostList {...props}/>
+  return <LayoutPostList {...props} />
 }
 
 /**