广告

主题支持自定义广告以及 AdSense，通过 VitePress 默认主题的布局插槽，将广告内容插入到对应位置，目前支持在 sidebar aside doc 的前后插入广告

自定义广告

通过 .vitepress/config.ts 文件中的 ads 属性可以开启自定义广告，示例代码如下：

// .vitepress/config.ts
export default defineConfigWithTheme<ThemeConfig>({
  themeConfig: {
    ads: {
      docAfter: [
        {
          title: '关注微信公众号',
          img: 'https://minio.zhichao.org/assets/wechat-big.png'
        }
      ]
    }
  }
});

你可以通过修改 docAfter 来将广告展示在不同位置，支持的所有位置参考下方接口定义。

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

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

interface IAds {
  sidebarNavBefore?: (IAd | IAd[])[];
  sidebarNavAfter?: (IAd | IAd[])[];
  asideOutlineBefore?: (IAd | IAd[])[];
  asideOutlineAfter?: (IAd | IAd[])[];
  docBefore?: (IAd | IAd[])[];
  docAfter?: (IAd | IAd[])[];
}

小知识：除了给 docAfter 数组传入对象外，你还可以传入嵌套数组

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

AdSense

通过 .vitepress/config.ts 文件中的 adsense 属性可以开启 AdSense，示例代码如下：

// .vitepress/config.ts
export default defineConfigWithTheme<ThemeConfig>({
  themeConfig: {
    adsense: {
      client: '<clinet>',
      docAfter: '<slot>'
    }
  }
});

你可以通过修改 docAfter 来将广告展示在不同位置，支持的所有位置参考下方接口定义。

如需开启 AdSense 必须填入 clinet，该值为 AdSense 账号的 client，然后，你还需要将广告单元的 slot 值填入对应的位置，如 docAfter

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

interface IAdsense {
  client?: string;
  sidebarNavBefore?: string;
  sidebarNavAfter?: string;
  asideOutlineBefore?: string;
  asideOutlineAfter?: string;
  docBefore?: string;
  docAfter?: string;
}