[{"data":1,"prerenderedAt":153},["ShallowReactive",2],{"content:\u002Fposts\u002Fumami-views":3,"surround:\u002Fposts\u002Fumami-views":142},{"id":4,"title":5,"body":6,"categories":114,"date":116,"description":117,"draft":118,"extension":119,"image":120,"meta":121,"navigation":123,"path":124,"permalink":125,"pinned":118,"published":125,"readingTime":126,"recommend":125,"references":125,"seo":131,"sitemap":132,"stem":133,"tags":134,"type":139,"updated":140,"__hash__":141},"content\u002Fposts\u002Fposts\u002Fumami-views.md","Firefly 魔改：Umami Share API 浏览量展示",{"type":7,"value":8,"toc":108},"minimark",[9,19,22,25,30,46,56,71,81,85,88,99],[10,11,15],"alert",{"title":12,"type":13,"icon":14},"AI 迁移提示","info","tabler:robot",[16,17,18],"p",{},"本文由 AI 协助从旧站迁移，尚未完成逐篇人工审校；内容如有疏漏，将在复核后修订。",[10,20],{"title":21,"type":13},"> 本文部分内容由 AI 辅助整理，已结合实际操作进行校验，请根据自身环境谨慎使用。",[16,23,24],{},"访问量数据不仅是站长关心的事，展示给访客也能增加内容的可信度。Umami 是一个开源的网站统计工具，本文将介绍如何在前端展示 Umami 浏览量数据。",[26,27,29],"h2",{"id":28},"一小巧思share-id","一、小巧思：Share ID",[16,31,32,33,37,38,41,42,45],{},"通常情况下调用 Umami API 需要先登录获取 Token（",[34,35,36],"code",{"code":36},"POST \u002Fapi\u002Fauth\u002Flogin"," → 返回 ",[34,39,40],{"code":40},"token"," → 后续请求带 ",[34,43,44],{"code":44},"Authorization: Bearer \u003Ctoken>","）。但这样做有两个问题：",[47,48,49,53],"ol",{},[50,51,52],"li",{},"需要在客户端暴露用户名密码",[50,54,55],{},"Token 会过期，需要刷新逻辑",[16,57,58,59,62,63,66,67,70],{},"Umami 提供了一个「分享」功能——在 Umami 后台创建一个分享链接，会得到一个 ",[34,60,61],{"code":61},"shareId","。访问 ",[34,64,65],{"code":65},"\u002Fapi\u002Fshare\u002F{shareId}"," 即可获取一个临时 Token，后续请求携带 ",[34,68,69],{"code":69},"x-umami-share-token"," 头即可查询统计数据。",[16,72,73,77,78,80],{},[74,75,76],"strong",{},"关键点","：Share Token 只能查询公开数据，无法修改任何配置，安全性远高于管理员 Token。整个流程只需一个 ",[34,79,61],{"code":61},"，无需暴露任何凭证。",[26,82,84],{"id":83},"二配置","二、配置",[16,86,87],{},"在配置文件中填入 Umami 信息和 Share ID：",[89,90,96],"pre",{"className":91,"code":93,"language":94,"meta":95},[92],"language-typescript","export const analyticsConfig = {\n  umamiAnalytics: {\n    websiteId: \"xxxx\",                          \u002F\u002F 站点 ID\n    scriptUrl: \"https:\u002F\u002Fumami.example.com\u002Fumami.js\",\n    shareId: \"xxxx\",                             \u002F\u002F 公开分享 ID\n    shareApiBase: \"https:\u002F\u002Fumami.example.com\",\n    trackOutboundLinks: true,\n    collectWebVitals: true,\n  },\n};\n","typescript","title=\"src\u002Fconfig\u002FanalyticsConfig.ts\"",[34,97,93],{"__ignoreMap":98},"",[16,100,101,103,104,107],{},[34,102,61],{"code":61}," 从 Umami 后台的「分享」功能获取，",[34,105,106],{"code":106},"shareApiBase"," 是你的 Umami 实例地址。",{"title":98,"searchDepth":109,"depth":109,"links":110},4,[111,113],{"id":28,"depth":112,"text":29},2,{"id":83,"depth":112,"text":84},[115],"Firefly","2026-07-03 21:40:29","集成 Umami 统计并通过公开 Share API 在博客前端展示页面\u002F文章浏览量。",false,"md","https:\u002F\u002Fimg.olinl.com\u002Ffile\u002Fpost-img\u002Fumami-views\u002Fcover.webp",{"slots":122},{},true,"\u002Fposts\u002Fumami-views",null,{"text":127,"minutes":128,"time":129,"words":130},"2 min read",1.625,97500,325,{"title":5,"description":117},{"loc":124},"posts\u002Fposts\u002Fumami-views",[115,135,136,137,138],"博客","二开","Umami","统计","tech","2026-07-22 19:30:00","o8oP3dBciQBLX11I0vLu56ZfnOqIeTyrS7Vnaaig0Ro",[143,148],{"title":144,"path":145,"stem":146,"date":147,"type":139,"children":-1},"迁移多次网站后，我回归了博客的本质","\u002Fposts\u002Fless-blog","posts\u002Fposts\u002Fless-blog","2026-06-23 20:13:26",{"title":149,"path":150,"stem":151,"date":152,"type":139,"children":-1},"Firefly 魔改：时段问候实时时钟组件","\u002Fposts\u002Ftime-greeting","posts\u002Fposts\u002Ftime-greeting","2026-07-04 13:09:20",1788712222722]