标题下面插入广告

src/components/Carbon/index.tsx

import { useEffect } from 'react';
import './index.css';

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

export default function Carbon({
  code = 'CEAIV23U',
  placement = 'wwwjest-previewcom',
  querySelector = 'h1',
  customStyle = 'min-height: 100px; margin: 20px 0;',
}) {
  useEffect(() => {
    try {
      var targetElement = document.querySelector(querySelector);
      const s = document.createElement('script');
      s.id = '_carbonads_js';
      s.src = `//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`;
      // Add a container below h1 to avoid layout shift
      const mountContainer = document.createElement('div');
      mountContainer.setAttribute('style', customStyle);
      insertAfter(targetElement, mountContainer);
      // Mount carbon as a child of mountContainer
      mountContainer.appendChild(s);
    } catch (error) {
      console.error(error);
    }
  }, []);
  return null;
}

然后修改DocItem模板“src\theme\DocItem\Content\index.js”，引入<Carbon />

该代码是一个React组件，用于在网页的H1标题下面插入Carbon广告。Carbon是一个广告服务，可以在网页上显示相关的广告内容。

组件接受以下props参数：

• code：Carbon广告的代码。默认为"CEAIV23U"。
• placement：广告的展示位置。默认为"wwwjest-previewcom"。
• querySelector：选择目标元素的CSS选择器。默认为"h1"，表示选择页面中的第一个h1元素作为目标元素。
• customStyle：自定义样式，应用于插入的广告容器。默认为"min-height: 100px; margin: 20px 0;"。

在组件的实现中，使用了React的useEffect钩子函数来在组件挂载后执行代码。在useEffect回调函数中，首先通过document.querySelector方法选择目标元素，然后创建一个<script>元素，设置其id为"_carbonads_js"，并将Carbon广告的脚本地址赋值给其src属性。接下来，创建一个容器元素<div>，设置其样式为customStyle指定的自定义样式，然后通过insertAfter函数将容器插入到目标元素的后面，以避免页面布局的变动。最后，将广告脚本作为容器的子元素进行挂载。

整个组件的作用就是在指定的目标元素后插入一个容器，并在容器中加载Carbon广告的脚本，从而在页面上显示广告内容。

请注意，该代码是使用React编写的，如果要在非React项目中使用，需要进行相应的调整。

这是客户端加载广告吗？

是的，这段代码是在客户端（浏览器）加载广告的代码。在React组件的useEffect钩子函数中，通过动态创建<script>元素并设置其src属性为Carbon广告的脚本地址，然后将该<script>元素插入到页面中的特定位置，从而实现在客户端加载广告内容。

当React组件被渲染并挂载到页面上时，useEffect钩子函数会被调用，此时会执行插入广告的逻辑。通过动态创建<script>元素并设置其src属性，浏览器会向指定的广告服务地址发送请求，获取广告脚本，并将其执行，从而在页面上展示广告内容。

因此，这段代码在客户端运行，用于在浏览器中加载并展示广告。

意思是，本来的页面中，是没有广告的内容的，等待原本页面加载后，这段代码，打乱了原来的布局，强行插入了这段广告代码？

是的，这段代码的作用是在原本的页面布局中插入广告内容。通过选择目标元素（默认是第一个h1元素），在该元素后插入一个容器，然后将广告脚本加载到这个容器中。

插入广告的过程可能会对原本的页面布局产生一定的影响，具体效果取决于容器的样式和页面布局的复杂程度。在这段代码中，通过自定义样式customStyle来设置容器的大小和边距，以尽量减小对原本布局的影响。但仍然可能导致页面元素的位置发生变化或产生一定的布局错乱。

需要注意的是，这段代码的目的是向页面中插入广告内容，这可能会对原本的用户体验产生影响。在使用这种方式插入广告时，应该谨慎考虑广告与页面布局的兼容性，以及对用户体验的影响。

如果不显示H1标题，那么这段代码会执行吗

如果页面中没有h1标题元素，那么这段代码在默认情况下不会执行。这是因为代码中使用了querySelector方法来选择第一个h1元素，如果找不到匹配的元素，后续的代码逻辑就不会执行。

如果你想在没有h1标题元素的情况下仍然执行这段代码，你可以做一些修改。例如，你可以选择其他元素作为目标元素，或者使用其他方式确定插入广告的位置。你可以根据你的具体需求和页面结构进行相应的调整，确保代码能够在正确的位置插入广告。