在React应用程序中，根据存储库语言设置Github语言颜色。

Question

我正在为自己构建一个作品集网站，并有一个部分展示了我在GitHub上的所有项目，其中公共库从GitHub API中自动获取。

我希望实现的功能是，在每个存储库旁边显示一个彩色图块，取决于其中使用的语言。例如，如果 repo.language = 'javascript'，那么我想要一个黄色的图块（这是JavaScript的GitHub颜色）。我知道GitHub使用名为Linguist的库，但不知道如何最好地将其与我的Web应用程序实现。

我知道最简单的方法是使用为每个库获取的语言作为className并在CSS中指定颜色，但我正在寻找更高级的选项，不需要手动更新每次使用新语言创建库时的CSS文件（并且让我的CSS混乱）

如果你们中有任何人做过这件事或者有任何想法，请在下面留言；）

- PRR

Answer 1

对于那些遇到同样问题的人，这是最简单的方法。

将CSS类设置为与查询中传入的语言数据完全相同，例如如果repo.language是'JavaScript'，则CSS类应该是.JavaScript { color: #XXXXXX }，其中color是对应该语言的十六进制值（可以在Gist @VonC链接中找到）。

- PRR

Answer 2

对于给定的代码库，您可以通过GitHub API v3列出其使用的编程语言。

GET /repos/:owner/:repo/languages

这有助于HTML内容生成方面。

但仍需要一个最新的CSS文件，最好是包含所有支持的语言的文件，例如这个文件。

OP PRR在评论中添加了以下内容:

我最终只获取每个存储库的顶部语言，然后在CSS文件中存储我使用的所有语言的十六进制代码，因此当我开始使用它们时，我可以更新它并添加更多语言。

- VonC

---

我最终只是选择了每个代码库中使用最多的语言，然后将我使用的所有语言的十六进制代码存储在一个CSS文件中，这样我就可以随时更新它并在开始使用新语言时添加更多语言。 - PRR

@PRR 做得好！我已经将您的评论包含在答案中，以增加可见性。 - VonC