如何在Docusaurus网页正文区域添加AdSense广告单元？解决代码粘贴后的语法错误问题

当然可以在Docusaurus构建的网页正文区域嵌入AdSense广告！你碰到的Uncaught SyntaxError错误，本质是直接把AdSense原生脚本粘贴到Markdown中时，Docusaurus的MDX解析器会自动转义脚本内容，破坏了原本的语法结构。下面是两个经过验证的靠谱解决办法：

方案1：自定义React组件（最推荐，灵活可控） #

Docusaurus原生支持MDX，把AdSense封装成React组件是最稳妥的方式——既能避免解析错误，还能在多个页面复用广告单元，方便统一调整样式。

步骤1：创建AdSense组件 #

在项目的src/components目录下新建AdSense.js文件，代码如下：

import React, { useEffect } from 'react';

const AdSense = ({ adClient, adSlot, format = 'auto', responsive = true }) => {
  useEffect(() => {
    // 全局只加载一次AdSense脚本，避免重复请求
    if (!window.adsbygoogle) {
      const script = document.createElement('script');
      script.async = true;
      script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
      document.body.appendChild(script);
    }

    // 初始化当前广告单元
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, [adClient, adSlot]);

  return (
    <ins
      className="adsbygoogle"
      style={{ display: 'block', margin: '2rem 0' }} // 可自定义广告上下间距
      data-ad-client={adClient}
      data-ad-slot={adSlot}
      data-ad-format={format}
      data-full-width-responsive={responsive ? 'true' : 'false'}
    />
  );
};

export default AdSense;

步骤2：在Markdown页面中调用组件 #

在需要插入广告的Markdown（或MDX）文件里，先导入组件，再在正文合适的位置插入：

---
title: 我的示例页面
---

# 欢迎来到我的技术博客

这里是页面的开头内容，先介绍一下本文的主题...

import AdSense from '@site/src/components/AdSense';

<AdSense adClient="ca-pub-1234567890" adSlot="9876543210" />

这里是广告下方的正文内容，继续讲解相关技术细节...

记得把代码里的ca-pub-xxx和广告单元ID替换成你自己的AdSense账号信息。

方案2：直接嵌入HTML（适合快速测试） #

如果不想写组件，也可以直接在Markdown里嵌入HTML代码，但要注意包裹结构，避免MDX解析报错：

<div style="margin: 2rem 0;">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-你的客户端ID"
       data-ad-slot="你的广告单元ID"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

不过这种方式在复杂页面中可能出现解析问题，所以更推荐方案1。

重要注意事项 #

• 确保你的AdSense账号已经通过审核，且网站已被AdSense收录，否则广告不会正常显示。
• 不要重复加载adsbygoogle.js脚本，方案1的组件已经做了判断，只会加载一次，避免不必要的性能消耗。
• 严格遵守AdSense的政策，不要在违规位置放置广告（比如内容之外的无关区域）。
• 测试时如果广告不显示，可以使用AdSense提供的测试广告单元调试，避免触发账号风险。

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