diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index f4e96a7..0e1554b 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -48,10 +48,11 @@ module.exports = { { title: "前端", children: [ - "/frontend/解决create-vue创建的项目运行后提示Network: use --host to expose的问题", - "/frontend/在linux中安装node二进制文件", - "/frontend/在vscode里配置vetur符合eslint", - "/frontend/npm切换源", + "/frontend/在VuePress项目中添加百度统计代码.md", + "/frontend/解决create-vue创建的项目运行后提示Network: use --host to expose的问题.md", + "/frontend/在linux中安装node二进制文件.md", + "/frontend/在vscode里配置vetur符合eslint.md", + "/frontend/npm切换源.md", ], initialOpenGroupIndex: 0, // 可选的, 默认值是 0 sidebarDepth: 0, // 可选的, 默认值是 1 diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 3c0d4a8..6c82b08 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/docs/.vuepress/enhanceApp.js @@ -1,12 +1,10 @@ export default ({ router }) => { // 路由切换事件处理 router.beforeEach((to, from, next) => { - // console.log("切换路由", to.fullPath, from.fullPath); //触发百度的pv统计 if (typeof _hmt != "undefined") { if (to.path) { _hmt.push(["_trackPageview", to.fullPath]); - // console.log("上报百度统计", to.fullPath); } } next(); diff --git a/docs/frontend/在VuePress项目中添加百度统计代码.md b/docs/frontend/在VuePress项目中添加百度统计代码.md new file mode 100644 index 0000000..57cc90d --- /dev/null +++ b/docs/frontend/在VuePress项目中添加百度统计代码.md @@ -0,0 +1,88 @@ +# 在VuePress项目中添加百度统计代码 + +## 背景 + +VuePress是Vue驱动的静态网站生成器,如果想知道VuePress生成的网站每天的访问情况而又不想为它开发后台,最好就是引用外部统计脚本,本文选择百度统计平台。 + +## 获取统计代码 + +百度统计平台地址: + +登录后先创建站点,然后就可以获取统计代码,得到的统计代码示例: + +```html + +``` + +同时,在百度统计的代码获取页中还有一段说明,原文如下: + +```text +代码安装说明 + +1. 请将代码添加到网站全部页面的标签前。 +2. 建议在header.htm类似的页头模板页面中安装,以达到一处安装,全站皆有的效果。 +3. 如需在JS文件中调用统计分析代码,请直接去掉以下代码首尾的,后,放入JS文件中即可。 + +如果代码安装正确,一般20分钟后,可以查看网站分析数据。 +``` + +可我们的VuePress项目中生成的html文件都是由Vue编译出来的,实际源代码中都是Markdown文档和js文件,所以我们无法按照百度统计平台中的方法去安装代码。 + +## 安装代码 + +具体只需要处理2个文件,分别是`.vuepress/config.js`和`.vuepress/enhanceApp.js`(如果不存在就自己创建)。 + +### 编辑config.js + +```js +module.exports = { + /// ...其他配置项 + head: [ + /// ...其他head项 + // 百度统计代码 + [ + "script", + {}, + `var _hmt = _hmt || []; + (function() { + var hm = document.createElement("script"); + hm.src = "https://hm.baidu.com/hm.js?1eb7f71a234c2320xxxxxxxxxxxxxxxx"; + var s = document.getElementsByTagName("script")[0]; + s.parentNode.insertBefore(hm, s); + })();`, + ], + ], + /// ...其他配置项 +}; +``` + +### 编辑enhanceApp.js + +主要是用来让统计代码可以捕捉到Vue的路由变化。 + +```js +export default ({ router }) => { + // 路由切换事件处理 + router.beforeEach((to, from, next) => { + //触发百度的pv统计 + if (typeof _hmt != "undefined") { + if (to.path) { + _hmt.push(["_trackPageview", to.fullPath]); + } + } + next(); + }); +}; +``` + +## 安装检查 + +完成上面操作后,将项目重新编辑打包并发布到服务器上,试着浏览网站,打开`F12`,在`Network`中查看有没有`hm.js`,如果有,就说明统计代码安装成功了,按照百度统计的说法,多等些时候就能看到统计结果了。