将自定义GitHub徽章添加到您的回购-css教程-PHP中文网

首页

web前端

css教程

将自定义GitHub徽章添加到您的回购

Christopher Nolan

Mar 13, 2025 pm 01:02 PM

将自定义GitHub徽章添加到您的回购

如果您花了一些时间查看开源存储库Ongithub，那么您可能会注意到，他们中的大多数都在其读数文件中使用徽章。例如，官方的React存储库，例如，在整个thereadMefile中都有github徽章，该通讯通向重要的动态信息，例如最新发布的版本，以及当前的构建版本以及当前的构建是否通过。

这样的徽章提供了一种很好的方法来突出有关存储库的关键信息。您甚至可以将自己的自定义资产用作徽章，例如Next.js在其存储库中所做的。

但是，关于GitHub徽章的最有用的事情是它们自己更新。 Github中的徽章可以自动从远程服务器中拾取更改，而不是将硬编码值纳入您的读数。

让我们讨论如何将动态github徽章添加到您自己项目的回复文件中。我们将首先使用一个名为badgen.net的在线生成器来创建一些基本徽章。然后，我们将通过Napkin连接到我们自己的无服务器功能来使我们的徽章动态。最后，我们将使用自己的自定义SVG文件进一步迈出一步。

首先：徽章如何工作？

在我们开始在Github建立一些徽章之前，让我们快速介绍它们的实施方式。实际上非常简单：徽章只是图像。读书文件写在Markdown中，Markdown支持类似的图像：

！

我们可以将URL包含到图像的事实意味着在渲染页面时，Markdown页面将从服务器请求图像数据。因此，如果我们控制具有图像的服务器，我们可以使用所需的任何逻辑更改将图像发送回来！

值得庆幸的是，我们有几个选项可以部署自己的服务器逻辑，而无需整个“设置服务器”部分。对于基本用例，我们可以使用其预定义模板使用Badgen.net创建GitHub徽章图像。同样，餐巾纸将让我们在浏览器中快速编码无服务器功能，然后将其部署为我们的GitHub徽章可以与之交谈的终点。

用Badgen制作徽章

让我们从最简单的徽章解决方案开始：通过badgen.net的静态徽章。 Badgen API使用URL模式即时创建模板徽章。 URL模式如下：

 https://badgen.net/badge/:subject/:status/:color？icon = Github

您在badgen.net上拥有有关颜色，图标等选项的完整列表。对于此示例，让我们使用以下值：

：主题：你好
：状态：：世界
：color ：：红色
：ICON ：： Twitter

我们的最后一个URL看起来像这样：

 https://badgen.net/badge/hello/world/red?icon=twitter

查看图像

将github徽章添加到redme文件中

现在，我们需要将此徽章嵌入我们的github存储库的读数文件中。我们可以使用先前查看的语法在Markdown中做到这一点：

！

Badgen提供了大量不同的选择，因此我鼓励您查看他们的网站并玩耍！例如，其中一个模板可让您显示给定的GitHub存储库已出演的次数。这是Next.js repo的明星github徽章。

 https://badgen.net/github/stars/vercel/next.js

查看图像

很酷！但是，如果您希望您的徽章显示一些Badgen不本地支持的信息怎么办？幸运的是，Badgen具有用于使用您自己的HTTPS端点获取数据的URL模板：

 https://badgen.net/https/url/to/your/endpoint

例如，假设我们希望我们的徽章在美元中显示当前的比特币价格。我们需要的只是一个自定义端点，该端点像这样返回此数据：

 {
  “颜色”：“蓝色”，
  “状态”：“ $ 39,333.7”，
  “主题”：“比特币价格USD”
}

假设我们的端点可以在https://some-endpoint.example.com/bitcoin上找到，我们可以使用以下URL方案将其数据传递给BADGEN：

 https://badgen.net/https/some-endpoint.example.com/bitcoin

现在甚至更酷！但是，我们仍然必须实际创建为GitHub徽章提供数据的端点。？这带我们到…

Badgen Napkin

有很多方法可以获取您自己的HTTPS端点。您可以使用Digitalocean或AWS EC2旋转服务器，也可以使用Google Cloud Functions或AWS Lambda之类的无服务器选项；但是，对于我们的简单用例，这些都可能变得有些复杂和乏味。这就是为什么我建议Napkin的浏览器功能编辑器来代码并部署端点，而无需任何安装或配置。

前往餐巾纸的比特币徽章示例，查看示例端点。您可以看到代码以检索当前的比特币价格并将其返回为编辑器中的JSON。您可以自己从编辑器运行代码，也可以直接使用端点。

要与badgen一起使用端点，请从上方使用相同的URL方案，仅此一次与Napkin端点：

 https://badgen.net/https/napkin-examples.npkn.net/bitcoin-badge

查看图像

自定义GitHub徽章的更多方法

接下来，让我们分配此功能，以便我们可以添加自己的自定义代码。单击顶部右上方的“叉子”按钮进行操作。如果您尚未登录，您会提示您与Napkin建立帐户。

成功分配了该功能后，我们可以使用所需的任何NPM模块添加所需的任何代码。让我们添加时刻。

导入从“ node-fetch”中提取
从“时刻”进口时刻

const bitcoinprice = async（）=> {
  const res =等待提取（“ <https:>”）
  const json =等待res.json（）
  const lastprice = json.usd.last“”

  const [ints，Decimals] = lastPrice.split（“。”）

  返回ints.slice（0，-3）“，” ints.slice（-3）“。”小数
}

导出默认async（req，res）=> {
  const btc =等待比特币（）

  res.json（{
    图标：“比特币”，
    主题：`比特币价格USD（$ {MOMS（）。格式（'H：MMA'）}）`，
    颜色：“蓝色”，
    状态：`\\ $$ {btc}`
  }））
}</https:>

您可能会注意到，下次在GitHub上加载寄信我的文件时，徽章需要一些时间来刷新。这是因为Github使用代理机制提供徽章图像。

GitHub以这种方式为徽章图像提供防止滥用的方式，例如高要求量或JavaScript代码注入。我们无法控制Github的代理，但幸运的是，它不会过于积极地缓存（否则这会破坏徽章的目的）。根据我的经验，TTL约为5-10分钟。

好的，最后的老板时间。

餐巾的自定义SVG徽章

为了获得最后的技巧，让我们使用Napkin发送了一个全新的SVG，因此我们可以使用Next.js Repo上的自定义图像。

GitHub徽章的常见用例是显示网站的当前状态。让我们这样做。这是我们徽章将支持的两个州：

Badgen不支持自定义SVG，因此，我们将直接与Napkin端点进行徽章对话。让我们为此称为Site-Status-Badge创建一个新的Napkin功能。

此功能中的代码提出了示例请求。如果请求状态为200，则将绿色徽章作为SVG文件返回；否则，它将返回红色徽章。您可以查看该功能，但我还将在此处包含代码以供参考：

导入从“ node-fetch”中提取

const site_url =“ <https:>”

// <https:>
const custoupbadge =''
const custyDownbadge =''

const issiteup = async（）=> {
  const res =等待提取（site_url）
  返回res.ok
}

导出默认async（req，res）=> {
  const forcefail = req.path？.endswith（'/400'）

  const Healthy =等待Issiteup（）
  res.set（'content-type'，'image/svg xml'）
  如果（健康&&！forcefail）{
    res.send（buffer.from（customupbadge）.toString（'Base64'））
  } 别的 {
    res.send（buffer.from（custicDownBadge）.tostring（'Base64'））
  }
}</https:></https:>

示例网站将永远不会下降的赔率很低，因此我添加了ForceFail案例以模拟该方案。现在，我们可以在餐巾端点URL之后添加A /400来尝试：