# 开通百度统计

我是使用百度统计 (opens new window)来统计浏览量的，首先要注册账号，如果有了也可以直接登陆。我用的账号的普通的百度账号，而不是营销账号。

# 配置代码

按照他的教程，把脚本添加到我们的所有页面里面。由于使用vuepress构建后的是静态页面，切换页面也不会触发请求，所以我们需要在进去网站的时候就把这段脚本加上，而且在切换页面的时候也需要触发统计。

接下来添加 config 同级文件 enhanceApp.js，添加如下代码：

那么接下来就是把数据引入到我们的网站里面了。我们可以阅读百度统计的文档 (opens new window)来开通数据api，但是开通需要前一天网站的阅读量超过100才可以，所以目前我还开通不了，自己随便点点几下就好了，只能明天再继续了。

# 数据导出

注意图中的统计工具和文档，后面调试的时候需要用到。

然后我们点击 此文档 继续后面的操作。

首先利用 api key 去获取 code：

其中的CLIENT_ID就是api key。

获取到code之后，通过code、CLIENT_ID和Secret Key去获取 ACCESS_TOKEN，这个就是我们要调用接口的凭证了：

返回结果如下：

此外还有一个参数需要获取，那就是site_id，也就是我们网站的id，需要调用查询自己的网站列表api去获取：

把其中的 access_token 换成你自己的。

返回的结果如下：

记住这个site_id。

然后我们回到刚开通数据导出服务的那个页面，点击api调试工具，来到调试界面，选择百度账号之后，填入自己的 access_token，选择获取报告数据，网站概况(趋势数据)，最后再填入参数就OK啦。

我们就可以拿着这个链接放到我们的博客里啦。

然后我只能查出总的访问量，不能看到每个子页面的访问量，可能是我设置站点的时候有些地方出错了。但经过查阅用户手册，发现可以通过调用 受访页面 的接口来获取每个页面的访问量。

其实就是 method 不一样。

那么我们可以在之前的 enhanceApp.js 中请求访问量，代码如下：

# (opens new window)展示浏览量

到这里已经只差最后一步了，那就是把浏览量展示到我们的主页还有每篇博客上面。因为我使用的主题是vuepress-theme-reco，所以需要在node_modules中找到主题的源代码，自己修改想要显示浏览量的位置。

所以我们需要找到Footer组件，经过我的一番寻找，发现他在node_modules/vuepress-theme-reco/components下，我们直接把备案的那串代码注释掉，添加如下代码：

接下来就是在博客文章的页面加上了，继续翻源码，还是在刚刚的component目录下，找到PageInfo，进去刚刚相同的操作就好了。但是发现他原本就有这一段代码：

也就是说官方是支持阅读量的，但通过查阅官方文档后，他们的这么解释的：

浏览量 仅在使用 Valine 时显示；

因为 浏览量 需要在页面加载时去调用相关接口，所以列表页的所有数据会一起加载下来，如果文章数量很多会影响加载速度，所以在 1.2.0 之后去掉文章列表的浏览量。

那我们也不用管了，直接使用百度的统计API就行。

# (opens new window)调试

那么现在的问题是在首页的时候需要获取到各个页面的浏览量，这个好办，我们把之前pv变量设置成一个对象，把页面的url作为key，然后值为浏览量。稍微修改一下 enhanceApp.js 中相关的部分：

然后对应修改 Footer 组件和 PageInfo 组件的 pv 取值：

本以为真的没问题了，没想到一打包，报了一堆错误QAQ，发现是window is not defined。又是经过了一阵查找，发现没什么特别好的解决方法。只能综合网上的方法自己想一个了。

我们就是要个全局变量可以存储 pv 这个对象，那么可以把他挂在 Vue 实例上。但又有一个问题，我们在服务端获取不了当前的页面路径，使用 window.location.domain 也会报错。最后发现 enhanceApp.js 中可以接收一个变量 isServer，判断当前是否是服务端。那么只要不是在服务端，我们就能使用 window 了。

最终修改代码如下：

期间还有一个小插曲，就是本地没问题，到服务端却报错了，Uncaught DOMException: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method. at Object.appendChild 。经过查阅和调试之后，发现是 v-if 的问题，也就是在 PageInfo 和 Footer 组件中，如果你用了 v-if 去控制浏览量的显隐，因为在服务端是不会渲染的，而到了浏览器就报错了。所以把 v-if 修改成 v-show 就可以了。

这下终于大功告成了！虽然走了不少弯路，还修改了主题的源码，好在最终想要的效果也实现了。

# (opens new window)其他

还有一点就是百度统计的 access_token 有效期只有一个月，过期了需要用 refresh_token 去获取新的，在使用手册里面也有介绍方法。等过期了我看看啥情况再做一下自动更新吧。