iT邦幫忙

2024 iThome 鐵人賽

DAY 25
1
Modern Web

30天用Vitepress 開啟我的"部落客"生活系列 第 25

[Day25] - busuanzi - 網頁瀏覽計數器

  • 分享至 

  • xImage
  •  

banner25

紀錄頁面的閱讀數量,網站的訪客數,應該已經是部落格標配了看著數字的增加,總是會有一咪咪成就感。

由於我們部落格走無後端的輕量化路線,所以計算訪客數的功能就比較沒有選擇,目前比較合用的 Opshell 看來看去就只有 不蒜子 而已。

配置 不蒜子

因為要在每個頁面都有統計的能力,所以我們要在 docs/.vitepress/theme/index.ts 裡面使用他,並在每次路由改變時 reload

import { useRoute } from 'vitepress';

function reloadBusuanzi() {
    const busuanziScriptId = 'busuanzi-script';

    // 移除舊的不蒜子
    const existingScript = document.getElementById(busuanziScriptId);
    if (existingScript) {
        existingScript.remove();
    }

    // 建立新的不蒜子物件
    const script = document.createElement('script');
    script.id = busuanziScriptId;
    script.src = 'https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js';
    script.async = true;

    document.body.appendChild(script);
}

export default {
    setup() {
        const route = useRoute();

        onMounted(async () => {
            reloadBusuanzi(); // 初始化
        });
        watch(() => route.path, () => {
            nextTick(() => {
                reloadBusuanzi(); // 監聽
            });
        });
    }
};

實際使用

我們在擴充的 docs/.vitepress/theme/layout/expendLayout.vue 中使用他:

<template>
    <Layout :class="[frontmatter.class]">
        <template #doc-before>
            <div class="info-box">
                <span class="info">✍️ {{ frontmatter.author || 'Opsehll' }}</span>
                <div v-if="lastUpdated !== '' || frontmatter.createdAt" class="date-box">
                    📆
                    <span v-if="lastUpdated !== ''">Last Updated:{{ lastUpdated }}</span>
                    <span v-if="frontmatter.createdAt">Created:{{ frontmatter.createdAt }}</span>
                </div>

                <div class="read">
                    👀 已被閱讀:
                    <span id="busuanzi_value_page_pv">Loading</span>
                    次
                </div>

                <div v-if="frontmatter.tags" class="tag-box">
                    🏷️
                    <a
                        v-for="tag in frontmatter.tags"
                        :key="tag"
                        class="tag-info"
                        :href="`/tags-list.html?tag=${tag}&page=1`"
                    >{{ tag }}</a>
                </div>
            </div>
        </template>

        <template #aside-ads-before>
            <div class="busuanzi-box">
                Opshell 的 Blog
                <div class="busuanzi">
                    已有: <span id="busuanzi_value_site_pv" class="number">Loading</span> 次觀看
                </div>
                <div class="busuanzi">
                    已有: <span id="busuanzi_value_site_uv" class="number">Loading</span> 個人來過
                </div>
            </div>
        </template>
    </Layout>
</template>

主要用法

<span id="busuanzi_value_page_pv">Loading</span>
<span id="busuanzi_value_site_pv" class="number">Loading</span>
<span id="busuanzi_value_site_uv" class="number">Loading</span>

他們之間的差異是?

page_pv

該頁面有多少人瀏覽過:
該頁面每次瀏覽都會計數一次,不蒜子目前沒有防重整功能,可藉由擴充路由比對的功能添加防重整功能。

site_pv

整個網站的總瀏覽量:
每一個網站下頁面的瀏覽都會計數一次,所以可以理解成整個網站的"總瀏覽量"

site_uv

網站的訪客數
用戶紀錄,同一個瀏覽者,連續觀看多偏文章,只會計數一次,是針對網站有多少人來過。

小結

這樣就可以簡易的計算來過多少人了喔。


上一篇
[Day24] - giscus - 評論系統
下一篇
[Day26] - medium-zoom - 圖片縮放
系列文
30天用Vitepress 開啟我的"部落客"生活30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言