1
const hasCover = image !== undefined && image !== null && image !== "";
2

3
const coverWidth = "28%";
4

5
const { remarkPluginFrontmatter } = await entry.render();
6
//找到以上内容，加入下面这条
7
const cleanUrl = url.endsWith("/") && url !== "/" ? url.slice(0, -1) : url; // 用于匹配 views.json 中的路径，确保末尾没有斜杠（除非是根路径）

1
<div
2
  class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition"
3
>
4
    <div>
5
      {remarkPluginFrontmatter.words}
6
      {
7
        " " +
8
          i18n(
9
            remarkPluginFrontmatter.words === 1
10
              ? I18nKey.wordCount
11
              : I18nKey.wordsCount,
12
          )
13
      }
14
      </div>
15
      <div>|</div>
16
      <div>
17
      {remarkPluginFrontmatter.minutes}
18
      {
19
        " " +
20
          i18n(
21
            remarkPluginFrontmatter.minutes === 1
22
              ? I18nKey.minuteCount
23
              : I18nKey.minutesCount,
24
            )
25
      }
26
      </div>
27
//找到以上内容加入以下的代码
28
      <div>|</div>
29
      <div
30
        class="data-astro-cid-iyiqi2so postcard-view-count"
31
        data-path={cleanUrl}
32
        style="--coverWidth: 28%;"
33
      >
34
      </div>
35
</div>

1
<script>
2
    async function initCardViews() {
3
        const targets = document.querySelectorAll(".postcard-view-count");
4
        if (targets.length === 0) return;
5

6
        try {
7
            // 只请求 1 次原始简洁的 json 字典
8
            const res = await fetch(
9
                "https://fastly.jsdelivr.net/gh/你的github账号/你刚刚建立的仓库@main/data/views.json",
10
            );//这里要改成你仓库的地址
11
            if (!res.ok) return;
12
            const viewsMap = await res.json();
13

14
            // 批量匹配并填入对应卡片的阅读量
15
            targets.forEach((el) => {
16
                const path = el.getAttribute("data-path");
17
                if (path && viewsMap[path] !== undefined) {
18
                    el.textContent = viewsMap[path] + " 次阅读";
19
                } else {
20
                    el.textContent = "0 次阅读";
21
                }
22
            });
23
        } catch (e) {
24
            console.error("Failed to fetch GA4 views:", e);
25
        }
26
    }
27

28
    // 页面首次加载时运行
29
    initCardViews();
30
    // 适配 Fuwari 主题的视图切换动画 (View Transitions)
31
    document.addEventListener("astro:after-swap", initCardViews);
32
</script>
33
//在末尾的style标签以上添加以上代码