add horizontal ad

Author: ForteScarlet

index.html

@@ -16,6 +16,14 @@
             s.parentNode.insertBefore(hm, s);
         })();
     </script>
+    <script>
+        window['addAds'] = function(){
+            let childList = document.getElementsByClassName('gads');
+            for (let i = 0; i < childList.length; i++) {
+                (adsbygoogle = window.adsbygoogle || []).push({});
+            }
+        }
+    </script>
 
 </head>
 <!-- Google tag (gtag.js) -->

src/components/Index.vue

@@ -5,9 +5,11 @@
         <n-layout-header bordered>
           <HomeHead @theme-active-change="onThemeActiveChange" :init-theme-active-value="initThemeActiveValue"/>
         </n-layout-header>
+
         <n-layout position="absolute" style="top: 150px; bottom: 64px" :native-scrollbar="false"
                   :content-style="layoutCenterContentStyle">
 
+          <HorizontalAdUnit />
           <n-collapse :default-expanded-names="[...collapseActions]" @item-header-click="handleItemHeaderClick">
             <n-card embedded :bordered="false">
               <n-collapse-item name="KDoc">
@@ -58,7 +60,6 @@
             </n-card>
           </n-collapse>
 
-
         </n-layout>
         <n-layout-footer
               bordered
@@ -95,6 +96,7 @@ import {BookOutline, HeartOutline} from '@vicons/ionicons5'
 import {Icon} from "@vicons/utils";
 import HomeFooter from "./HomeFooter.vue";
 import ShowCards from "./show/ShowCards.vue";
+import HorizontalAdUnit from "./ad/HorizontalAdUnit.vue";
 
 const layoutCenterContentStyle = reactive({
     'padding-left': '50px',

src/components/ad/HorizontalAdUnit.vue

@@ -0,0 +1,24 @@
+<script setup>
+import {onMounted} from "vue";
+
+onMounted(() => {
+  try {
+    window.addAds()
+    console.log('Ads HorizontalAdUnit loaded')
+  } catch (e) {
+    console.log(e)
+  }
+})
+
+</script>
+
+<!-- 横向展示广告单元 -->
+<template>
+  <!-- 横向展示广告 -->
+  <ins class="adsbygoogle"
+       style="display:block"
+       data-ad-client="ca-pub-4062299174917944"
+       data-ad-slot="5610367324"
+       data-ad-format="auto"
+       data-full-width-responsive="true"></ins>
+</template>