将Google AdSense In-article ads 添加到 VitePress

NEWS

上篇文章为接入Google Adsense的自动广告.但是由于Vitepress默认的SPA特性,会造成直接进入doc页面可能无法加载自动广告,但是切换到MPA模式会因此花费大量时间去处理相关的JS,CSS.这对于一个静态网站是不合适的.因此你需要文章内嵌广告

本文原创,转载请注明出处

安装库及配置

在安装过程中你可以参阅 项目地址,但是安装完成后请回到本文章,这将会为你节约大量时间

npm install vue-scriptx vue-google-adsense@next --save

由于本站进仅会使用到文章内嵌广告,所以只会进行部分导入

theme/index.ts

import ScriptX from 'vue-scriptx'
import Ads from 'vue-google-adsense'
export default {
  enhanceApp({ app, router, siteData}) {
    app.use(ScriptX)
    app.use(Ads.InArticleAdsense)
  }
}

创建广告单元后,在md文件中添加以下模板即可

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

错误处理

通过vitepress build构建时会出现以下错误

✓ building client + server bundles...  
(node:34274) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.  
(Use `node --trace-warnings ...` to show where the warning was created)  
./node_modules/vue-scriptx/dist/index.js:1  
import { h } from 'vue';  
^^^^^^

但即使你在package.json中添加上 "type": "module" 依旧会报错,接下来是解决办法

cd /node_modules/vue-scriptx/
vim package.json

package.json

{
  "name": "vue-scriptx",
  "version": "0.2.5",
  "description": "VueScriptX brings back the <script> tag to your Vue projects!",
  "main": "src/index.ts", //更改为此
  "types": "dist/index.d.ts", //删除此行
  "prepublish": "tsc",
}

然后你就可以发布网站进行测试了 🎉 💯