VuePress 添加 AdSense

在 VuePress 增加 Google AdSense

首先先安裝 vue-google-adsense

npm i --save vue-script2 vue-google-adsense

接著在 .vuepress/enhanceApp.js 載入 vue-google-adsense

import Vue from 'vue'
import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))
Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)

安裝好 vue-google-adsense 後，VuePress 就會認得 Adsense 這個標籤，所以直接在文章內貼上 InArticleAdsense 就會顯示 AdSense 廣告了

<InArticleAdsense
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890">
</InArticleAdsense>

實際 Render 出來會是這樣

除了在文章內顯示廣告之外也可以在 Sidebar 跟 Page bottom 加入 AdSense 廣告，這樣就不用在每個文章都加 AdSense。

這邊要透過自訂 theme 的方式來達成。

首先在 .vuepress 下面建立 theme 資料夾，同時建立以下的結構。

.vuepress/theme
├── components
│   └── AdSense.vue
├── index.js
└── layouts
    └── Layout.vue

總共要建立三個檔案，檔案內容如下

index.js

module.exports = {
  extend: '@vuepress/theme-default'
}

components/AdSense.vue

<template>
  <div class="adsense-content">
    <div class="adsense-title">贊助商連結</div>
    <div style="padding: 0 1.5rem;">
      <Adsense
        data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
        data-ad-slot="1234567890">
      </Adsense>
    </div>
  </div>
</template>

<style scoped>
  .adsense-content {
    max-width: 740px;
    margin: 0 auto;
  }
  .adsense-title {
    color: #999;
    transition: color 0.15s ease;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
  }
</style>

Layout/Layout.vue

<template>
  <ParentLayout>
    <AdSense slot="sidebar-bottom"/>
    <AdSense slot="page-bottom"/>
  </ParentLayout>
</template>

<script>
import ParentLayout from '@parent-theme/layouts/Layout.vue'
import AdSense from '../components/AdSense.vue'
export default {
  components: {
    ParentLayout,
    AdSense
  }
}
</script>

其實所謂的自訂 theme 不過只是去繼承原本的 default 的 theme，透過預留的 slot 將我們自己定義的 AdSense component 插入到 Sidebar 跟 Page bottom

透過這樣的方式就可以在 Sidebar 跟 Page bottom 上插入 AdSense 的廣告

另外 default theme 還有其他的 slot 可以插，可以看 default theme 的 Layout.vue (opens new window) 這個檔案

# 參考資料

VuePressにGoogleAdsenseで広告を配置する方法 | Vue Metaru (opens new window)

行動支持院長

更多方式支持院長持續創作

LikeCoin

贊助商連結

# VuePress 添加 AdSense

# 安裝 vue-google-adsense

# 在文章內插入 AdSense 廣告

# 在 Sidebar 跟 Page bottom 加入 AdSense 廣告

# 參考資料