1
export async function onRequest({ request, params, env }) {
2
    const url = new URL(request.url);
3
    const id = url.searchParams.get('id');
4

5
    if (!id) {
6
        return new Response(JSON.stringify({ error: "Missing 'id' parameter" }), {
7
            status: 400,
8
            headers: { 'content-type': 'application/json' }
9
        });
10
    }
11

12
    const kvKey = `view_${id}`;
13
    let count = await <这里填入变量名称>.get(kvKey);
14
    count = Number(count) + 1;
15

16
    await <这里填入变量名称>.put(kvKey, String(count));
17

18
    return new Response(JSON.stringify({ visitCount: count }), {
19
      headers: {
20
        'content-type': 'application/json; charset=UTF-8',
21
        'Access-Control-Allow-Origin': '*',
22
      },
23
    });
24
}

1
https://tiwat.cn/api/views

1
{"error":"Missing 'id' parameter"}

1
<div
2
  id="post-view-container"
3
  class="flex flex-row items-center opacity-0 transition-opacity duration-500"
4
>
5
  <div
6
    class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10
7
           text-black/50 dark:text-white/50
8
           flex items-center justify-center mr-2"
9
  >
10
    <slot name="icon" />
11
  </div>
12

13
  <div class="text-sm">
14
    <span id="post-view-count">...</span> 次阅读
15
  </div>
16
</div>
17

18
<script client:load>
19
  async function updatePostPV() {
20
    if (!location.pathname.includes('/posts/')) return;
21

22
    const container = document.getElementById('post-view-container');
23
    const countSpan = document.getElementById('post-view-count');
24

25
    if (!container || !countSpan) return;
26

27
    if (container.dataset.fetched === 'true') return;
28
    container.dataset.fetched = 'true';
29

30
    try {
31
      const res = await fetch(
32
        `/api/views?id=${encodeURIComponent(location.pathname)}`
33
      );
34
      const data = await res.json();
35

36
      if (typeof data.visitCount === 'number') {
37
        countSpan.textContent = data.visitCount.toLocaleString();
38
        container.classList.remove('opacity-0');
39
      }
40
    } catch (err) {
41
      console.error('[PostViews] fetch failed:', err);
42
      delete container.dataset.fetched;
43
    }
44
  }
45

46
  updatePostPV();
47
</script>

1
<div
2
  id="total-pv-container"
3
  class="flex items-center justify-center gap-1 text-xs
4
         text-neutral-400 mb-3 opacity-0
5
         transition-opacity duration-500"
6
>
7
  <slot name="icon" />
8
  <span>全站访问量</span>
9
  <span
10
    id="total-pv-count"
11
    class="font-bold text-[var(--primary)]"
12
  >
13
    ...
14
  </span>
15
</div>
16

17
<script client:load>
18
  async function updateTotalPV() {
19
    const container = document.getElementById('total-pv-container');
20
    const countEl = document.getElementById('total-pv-count');
21
    if (!container || !countEl) return;
22

23
    if (container.dataset.fetched === 'true') return;
24
    container.dataset.fetched = 'true';
25

26
    try {
27
      const res = await fetch('/api/views?id=total');
28
      const data = await res.json();
29

30
      if (typeof data.visitCount === 'number') {
31
        countEl.textContent = data.visitCount.toLocaleString();
32
        container.classList.remove('opacity-0');
33
      }
34
    } catch (e) {
35
      console.error('[TotalViews] error:', e);
36
      delete container.dataset.fetched;
37
    }
38
  }
39

40
  updateTotalPV();
41
</script>