simple主题广告位优化

2026-05-14 07:26:52 +00:00 · 2023-06-20 15:56:53 +08:00
parent 5c8a7b607b
commit eda51e4479
8 changed files with 43 additions and 38 deletions
--- a/components/GoogleAdsense.js
+++ b/components/GoogleAdsense.js
@@ -45,7 +45,7 @@ const AdSlot = ({ type = 'show' }) => {
            data-ad-layout="in-article"
            data-ad-format="fluid"
            data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
-            data-ad-slot="3806269138"></ins>
+            data-ad-slot="3806269138" data-adtest="on"></ins>
  }

  //   信息流广告
@@ -55,7 +55,7 @@ const AdSlot = ({ type = 'show' }) => {
            data-ad-layout-key="-5j+cz+30-f7+bf"
            style={{ display: 'block' }}
            data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
-            data-ad-slot="1510444138"></ins>
+            data-ad-slot="1510444138" data-adtest="on"></ins>
  }

  // 原生广告
@@ -64,7 +64,7 @@ const AdSlot = ({ type = 'show' }) => {
            style={{ display: 'block', textAlign: 'center' }}
            data-ad-format="autorelaxed"
            data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
-            data-ad-slot="4980048999"></ins>
+            data-ad-slot="4980048999" data-adtest="on"></ins>
  }

  //  展示广告
@@ -73,7 +73,7 @@ const AdSlot = ({ type = 'show' }) => {
        data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
        data-ad-slot="8807314373"
        data-ad-format="auto"
-        data-full-width-responsive="true"></ins>
+        data-full-width-responsive="true" data-adtest="on"></ins>
 }

 export { AdSlot }
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -7,7 +7,6 @@ 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) => {
@@ -80,8 +79,6 @@ const NotionPage = ({ post, className }) => {

      <PrismMac />

-      <AdSlot type={'in-article'}/>
-
  </div>
 }

--- a/public/css/theme-simple.css
+++ b/public/css/theme-simple.css
@@ -29,5 +29,6 @@
 #theme-simple .menu-link:hover {
    background-size: 100% 2px;
    color: #dd3333;
+    cursor: pointer;
 }

--- a/themes/simple/LayoutBase.js
+++ b/themes/simple/LayoutBase.js
@@ -51,6 +51,7 @@ const LayoutBase = props => {
            <div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
                <div id='container-inner ' className='w-full flex-grow'>
                    {onLoading ? LoadingCover : children}
+                    <AdSlot type='native'/>
                </div>

                <div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
@@ -63,8 +64,6 @@ const LayoutBase = props => {
                <JumpToTopButton />
            </div>

-            <AdSlot type='native'/>
-
            <Footer {...props} />

        </div>
--- a/themes/simple/LayoutSlug.js
+++ b/themes/simple/LayoutSlug.js
@@ -5,30 +5,36 @@ import { ArticleInfo } from './components/ArticleInfo'
 import Comment from '@/components/Comment'
 import ArticleAround from './components/ArticleAround'
 import ShareBar from '@/components/ShareBar'
+import { AdSlot } from '@/components/GoogleAdsense'

 export const LayoutSlug = props => {
  const { post, lock, validPassword, prev, next } = props

-  if (!post) {
-    return <LayoutBase {...props} />
-  }
-
  return (
        <LayoutBase {...props}>

-                {lock && <ArticleLock validPassword={validPassword} />}
+            {lock && <ArticleLock validPassword={validPassword} />}

-                {!lock && <div id="notion-article" className="px-2 xl:max-w-4xl 2xl:max-w-6xl ">
+            <div id="notion-article" className="px-2 xl:max-w-4xl 2xl:max-w-6xl ">

-                    {post && <>
-                        <ArticleInfo post={post} />
-                        <NotionPage post={post} />
-                        {/* 分享 */}
-                        <ShareBar post={post} />
-                        {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
-                        <Comment frontMatter={post}/>
-                    </>}
-                </div>}
+                    <ArticleInfo post={post} />
+
+                    <div className="max-h-44 my-1" >
+                        <AdSlot type={'in-article'} />
+                    </div>
+
+                   {!lock && <NotionPage post={post} />}
+
+                    <ShareBar post={post} />
+
+                    <div className="max-h-44 my-1" >
+                        <AdSlot type={'in-article'} />
+                    </div>
+
+                    {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
+                    <Comment frontMatter={post} />
+
+            </div>

        </LayoutBase>
  )
--- a/themes/simple/components/ArticleInfo.js
+++ b/themes/simple/components/ArticleInfo.js
@@ -15,15 +15,15 @@ export const ArticleInfo = (props) => {
            <div>
                <h2
                    className="blog-item-title mb-5 font-bold text-black text-xl md:text-2xl no-underline">
-                    {post.title}
+                    {post?.title}
                </h2>

                {post?.type !== 'Page' && (<>
                    <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
                        <span> <i className="fa-regular fa-user"></i> <a href={CONFIG_SIMPLE.AUTHOR_LINK}>{BLOG.AUTHOR}</a></span>
-                        <span> - <i className="fa-regular fa-clock"></i> {post.date?.start_date || post.createdTime}</span>
-                        {post.category && <span> - <i className="fa-regular fa-folder"></i> <a href={`/category/${post.category}`} className="hover:text-red-400 transition-all duration-200">{post.category}</a></span>}
-                        {post.tags && post.tags?.length > 0 && post.tags.map(t => <span key={t}> / <Link href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)}
+                        <span> - <i className="fa-regular fa-clock"></i> {post?.date?.start_date || post?.createdTime}</span>
+                        {post?.category && <span> - <i className="fa-regular fa-folder"></i> <a href={`/category/${post?.category}`} className="hover:text-red-400 transition-all duration-200">{post?.category}</a></span>}
+                        {post?.tags && post.tags?.length > 0 && post?.tags.map(t => <span key={t}> / <Link href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)}
                    </div>
                </>)}

@@ -38,7 +38,7 @@ export const ArticleInfo = (props) => {
                    </Link>
                    <span className='mr-2'>|</span>
                    <span className='mx-2 text-gray-400 dark:text-gray-500'>
-                        {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
+                        {locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedTime}
                    </span>
                    <span className='mr-2'>|</span>
                    <span className="hidden busuanzi_container_page_pv font-light mr-2">
--- a/themes/simple/components/BlogItem.js
+++ b/themes/simple/components/BlogItem.js
@@ -6,12 +6,12 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
 export const BlogItem = props => {
  const { post } = props

-  return <div key={post.id} className="mb-10 pb-12 border-b dark:border-gray-800" >
+  return <div key={post.id} className="h-42 my-6 pb-12 border-b dark:border-gray-800" >
        {/* 文章标题 */}

        <h2 className="mb-2">
            <Link
-                href={`/${post.slug}`}
+                href={`${post.slug}`}
                className="blog-item-title font-bold text-black text-2xl no-underline hover:underline">
                {post.title}
            </Link>
@@ -42,7 +42,7 @@ export const BlogItem = props => {
        </div>

        <div className='block'>
-            <Link href={`/${post.slug}`} className='inline-block rounded-sm text-blue-600 text-xs dark:border-gray-800 border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
+            <Link href={`${post.slug}`} className='inline-block rounded-sm text-blue-600 text-xs dark:border-gray-800 border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
                Continue Reading <i className="fa-solid fa-angle-right align-middle"></i>
            </Link>
        </div>
--- a/themes/simple/components/BlogListPage.js
+++ b/themes/simple/components/BlogListPage.js
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { BlogItem } from './BlogItem'
 import { AdSlot } from '@/components/GoogleAdsense'
+import { Fragment } from 'react'

 export const BlogListPage = props => {
  const { page = 1, posts, postCount } = props
@@ -16,16 +17,17 @@ export const BlogListPage = props => {
  const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')

  return (
-      <div className="w-full md:pr-8 mb-12">
+        <div className="w-full md:pr-8 mb-12">

            <div id="container">
-                <AdSlot type='flow'/>
-                {posts?.map(p => (
-                    <BlogItem key={p.id} post={p}/>
-                ))}
+                {posts?.map((p, index) => (<>
+                        {(index + 1) % 3 === 0 && <AdSlot type='flow' />}
+                        <BlogItem key={p.id} post={p} />
+                </>))}
+
            </div>

-            <div className="flex justify-between text-xs">
+            <div className="flex justify-between text-xs mt-1">
                <Link
                    href={{ pathname: currentPage - 1 === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}
                    className={`${showPrev ? 'text-blue-600 border-b border-blue-400 visible ' : ' invisible bg-gray pointer-events-none '} no-underline pb-1 px-3`}>