Add google adsense

zxuqian · May 20, 2021 · 996f5f2 · 996f5f2 · vercel · May 20, 2021
1 parent ad4be5e
commit 996f5f2
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 29 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,6 +1,7 @@
 const path = require("path");
 const math = require("remark-math");
 const katex = require("rehype-katex");
+const adsense = require("./src/plugin/remark-adsense");
 
 module.exports = {
   title: "峰华前端工程师",
@@ -197,7 +198,7 @@ module.exports = {
         docs: {
           sidebarPath: require.resolve("./sidebars.js"),
           editUrl: "https://github.com/zxuqian/zxuqian.cn/tree/master",
-          remarkPlugins: [math],
+          remarkPlugins: [math, adsense],
           rehypePlugins: [katex],
           showLastUpdateTime: true,
         },

diff --git a/package.json b/package.json
@@ -38,7 +38,10 @@
     "react-transition-group": "^4.4.1",
     "rehype-katex": "^4.0.0",
     "remark-math": "^3.0.1",
-    "styled-components": "^5.0.1"
+    "styled-components": "^5.0.1",
+    "unist-util-find": "^1.0.2",
+    "unist-util-find-after": "^4.0.0",
+    "unist-util-select": "^4.0.0"
   },
   "browserslist": {
     "production": [

diff --git a/src/components/Adsense/index.js b/src/components/Adsense/index.js
@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+
+function Adsense({
+  className = "adsbygoogle",
+  style = { display: "block" },
+  client = "ca-pub-3487507367729662",
+  slot,
+  layout,
+  layoutKey,
+  format,
+  responsive,
+}) {
+  useEffect(() => {
+    if (window) (window.adsbygoogle = window.adsbygoogle || []).push({});
+  }, []);
+
+  return (
+    <ins
+      className={className}
+      style={style}
+      data-ad-client={client}
+      data-ad-slot={slot}
+      data-ad-layout={layout}
+      data-ad-layout-key={layoutKey}
+      data-ad-format={format}
+      data-full-width-responsive={responsive}
+    ></ins>
+  );
+}
+
+export default Adsense;
diff --git a/src/plugin/plugin-google-adsense/index.js b/src/plugin/plugin-google-adsense/index.js
@@ -9,8 +9,7 @@ module.exports = function (context, options) {
             attributes: {
               "data-ad-client": "ca-pub-3487507367729662",
               defer: true,
-              src:
-                "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
+              src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
             },
           },
         ],

diff --git a/src/plugin/remark-adsense/index.js b/src/plugin/remark-adsense/index.js
@@ -0,0 +1,61 @@
+const visit = require("unist-util-visit");
+// const u = require("unist-builder");
+
+// const adsense = u("element", { tagName: "div" }, [
+//   u("element", {
+//     tagName: "script",
+//     properties: {
+//       async: true,
+//       src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
+//     },
+//   }),
+//   u("element", {
+//     tagName: "ins",
+//     properties: {
+//       className: "adsbygoogle",
+//       style: "display:block; text-align:center;",
+//       "data-ad-layout": "in-article",
+//       "data-ad-format": "fluid",
+//       "data-ad-client": "ca-pub-3487507367729662",
+//       "data-ad-slot": "3539166782",
+//     },
+//   }),
+//   u(
+//     "element",
+//     { tagName: "script" },
+//     "(adsbygoogle = window.adsbygoogle || []).push({});"
+//   ),
+// ]);
+
+const adsense = (slot) => ({
+  type: "html",
+  value: `<span>
+    <ins class="adsbygoogle"
+      style="display:block; text-align:center;"
+      data-ad-layout="in-article"
+      data-ad-format="fluid"
+      data-ad-client="ca-pub-3487507367729662"
+      data-ad-slot="${slot}"></ins>
+  <script>
+     (adsbygoogle = window.adsbygoogle || []).push({});
+  </script>
+</span>`,
+});
+
+module.exports = () => (tree, file) => {
+  visit(tree, "root", (node, index) => {
+    if (node.children && node.children.length > 10) {
+      node.children.splice(10, 0, adsense("3539166782"));
+      node.children.splice(node.children.length - 2, 0, adsense("1964508460"));
+      return visit.SKIP;
+    }
+    // if (index === 5) {
+    //   if (Array.isArray(node.children)) {
+    //     node.children.push(adsense);
+    //   } else {
+    //     node.children = [adsense];
+    //   }
+    //   return visit.SKIP;
+    // }
+  });
+};
diff --git a/src/theme/BlogListPage/index.js b/src/theme/BlogListPage/index.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from "react";
+import React, { useEffect } from "react";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
@@ -26,6 +26,7 @@ import Link from "@docusaurus/Link";
 import { useViewType } from "./useViewType";
 
 import Hero from "@site/src/components/Hero";
+import Adsense from "@site/src/components/Adsense";
 
 function BlogListPage(props) {
   const { metadata, items } = props;
@@ -109,25 +110,14 @@ function BlogListPage(props) {
                   <div className="bloghome__posts-card">
                     {items.map(({ content: BlogPostContent }, index) => (
                       // <Fade key={BlogPostContent.metadata.permalink}>
-                      <>
+                      <React.Fragment key={BlogPostContent.metadata.permalink}>
                         {(index + 1) % 3 === 0 && (
-                          <div key={index}>
-                            <script
-                              async
-                              src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
-                            ></script>
-                            <ins
-                              className="adsbygoogle"
-                              style={{ display: "block" }}
-                              data-ad-format="fluid"
-                              data-ad-layout-key="-em-35+j4-rj-3c"
-                              data-ad-client="ca-pub-3487507367729662"
-                              data-ad-slot="9557780226"
-                            ></ins>
-                            <script>
-                              (adsbygoogle = window.adsbygoogle || []).push({});
-                            </script>
-                          </div>
+                          <Adsense
+                            key={index}
+                            layoutKey="-em-35+j4-rj-3c"
+                            format="fluid"
+                            slot="9557780226"
+                          />
                         )}
                         <BlogPostItem
                           key={BlogPostContent.metadata.permalink}
@@ -142,12 +132,21 @@ function BlogListPage(props) {
                         >
                           <BlogPostContent />
                         </BlogPostItem>
-                      </>
+                      </React.Fragment>
                       // </Fade>
                     ))}
                   </div>
                 )}
-
+                {/* <div>
+                  <ins
+                    className="adsbygoogle"
+                    style={{ display: "block" }}
+                    data-ad-format="fluid"
+                    data-ad-layout-key="-em-35+j4-rj-3c"
+                    data-ad-client="ca-pub-3487507367729662"
+                    data-ad-slot="9557780226"
+                  ></ins>
+                </div> */}
                 {isListView && (
                   <div className="bloghome__posts-list">
                     {items.map(({ content: BlogPostContent }, index) => {
@@ -211,6 +210,7 @@ function BlogListPage(props) {
           </div>
         </div>
       </div>
+      <Adsense responsive="true" format="auto" slot="9797738783" />
     </Layout>
   );
 }

diff --git a/src/theme/BlogPostItem/index.js b/src/theme/BlogPostItem/index.js
@@ -28,6 +28,7 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 import Comments from "@site/src/components/Comments";
 import Ad from "@site/src/components/Ad";
 import adConfig from "@site/src/components/Ad/config";
+import Adsense from "@site/src/components/Adsense";
 
 import Translate from "@docusaurus/Translate";
 
@@ -221,9 +222,12 @@ function BlogPostItem(props) {
             )}
             {/* 标签 */}
             {isBlogPostPage && (
-              <div className="text--center margin-bottom--xs padding-bottom--xs">
-                {renderTags()}
-              </div>
+              <>
+                <div className="text--center margin-bottom--xs padding-bottom--xs">
+                  {renderTags()}
+                </div>
+                <Adsense responsive="true" format="auto" slot="2800800187" />
+              </>
             )}
 
             {/* 正文 */}
@@ -241,6 +245,9 @@ function BlogPostItem(props) {
                 ))}
               </div>
             )} */}
+            {isBlogPostPage && (
+              <Adsense responsive="true" format="auto" slot="4590671808" />
+            )}
           </article>
           <footer className="article__footer padding-top--md margin-top--lg margin-bottom--lg">
             {!isBlogPostPage && (

diff --git a/src/theme/TOC/index.js b/src/theme/TOC/index.js
@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import OriginalTOC from "@theme-original/TOC";
 import Ad from "../../components/Ad";
+import Adsense from "@site/src/components/Adsense";
 import adConfig from "../../components/Ad/config";
+
 import styles from "./styles.module.css";
 
 // import clsx from "clsx";
@@ -17,6 +19,9 @@ function TOC({ ...rest }) {
           <Ad key={id} link={link} src={imageSrc} alt={alt} />
         ))}
       </div> */}
+      <section>
+        <Adsense format="auto" responsive="true" slot="2034513429" />
+      </section>
     </div>
   );
 }

diff --git a/yarn.lock b/yarn.lock
@@ -4654,6 +4654,11 @@ css-select@^3.1.2:
     domutils "^2.4.3"
     nth-check "^2.0.0"
 
+css-selector-parser@^1.0.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.4.1.tgz#03f9cb8a81c3e5ab2c51684557d5aaf6d2569759"
+  integrity sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==
+
 css-to-react-native@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
@@ -7278,6 +7283,11 @@ lodash.foreach@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
   integrity sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=
 
+lodash.iteratee@^4.5.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz#be4177db289a8ccc3c0990f1db26b5b22fc1554c"
+  integrity sha1-vkF32yiajMw8CZDx2ya1si/BVUw=
+
 lodash.map@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
@@ -10695,16 +10705,42 @@ unist-util-find-after@^3.0.0:
   dependencies:
     unist-util-is "^4.0.0"
 
+unist-util-find-after@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-find-after/-/unist-util-find-after-4.0.0.tgz#1101cebf5fed88ae3c6f3fa676e86fd5772a4f32"
+  integrity sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
+unist-util-find@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-find/-/unist-util-find-1.0.2.tgz#4d5b01a69fca2a382ad4f55f9865e402129ecf56"
+  integrity sha512-ft06UDYzqi9o9RmGP0sZWI/zvLLQiBW2/MD+rW6mDqbOWDcmknGX9orQPspfuGRYWr8eSJAmfsBcvOpfGRJseA==
+  dependencies:
+    lodash.iteratee "^4.5.0"
+    unist-util-visit "^1.1.0"
+
 unist-util-generated@^1.0.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.5.tgz#1e903e68467931ebfaea386dae9ea253628acd42"
   integrity sha512-1TC+NxQa4N9pNdayCYA1EGUOCAO0Le3fVp7Jzns6lnua/mYgwHo0tz5WUAfrdpNch1RZLHc61VZ1SDgrtNXLSw==
 
+unist-util-is@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
+  integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
+
 unist-util-is@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.0.2.tgz#c7d1341188aa9ce5b3cff538958de9895f14a5de"
   integrity sha512-Ofx8uf6haexJwI1gxWMGg6I/dLnF2yE+KibhD3/diOqY2TinLcqHXCV6OI5gFVn3xQqDH+u0M625pfKwIwgBKQ==
 
+unist-util-is@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.1.0.tgz#93cab236c0d98e7c02265f6cfa3efe8b117a628c"
+  integrity sha512-pWspZ+AvTqYbC+xWeRmzGqbcY8Na08Eowlfs2xchWTYot8vBBAq+syrE/LWS0bw1D/JOu4lwzDbEb6Mz13tK+g==
+
 unist-util-position@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.1.0.tgz#1c42ee6301f8d52f47d14f62bbdb796571fa2d47"
@@ -10724,13 +10760,30 @@ unist-util-remove@^2.0.0:
   dependencies:
     unist-util-is "^4.0.0"
 
+unist-util-select@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-select/-/unist-util-select-4.0.0.tgz#8bd8ea171d937a56f56bf849861242a232d37466"
+  integrity sha512-UJsER0ubbBy8KR+5zZpcF/9/aApWOzjNqfseMjcw1h0wAUqbxAf56mMewspAqXtGKiwBylnYB+PbD/XqwcYrWg==
+  dependencies:
+    css-selector-parser "^1.0.0"
+    nth-check "^2.0.0"
+    unist-util-is "^5.0.0"
+    zwitch "^2.0.0"
+
 unist-util-stringify-position@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz#cce3bfa1cdf85ba7375d1d5b17bdc4cada9bd9da"
   integrity sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==
   dependencies:
     "@types/unist" "^2.0.2"
 
+unist-util-visit-parents@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz#25e43e55312166f3348cae6743588781d112c1e9"
+  integrity sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==
+  dependencies:
+    unist-util-is "^3.0.0"
+
 unist-util-visit-parents@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.0.2.tgz#d4076af3011739c71d2ce99d05de37d545f4351d"
@@ -10748,6 +10801,13 @@ [email protected]:
     unist-util-is "^4.0.0"
     unist-util-visit-parents "^3.0.0"
 
+unist-util-visit@^1.1.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
+  integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
+  dependencies:
+    unist-util-visit-parents "^2.0.0"
+
 unist-util-visit@^2.0.0, unist-util-visit@^2.0.1, unist-util-visit@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.2.tgz#3843782a517de3d2357b4c193b24af2d9366afb7"
@@ -11357,3 +11417,8 @@ zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
   integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
+
+zwitch@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.2.tgz#91f8d0e901ffa3d66599756dde7f57b17c95dce1"
+  integrity sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==