Merge pull request tangly1024#1465 from tangly1024/feat/wwads

Feat/wwads

blog.config.js

@@ -332,6 +332,8 @@ const BLOG = {
 
   // <---- 站点统计
 
+  // START---->营收相关
+
   // 谷歌广告
   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
@@ -340,6 +342,12 @@ const BLOG = {
   ADSENSE_GOOGLE_SLOT_NATIVE: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_NATIVE || '4980048999', // Google AdScene>广告>按单元广告>新建原生广告
   ADSENSE_GOOGLE_SLOT_AUTO: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_SLOT_AUTO || '8807314373', // Google AdScene>广告>按单元广告>新建展示广告 （自动广告）
 
+  // 万维广告
+  AD_WWADS_ID: process.env.NEXT_PUBLIC_WWAD_ID || null, // https://wwads.cn/ 创建您的万维广告单元ID
+  AD_WWADS_BLOCK_DETECT: process.env.NEXT_PUBLIC_WWADS_AD_BLOCK_DETECT || false, // 是否开启WWADS广告屏蔽插件检测,开启后会在广告位上以文字提示 @see https://github.com/bytegravity/whitelist-wwads
+
+  // END<----营收相关
+
   // 自定义配置notion数据库字段名
   NOTION_PROPERTY_NAME: {
     password: process.env.NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD || 'password',

components/AdBlockDetect.js

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+
+/**
+ * 检测广告插件
+ * @returns
+ */
+export default function AdBlockDetect() {
+  useEffect(() => {
+    // 如果检测到广告屏蔽插件
+    function ABDetected() {
+      if (!document) {
+        return
+      }
+      const wwadsCns = document.getElementsByClassName('wwads-cn')
+      if (wwadsCns && wwadsCns.length > 0) {
+        for (const wwadsCn of wwadsCns) {
+          wwadsCn.insertAdjacentHTML('beforeend', "<style>.wwads-horizontal,.wwads-vertical{background-color:#f4f8fa;padding:5px;min-height:120px;margin-top:20px;box-sizing:border-box;border-radius:3px;font-family:sans-serif;display:flex;min-width:150px;position:relative;overflow:hidden;}.wwads-horizontal{flex-wrap:wrap;justify-content:center}.wwads-vertical{flex-direction:column;align-items:center;padding-bottom:32px}.wwads-horizontal a,.wwads-vertical a{text-decoration:none}.wwads-horizontal .wwads-img,.wwads-vertical .wwads-img{margin:5px}.wwads-horizontal .wwads-content,.wwads-vertical .wwads-content{margin:5px}.wwads-horizontal .wwads-content{flex:130px}.wwads-vertical .wwads-content{margin-top:10px}.wwads-horizontal .wwads-text,.wwads-content .wwads-text{font-size:14px;line-height:1.4;color:#0e1011;-webkit-font-smoothing:antialiased}.wwads-horizontal .wwads-poweredby,.wwads-vertical .wwads-poweredby{display:block;font-size:11px;color:#a6b7bf;margin-top:1em}.wwads-vertical .wwads-poweredby{position:absolute;left:10px;bottom:10px}.wwads-horizontal .wwads-poweredby span,.wwads-vertical .wwads-poweredby span{transition:all 0.2s ease-in-out;margin-left:-1em}.wwads-horizontal .wwads-poweredby span:first-child,.wwads-vertical .wwads-poweredby span:first-child{opacity:0}.wwads-horizontal:hover .wwads-poweredby span,.wwads-vertical:hover .wwads-poweredby span{opacity:1;margin-left:0}.wwads-horizontal .wwads-hide,.wwads-vertical .wwads-hide{position:absolute;right:-23px;bottom:-23px;width:46px;height:46px;border-radius:23px;transition:all 0.3s ease-in-out;cursor:pointer;}.wwads-horizontal .wwads-hide:hover,.wwads-vertical .wwads-hide:hover{background:rgb(0 0 0 /0.05)}.wwads-horizontal .wwads-hide svg,.wwads-vertical .wwads-hide svg{position:absolute;left:10px;top:10px;fill:#a6b7bf}.wwads-horizontal .wwads-hide:hover svg,.wwads-vertical .wwads-hide:hover svg{fill:#3E4546}</style><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-img' target='_blank' rel='nofollow'><img src='https://creatives-1301677708.file.myqcloud.com/images/placeholder/wwads-friendly-ads.png' width='130'></a><div class='wwads-content'><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-text' target='_blank' rel='nofollow'>为了本站的长期运营，请将我们的网站加入广告拦截器的白名单，感谢您的支持！</a><a href='https://wwads.cn/page/end-user-privacy' class='wwads-poweredby' title='万维广告 ～ 让广告更优雅，且有用' target='_blank'><span>万维</span><span>广告</span></a></div><a class='wwads-hide' onclick='parentNode.remove()' title='隐藏广告'><svg xmlns='http://www.w3.org/2000/svg' width='6' height='7'><path d='M.879.672L3 2.793 5.121.672a.5.5 0 11.707.707L3.708 3.5l2.12 2.121a.5.5 0 11-.707.707l-2.12-2.12-2.122 2.12a.5.5 0 11-.707-.707l2.121-2.12L.172 1.378A.5.5 0 01.879.672z'></path></svg></a>")
+        }
+      }
+    };
+
+    // check document ready
+    function docReady(t) {
+      document.readyState === 'complete' ||
+      document.readyState === 'interactive'
+        ? setTimeout(t, 1)
+        : document.addEventListener('DOMContentLoaded', t)
+    }
+
+    // check if wwads' fire function was blocked after document is ready with 3s timeout (waiting the ad loading)
+    docReady(function () {
+      setTimeout(function () {
+        if (window._AdBlockInit === undefined) {
+          ABDetected()
+        }
+      }, 3000)
+    })
+  }, [])
+  return null
+}

components/CommonScript.js

@@ -38,6 +38,8 @@ const CommonScript = () => {
       />
     </>)}
 
+    {BLOG.AD_WWADS_ID && <script type="text/javascript" charSet="UTF-8" src="https://cdn.wwads.cn/js/makemoney.js" async></script>}
+
     {BLOG.COMMENT_CUSDIS_APP_ID && <script defer src={`https://cusdis.com/js/widget/lang/${BLOG.LANG.toLowerCase()}.js`} />}
 
     {BLOG.COMMENT_TWIKOO_ENV_ID && <script defer src={BLOG.COMMENT_TWIKOO_CDN_URL}/> }

components/ExternalPlugins.js

@@ -32,7 +32,7 @@ const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr:
 const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false })
 const CustomContextMenu = dynamic(() => import('@/components/CustomContextMenu'), { ssr: false })
 const DisableCopy = dynamic(() => import('@/components/DisableCopy'), { ssr: false })
-
+const AdBlockDetect = dynamic(() => import('@/components/AdBlockDetect'), { ssr: false })
 /**
  * 各种第三方组件
  * @param {*} props
@@ -59,6 +59,7 @@ const ExternalPlugin = (props) => {
           {JSON.parse(BLOG.CUSTOM_RIGHT_CLICK_CONTEXT_MENU) && <CustomContextMenu {...props} />}
           {!JSON.parse(BLOG.CAN_COPY) && <DisableCopy/>}
           {JSON.parse(BLOG.WEB_WHIZ_ENABLED) && <WebWhiz/>}
+          {JSON.parse(BLOG.AD_WWADS_BLOCK_DETECT) && <AdBlockDetect/>}
           <VConsole/>
       </>
 }

components/GoogleAdsense.js

@@ -9,10 +9,6 @@ import { useEffect } from 'react'
  */
 export default function GoogleAdsense() {
   const initGoogleAdsense = () => {
-    // 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" />}
-
     loadExternalResource(`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.ADSENSE_GOOGLE_ID}`, 'js').then(url => {
       setTimeout(() => {
         const ads = document.getElementsByClassName('adsbygoogle')
@@ -21,7 +17,6 @@ export default function GoogleAdsense() {
           for (let i = 0; i <= ads.length; i++) {
             try {
               adsbygoogle.push(ads[i])
-            //   console.log('adsbygoogle', i, ads[i], adsbygoogle)
             } catch (e) {
 
             }

components/WWAds.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+
+/**
+ * 万维广告插件
+ * @param {string} orientation - 广告方向，可以是 'vertical' 或 'horizontal'
+ * @param {boolean} sticky - 是否粘性定位
+ * @returns {JSX.Element | null} - 返回渲染的 JSX 元素或 null
+ */
+export default function WWAds({ orientation = 'vertical', sticky = false, className }) {
+  if (!JSON.parse(BLOG.AD_WWADS_ID)) {
+    return null
+  }
+
+  return (
+    <div className={`wwads-cn ${orientation === 'vertical' ? 'wwads-vertical' : 'wwads-horizontal'} ${sticky ? 'wwads-sticky' : ''} z-30 ${className || ''}`} data-id={BLOG.AD_WWADS_ID}></div>
+  )
+}

themes/gitbook/components/Catalog.js

@@ -62,7 +62,7 @@ const Catalog = ({ post }) => {
   }
 
   return <>
-    <div id='toc-wrapper' className='toc-wrapper overflow-y-auto max-h-96 overscroll-none scroll-hidden'>
+    <div id='toc-wrapper' className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>
       <nav className='h-full  text-black'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)

themes/gitbook/components/MenuBarMobile.js

@@ -32,7 +32,7 @@ export const MenuBarMobile = (props) => {
   return (
     <nav id='nav' className=' text-md'>
         {/* {links.map(link => <NormalMenu key={link?.id} link={link}/>)} */}
-        {links?.map(link => <MenuItemCollapse onHeightChange={props.onHeightChange} key={link?.id} link={link}/>)}
+        {links?.map((link, index) => <MenuItemCollapse onHeightChange={props.onHeightChange} key={index} link={link}/>)}
 
     </nav>
   )

themes/gitbook/components/MenuItemCollapse.js

@@ -47,8 +47,8 @@ export const MenuItemCollapse = (props) => {
 
         {/* 折叠子菜单 */}
         {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link?.subMenus?.map(sLink => {
-              return <div key={sLink.id} className='
+            {link?.subMenus?.map((sLink, index) => {
+              return <div key={index} className='
               not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-200
               font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>

themes/gitbook/components/TopNavBar.js

@@ -64,7 +64,7 @@ export default function TopNavBar(props) {
 
                 {/* 桌面端顶部菜单 */}
                 <div className='hidden md:flex'>
-                    {links && links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
+                    {links && links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
                     <DarkModeButton className='text-sm flex items-center h-full' />
                 </div>
             </div>

themes/gitbook/index.js

@@ -34,6 +34,8 @@ import CommonHead from '@/components/CommonHead'
 import BlogArchiveItem from './components/BlogArchiveItem'
 import BlogPostListPage from './components/BlogPostListPage'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
+const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
 // 主题全局变量
 const ThemeGlobalGitbook = createContext()
@@ -92,6 +94,7 @@ const LayoutBase = (props) => {
                         <div id='container-inner' className='w-full px-7 max-w-3xl justify-center mx-auto'>
                             {slotTop}
                             <AdSlot type='in-article' />
+                            <WWAds className='w-full' orientation='horizontal'/>
 
                             <Transition
                                 show={!onLoading}
@@ -107,7 +110,10 @@ const LayoutBase = (props) => {
                                 {children}
                             </Transition>
 
+                            {/* Google广告 */}
                             <AdSlot type='in-article' />
+                            <WWAds className='w-full' orientation='horizontal'/>
+
                             {/* 回顶按钮 */}
                             <JumpToTopButton />
                         </div>
@@ -126,8 +132,9 @@ const LayoutBase = (props) => {
                         <div className='py-14 px-6 sticky top-0'>
                             <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
-                            <div className='py-6'>
+                            <div className='py-4'>
                                 <Catalog {...props} />
+                                <WWAds/>
                                 {slotRight}
                                 {router.route === '/' && <>
                                     <InfoCard {...props} />
@@ -236,6 +243,7 @@ const LayoutSlug = (props) => {
                     {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />}
 
                     <AdSlot />
+                    <WWAds className='w-full' orientation='horizontal'/>
 
                     <Comment frontMatter={post} />
                 </section>)}