VitePress增加百度统计

vitepress的相关配置

为vitepress静态网站增加统计代码，需要在2个地方进行配置：head 和路由。

1.1 head 配置

我们要增加网站访问统计代码。无论你用的是google还是百度，或者其他第三方统计服务，都需要在head中进行配置。

docs.vitepressconfig.js 文件中，配置如下：

export default {
    title: '敲代码的卡卡罗特',
    description: '编程，健身，电影，听歌',
    base:'/',
    head : [ // 网站icon
        ['link',{rel:'icon',href:'./images/logo.png'}],
        // 注入百度统计代码
        ['script',
            {},
            `var _hmt = _hmt || [];(function() {var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?**************";
            var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();`
        ],
    ],
}

1.2 路由配置

vitepress是基于文件路径的路由，并且构建生成的都是静态的html页面。根据vitepress的官网介绍，vitepress构建的实质上是一个单页面应用(SPA)。

而用户在这个SPA应用中，会访问不同的静态页面。我们必须把他所有不同的访问url都进行统计记录下来。

在SPA应用中，那么仅仅在head部分增加一个js函数来发送访问统计数据到统计平台，就显得不够了。因为这个js函数在spa中，只会执行一次。

既然是spa，那么页面的跳转，就离不开router，我们只需要跟踪路由的变化即可。

★

理论上加上下面这个代码就OK了，但是vitepress是单页面，所以我们还要为router做一下处理

docs.vitepressthemeindex.js

import DefaultTheme from 'vitepress/theme'

export default {
    ...DefaultTheme,
    enhanceApp({ app, router, siteData }) {
        router.onBeforeRouteChange = (to) => {
            console.log('路由将改变为: ', to);
            if (typeof _hmt !== 'undefined') {
                _hmt.push(['_trackPageview', to]);
            }
        };
    },
}