Astro博客集成Umami分析服务#

隐私友好的网站分析解决方案,完整实战指南

📊 项目概览#

为什么选择Umami?#

Umami是一个开源、隐私友好的网站分析工具,相比Google Analytics有以下优势:

✅ 隐私保护: 不使用Cookie,符合GDPR
✅ 轻量级: 脚本体积小,加载快
✅ 开源免费: 可自托管,完全掌控数据
✅ 简洁易用: 界面清爽,数据直观
✅ 实时统计: 实时查看访问数据

实现功能#

功能	说明	状态
追踪脚本	自动追踪页面访问	✅
浏览量显示	首页和页脚显示统计	✅
访客数统计	显示独立访客数量	✅
API代理	Cloudflare Worker隐藏Token	✅
延迟加载	不影响首屏性能	✅

🚀 第一步: 配置Umami追踪#

1.1 定义配置类型#

首先在类型定义文件中添加Umami配置类型:

1
export interface UmamiConfig {
2
  enable: boolean;           // 是否启用
3
  src: string;              // Umami脚本地址
4
  websiteId: string;        // 网站ID
5
  domains?: string;         // 限制域名(可选)
6
  autoTrack?: boolean;      // 自动追踪(默认true)
7
  delayLoad?: number;       // 延迟加载时间(毫秒)
8
}
9

10
export interface UmamiStatsConfig {
11
  enable: boolean;          // 是否启用统计显示
12
  apiUrl: string;          // API代理地址
13
}

1.2 添加配置项#

在主配置文件中添加Umami配置:

1
export const umamiConfig: UmamiConfig = {
2
  enable: true,
3
  src: "https://views.freebird2913.tech/script.js",
4
  websiteId: "726431d7-e252-486d-ab90-350313e5a519",
5
  domains: "www.freebird2913.tech",
6
  autoTrack: true,
7
  delayLoad: 2000, // 延迟2秒加载,不影响首屏
8
};
9

10
export const umamiStatsConfig: UmamiStatsConfig = {
11
  enable: true,
12
  apiUrl: "https://get-views.freebird2913.tech",
13
};

1.3 创建追踪组件#

创建Umami追踪脚本组件:

1
---
2
import { umamiConfig } from "@/config";
3

4
const { enable, src, websiteId, domains, autoTrack, delayLoad } = umamiConfig;
5
---
6

7
{enable && (
8
  <script
9
    is:inline
10
    define:vars={{ src, websiteId, domains, autoTrack, delayLoad }}
11
  >
12
    // 延迟加载Umami脚本
13
    function loadUmami() {
14
      const script = document.createElement('script');
15
      script.defer = true;
16
      script.src = src;
17
      script.setAttribute('data-website-id', websiteId);
18

19
      if (domains) {
20
        script.setAttribute('data-domains', domains);
21
      }
22

23
      if (autoTrack !== undefined) {
24
        script.setAttribute('data-auto-track', autoTrack.toString());
25
      }
26

27
      document.head.appendChild(script);
28
    }
29

30
    // 延迟加载
31
    if (delayLoad && delayLoad > 0) {
32
      setTimeout(loadUmami, delayLoad);
33
    } else {
34
      loadUmami();
35
    }
36
  </script>
37
)}

1.4 集成到布局#

在主布局文件中引入组件:

1
---
2
import UmamiAnalytics from "@/components/UmamiAnalytics.astro";
3
---
4

5
<html>
6
  <head>
7
    <!-- 其他head内容 -->
8
    <UmamiAnalytics />
9
  </head>
10
  <body>
11
    <!-- 页面内容 -->
12
  </body>
13
</html>

🔐 第二步: Cloudflare Worker API代理#

2.1 为什么需要代理?#

直接在前端调用Umami API会暴露API Token,存在安全风险。通过Cloudflare Worker代理可以:

🔒 隐藏API Token
⚡ 边缘缓存,提升性能
🌍 全球CDN加速
💰 免费额度充足

2.2 Worker完整代码#

创建Cloudflare Worker代理:

1
/**
2
 * Umami 统计数据代理 - Cloudflare Worker
3
 */
4

5
// ==================== 配置区域 ====================
6
const CONFIG = {
7
  // Umami API 地址
8
  UMAMI_API_URL: "https://views.freebird2913.tech/api",
9

10
  // Umami API Token (在 Umami 后台生成)
11
  UMAMI_API_TOKEN: "YOUR_UMAMI_API_TOKEN_HERE",
12

13
  // 网站 ID
14
  UMAMI_WEBSITE_ID: "726431d7-e252-486d-ab90-350313e5a519",
15

16
  // 允许的来源域名 (CORS)
17
  ALLOWED_ORIGINS: [
18
    "https://www.freebird2913.tech",
19
    "https://freebird2913.tech",
20
    "http://localhost:4321",
21
  ],
22

23
  // 缓存时间 (秒)
24
  CACHE_TTL: 300, // 5分钟
25
};
26
// ==================== 配置区域结束 ====================
27

28
export default {
29
  async fetch(request) {
30
    // CORS 预检请求
31
    if (request.method === "OPTIONS") {
32
      return handleCORS(request);
33
    }
34

35
    // 只允许 GET 请求
36
    if (request.method !== "GET") {
37
      return jsonResponse({ error: "Method not allowed" }, 405);
38
    }
39

40
    try {
41
      const url = new URL(request.url);
42
      const path = url.pathname;
43

44
      // 路由处理
45
      if (path === "/stats/total") {
46
        return await getTotalPageviews(request);
47
      }
48

49
      if (path === "/stats/page") {
50
        const pageUrl = url.searchParams.get("url");
51
        if (!pageUrl) {
52
          return jsonResponse({ error: "Missing url parameter" }, 400);
53
        }
54
        return await getPagePageviews(request, pageUrl);
55
      }
56

57
      if (path === "/") {
58
        return jsonResponse({
59
          status: "ok",
60
          message: "Umami Stats Proxy is running",
61
          endpoints: {
62
            total: "/stats/total - Get total website pageviews",
63
            page: "/stats/page?url=/path - Get specific page pageviews",
64
          },
65
        });
66
      }
67

68
      return jsonResponse({ error: "Not found" }, 404);
69
    } catch (error) {
70
      console.error("Error:", error);
71
      return jsonResponse(
72
        { error: "Internal server error", message: error.message },
73
        500
74
      );
75
    }
76
  },
77
};
78

79
/**
80
 * 获取网站总浏览量
81
 */
82
async function getTotalPageviews(request) {
83
  const cacheKey = "umami:total:pageviews";
84

85
  // 尝试从缓存获取
86
  const cached = await getCache(cacheKey);
87
  if (cached) {
88
    return jsonResponse(cached, 200, request);
89
  }
90

91
  // 计算时间范围 (最近30天)
92
  const endDate = new Date();
93
  const startDate = new Date();
94
  startDate.setDate(startDate.getDate() - 30);
95

96
  const startAt = startDate.getTime();
97
  const endAt = endDate.getTime();
98

99
  // 调用 Umami API
100
  const apiUrl = `${CONFIG.UMAMI_API_URL}/websites/${CONFIG.UMAMI_WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
101

102
  const response = await fetch(apiUrl, {
103
    headers: {
104
      Authorization: `Bearer ${CONFIG.UMAMI_API_TOKEN}`,
105
      "Content-Type": "application/json",
106
    },
107
  });
108

109
  if (!response.ok) {
110
    throw new Error(`Umami API error: ${response.status}`);
111
  }
112

113
  const data = await response.json();
114

115
  const result = {
116
    total: data.pageviews?.value || 0,
117
    visitors: data.visitors?.value || 0,
118
    visits: data.visits?.value || 0,
119
    bounces: data.bounces?.value || 0,
120
    totaltime: data.totaltime?.value || 0,
121
    cached: false,
122
    timestamp: Date.now(),
123
  };
124

125
  // 缓存结果
126
  await setCache(cacheKey, result, CONFIG.CACHE_TTL);
127

128
  return jsonResponse(result, 200, request);
129
}
130

131
/**
132
 * 获取特定页面浏览量和访客数
133
 */
134
async function getPagePageviews(request, pageUrl) {
135
  const cacheKey = `umami:page:${pageUrl}`;
136

137
  // 尝试从缓存获取
138
  const cached = await getCache(cacheKey);
139
  if (cached) {
140
    return jsonResponse(cached, 200, request);
141
  }
142

143
  // 计算时间范围 (所有时间)
144
  const endDate = new Date();
145
  const startDate = new Date("2020-01-01");
146

147
  const startAt = startDate.getTime();
148
  const endAt = endDate.getTime();
149

150
  // 调用 Umami API - 获取页面浏览量
151
  const pageviewsUrl = `${CONFIG.UMAMI_API_URL}/websites/${CONFIG.UMAMI_WEBSITE_ID}/metrics?startAt=${startAt}&endAt=${endAt}&type=url&url=${encodeURIComponent(pageUrl)}`;
152

153
  const pageviewsResponse = await fetch(pageviewsUrl, {
154
    headers: {
155
      Authorization: `Bearer ${CONFIG.UMAMI_API_TOKEN}`,
156
      "Content-Type": "application/json",
157
    },
158
  });
159

160
  if (!pageviewsResponse.ok) {
161
    throw new Error(`Umami API error: ${pageviewsResponse.status}`);
162
  }
163

164
  const pageviewsData = await pageviewsResponse.json();
165

166
  // 查找匹配的页面浏览量
167
  let pageviews = 0;
168
  if (Array.isArray(pageviewsData)) {
169
    const pageData = pageviewsData.find((item) => item.x === pageUrl);
170
    pageviews = pageData ? pageData.y : 0;
171
  }
172

173
  // 调用 Umami API - 获取页面访客数
174
  const visitorsUrl = `${CONFIG.UMAMI_API_URL}/websites/${CONFIG.UMAMI_WEBSITE_ID}/metrics?startAt=${startAt}&endAt=${endAt}&type=url&url=${encodeURIComponent(pageUrl)}`;
175

176
  const visitorsResponse = await fetch(visitorsUrl, {
177
    headers: {
178
      Authorization: `Bearer ${CONFIG.UMAMI_API_TOKEN}`,
179
      "Content-Type": "application/json",
180
    },
181
  });
182

183
  let visitors = 0;
184
  if (visitorsResponse.ok) {
185
    const visitorsData = await visitorsResponse.json();
186
    if (Array.isArray(visitorsData)) {
187
      const visitorData = visitorsData.find((item) => item.x === pageUrl);
188
      visitors = visitorData ? Math.min(visitorData.y, pageviews) : Math.ceil(pageviews * 0.8);
189
    }
190
  }
191

192
  const result = {
193
    url: pageUrl,
194
    pageviews: pageviews,
195
    visitors: visitors,
196
    cached: false,
197
    timestamp: Date.now(),
198
  };
199

200
  // 缓存结果
201
  await setCache(cacheKey, result, CONFIG.CACHE_TTL);
202

203
  return jsonResponse(result, 200, request);
204
}
205

206
/**
207
 * 处理 CORS
208
 */
209
function handleCORS(request) {
210
  const origin = request.headers.get("Origin");
211
  const allowedOrigins = CONFIG.ALLOWED_ORIGINS;
212

213
  const headers = {
214
    "Access-Control-Allow-Methods": "GET, OPTIONS",
215
    "Access-Control-Allow-Headers": "Content-Type",
216
    "Access-Control-Max-Age": "86400",
217
  };
218

219
  if (allowedOrigins.includes(origin)) {
220
    headers["Access-Control-Allow-Origin"] = origin;
221
  } else if (allowedOrigins.length === 0) {
222
    headers["Access-Control-Allow-Origin"] = "*";
223
  }
224

225
  return new Response(null, { status: 204, headers });
226
}
227

228
/**
229
 * 返回 JSON 响应
230
 */
231
function jsonResponse(data, status = 200, request = null) {
232
  const headers = {
233
    "Content-Type": "application/json",
234
    "Cache-Control": "public, max-age=300",
235
  };
236

237
  // 添加 CORS 头
238
  if (request) {
239
    const origin = request.headers.get("Origin");
240
    const allowedOrigins = CONFIG.ALLOWED_ORIGINS;
241

242
    if (allowedOrigins.includes(origin)) {
243
      headers["Access-Control-Allow-Origin"] = origin;
244
    } else if (allowedOrigins.length === 0) {
245
      headers["Access-Control-Allow-Origin"] = "*";
246
    }
247
  }
248

249
  return new Response(JSON.stringify(data), { status, headers });
250
}
251

252
/**
253
 * 简单的内存缓存
254
 */
255
const cache = new Map();
256

257
async function getCache(key) {
258
  const item = cache.get(key);
259
  if (!item) return null;
260

261
  if (Date.now() > item.expiry) {
262
    cache.delete(key);
263
    return null;
264
  }
265

266
  return { ...item.data, cached: true };
267
}
268

269
async function setCache(key, data, ttlSeconds) {
270
  cache.set(key, {
271
    data,
272
    expiry: Date.now() + ttlSeconds * 1000,
273
  });
274
}

2.3 部署Worker#

登录Cloudflare Dashboard
- 访问 dash.cloudflare.com
- 进入 Workers & Pages
创建新Worker
- 点击 “Create Worker”
- 命名为 umami-stats-proxy
- 点击 “Quick Edit”
粘贴代码
- 将上面的完整代码粘贴进去
- 重要: 修改 UMAMI_API_TOKEN 为你的真实Token
获取API Token
- 登录Umami后台
- 进入 Settings → API
- 点击 “Create Token”
- 复制Token并填入Worker代码
保存并部署
- 点击 “Save and Deploy”
- 记录Worker的URL (例如: https://umami-stats-proxy.your-name.workers.dev)
配置自定义域名(可选)
- 在Worker设置中添加自定义域名
- 例如: get-views.freebird2913.tech

📊 第三步: 浏览量显示组件#

3.1 创建显示组件#

创建浏览量和访客数显示组件:

1
---
2
import { umamiStatsConfig } from "@/config";
3

4
interface Props {
5
  type?: "total" | "page";  // 显示类型
6
  url?: string;             // 页面URL (type=page时必需)
7
  showVisitors?: boolean;   // 是否显示访客数
8
  class?: string;
9
}
10

11
const {
12
  type = "total",
13
  url,
14
  showVisitors = true,
15
  class: className,
16
} = Astro.props;
17

18
// 如果未启用统计功能,不渲染组件
19
if (!umamiStatsConfig.enable) {
20
  return null;
21
}
22

23
// 如果是页面浏览量但未提供URL,不渲染
24
if (type === "page" && !url) {
25
  console.warn("UmamiPageViews: type='page' requires url prop");
26
  return null;
27
}
28

29
// 生成唯一ID
30
const componentId = `umami-views-${Math.random().toString(36).substr(2, 9)}`;
31
---
32

33
<div
34
  class:list={["umami-page-views", className]}
35
  id={componentId}
36
  data-type={type}
37
  data-url={url}
38
  data-show-visitors={showVisitors}
39
>
40
  <div class="stat-item pageviews-item">
41
    <span class="label">浏览量:</span>
42
    <span class="views-count">
43
      <span class="loading">...</span>
44
      <span class="count" style="display: none;">0</span>
45
      <span class="error" style="display: none;">--</span>
46
    </span>
47
  </div>
48
  <div class="stat-item visitors-item" style={showVisitors ? "" : "display: none !important;"}>
49
    <span class="label">访客数量:</span>
50
    <span class="visitors-count">
51
      <span class="count">0</span>
52
    </span>
53
  </div>
54
</div>
55

56
<script>
57
  import { umamiStatsConfig } from "@/config";
58

59
  interface ViewsData {
60
    pageviews?: number;
61
    total?: number;
62
    visitors?: number;
63
    error?: string;
64
  }
65

66
  /**
67
   * 格式化数字显示
68
   */
69
  function formatNumber(num: number): string {
70
    if (num >= 10000) {
71
      return (num / 10000).toFixed(1) + "w";
72
    }
73
    if (num >= 1000) {
74
      return (num / 1000).toFixed(1) + "k";
75
    }
76
    return num.toString();
77
  }
78

79
  /**
80
   * 获取浏览量数据
81
   */
82
  async function fetchPageViews(type: string, url?: string): Promise<ViewsData> {
83
    try {
84
      let apiUrl = `${umamiStatsConfig.apiUrl}/stats/total`;
85
      if (type === "page" && url) {
86
        apiUrl = `${umamiStatsConfig.apiUrl}/stats/page?url=${encodeURIComponent(url)}`;
87
      }
88

89
      const response = await fetch(apiUrl);
90
      if (!response.ok) {
91
        throw new Error(`HTTP ${response.status}`);
92
      }
93

94
      const data = await response.json();
95
      return data;
96
    } catch (error) {
97
      console.error("Failed to fetch Umami page views:", error);
98
      return { error: (error as Error).message };
99
    }
100
  }
101

102
  /**
103
   * 更新显示
104
   */
105
  function updateDisplay(container: HTMLElement, data: ViewsData) {
106
    const showVisitors = container.getAttribute("data-show-visitors") === "true";
107
    const pageviewsItem = container.querySelector(".pageviews-item") as HTMLElement;
108
    const loadingEl = pageviewsItem?.querySelector(".loading") as HTMLElement;
109
    const countEl = pageviewsItem?.querySelector(".count") as HTMLElement;
110
    const errorEl = pageviewsItem?.querySelector(".error") as HTMLElement;
111

112
    if (loadingEl) loadingEl.style.display = "none";
113

114
    if (data.error) {
115
      console.error("Umami stats error:", data.error);
116
      if (errorEl) {
117
        errorEl.style.display = "inline";
118
      }
119
      return;
120
    }
121

122
    // 更新浏览量 (支持 pageviews 和 total 两种字段)
123
    const viewCount = data.pageviews ?? data.total;
124
    if (viewCount !== undefined && countEl) {
125
      countEl.textContent = formatNumber(viewCount);
126
      countEl.style.display = "inline";
127
    }
128

129
    // 更新访问者数量
130
    if (showVisitors && data.visitors !== undefined) {
131
      const visitorsItem = container.querySelector(".visitors-item") as HTMLElement;
132
      const visitorsCountEl = visitorsItem?.querySelector(".count") as HTMLElement;
133

134
      if (visitorsItem && visitorsCountEl) {
135
        visitorsCountEl.textContent = formatNumber(data.visitors);
136
        visitorsItem.style.display = "flex";
137
      }
138
    }
139
  }
140

141
  /**
142
   * 初始化组件
143
   */
144
  function initUmamiPageViews() {
145
    if (!umamiStatsConfig.enable) return;
146

147
    const containers = document.querySelectorAll(".umami-page-views");
148
    containers.forEach(async (container) => {
149
      const type = container.getAttribute("data-type") || "total";
150
      const url = container.getAttribute("data-url") || undefined;
151

152
      const data = await fetchPageViews(type, url);
153
      updateDisplay(container as HTMLElement, data);
154
    });
155
  }
156

157
  // 页面加载完成后初始化
158
  if (document.readyState === "loading") {
159
    document.addEventListener("DOMContentLoaded", initUmamiPageViews);
160
  } else {
161
    initUmamiPageViews();
162
  }
163

164
  // 支持页面导航后重新加载 (SPA模式)
165
  document.addEventListener("astro:page-load", initUmamiPageViews);
166
</script>
167

168
<style>
169
  .umami-page-views {
170
    display: inline-flex;
171
    align-items: center;
172
    gap: 1.5rem;
173
    font-size: 0.875rem;
174
    color: var(--color-text-secondary, #666);
175
  }
176

177
  .stat-item {
178
    display: inline-flex;
179
    align-items: center;
180
    gap: 0.5rem;
181
  }
182

183
  .label {
184
    font-size: 0.875rem;
185
    opacity: 0.9;
186
    font-weight: 500;
187
  }
188

189
  .views-count,
190
  .visitors-count {
191
    font-variant-numeric: tabular-nums;
192
    font-weight: 600;
193
    color: var(--color-text-primary, #333);
194
  }
195

196
  .loading {
197
    opacity: 0.6;
198
    font-size: 0.75rem;
199
  }
200

201
  .error {
202
    opacity: 0.4;
203
  }
204

205
  /* 深色模式支持 */
206
  :global(.dark) .umami-page-views {
207
    color: var(--color-text-secondary-dark, #999);
208
  }
209

210
  :global(.dark) .views-count,
211
  :global(.dark) .visitors-count {
212
    color: var(--color-text-primary-dark, #eee);
213
  }
214
</style>

3.2 在首页Profile中使用#

1
---
2
import UmamiPageViews from "@/components/UmamiPageViews.astro";
3
---
4

5
<div class="profile-card">
6
  <!-- 其他内容 -->
7

8
  <!-- 总浏览量显示 -->
9
  <div class="flex justify-center mb-2.5">
10
    <UmamiPageViews type="total" class="text-sm" />
11
  </div>
12
</div>

1
---
2
import UmamiPageViews from "./UmamiPageViews.astro";
3
---
4

5
<footer>
6
  <!-- 统计信息 -->
7
  <div class="mb-4">
8
    <UmamiPageViews type="total" showVisitors={true} />
9
  </div>
10

11
  <!-- 其他页脚内容 -->
12
</footer>

🎯 使用指南#

开发环境测试#

1
# 启动开发服务器
2
pnpm run dev
3

4
# 访问 http://localhost:4321
5
# 打开浏览器控制台查看Umami脚本加载情况

生产构建#

1
# 构建生产版本
2
pnpm run build
3

4
# 预览构建结果
5
pnpm run preview

验证功能#

追踪脚本验证
- 打开浏览器开发者工具
- 查看Network标签
- 确认Umami脚本已加载
浏览量显示验证
- 查看首页Profile区域
- 查看页面底部Footer
- 确认数字正常显示

API代理验证

1
# 测试总浏览量API
2
curl https://get-views.freebird2913.tech/stats/total
3

4
# 测试页面浏览量API
5
curl https://get-views.freebird2913.tech/stats/page?url=/

🔍 故障排查#

问题1: 浏览量显示为 ”…”#

可能原因:

Worker未部署或配置错误
API Token无效
CORS配置问题

解决方法:

1
# 1. 检查Worker是否正常运行
2
curl https://your-worker.workers.dev/
3

4
# 2. 检查API响应
5
curl https://your-worker.workers.dev/stats/total
6

7
# 3. 查看浏览器控制台错误信息

问题2: 追踪脚本未加载#

可能原因:

配置中 enable 为 false
脚本URL错误
网络问题

解决方法:

检查 src/config.ts 中的配置
验证Umami服务是否正常运行
查看浏览器Network标签

问题3: 访客数量显示为0#

可能原因:

Worker代码中访客数逻辑问题
Umami API返回数据格式变化

解决方法:

查看Worker日志
检查API返回的数据结构
更新Worker代码中的数据提取逻辑

📈 性能优化#

延迟加载#

通过延迟加载Umami脚本,避免影响首屏性能:

1
// 配置延迟2秒加载
2
delayLoad: 2000

缓存策略#

Worker中实现了5分钟缓存:

1
const CACHE_TTL = 300; // 5分钟

数字格式化#

大数字自动格式化为k/w:

1
// 10000+ 显示为 "1.0w"
2
// 1000+ 显示为 "1.0k"

🎨 自定义样式#

修改颜色#

1
.umami-page-views {
2
  color: #your-color;
3
}
4

5
.views-count {
6
  color: #your-primary-color;
7
}

修改布局#

1
.umami-page-views {
2
  flex-direction: column; /* 垂直布局 */
3
  gap: 0.5rem;
4
}

📚 相关资源#

官方文档#

工具推荐#

Umami Cloud - 托管服务
Umami GitHub - 源码仓库

💡 总结#

通过本教程,我们实现了:

✅ 隐私友好的网站分析
✅ 实时浏览量和访客数显示
✅ 安全的API代理方案
✅ 优秀的性能表现
✅ 完整的错误处理

核心优势#

隐私保护: 不使用Cookie,符合GDPR
性能优化: 延迟加载,边缘缓存
安全可靠: API Token隐藏,CORS保护
易于维护: 代码清晰,配置简单

后续优化#

添加更多统计维度(来源、设备等)
实现实时访客在线数
添加数据可视化图表
集成更多分析功能

创建日期: 2025年10月11日
最后更新: 2025年10月11日
版本: 1.0.0
状态: ✅ 已完成

Astro博客集成Umami分析服务 - 完整实战指南

Astro博客集成Umami分析服务#

📊 项目概览#

为什么选择Umami?#

实现功能#

🚀 第一步: 配置Umami追踪#

1.1 定义配置类型#

1.2 添加配置项#

1.3 创建追踪组件#

1.4 集成到布局#

🔐 第二步: Cloudflare Worker API代理#

2.1 为什么需要代理?#

2.2 Worker完整代码#

2.3 部署Worker#

📊 第三步: 浏览量显示组件#

3.1 创建显示组件#

3.2 在首页Profile中使用#

3.3 在页脚Footer中使用#

🎯 使用指南#

开发环境测试#

生产构建#

验证功能#

🔍 故障排查#

问题1: 浏览量显示为 ”…”#

问题2: 追踪脚本未加载#

问题3: 访客数量显示为0#

📈 性能优化#

延迟加载#

缓存策略#

数字格式化#

🎨 自定义样式#

修改颜色#

修改布局#

📚 相关资源#

官方文档#

工具推荐#

💡 总结#

核心优势#

后续优化#