docs: update ad

Author: tangjinzhou

site/components/CarbonAds.vue

@@ -0,0 +1,79 @@
+<script>
+const carbonUrls = {
+  'vuecomponent.github.io':'//cdn.carbonads.com/carbon.js?serve=CK7DL2JW&placement=vuecomponentgithubio',
+  'tangjinzhou.gitee.io':'//cdn.carbonads.com/carbon.js?serve=CK7DL2JN&placement=tangjinzhougiteeio',
+};
+const carbonUrl = carbonUrls[location.host];
+export default {
+  mounted() {
+    this.load();
+  },
+  watch: {
+    $route(e, t) {
+      if(e.path !== t.path && this.$el.querySelector("#carbonads")){
+        this.$el.innerHTML = "";
+        this.load();
+      }
+    },
+  },
+  methods: {
+    load() {
+      if(carbonUrl) {
+        const e = document.createElement("script");
+        e.id = "_carbonads_js";
+        e.src = carbonUrl;
+        this.$el.appendChild(e);
+      }
+    },
+  },
+  render () {
+    return (
+      <div id="carbon-ads"/>
+    );
+  },
+};
+</script>
+<style>
+ #carbon-ads {
+  width: 145px;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 3px;
+  font-size: 13px;
+  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+}
+#carbon-ads a {
+  display: inline-block;
+  color: #7f8c8d;
+  font-weight: normal;
+}
+#carbon-ads span {
+  color: #7f8c8d;
+  display: inline-block;
+  margin-bottom: 5px;
+}
+#carbon-ads img {
+  width: 125px;
+}
+#carbon-ads .carbon-img,
+#carbon-ads .carbon-text {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: normal;
+  color: #34495e;
+}
+#carbon-ads .carbon-text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+#carbon-ads .carbon-poweredby {
+  color: #aaa ;
+  font-weight: normal ;
+  line-height: 1.2 ;
+}
+</style>

site/components/layout.vue

@@ -3,11 +3,11 @@ import { enquireScreen } from 'enquire-js';
 import AllDemo from '../demo';
 import Header from './header';
 import Footer from './footer';
+import CarbonAds from './CarbonAds';
 import Sponsors from './sponsors';
 import zhCN from 'antd/locale-provider/zh_CN';
 import enUS from 'antd/locale-provider/default';
 import sortBy from 'lodash/sortBy';
-import axios from 'axios';
 import { isZhCN } from '../util';
 import { Provider, create } from '../../components/_util/store';
 import NProgress from 'nprogress';
@@ -156,24 +156,6 @@ export default {
     mountedCallback () {
       NProgress.done();
       document.documentElement.scrollTop = 0;
-      try {
-        const isGithub = location.host.indexOf('github') !== -1;
-        if(isGithub){
-          document.getElementById('ad').innerHTML = '';
-          const src = '//cdn.carbonads.com/carbon.js?serve=CK7DL2JW&placement=vuecomponentgithubio';
-          const hm = document.createElement('script');
-          hm.src = src;
-          hm.id = '_carbonads_js';
-          const s = document.getElementById('ad');
-          s.append(hm);
-        } else {
-          axios.get('https://api.codefund.app/properties/162/funder.html?template=square')
-          .then(function (response) {
-            document.getElementById("codefund").innerHTML = response.data;
-          });
-        }
-
-      } catch (error) {}
     },
   },
 
@@ -320,6 +302,7 @@ export default {
           </div>
         </a-locale-provider>
         { name.indexOf('back-top') === -1 ? <a-back-top /> : null }
+        <CarbonAds />
       </div>
     );
   },

site/index.html

@@ -16,63 +16,6 @@
             display: none;
         }
     </style>
-    <style>
-    #ad, #codefund {
-  width: 145px;
-  position: fixed;
-  bottom: 10px;
-  right: 10px;
-  padding: 10px;
-  background-color: #fff;
-  border-radius: 3px;
-  font-size: 13px;
-  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
-}
-#ad a, #codefund a {
-  display: inline-block;
-  color: #7f8c8d;
-  font-weight: normal;
-}
-#codefund a {
-  color: #7f8c8d !important;
-  font-weight: normal !important;
-}
-#ad span {
-  color: #7f8c8d;
-  display: inline-block;
-  margin-bottom: 5px;
-}
-#codefund #cf {
- margin-bottom: 0px!important;
- border-radius: 0px!important;
-}
-#ad img {
-  width: 125px;
-}
-#ad .carbon-img,
-#ad .carbon-text {
-  display: block;
-  margin-bottom: 6px;
-  font-weight: normal;
-  color: #34495e;
-}
-#ad .carbon-text,
-#codefund .cf-text {
-  display: -webkit-box!important;
-  -webkit-box-orient: vertical!important;
-  -webkit-line-clamp: 4!important;
-  overflow: hidden!important;
-}
-#codefund .cf-text {
-  padding-bottom: 5px !important;
-  font-size: 12px !important;
-}
-#ad .carbon-poweredby, #codefund .cf-powered-by {
-  color: #aaa !important;
-  font-weight: normal !important;
-  line-height: 1.2 !important;
-}
-    </style>
     <script>
         var _hmt = _hmt || [];
         var isGithub = location.host.indexOf('github') !== -1;

site/index.js

@@ -51,7 +51,9 @@ const router = new VueRouter({
   routes,
 });
 router.beforeEach((to, from, next) => {
-  NProgress.start();
+  if (to.path !== from.path) {
+    NProgress.start();
+  }
   next();
 });
 new Vue({