update site

site/components/CarbonAds.vue

@@ -62,6 +62,7 @@ export default {
 #carbon-ads {
   width: 280px;
   float: right;
+  margin-top: 75px;
   position: relative;
   right: 0;
   bottom: 0;
@@ -115,6 +116,7 @@ export default {
   bottom: 0;
   padding: 0;
   margin-bottom: 15px;
+  margin-top: 5px;
   .carbon-img {
     float: left;
     margin-right: 10px;

site/components/GoogleAds.vue

@@ -1,17 +1,5 @@
 <script>
 export default {
-  props: {
-    isMobile: Boolean,
-  },
-  watch: {
-    $route(e, t) {
-      if (e.path !== t.path && this.$refs.ins && this.$refs.ins.innerHTML) {
-        this.$nextTick(() => {
-          this.load();
-        });
-      }
-    },
-  },
   mounted() {
     this.load();
   },
@@ -21,18 +9,17 @@ export default {
         this.$el.removeChild(this.scriptDom);
       }
       this.$refs.ins.innerHTML = '';
-      window.adsbygoogle = undefined;
       const e = document.createElement('script');
       e.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
       e.async = true;
       this.$el.appendChild(e);
       this.scriptDom = e;
-      (adsbygoogle = window.adsbygoogle || []).push({});
+      (window.adsbygoogle = window.adsbygoogle || []).push({});
     },
   },
   render() {
     return (
-      <div id="google-ads">
+      <div class="google-ads">
         <ins
           ref="ins"
           class="adsbygoogle"

site/components/GoogleAdsTop.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+  mounted() {
+    this.load();
+  },
+  methods: {
+    load() {
+      if (this.scriptDom) {
+        this.$el.removeChild(this.scriptDom);
+      }
+      this.$refs.ins.innerHTML = '';
+      const e = document.createElement('script');
+      e.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
+      e.async = true;
+      this.$el.appendChild(e);
+      this.scriptDom = e;
+      (window.adsbygoogle = window.adsbygoogle || []).push({});
+    },
+  },
+  render() {
+    return (
+      <div class="google-ads">
+        <ins
+          ref="ins"
+          class="adsbygoogle"
+          style="display:inline-block;width:728px;height:90px"
+          data-ad-client="ca-pub-4801326429087140"
+          data-ad-slot="2425414214"
+        ></ins>
+      </div>
+    );
+  },
+};
+</script>

site/components/geektime.vue

@@ -4,9 +4,9 @@
       href="https://time.geekbang.org/course/intro/163?code=KHKYcoBU6vZa8nMglg7AWfDxxi3BWrz9INAzAY3umPk%3D"
       target="_blank"
     >
-      <img width="170" alt="Vue 实战教程" src="https://qn.antdv.com/geektime-vue.jpeg" />
+      <img width="150" alt="Vue 实战教程" src="https://qn.antdv.com/geektime-vue.jpeg" />
     </a>
-    <div v-if="isMobile" class="close" @click="visible = false">
+    <div class="close" @click="visible = false">
       <a-icon type="close" />
     </div>
   </div>
@@ -26,8 +26,8 @@ export default {
 <style lang="less" scoped>
 #geektime {
   position: fixed;
-  bottom: 15px;
-  right: 15px;
+  bottom: 10px;
+  right: 10px;
   .close {
     position: absolute;
     text-align: center;

site/components/layout.vue

@@ -14,6 +14,8 @@ import { isZhCN } from '../util';
 import { Provider, create } from '../../components/_util/store';
 import NProgress from 'nprogress';
 import MobileMenu from '../../components/vc-drawer/src';
+import GoogleAdsTop from './GoogleAdsTop';
+import GoogleAds from './GoogleAds';
 
 const docsList = [
   { key: 'introduce', enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue' },
@@ -129,11 +131,9 @@ export default {
         const title = isCN ? cnTitle : usTitle;
         lis.push(<a-anchor-link key={id} href={`#${id}`} title={title} />);
       });
-      const showApi = this.$route.path.indexOf('/components/') !== -1;
       return (
         <a-anchor offsetTop={100} class="demo-anchor">
           {lis}
-          {showApi ? <a-anchor-link key="API" title="API" href="#API" /> : ''}
         </a-anchor>
       );
     },
@@ -240,7 +240,7 @@ export default {
     }
     const config = AllDemo[titleMap[reName]];
     this.resetDocumentTitle(config, reName, isCN);
-    const { isMobile } = this;
+    const { isMobile, $route } = this;
     return (
       <div class="page-wrapper">
         <Header searchData={searchData} name={name} />
@@ -294,10 +294,11 @@ export default {
               )}
               <a-col xxl={20} xl={19} lg={19} md={18} sm={24} xs={24}>
                 <section class="main-container main-container-component">
-                  <CarbonAds isMobile={isMobile} />
+                  <GoogleAdsTop key={`GoogleAdsTop_${$route.path}`} />
+                  {!isMobile ? <CarbonAds /> : null}
                   <GeektimeAds isMobile={isMobile} />
                   {!isMobile ? (
-                    <div class="toc-affix" style="width: 150px;">
+                    <div class={['toc-affix', isCN ? 'toc-affix-cn' : '']} style="width: 150px;">
                       {this.getSubMenu(isCN)}
                     </div>
                   ) : null}
@@ -330,6 +331,7 @@ export default {
                           ],
                         }}
                       ></router-view>
+                      <GoogleAds key={`GoogleAds_${$route.path}`} />
                     </div>
                   ) : (
                     ''

site/index.html

@@ -43,6 +43,17 @@
     <div id="app">
       <router-view></router-view>
     </div>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-151755889-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'UA-151755889-1');
+    </script>
     <!-- Hotjar Tracking Code for http://vue.ant.design -->
     <script>
       (function(h, o, t, j, a, r) {

site/index.less

@@ -185,10 +185,9 @@ pre > code[class*='language-'] {
   position: fixed;
   top: 100px;
   right: 10px;
-  bottom: 250px;
 }
-.toc-affix .ant-anchor-wrapper {
-  max-height: calc(~'100vh - 400px') !important;
+.toc-affix-cn .ant-anchor-wrapper {
+  max-height: calc(~'100vh - 330px') !important;
 }
 
 .drawer-wrapper .drawer-content {