Lake's Blog Lake's Blog
首页
HCFrame
  • 博客搭建

    • 搜索引擎
    • SEO优化
    • 问题记录
  • Vue

    • 问题记录
  • uni-app
  • 开发

    • Spring
  • 数据库及中间件

    • Elasticsearch
    • SQL
  • 杂谈

    • 杂谈
  • 微服务

    • nacos
    • CAS
  • 算法说明

    • algorithm
  • leetCode

    • leetCode
  • 代理

    • Nginx
  • Linux

    • ubuntu
  • Docker
  • 数据库
  • 消息队列
  • openwrt
  • 友情链接
关于
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub

Lake Liu

很菜的程序员
首页
HCFrame
  • 博客搭建

    • 搜索引擎
    • SEO优化
    • 问题记录
  • Vue

    • 问题记录
  • uni-app
  • 开发

    • Spring
  • 数据库及中间件

    • Elasticsearch
    • SQL
  • 杂谈

    • 杂谈
  • 微服务

    • nacos
    • CAS
  • 算法说明

    • algorithm
  • leetCode

    • leetCode
  • 代理

    • Nginx
  • Linux

    • ubuntu
  • Docker
  • 数据库
  • 消息队列
  • openwrt
  • 友情链接
关于
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub
  • 博客搭建

    • 搜索引擎

      • 如何在百度搜索到我的网站?
      • 如何在Google搜索到我的网站?
      • 如何自动提交站点地图给谷歌?
    • SEO优化

    • 问题记录

    • Markdown基本语法
    • Vue或VuePress添加不蒜子统计
      • 一、添加依赖
      • 二、修改meta
      • 三、代码示例
      • 四、参考文章
  • VUE

  • UNIAPP

Vue或VuePress添加不蒜子统计

# Vue或VuePress添加不蒜子统计

VuePress如何添加不蒜子

# 一、添加依赖

  • yarn安装
yarn add busuanzi.pure.js
1
  • npm安装
npm install busuanzi.pure.js --save
1

# 二、修改meta

在你的页面中加入:

<meta name="referrer" content="no-referrer-when-downgrade">
1

VuePress在 head.js 中添加,写法如下:

['meta', {name: 'referrer', content: 'no-referrer-when-downgrade'}],
1

注意

在 Chrome 85 版本中,为了保护用户的隐私,默认的 Referrer Policy 则变成了 strict-origin-when-cross-origin

所以必须加入此部分代码,否则文章统计访问量的数据则不正确

# 三、代码示例

<template>
  <div class="busuanzi">
    <span id="busuanzi_container_site_pv" style="display:none">
      本站总访问量
      <span id="busuanzi_value_site_pv"></span>次
      <span class="post-meta-divider">|</span>
    </span>
    <span id="busuanzi_container_site_uv" style="display:none">
      本站访客数
      <span id="busuanzi_value_site_uv"></span>人
    </span>
  </div>
</template>
 
<script>
let script;
export default {
  mounted() {
    script = require("busuanzi.pure.js");
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    $route(to, from) {
      if (to.path != from.path) {
        script.fetch();
      }
      // console.log(to.path);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 四、参考文章

vue 添加 不蒜子 统计计数

解决不蒜子 (busuanzi) 文章计数出错问题

编辑
#VuePress#Vue#不蒜子
上次更新: 2021/04/12, 09:05:03
Markdown基本语法
前端传值不能带中括号???

← Markdown基本语法 前端传值不能带中括号???→

最近更新
01
IDEA行号太宽
03-11
02
uniapp中实现h5扫码功能(微信版)
08-12
03
Docker安装Rabbitmq
07-22
更多文章>
本站总访问量次 | 您是本站第位访问者
Theme by Vdoing | Copyright © 2020-2024 Lake Liu | MIT License | 背景图、Logo、头像设计@Drrizzee
  • 跟随系统
  • 深色模式
  • 浅色模式
  • 阅读模式