【vitpress】静态网站添加访问量统计

逆旅行天涯

于 2025-01-20 15:58:23 发布

阅读量267

点赞数 5

分类专栏： # vitpress 前端学习文章标签： vscode github 前端

本文链接：https://blog.csdn.net/aaaa_aaab/article/details/145264384

版权

前端学习同时被 2 个专栏收录

17 篇文章

订阅专栏

vitpress

4 篇文章

订阅专栏

这里要是用的插件是不蒜子。

1.安装插件

npm i busuanzi.pure.js

2.添加VisitorPanel.vue文件

在.vitepress/theme/components文件添加VisitorPanel.vue文件，内容如下：

<!-- .vitepress/theme/components/VisitorPanel.vue -->
<template>
    <div class="panel">
      <div class="container">
        <section class="grid">
          <span class="text">
            本站总访问量
            <span id="busuanzi_value_site_pv" class="font-bold">--</span> 次
          </span>
          <img
            src="/2.gif"
            alt="heart"
            class="heart-img"
            width="50"
            height="50"
            @click="onLinkUmiHandle"
          />
          <span class="text">
            本站访客数
            <span id="busuanzi_value_site_uv" class="font-bold">--</span> 人次
          </span>
        </section>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { inBrowser } from "vitepress";
  const onLinkUmiHandle = () => {
    if (inBrowser) {
      window.open(
        // "https://us.umami.is/share/Y2BYxCAm7R0DG2Xi/carlosme.fun",
        "https://zhangzhangww.github.io/VitePress/",
        "_blank"
      );
    }
  };
  </script>
  
  <style scoped>
  .panel {
    margin-top: 12px;
    margin-bottom: 8px;
  }
  
  .container {
    background-color: var(--vp-c-bg-soft);
    border-radius: 8px;
    width: 100%;
    min-height: 32px;
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .heart-img {
    border-radius: 4px;
    cursor: pointer;
  }
  
  .grid {
    font-weight: 500;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }
  
  .text {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  </style>

3.index.js中调用

在.vitepress/theme/components/index.js

import DefaultTheme from 'vitepress/theme'
import Layout from './myLayout.vue' 
import confetti from './components/confetti.vue'
import busuanzi from "busuanzi.pure.js";
import VisitorPanel from "./components/VisitorPanel.vue";
import { inBrowser } from 'vitepress'
// 导入hooks
import useVisitData from './components/useVisitData'

export default {
  Layout,
  extends: DefaultTheme,
  enhanceApp( ctx ) {
    console.log(ctx)
    const { app, router, siteData } = ctx;
    app.component('confetti', confetti)
    app.component("VisitorPanel", VisitorPanel);
    if (inBrowser) {
      router.onAfterRouteChanged = () => {
        busuanzi.fetch();
        // useVisitData()
      };
    }


  },
  
}

效果如下：