如何在Docusaurus项目中集成Google AdSense实现变现？

一、全局注入AdSense核心脚本（推荐） #

通过自定义主题的Layout组件，在全站页面的head中加载AdSense基础脚本，确保广告功能全局可用：

1. 先将官方主题的Layout组件复制到本地自定义目录：

docusaurus swizzle @docusaurus/theme-classic Layout --danger

2. 打开src/theme/Layout.js，在组件最外层添加AdSense脚本：

import React from 'react';
import Layout from '@theme-original/Layout';

export default function LayoutWrapper(props) {
  return (
    <>
      {/* 替换为你的AdSense发布者ID */}
      <script 
        async 
        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXX"
        crossorigin="anonymous"
      ></script>
      <Layout {...props} />
    </>
  );
}

二、在指定页面/Markdown中插入广告单元 #

全局加载脚本后，可在需要展示广告的位置插入具体广告位代码：

方法1：封装成React组件复用 #

创建src/components/AdUnit.js：

import React, { useEffect } from 'react';

export default function AdUnit({ adSlot }) {
  useEffect(() => {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, []);

  return (
    <ins 
      className="adsbygoogle"
      style={{ display: 'block', margin: '2rem 0' }}
      data-ad-client="ca-pub-XXXXXXXXX"
      data-ad-slot={adSlot}
      data-ad-format="auto"
      data-full-width-responsive="true"
    ></ins>
  );
}

然后在Markdown/MDX文件中引入使用：

<AdUnit adSlot="你的广告位ID" />

方法2：直接在MDX中写入广告代码 #

如果是单个页面临时使用，可直接在MDX中添加：

<ins 
  className="adsbygoogle"
  style={{display:'block'}}
  data-ad-client="ca-pub-XXXXXXXXX"
  data-ad-slot="你的广告位ID"
  data-ad-format="auto"
></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

三、关键注意事项 #

• 确保你的网站已通过AdSense审核，未审核通过的站点不会展示广告
• 不要在localhost环境测试，AdSense默认不支持本地开发环境展示广告，需部署到生产域名后验证
• 检查发布者ID、广告位ID是否与AdSense后台完全一致，避免拼写错误
• 页面内容需符合AdSense政策，违规内容会导致广告无法展示

内容的提问来源于stack exchange，提问作者Ajay Dhangar