Jacinda

Appearance

On this page
🎨 作者：Jacinda 🕐 发表于：2023-06-19 📔 阅读量：

首页添加访客量统计 ​

这里引用了 不蒜子 统计脚本

目录架构 ​

文件目录如下：

project
└── docs
    └── .vitepress
        ├─ components 
        │  └── Statistics.Vue //自定义组件
        ├─ theme
        │  └── index.ts // 主题配置
        └──config.js

引入 ​

在 config.js 文件中，引入 不蒜子 脚本

javascript
head: [
    [
        'script', { type: 'text/javascript', src: '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js' }
    ]
],

编写组件 ​

在 Statistics.Vue 写入以下代码

javascript
<template>
    <div class="statistics">
        <div class="busuanzi">
            <span id="busuanzi_container_site_pv" style="display:none;margin-right: 20px;">
                本站总访问量
                <span id="busuanzi_value_site_pv"></span>次
                <!-- <span class="post-meta-divider">|</span> -->
            </span>
            ❤️
            <span id="busuanzi_container_site_uv" style="display:none;margin-left: 20px;">
                本站访客数
                <span id="busuanzi_value_site_uv"></span>人
            </span>
        </div>
    </div>
</template>
<style>
.statistics {
    text-align: center;
    bottom: 100px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    color: grey;
    font-size: 15px;
}
</style>

主题配置 ​

在主题配置文件 /theme/index.ts 中，引入我们自定义的组件

javascript
import Theme from "vitepress/theme";
import { h } from "vue";
import Statistics from "../components/Statistics.vue";

export default {
    ...Theme,
    Layout() {
        return h(Theme.Layout, null, {
            "home-features-after": () => h(Statistics),
        });
    },
    enhanceApp({ app }) { },
};

会出现的问题 ​

在主题文件中引入自定义组件时，会出现以下错误：

找不到模块"../components/Statistics.vue"或其相应的类型声明。

  • 解决

  1. 打开命令面板：CTRL + SHIFT + P

  2. 找到 settings.json 文件，添加以下代码：

json
"typescript.validate.enable": false,
"javascript.validate.enable": false,

Copyright © 2023-present Jacinda