improve carbon ads

docs/.vitepress/theme/components/VPCarbonAds.vue

@@ -6,6 +6,7 @@ import { useData } from 'vitepress/dist/client/theme-default/composables/data'
 const { page } = useData()
 const props = defineProps<{
   carbonAds: DefaultTheme.CarbonAdsOptions
+  variant?: 'sidebar' | 'mobile-bottom'
 }>()
 
 const carbonOptions = props.carbonAds
@@ -35,7 +36,22 @@ watch(() => page.value.relativePath, () => {
 // refresh the page
 if (carbonOptions) {
   onMounted(() => {
-    init()
+    // Explicitly check variant to prevent ID conflicts
+    const isMobile = window.matchMedia('(max-width: 1280px)').matches
+    
+    if (props.variant === 'sidebar' && isMobile) {
+      return
+    }
+    
+    if (props.variant === 'mobile-bottom' && !isMobile) {
+      return
+    }
+
+    // Only initialize if the container is visible to avoid ID conflicts
+    // with other instances (e.g. sidebar vs bottom)
+    if (container.value && container.value.offsetParent !== null) {
+      init()
+    }
   })
 }
 </script>

docs/.vitepress/theme/components/VPDocAside.vue

@@ -46,6 +46,7 @@ const isZh = computed(() => {
     <VPCarbonAds 
       v-if="isPost && theme.carbonAds && isAsideEnabled" 
       :carbon-ads="theme.carbonAds" 
+      variant="sidebar"
     />
 
     <slot name="aside-outline-before" />

docs/.vitepress/theme/index.ts

@@ -41,7 +41,10 @@ export default {
         if (isZh.value) {
           return h('div', { class: 'mobile-only-ads' }, h(WWAds))
         } else if (theme.value.carbonAds) {
-          return h('div', { class: 'mobile-only-ads' }, h(VPCarbonAds, { carbonAds: theme.value.carbonAds }))
+          return h('div', { class: 'mobile-only-ads' }, h(VPCarbonAds, { 
+            carbonAds: theme.value.carbonAds,
+            variant: 'mobile-bottom'
+          }))
         }
         return null
       }