广告

主题支持自定义广告以及 AdSense，共用了 AdItem 组件，可以通过 VitePress 默认主题的布局插槽，将广告内容插入到对应位置

自定义广告

每一个广告必须填写 title img 。title 为广告的标题，鼠标悬停时会进行展示；img 为广告的图片；link 为广告的链接，可选

export interface IAd {
  title: string;
  img: string;
  link?: string;
}

通过给 AdItem 组件传入 custom 即可开启自定义广告，type 可选 'sidebar' | 'aside' | 'doc'，建议与插槽位置保持一致，用于控制广告边距

提示

除了给 ad 数组传入对象外，你还可以传入嵌套数组

• 若数组中的元素为 IAd 对象，广告将按顺序全部展示
• 若数组中的元素为 IAd 数组，则在该嵌套数组中随机展示其中一个广告

<template>
  <Layout>
    <template #doc-after>
      <AdItem :custom="ad" type="doc" />
    </template>
  </Layout>
</template>

<script lang="ts" setup>
import DefaultTheme from 'vitepress/theme';
import AdItem from '/src/components/AdItem.vue';
import type { IAd, IAdsense } from '/src/types.ts';

const { Layout } = DefaultTheme;
  
const ad: (IAd | IAd[])[] = [
  [
    {
      title: '百度',
      img: 'https://image.baidu.com/image.png',
      link: 'https://baidu.com'
    },
    {
      title: '谷歌',
      img: 'https://image.google.com/image.png',
      link: 'https://google.com'
    }
  ]
];
</script>

AdSense

开启 AdSense 需要填入 clinet 与 slot，clinet 为 AdSense 账号的 client，slot 为广告单元的 slot 值

export interface IAdsense {
  client: string;
  slot: string;
}

通过给 AdItem 组件传入 adsense 即可开启 Google Adsense 广告，type 可选 'sidebar' | 'aside' | 'doc'，建议与插槽位置保持一致，用于控制广告边距

<template>
  <Layout>
    <template #doc-after>
      <AdItem :adsense="adsense" type="doc" />
    </template>
  </Layout>
</template>

<script lang="ts" setup>
import DefaultTheme from 'vitepress/theme';
import AdItem from '/src/components/AdItem.vue';
import type { IAdsense } from '/src/types.ts';

const { Layout } = DefaultTheme;

const adsense: IAdsense = {
  client: 'XXXX',
  slot: 'XXXX'
};
</script>

此外，你还需要在 head 中添加 ['script', {}, "window['addAds'] = function(){\n (adsbygoogle = window.adsbygoogle || []).push({});\n}"]