將自定義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來嘗試：

 ！
！

查看狀態上升徽章視圖狀態下徽章

很不錯 ？

那裡我們有！您的GitHub徽章培訓已經完成。但是旅程還遠遠沒有結束。有一百萬個不同的東西，這樣的徽章非常有幫助。玩得開心，然後去做那個讀書我的閃閃發光！ ✨

以上是將自定義GitHub徽章添加到您的回購的詳細內容。更多資訊請關注PHP中文網其他相關文章！