本文档介绍了 GitHub Readme Stats 项目中的 WakaTime 卡片子系统。WakaTime 卡片生成 SVG 卡片,显示用户在 WakaTime(一个面向开发者的时间跟踪服务)上的编码统计数据。有关系统中其他卡片类型的信息,请参阅 统计卡片、仓库卡片 和 热门语言卡片。
WakaTime 卡片组件集成了 WakaTime 的 API,用于获取用户的编程时间统计数据,并将其渲染为可嵌入 GitHub README 文件的 SVG 卡片。它显示诸如特定时间段内的总编码时间和最常用的编程语言等统计信息。
WakaTime 卡片 API 端点在 /api/wakatime.js 文件中实现。该端点处理 HTTP 请求、提取查询参数、从 WakaTime 获取数据并返回渲染后的 SVG 卡片。
该端点接受许多查询参数来定制卡片
| 参数 | 描述 |
|---|---|
username | WakaTime 用户名(必需) |
api_domain | 自定义 WakaTime API 域名(可选) |
hide_title | 是否隐藏卡片标题 |
hide_border | 是否隐藏卡片边框 |
custom_title | 卡片的自定义标题 |
hide_progress | 是否隐藏进度条 |
layout | 卡片布局样式 |
langs_count | 要显示的语言数量 |
hide | 要隐藏的特定项目列表 |
theme | 用于样式的颜色主题名称 |
bg_color | 背景颜色 |
title_color | 标题颜色 |
text_color | 文本颜色 |
icon_color | 图标颜色 |
border_color | 边框颜色 |
border_radius | 边框圆角 |
line_height | 文本行高 |
locale | 翻译的本地化设置 |
display_format | 时间统计的显示格式 |
disable_animations | 是否禁用动画 |
该端点的处理流程如下
fetchWakatimeStats 函数获取 WakaTime 统计数据renderWakatimeCard 函数渲染并返回 SVG 卡片WakaTime 卡片使用 src/fetchers/wakatime-fetcher.js 中的 fetchWakatimeStats 函数从 WakaTime API 获取统计数据。此函数
获取器返回结构化数据,其中包含
来源:api/wakatime.js9 api/wakatime.js52
src/cards/wakatime-card.js 中的 renderWakatimeCard 函数生成 WakaTime 卡片的 SVG 标记。与 Gist 卡片类似(供参考),渲染过程
卡片可视化通常包括
来源:api/wakatime.js1 api/wakatime.js70-90
WakaTime 卡片通过查询参数支持广泛的自定义。主要自定义功能包括
卡片可以使用颜色主题系统中定义的任何颜色主题。颜色主题系统提供了应用于各种卡片元素的配色方案。
卡片文本可以根据提供的本地化设置进行翻译,使用与国际化中描述的相同的国际化系统。
卡片支持用于显示语言统计信息的不同布局选项,这会影响进度条和百分比的排列方式。
用户可以使用 hide 参数自定义要在卡片上显示或隐藏的元素,以过滤特定语言或统计信息。
WakaTime 卡片实现包括强大的错误处理
发生错误时,系统将渲染一个错误卡片,其中显示错误消息而不是统计信息。
来源:api/wakatime.js39-49 api/wakatime.js92-107
为了优化性能并减少 API 调用,WakaTime 卡片实现了一个缓存策略
CONSTANTS.CARD_CACHE_SECONDS 值决定s-maxage 配置CONSTANTS.ERROR_CACHE_SECONDS)此策略平衡了数据的时效性、性能和 API 速率限制。