feature:

Google Adsense
2026-05-15 23:16:48 +00:00 · 2021-12-17 21:03:20 +08:00
parent d4d969a10d
commit 43de0a80d4
8 changed files with 88 additions and 47 deletions
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -102,6 +102,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
                <section className='flex justify-end py-2 pl-1 dark:text-white items-center font-light italic text-sm'>
                    本文共<strong id='wordCount'>0</strong>字，阅读需要约<strong id='readTime'>0</strong>分钟
                </section>
+
            </header>

            {/* Notion文章主体 */}
@@ -121,6 +122,17 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
              )}
            </section>

+            <section className="px-1 py-2 my-1 text-sm font-light  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"></ins>
+            </section>
+
            {/* 推荐文章 */}
            <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />

@@ -165,10 +177,11 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
            </section>

            <BlogAround prev={prev} next={next} />
+
          </article>

          {/* 评论互动 */}
-          <div className="mt-5 shadow-lg rounded-xl w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
+          <div className="mt-5 lg:px-40  shadow-lg rounded-xl w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
            <Comment frontMatter={post} />
          </div>
      </div>
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -31,14 +31,12 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
        const selected = currentPath === `${BLOG.path}/article/${post.slug}`
        return (
          <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
-            <a className={(selected ? 'bg-blue-500 dark:bg-black ' : '') + ' my-1 px-5 flex font-light justify-between'}>
+            <a className={(selected ? 'text-white  bg-blue-500 dark:bg-black ' : 'text-gray-500 dark:text-gray-300 ') + ' my-1 px-5 flex font-light justify-between'}>
              <div className={ 'text-xs py-1 flex w-40 overflow-x-hidden whitespace-nowrap overflow-hidden ' +
-                'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline ' +
-                  (selected ? 'text-white ' : 'text-gray-500 dark:text-gray-300')
-                }>
+                'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline ' }>
                {post.title}
              </div>
-              <div className='text-gray-500 text-xs py-1'>
+              <div className='text-xs py-1'>
                {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')}
              </div>
            </a>
--- a/components/SideArea.js
+++ b/components/SideArea.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import MenuButtonGroup from '@/components/MenuButtonGroup'
 import InfoCard from '@/components/InfoCard'
 import TagGroups from '@/components/TagGroups'
@@ -10,6 +10,7 @@ import { useGlobal } from '@/lib/global'
 import Toc from '@/components/Toc'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
+const adsInit = false

 /**
 * 侧边平铺
@@ -25,6 +26,7 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
 */
 const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
  const { locale } = useGlobal()
+
  return <aside id='sidebar' className='w-72 z-10 scroll-hidden h-full'>

    <section className='hidden lg:block bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-lg'>
@@ -33,8 +35,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat

    <div className={(!post ? 'sticky top-2' : '') + ' pb-4'}>

-      {/* <hr className='dark:border-gray-700 mt-5 py-1' /> */}
-
+      {/* 菜单 */}
      <section className='hidden lg:block mt-5 py-4 rounded-xl shadow-lg bg-white dark:bg-gray-800  hover:shadow-2xl duration-200'>
        <MenuButtonGroup allowCollapse={true} />
        <div className='px-5 pt-2'>
@@ -52,6 +53,17 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
        </section>
      )}

+      <section className='rounded-xl shadow-lg py-4 mt-5 px-2 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
+          {/* 展示广告  */}
+          <ins className="adsbygoogle"
+            style={{ display: 'block' }}
+            data-adtest="on"
+            data-ad-client="ca-pub-2708419466378217"
+            data-ad-slot="8807314373"
+            data-ad-format="auto"
+            data-full-width-responsive="true"></ins>
+      </section>
+
      {/* 分类  */}
      {categories && (
        <section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -94,7 +94,16 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
      </section>
    )}

-    {/* <section id='blank' className='bg-white dark:bg-gray-900 py-20' /> */}
+    <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"></ins>
+    </section>

  </aside>
 }
--- a/components/ThirdPartyScript.js
+++ b/components/ThirdPartyScript.js
@@ -26,6 +26,10 @@ const ThirdPartyScript = () => {
      />
    </>)}

+    {/* GoogleAdsense 广告植入 */}
+    {BLOG.googleAdsenseId && (<script data-ad-client={BLOG.googleAdsenseId} async
+              src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>)}
+
    {BLOG.TidioId && (<>
      {/* Tidio在线反馈 */}
      <script async
@@ -95,40 +99,6 @@ const ThirdPartyScript = () => {
                    }}
            />
          </>)}
-
-        {/* GoogleAdsense 广告植入 */}
-        {BLOG.googleAdsenseId && (
-        <>
-          {/* <script data-ad-client={BLOG.googleAdsenseId} async
-                  src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' /> */}
-          <script async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.googleAdsenseId}`}
-          crossOrigin="anonymous"></script>
-          {/* 信息流 */}
-          <ins className="adsbygoogle"
-              style={{ display: 'block' }}
-              data-ad-format="fluid"
-              data-ad-layout-key="-5j+cz+30-f7+bf"
-              data-ad-client="ca-pub-2708419466378217"
-              data-ad-slot="1510444138"></ins>
-            {/* 展示广告  */}
-          <ins className="adsbygoogle"
-              style={{ display: 'block' }}
-              data-ad-client="ca-pub-2708419466378217"
-              data-ad-slot="8807314373"
-              data-ad-format="auto"
-              data-full-width-responsive="true"></ins>
-          {/* 文章内嵌广告 */}
-          <ins className="adsbygoogle"
-              style={{ display: 'block', textAlign: 'center' }}
-              data-ad-layout="in-article"
-              data-ad-format="fluid"
-              data-ad-client="ca-pub-2708419466378217"
-              data-ad-slot="3806269138"></ins>
-          <script>
-              (adsbygoogle = window.adsbygoogle || []).push({});
-          </script>
-        </>
-        )}
      </>)}
  </>)
 }
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -60,7 +60,7 @@ const BaseLayout = ({
    return () => {
      window.removeEventListener('scroll', scrollTrigger)
    }
-  })
+  }, [])
  const { onLoading, theme } = useGlobal()
  const targetRef = useRef(null)

--- a/lib/global.js
+++ b/lib/global.js
@@ -102,6 +102,31 @@ const initTheme = (theme, changeTheme) => {
  }
 }

+export function handleRouteChange (url) {
+  console.log('路由变化', url)
+  initGoogleAdsense()
+}
+
+/**
+ * 初始化谷歌广告
+ */
+// let activeAdsCount = 0
+function initGoogleAdsense () {
+  const ads = document.getElementsByClassName('adsbygoogle').length
+  // const newAdsCount = ads - activeAdsCount
+  // console.log(`Start: 总广告${ads}, 已激活${activeAdsCount} 新广告${newAdsCount}`)
+  const newAdsCount = ads
+  if (newAdsCount > 0) {
+    for (let i = 0; i <= newAdsCount; i++) {
+      try {
+        (adsbygoogle = window.adsbygoogle || []).push({})
+      } catch (e) {
+
+      }
+    }
+  }
+}
+
 /**
 * 读取默认主题
 * @returns {*}
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,12 +1,14 @@
+import BLOG from 'blog.config'
 import 'animate.css'
 import '@/styles/notion.css'
 import '@/styles/globals.css'
 import 'rc-dropdown/assets/index.css'
 import 'prismjs/themes/prism-okaidia.css'
 import 'katex/dist/katex.min.css'
-import BLOG from 'blog.config'
 import dynamic from 'next/dynamic'
-import { GlobalContextProvider } from '@/lib/global'
+import { GlobalContextProvider, handleRouteChange } from '@/lib/global'
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
 import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
 config.autoAddCss = false
@@ -15,6 +17,18 @@ const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })

 const MyApp = ({ Component, pageProps }) => {
+  //  全局监听路由变化
+  const router = useRouter()
+  useEffect(() => {
+    handleRouteChange(router.pathname)
+    const routerListener = (url) => {
+      handleRouteChange(url)
+    }
+    router.events.on('routeChangeComplete', routerListener)
+    return () => {
+      router.events.off('routeChangeComplete', routerListener)
+    }
+  })
  return (
    <GlobalContextProvider>
        {BLOG.isProd && BLOG?.analytics?.provider === 'ackee' && (