如何将GitHub Pages项目的贡献计数器数据同步到其他项目

阿华AIGC实验室

2026-5-15

解决方案：同步GitHub Pages项目的计数器数值到作品集网站

我懂你的困扰——直接引入原项目的JS文件根本没用，因为它依赖目标页面的.cards DOM元素对吧？别担心，咱们不用搞复杂的后端API，几个简单的方法就能搞定，而且完全符合你“加载时获取最新数值”的需求：

方案1：生成静态数值文件（最推荐，稳定且易实现）

核心思路是在你的计数器项目里，每次PR合并时自动生成一个只存数值的静态文件（比如count.txt或count.json），然后你的作品集网站直接请求这个文件就行。

步骤1：用GitHub Actions自动更新数值文件

在计数器项目的根目录下创建.github/workflows/update-count.yml文件，配置一个自动触发的工作流：

name: 更新贡献次数
on:
  pull_request:
    types: [closed]
    branches: [main] # 替换成你的主分支名称

jobs:
  update-count:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4

      - name: 安装Node.js依赖
        run: npm install node-fetch cheerio --save-dev

      - name: 统计卡片数量并写入文件
        run: node count-cards.js

      - name: 提交并推送更改
        run: |
          git config --global user.name "GitHub Actions"
          git config --global user.email "actions@github.com"
          git add count.txt
          git commit -m "自动更新贡献次数"
          git push

步骤2：编写统计卡片的脚本

在项目根目录创建count-cards.js，用来爬取自己的GitHub Pages页面并统计.cards数量：

const fetch = require('node-fetch');
const cheerio = require('cheerio');
const fs = require('fs');

async function updateCount() {
  // 替换成你的计数器项目GitHub Pages域名
  const pageUrl = 'https://你的用户名.github.io/计数器项目名/';
  const response = await fetch(pageUrl);
  const html = await response.text();
  
  // 用cheerio解析DOM，统计.cards元素数量
  const $ = cheerio.load(html);
  const cardCount = $('.cards').length;
  
  // 写入静态文件
  fs.writeFileSync('count.txt', cardCount.toString());
}

updateCount();

步骤3：作品集网站获取数值

在你的作品集页面添加这段JS，加载时拉取静态文件并显示数值：

// 替换成你的计数器项目的count.txt地址
fetch('https://你的用户名.github.io/计数器项目名/count.txt')
  .then(res => res.text())
  .then(count => {
    // 把数值插入到你想显示的元素中，比如id为contribution-count的元素
    document.getElementById('contribution-count').textContent = count;
  })
  .catch(err => {
    console.error('获取贡献次数失败:', err);
    // 失败时显示默认值
    document.getElementById('contribution-count').textContent = 'N/A';
  });

方案2：直接调用GitHub API（适合PR数量=贡献次数的场景）

如果你的贡献次数和合并的PR数量完全对应，可以跳过静态文件，直接用GitHub API拉取合并的PR数量：

// 替换成你的用户名和计数器仓库名
fetch('https://api.github.com/repos/你的用户名/计数器仓库名/pulls?state=closed')
  .then(res => res.json())
  .then(pulls => {
    // 过滤出已合并的PR
    const mergedCount = pulls.filter(pull => pull.merged_at !== null).length;
    document.getElementById('contribution-count').textContent = mergedCount;
  })
  .catch(err => {
    console.error('获取PR数据失败:', err);
    document.getElementById('contribution-count').textContent = 'N/A';
  });

⚠️ 注意：GitHub API未认证请求每小时限制60次，如果你作品集访问量不大完全够用；如果访问量高，可以考虑加个简单的后端代理（或者用Netlify/Vercel的函数转发请求）。

方案3：解析计数器页面的HTML（无需额外配置，适合快速测试）

如果不想搞自动化脚本，也可以直接拉取计数器页面的HTML，解析出数值（比如你原来的页面已经显示了计数器数值，可以直接提取）：

fetch('https://你的用户名.github.io/计数器项目名/')
  .then(res => res.text())
  .then(html => {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    // 假设你的计数器数值放在id为counter的元素里
    const count = tempDiv.getElementById('counter').textContent;
    document.getElementById('contribution-count').textContent = count;
  })
  .catch(err => {
    console.error('获取页面失败:', err);
    document.getElementById('contribution-count').textContent = 'N/A';
  });