• 开发工具

GitHub Profile README Generator（以下简称"生成器"）在基础 Markdown 输出之外，还整合了多个由社区开发者维护的开源 Addon（增强组件），用于在个人 README 中动态展示 GitHub 统计、连续贡献天数、主页访问计数和最新博客文章。本文以仓库中的 addons 说明文档 为主体，结合 Addons 页面组件、Markdown 生成器源码 与 默认配置，逐类讲解每个 Addon 的用途、参数含义、定制方式，以及它们在生成器中的开关与代码级接入原理，读完后你可以准确理解生成器输出的每段 Addon 代码，并掌握 Blog Post Workflow 的完整配置方法。

Addons 页面在项目中的定位

addons.md是生成器站点的静态内容源之一，它定义了/addons路由页面（src/app/addons/page.tsx）的正文内容，对应的 Next.js 元数据标题为 "Addons"，canonical指向/addons。文档开篇即说明了项目的立场：生成器本身并不重复造轮子，而是"使用其他开发者开发的开源 Addons"来增强工具实用性，并明确表达了对这些第三方开源项目的致谢。这意味着：生成器输出的动态徽章与统计卡片，全部由外部免费微服务渲染，生成器负责的是把这些服务的 URL 按用户配置拼装进最终 README。

文档共收录四类 Addon，下面逐一展开。

一、GitHub README Stats：动态统计卡与技能卡

由 Anurag Hazra 开发的github-readme-stats是一个根据你的 GitHub 数据动态渲染统计图片的服务，主打"⚡️ Dynamically generated stats for your github readmes"。

GitHub Stats Card（统计卡）

在 README 中嵌入下面这种形式的图片标签即可获得统计卡：

<a href="https://github.com/你的用户名" target="blank"> <img src="https://github-readme-stats.vercel.app/api?username=你的用户名&show_icons=true" width="320" alt="github stats"/> </a>

核心参数username指定统计对象，show_icons=true控制是否在统计项旁显示图标。文档示例中该卡片被包在指向作者主页的链接内，用户点击图片即可跳转到对应 GitHub 主页。

Top Skills Card（技能卡）

用于展示你最常用的编程语言占比：

<a href="https://github.com/你的用户名" target="blank"> <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=你的用户名&layout=compact&hide=html" width="320" alt="top skills"/> </a>

参数含义：layout=compact让语言列表以紧凑横向布局渲染，hide=html表示不统计 HTML 这类标记语言。两个卡片端点共用同一个服务，均支持主题定制。

生成器中的接入方式

生成器在 markdown-generator.ts 中通过githubStats开关控制该类统计输出——当用户在表单勾选 GitHub Stats 且已填写 GitHub 用户名时，生成器会一次性输出两张卡片：左侧为top-langs（show_icons=true&locale=en&layout=compact），居中为api统计卡（show_icons=true&locale=en），两者均使用 做间距排版。与之配套的topLanguages开关则只控制语言卡。

对应表单控件位于 skills-section.tsx，勾选项分别为githubStats、topLanguages、streakStats。在 defaults.ts 中可以看到这两类卡片的可定制选项结构：theme（主题名）、titleColor（标题颜色）、textColor（文字颜色）、bgColor（背景颜色）、hideBorder（隐藏边框）、cacheSeconds（缓存秒数）、locale（语言，默认en）。这些选项直接对应github-readme-stats服务的查询参数，勾选统计后即可按需修改，最终拼入图片 URL。

二、GitHub Readme Streak Stats：连续贡献天数卡片

由 Jonah Lawrence 开发的github-readme-streak-stats服务，通过展示"当前连续贡献天数"来激励开发者坚持为开源做贡献（"Stay motivated while contributing to open source"）。示例嵌入方式：

![用户名](https://github-readme-streak-stats.herokuapp.com/?user=你的用户名)

该服务同样支持主题定制（文档建议前往其官方仓库查看themes配置方式）。在生成器中，它由streakStats开关控制，markdown-generator.ts 会输出：

<p><img align="center" src="https://github-readme-streak-stats.herokuapp.com/?user=你的用户名&" alt="你的用户名" /></p>

注意生成器默认只在 URL 上追加user参数，theme保留为空字符串（见 defaults.ts 的streakStatsOptions），因此使用默认主题；如需换主题，可在选项中对theme赋值，生成的 URL 会带上&theme=xxx。

三、GitHub Profile Views Counter：主页访问计数徽章

由 Anton Komarev 开发的github-profile-views-counter是一个免费的云微服务，用于统计你的 GitHub 主页被访问的次数，示例嵌入：

![用户名](https://komarev.com/ghpvc/?username=你的用户名&style=flat-square)

文档明确说明该徽章的color（颜色）、label（标签文字）和style（样式）都可以定制。

这是生成器最常用的 Addon 之一。用户在"Profile Enhancement"区域勾选 "Show profile visitors counter badge"（对应 basic-info-section.tsx 的visitorsBadge复选框）后，markdown-generator.ts 会输出：

<p align="left"> <img src="https://komarev.com/ghpvc/?username=你的用户名&label=Profile views&color=0e75b6&style=flat" alt="你的用户名" /> </p>

三个参数的默认值定义在 defaults.ts：badgeStyle默认flat（文档示例使用的flat-square是另一种常见风格）、badgeColor默认0e75b6（蓝色）、badgeLabel默认Profile views。也就是说，即使不额外配置，生成器也会给出完整可用的访问计数徽章。

四、Dynamic Latest Blog Posts：自动同步最新博客文章

由 Gautam Krishna R 开发的blog-post-workflow是一个 GitHub Actions 工作流，它通过 RSS 订阅源（如 dev.to、Medium）或 StackOverflow 活动，自动把最新文章列表写入你的 GitHub 主页或项目 README，无需手动维护。这是四类 Addon 中唯一需要"动手配置工作流文件"的组件，文档给出了完整的接入步骤。

步骤一：在 README.md 中预留替换锚点

在 README 中任意位置加入下面的注释区块（标题可自定，但注释必须原样保留）。工作流每次运行时会把这段注释整体替换为真实文章列表：

# Blog posts <!-- BLOG-POST-LIST:START --> <!-- BLOG-POST-LIST:END -->

<!-- BLOG-POST-LIST:START -->与<!-- BLOG-POST-LIST:END -->是工作流识别并重写的锚点标记，二者缺一不可。

步骤二：创建 GitHub Actions 工作流文件

在仓库中创建.github目录（如不存在则连同workflows子目录一起创建），然后新建文件.github/workflows/blog-post-workflow.yml，内容如下：

name: Latest blog post workflow on: schedule: # Runs every hour - cron: '0 * * * *' jobs: update-readme-with-blog: name: Update this repo's README with latest blog posts runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: gautamkrishnar/blog-post-workflow@master with: feed_list: 'https://dev.to/feed/你的用户名, https://medium.com/feed/@你的用户名'

文件结构说明：

• on.schedule.cron: '0 * * * *'：每小时整点触发一次工作流；
• actions/checkout@v2：检出仓库代码，供后续步骤修改 README；
• gautamkrishnar/blog-post-workflow@master：核心动作，with.feed_list接收逗号分隔的 RSS 地址列表，多个订阅源用逗号分隔写在同一字符串中；
• 工作流会在每次运行时拉取这些 RSS 源，将最新文章条目渲染进 README 的锚点注释之间，然后自动提交。

步骤三：替换订阅源并提交

将feed_list中的示例地址替换为你自己的 RSS 地址（dev.to 的格式为https://dev.to/feed/用户名，Medium 的格式为https://medium.com/feed/@用户名），提交后等待工作流按计划执行即可。之后每次触发，README 都会自动更新为最新的文章列表。

生成器与 Addons 的映射关系一览

结合 markdown-generator.ts 与 defaults.ts，可将四类 Addon 与生成器的开关、默认参数汇总如下：

需要留意的是：以上 URL 与参数由生成器源码拼接输出（如 markdown-generator.ts），具体渲染效果与更多定制项（主题名、布局、徽章样式等）取决于对应外部服务当时的接口能力，实际使用时请以相关服务的官方仓库说明为准。另外，从 markdown-generator.ts 可以看到生成器还接入了github-profile-trophy（奖杯墙）等类似性质的动态徽章服务，它们与本文四类 Addon 同属"外部动态渲染、生成器拼接 URL"的接入模式。

结语

四类 Addon 覆盖了 GitHub 主页 README 最常见的动态内容需求：统计卡与技能卡展示技术数据、连续贡献卡传递活跃度、访问计数徽章体现主页热度、博客工作流让 README 保持内容新鲜度。理解它们的端点、参数与生成器开关的对应关系后，你既能精确解释生成器输出的每一行 Markdown，也能脱离生成器、直接在个人 README 中手工复用这些组件——只需替换 URL 中的username并调整参数即可。若要进一步了解生成器如何把这些 URL 与社交链接、技能图标等一并组装成完整 Markdown，可继续阅读 markdown-generator.ts 的generateMarkdown函数与 生成器主页源码。

• 开发工具