前言
想让个人网站实现流量变现，接入谷歌广告（Google AdSense）是常见选择。今天就结合谷歌最新的政策，从前期准备到自定义广告，一步步讲解操作细节，帮你顺利开启网站变现之路。
一、2023 年后的域名政策
2023 年谷歌广告联盟调整了域名规则：主域名通过审核后，所有子域名自动可用，不用再单独申请配置。就像你给 “ example.com ” 办了 “通行证”，它的 “子成员”（www.example.com、blog.example.com 等）也能直接使用，不用再重复走审核流程。
但要注意两点：
- 申请时必须填写一级域名（比如 “example.com”，不能填 “blog.example.com”）；
- 子域名要能访问到 “ads.txt” 文件（后续审核会用到，谷歌会自动关联主域名的配置）。
二、前置准备
接入广告前，得先通过谷歌的审核，这个过程稍久，一般需要一月左右时间。
1. 第一步：进入谷歌广告联盟，注册账号
打开谷歌广告联盟官网（https://www.google.com/adsense），用你的谷歌账号登录（没有的话先注册一个）；点击 “Sign up”，依次填写一级域名（比如 “example.com”，务必准确）、收款地区（按实际地址选择），勾选服务条款后点击 “开始使用”。
这里要注意：域名必须是你自己所有，且网站已有一定内容（空白网站很难通过审核），内容要符合谷歌的政策（比如不能有违规、侵权内容）。
2. 第二步：完善资料，等待审核
登录后按提示完善账号资料（比如联系方式、收款信息），然后谷歌会开始审核你的网站 —— 这个过程像 “平台审核店铺资质”，需要耐心等待。
审核期间不用频繁操作，谷歌会通过邮件通知结果，只要网站内容合规、域名正确，基本都能通过。
3. 第三步：审核通过，准备接入
审核成功后，你会收到谷歌的确认邮件，此时账号已激活，接下来就能开始在网站中接入广告代码了。
三、两种接入方式：自动广告 vs 自定义广告，按需选择
谷歌广告提供 “自动” 和 “自定义” 两种接入方式：
方式一：自动广告 —— 零手动操作，谷歌帮你搞定
如果不想花时间调整广告位置，自动广告是最佳选择，只需在网页头部加一段代码，谷歌会自动分析网站布局，在合适位置插入广告：
操作步骤（以 VitePress 为例）：
在 VitePress 的站点配置文件（通常是config.js）中，找到head配置项，添加以下代码（替换成你的专属src链接）：
export default defineConfig({
// 其他配置省略...
head: [
// Google adsense 自动广告代码
['script', {
async: 'async',
// 替换成你的专属src（从谷歌广告后台获取）
src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx',
crossorigin: 'anonymous',
}],
// ...
]
// ...
})
生效时间：
配置完成并部署网站后，最多 1 小时就能看到广告 —— 谷歌会根据页面内容和访客行为，自动优化广告位置和类型，不用你手动调整，非常省心。
方式二：自定义广告 —— 精准控制广告位置，适配网站风格
如果想让广告更贴合网站布局（比如插入文章中间、侧边栏），可以创建 “广告单元”，自定义位置和样式：
第一步：创建广告单元，获取代码
- 登录谷歌广告后台，进入 “按广告单元” 标签页，点击 “创建广告单元”；
- 选择广告类型（比如 “文章内嵌广告”“展示广告”），设置名称、尺寸等参数，完成后获取广告代码 —— 代码分 3 部分：一段
script、一段ins标签、另一段script。
注意：第一段script和自动广告中的代码一致，如果已配置自动广告，这部分可以省略。
第二步：在 VitePress 中配置全局函数
为了在 Vue 组件中调用广告代码（Vue 模板不允许直接插入script），先在config.js的head中添加全局函数：
export default defineConfig({
// 其他配置省略...
head: [
// Google adsense 自定义广告全局函数
['script', {},
`
window['addAds'] = function(){
(adsbygoogle = window.adsbygoogle || []).push({});
}
`],
// ...
]
// ...
})
第三步：创建广告组件（以文章内嵌广告为例）
在 VitePress 主题目录下，新建AdUnitForInArticle.vue组件，写入以下代码（data-ad-client替换成你的账号信息）：
<script setup>
import { onMounted ,defineProps } from 'vue'
const props = defineProps({
dataAdSlot: {
default: "",
type: String,
},
});
onMounted(() => {
try {
window.addAds()
console.log('AdUnit loaded')
} catch (e) {
console.log(e)
}
})
</script>
<!-- 文章内嵌广告组件 -->
<template>
<div class="gads">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="xxxxxxxxxxxxxxxxxxxxxx" <!-- 替换成你的data-ad-client -->
:data-ad-slot="dataAdSlot"></ins> <!-- data-ad-slot从广告单元获取 -->
</div>
</template>
第四步：全局注册组件，方便调用
在docs.vitepress\theme\index.js中注册组件，让所有页面都能使用：
import DefaultTheme from 'vitepress/theme'
import AdUnitForInArticle from '../component/AdUnitForInArticle.vue'
export default {
...DefaultTheme,
enhanceApp({ app, router, siteData }) {
app.component('AdUnitForInArticle', AdUnitForInArticle) // 注册全局组件
},
}
第五步：在文章中引用广告
在 Markdown 文章中，想插入广告的位置调用组件即可（data-ad-slot替换成你的广告单元 ID）：
这是广告上面的文字
<AdUnitForInArticle :data-ad-slot="xxxx"/> <!-- 替换成你的data-ad-slot -->
这是广告下面的文字
四、常见问题
主域名开启了自动广告，所有子域名都默认显示，但想让某个子域名（比如 “admin.example.com”）不显示自动广告，应该怎么办？
通过谷歌广告设置中排除掉指定页面：
五、总结
接入谷歌广告的核心逻辑很简单：先通过主域名审核，再根据需求，选择自动广告或自定义广告。
- 想快速上手、不用调整位置：选自动广告，加一段代码就行；
- 想让广告贴合网站布局：选自定义广告，按 “创建单元→配组件→调用” 的步骤来；
- 子域名想关广告：通过排除指定页面实现。
按本文的步骤操作，不用复杂技术也能顺利接入，后续只需关注广告收益和内容合规，让个人网站不仅能分享内容，还能实现流量变现。
