紀錄頁面的閱讀數量,網站的訪客數,應該已經是部落格標配了看著數字的增加,總是會有一咪咪成就感。
由於我們部落格走無後端的輕量化路線,所以計算訪客數的功能就比較沒有選擇,目前比較合用的 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>
他們之間的差異是?
該頁面有多少人瀏覽過:
該頁面每次瀏覽都會計數一次,不蒜子目前沒有防重整功能,可藉由擴充路由比對的功能添加防重整功能。
整個網站的總瀏覽量:
每一個網站下頁面的瀏覽都會計數一次,所以可以理解成整個網站的"總瀏覽量"
網站的訪客數
用戶紀錄,同一個瀏覽者,連續觀看多偏文章,只會計數一次,是針對網站有多少人來過。
這樣就可以簡易的計算來過多少人了喔。