docs/frontend/在VuePress项目中添加百度统计代码.md

docs/.vuepress/config.js

@@ -48,10 +48,11 @@ module.exports = {
       {
         title: "前端",
         children: [
-          "/frontend/解决create-vue创建的项目运行后提示Network: use --host to expose的问题",
+          "/frontend/在VuePress项目中添加百度统计代码.md",
-          "/frontend/在linux中安装node二进制文件",
+          "/frontend/解决create-vue创建的项目运行后提示Network: use --host to expose的问题.md",
-          "/frontend/在vscode里配置vetur符合eslint",
+          "/frontend/在linux中安装node二进制文件.md",
-          "/frontend/npm切换源",
+          "/frontend/在vscode里配置vetur符合eslint.md",
+          "/frontend/npm切换源.md",
         ],
         initialOpenGroupIndex: 0, // 可选的, 默认值是 0
         sidebarDepth: 0, // 可选的, 默认值是 1

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();

docs/frontend/在VuePress项目中添加百度统计代码.md

@@ -0,0 +1,88 @@
+# 在VuePress项目中添加百度统计代码
+
+## 背景
+
+VuePress是Vue驱动的静态网站生成器，如果想知道VuePress生成的网站每天的访问情况而又不想为它开发后台，最好就是引用外部统计脚本，本文选择百度统计平台。
+
+## 获取统计代码
+
+百度统计平台地址： <https://tongji.baidu.com>
+
+登录后先创建站点，然后就可以获取统计代码，得到的统计代码示例：
+
+```html
+<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);
+})();
+</script>
+```
+
+同时，在百度统计的代码获取页中还有一段说明，原文如下：
+
+```text
+代码安装说明
+
+1. 请将代码添加到网站全部页面的</head>标签前。
+2. 建议在header.htm类似的页头模板页面中安装，以达到一处安装，全站皆有的效果。
+3. 如需在JS文件中调用统计分析代码，请直接去掉以下代码首尾的，<script type="text/javascript">与</script>后，放入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`，如果有，就说明统计代码安装成功了，按照百度统计的说法，多等些时候就能看到统计结果了。