Jacinda

Appearance

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

添加文章阅读量 ​

安装 busuanzi.pure.js ​

请根据自己写法进行安装 pnpm/npm/yarn ...

bash
$ pnpm install busuanzi.pure.js --save

引入 （已安装的略过） ​

除了 pnpm/npm/yran 安装以外，还可以直接引入 busuanzi 脚本，具体请参考左侧列表文章 首页添加访客量统计

这里就不再做展开了

编写组件 ​

在 theme/components/PageInfo.vue 路径下进行编写组件

javascript
<script setup>
import DefaultTheme from 'vitepress/theme'
import { useData } from 'vitepress'
import { ref } from 'vue'

const { Layout } = DefaultTheme
const defaultAuthor = 'Jacinda'
const author = ref(defaultAuthor)
const { frontmatter } = useData() //这里的frontmatter就是各个md文件中自己写在最上面的东西
</script>

<template>
    <div class="page_info">
        <span class="page_info_item">
            🎨
            <span>作者：{{ author }}</span>
        </span>
        <span class="page_info_item" v-if="frontmatter.date">
            🕐
            <span>发表于：{{ frontmatter.date ? frontmatter.date.substring(0, 10) : '' }}</span>
        </span>
        <span class="page_info_item">
            📔
            <span id="busuanzi_container_page_pv">
                阅读量：<span id="busuanzi_value_page_pv"></span>
            </span>
        </span>

    </div>
</template>

<style>
.page_info {
    margin-bottom: 48px;
}

.page_info .page_info_item {
    font-size: 16px;
    color: #7f7f7f;
    margin-right: 10px;
}
</style>

主题配置 ​

在/theme/index.ts 路径文件下，引入我们上面写好的组件

javascript
import Theme from "vitepress/theme";
import { h, onMounted, watch, nextTick } from "vue";
import { useRoute, EnhanceAppContext, inBrowser } from 'vitepress'
import Statistics from "../components/Statistics.vue";
import busuanzi from 'busuanzi.pure.js'

export default {
    ...Theme,
    Layout() {
        return h(Theme.Layout, null, {
            "home-features-after": () => h(Statistics), // 首页的访问量统计
            "doc-before": () => h(PageInfo) // 文章阅读统计
        });
    },
    enhanceApp({ router }: EnhanceAppContext) {
        if (inBrowser) {
            router.onAfterRouteChanged = (to) => {
                busuanzi.fetch() //在路由切换的时候重新获取阅读数据
            }
        }
    }
}

到此，文章阅读量就能显示出来了。但是，你会发现有个小Bug，每点进一篇文章，阅读次数就增加一次。而且显示的阅读量是所有文章的总阅读量，而不是单篇的。

  • 原因

    不蒜子统计博客文章访问量就是通过 referer 来计算的，通过上面的分析，如果 Referrer Policy 是 strict-origin-when-cross-origin，不蒜子接收到的只有博客的域名，没有文章的具体路径，所以 具体某个文章的 PV 统计 会出现错误。例如 这篇文章，发送给不蒜子的 referer 只是 https://vitepress.jacindatang.top

TIP

所以，要想正确统计博客每篇文章的 PV，可以把 Referrer Policy 设置为 no-referrer-when-downgrade

因此，解决办法如下：

在 .vitepress/config.js 路径下，加入以下参数

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

Layout 写法 ​

1. 写法一 ​

上述代码中，有一个 Layout 函数，这里做一下展开

javascript
Layout() {
    return h(Theme.Layout, null, {
        "home-features-after": () => h(Statistics), // 首页的访问量统计
        "doc-before": () => h(PageInfo) // 文章阅读统计
    });
},

上述代码中，"" 里所写的是 主题布局中可用插槽名称，右侧 h()里所包含的就是 自定义组件名称

2. 写法二 ​

如果安装官方文档的写法，是只在 theme 路径下，写自定义组件（布局）

然后在主题配置文件中，引入布局文件

javascript
Layout: Component

然后在布局文件中，再引用插槽名称：

html
<script setup>

import DefaultTheme from 'vitepress/theme'

const { Layout } = DefaultTheme

</script>

<template>
    <Layout>
        <template #doc-before>
            ...内容
        </template>
    </Layout>    
</template>

主题布局中可用插槽 ​

  • layout: doc (default)

    • doc-footer-before
    • doc-before
    • doc-after
    • aside-top
    • aside-bottom
    • aside-outline-before
    • aside-outline-after
    • aside-ads-before
    • aside-ads-after

  • layout: home

    • home-hero-before
    • home-hero-after
    • home-features-before
    • home-features-after

  • layout: page

    • layout-top
    • layout-bottom
    • nav-bar-title-before
    • nav-bar-title-after
    • nav-bar-content-before
    • nav-bar-content-after
    • nav-screen-content-before
    • nav-screen-content-after

📖 参考文档 ​

Copyright © 2023-present Jacinda