Home
Google AdSense
VitePress

如何在 VitePress 博客中优雅地接入 Google AdSense 广告：从自动广告到踩坑避雷

只有静态页面也能赚钱？本文详细记录了在 VitePress (Vue 3) 博客中添加 Google AdSense 的两种方式（自动与手动插槽），并分享了关于 ads.txt 部署在 Cloudflare 上的 404 避坑经验。
08yt

我搭建好了基于 VitePress 的一个机场 - 免费推荐机场的技术博客，流量也日益增长，经过3个月的奋战，终于在11月27日，通过了GoogleAdSense的审核。

一个机场网站通过AdSense审核

现在是时候接入 Google AdSense 进行变现了。

虽然 VitePress 生成的是静态网站，但由于其底层是 Vue 的单页应用 (SPA) 机制，且涉及服务端渲染 (SSR)，直接粘贴广告代码往往会遇到“window未定义”报错或者路由切换后广告不加载的问题。

本文记录了我将 AdSense 接入 VitePress 的完整流程，以及一个困扰我很久的 ads.txt 细节问题。

一、 准备工作

在开始之前，你需要：

  1. 一个通过审核的 Google AdSense 账号。

  2. 获取你的 发布商 ID (格式如 ca-pub-xxxxxxxxxxxxxxxx)。

二、 方案选择：自动广告 vs 手动单元

VitePress 接入主要有两种流派：

  1. 全局自动广告：最简单，Google 自动决定在哪里插广告（可能会破坏页面美感）。

  2. 组件化手动广告：最可控，利用 VitePress 的插槽（Slot），只在侧边栏、文章底部显示。

我建议 两者结合：开启自动广告的锚定功能（底栏），同时在文章底部手动插入横幅。

三、 实施步骤

1. 注入核心代码 (全局配置)

无论哪种方式，都需要先引入 AdSense 的 JS 库。修改 .vitepress/config.mts 文件：

TypeScript

// .vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
  // ...
  head: [
    [
      'script',
      {
        async: '',
        src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-你的发布商ID',
        crossorigin: 'anonymous'
      }
    ],
    // 验证所有权（可选，但在审核期建议加上）
    [
      'meta', 
      { name: 'google-adsense-account', content: 'ca-pub-你的发布商ID' }
    ]
  ]
})

2. 创建防报错的 Vue 广告组件

为了防止在构建（Build）过程中因为找不到 window 对象而报错，我们需要封装一个 Vue 组件。

在 .vitepress/theme/components/ 下新建 GoogleAd.vue：

代码段

<script setup>
import { onMounted } from 'vue'

const props = defineProps({
  slotId: String // 在 AdSense 后台创建的广告单元 ID
})

onMounted(() => {
  // 核心逻辑：只在客户端挂载后执行，请求广告
  try {
    (window.adsbygoogle = window.adsbygoogle || []).push({})
  } catch (e) {
    console.error('AdSense load error:', e)
  }
})
</script>

<template>
  <div class="google-ad-container">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-你的发布商ID" 
         :data-ad-slot="slotId"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
  </div>
</template>

<style scoped>
.google-ad-container {
  margin: 2rem 0;
  text-align: center;
}
</style>

3. 利用 Layout 插槽插入广告

接下来，把这个组件放到文章底部。修改 .vitepress/theme/index.ts：

TypeScript

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import GoogleAd from './components/GoogleAd.vue'
import { h } from 'vue'

export default {
  extends: DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      // doc-after 表示在文章正文结束后，评论区之前
      'doc-after': () => h(GoogleAd, { slotId: '1234567890' }), // 换成你的广告单元ID
    })
  }
}

 
网站底部广告效果

四、 踩坑实录：Ads.txt 的 404 之谜

配置完代码后，AdSense 后台一直提示“收益受损风险：您需要修复 ads.txt 问题”。

这里的坑在于：文件位置与文件名大小写。

  1. 文件位置：

    VitePress 的静态资源必须放在 public 文件夹内。

    • 错误位置：直接放在项目根目录。

    • 正确位置：.vitepress/public/ads.txt。

    这样构建后，它才会出现在 https://yourdomain.com/ads.txt。

  2. 文件名大小写（最容易忽视！）：

    我的网站部署在 Cloudflare Pages 上（基于 Linux 环境）。

    起初，我创建的文件名是 Ads.txt（首字母大写）。

    结果就是：

    • GitHub 仓库里有文件。

    • Cloudflare 部署成功。

    • 但是浏览器访问 ygjc.cc/ads.txt 报 404 错误！

    原因：Linux 系统严格区分大小写。AdSense 只会去爬取全小写的 /ads.txt，而服务器上只有 /Ads.txt，所以找不到。

     

    ads.txt的文件名一定要小写

    解决方法：将文件名重命名为全小写 ads.txt，重新推送部署，问题瞬间解决。

五、 总结

在 VitePress 上部署广告并不复杂，关键在于：

  1. SSR 适配：用 onMounted 确保广告代码仅在客户端运行。

  2. 规范放置：静态文件必须进 public 目录。

  3. 细节决定成败：ads.txt 必须全小写。

希望这篇实战记录能帮到同样在使用 VitePress 的你！

Post a Comment