docs: google adsense & google analytics

docs/.vitepress/config.ts

@@ -15,6 +15,31 @@ export default defineConfig({
     //     content: "/logo.png",
     //   },
     // ],
+    // Google Analytics
+    [
+      'script',
+      {
+        async: '',
+        src: `https://www.googletagmanager.com/gtag/js?id=G-GBE9KNFWLS`,
+      },
+    ],
+    [
+      'script',
+      {},
+      `window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-GBE9KNFWLS');`,
+    ],
+    // Google AdSense
+    [
+      'script',
+      {
+        async: '',
+        crossorigin: 'anonymous',
+        src: `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3102250747488251`,
+      },
+    ],
   ],
   locales: {
     root: {

docs/.vitepress/theme/VAd.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// https://github.com/Justin3go/justin3go.github.io/commit/13a08c192be464f2052efd8f1da9547d4184eede
+// https://juejin.cn/post/7363078360786370599
+import { nextTick, onMounted } from 'vue';
+
+defineOptions({
+  name: 'VAd',
+});
+
+onMounted(() => {
+  nextTick(() => {
+    const script = document.createElement('script');
+    script.innerHTML = `(adsbygoogle = window.adsbygoogle || []).push({});`;
+    document.querySelector('#google-ads')!.append(script);
+  });
+});
+</script>
+
+<template>
+  <div id="google-ads">
+    <ins
+      class="adsbygoogle"
+      data-ad-client="ca-pub-3102250747488251"
+      data-ad-format="auto"
+      data-ad-slot="3708961821"
+      data-full-width-responsive="true"
+      style="display: block"
+    ></ins>
+  </div>
+</template>
+
+<style scoped>
+#google-ads {
+  padding: 12px;
+  border-left: 1px solid var(--vp-c-divider);
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,8 +1,23 @@
 // https://vitepress.dev/guide/custom-theme
-import type { Theme } from "vitepress";
-import DefaultTheme from "vitepress/theme";
-import "./custom.css";
+import type {EnhanceAppContext, Theme} from 'vitepress'
+import DefaultTheme from 'vitepress/theme';
+import { h } from 'vue';
+import VAd from './VAd.vue';
+import './custom.css';
 
 export default {
   extends: DefaultTheme,
+
+  enhanceApp(ctx: EnhanceAppContext) {
+    ctx.app.component('VAd', VAd)
+    DefaultTheme.enhanceApp(ctx);
+  },
+
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      // 添加广告
+      'aside-bottom': () => [h(VAd)],
+    });
+  },
+
 } satisfies Theme;