GitHub个人资料访问量快速统计
更新：
对于那些不想运行自己服务器的人，请务必查看快速指南，了解如何使用一行 Markdown 代码添加访客计数器。
GitHub 个人资料是该平台的一项出色功能。通过个人资料，您可以突出展示您的经验和兴趣，并在访客访问您的个人资料时展现您的个性。虽然有很多关于创建个人资料的指南，但如果您还没有开始创建，您可以通过创建一个与您的 GitHub 用户名匹配的新仓库来添加您的个人资料。对 README.md 文件的任何编辑都会在访客访问 github.com/{your_user_name} 时显示出来。
网站计数器
我想看看能不能把我的个人主页弄得有点像 90 年代的网站。90 年代个人网站的一个重要组成部分就是访客计数器。我们可以用 Node 和 Express 快速创建一个有趣（但不一定准确）的计数器。我最终用了 Glitch，但这个方法应该适用于任何支持 Node 的平台。
Node/Express项目
该项目的全部代码都发布在下方（或者在这个 GitHub gist中，或者在Glitch 上运行）。如果这是一个更正式的生产应用，我们会避免或改进很多做法。关键在于，这里展示的是一个可以快速完成的、有趣的项目。
跟踪访问
从总体上看，该应用程序包含一个用于记录访问次数的变量，以及一个响应 count.svg 请求并更新访问次数的端点。此外，count.svg 端点还应根据访问次数生成并返回相应的图像。
const express = require('express')
const app = express()
const PLACES = 7;
// no db - so global var to keep track of count
let counter = 0
function getCountImage(count) {
...
}
// get the image
app.get('/count.svg', (req, res) => {
counter++;
// This helps with GitHub's image cache
// see more: https://rushter.com/counter.svg
res.set({
'content-type': 'image/svg+xml',
'cache-control': 'max-age=0, no-cache, no-store, must-revalidate'
})
// Send the generated SVG as the result
res.send(getCountImage(counter));
})
const listener = app.listen(process.env.PORT, () => {
console.log('Your app is listening on port ' + listener.address().port)
})
跟踪访问次数
我们使用全局计数器变量来跟踪访问次数。当 count.svg 收到请求时，我们会更新全局计数器变量并生成一张图片。
// set up the counter variable
let counter = 0;
...
app.get('/count.svg', (req, res) => {
// update the counter on any image request
counter++;
...
}
生成图像
我在 Sketch 中创建了一张图片，然后将结果复制为 SVG 格式并粘贴到getCountImage方法中。这张图片经过一些拆解，并使用我们的计数值重新构建。
你会注意到，在这个函数中，我们将计数转换为填充字符串，然后再转换为数组。这样我们就可以在计数前显示指定数量的零。const countArray = count.toString().padStart(PLACES, '0').split('');接下来，我们通过将数组简化为单个字符串，并在 SVG 中引用该字符串，来构建图像中计数方块的部分。
Reduce 函数有时可能比较难理解，而且通常可以用更标准的循环结构来代替。在这个例子中，我们实际上是在遍历数组中的所有元素，并将这个新的 SVG 部分与之前的内容合并。
function getCountImage(count) {
// This is not the greatest way for generating an SVG but it'll do for now
const countArray = count.toString().padStart(PLACES, '0').split('');
const parts = countArray.reduce((acc, next, index) => `
${acc}
<rect id="Rectangle" fill="#000000" x="${index * 32}" y="0.5" width="29" height="29"></rect>
<text id="0" font-family="Courier" font-size="24" font-weight="normal" fill="#00FF13">
<tspan x="${index * 32 + 7}" y="22">${next}</tspan>
</text>
`, '');
return `<?xml version="1.0" encoding="UTF-8"?>
<svg width="${PLACES * 32}px" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Count</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
${parts}
</g>
</svg>
}
总结
理想情况下，我们希望持久化计数，以确保服务器重启后计数能从上次中断的地方恢复。
这可以是数据库记录，也可以是直接写入文件。在这个例子中，我并不太在意计数丢失，因为这主要是为了实现90年代的设计美学 :D
完整的代码可以在这个 GitHub gist中找到，或者在Glitch 上运行。
其他参考资料：
我首先参考了Flavio Copes 的一个分析示例，该示例可在此处查看。在这个示例中，Flavio 创建了一个 SVG 文件，用于收集网站访问量，作为 Google Analytics 的一个简单替代方案。
Artem Golubin 撰写的这篇关于同一主题的文章对我理解如何调整 HTTP 标头以配合 GitHub 的图片缓存非常有帮助。GitHub有一个名为 Camo 的出色功能，可以匿名化图片中的浏览器信息，从而防止追踪。如果不调整 HTTP 标头，图片在新用户访问时将不会更新。
文章来源：https://dev.to/ryanlanciaux/quick-github-profile-visit-counter-14en