如果您花了一些時間查看開源存儲庫Ongithub，那么您可能會注意到，他們中的大多數(shù)都在其讀數(shù)文件中使用徽章。例如，官方的React存儲庫，例如，在整個thereadMefile中都有g(shù)ithub徽章，該通訊通向重要的動態(tài)信息，例如最新發(fā)布的版本，以及當(dāng)前的構(gòu)建版本以及當(dāng)前的構(gòu)建是否通過。

這樣的徽章提供了一種很好的方法來突出有關(guān)存儲庫的關(guān)鍵信息。您甚至可以將自己的自定義資產(chǎn)用作徽章，例如Next.js在其存儲庫中所做的。

但是，關(guān)于GitHub徽章的最有用的事情是它們自己更新。 Github中的徽章可以自動從遠程服務(wù)器中拾取更改，而不是將硬編碼值納入您的讀數(shù)。

讓我們討論如何將動態(tài)github徽章添加到您自己項目的回復(fù)文件中。我們將首先使用一個名為badgen.net的在線生成器來創(chuàng)建一些基本徽章。然后，我們將通過Napkin連接到我們自己的無服務(wù)器功能來使我們的徽章動態(tài)。最后，我們將使用自己的自定義SVG文件進一步邁出一步。

首先：徽章如何工作？

在我們開始在Github建立一些徽章之前，讓我們快速介紹它們的實施方式。實際上非常簡單：徽章只是圖像。讀書文件寫在Markdown中，Markdown支持類似的圖像：

 ！

我們可以將URL包含到圖像的事實意味著在渲染頁面時，Markdown頁面將從服務(wù)器請求圖像數(shù)據(jù)。因此，如果我們控制具有圖像的服務(wù)器，我們可以使用所需的任何邏輯更改將圖像發(fā)送回來！

值得慶幸的是，我們有幾個選項可以部署自己的服務(wù)器邏輯，而無需整個“設(shè)置服務(wù)器”部分。對于基本用例，我們可以使用其預(yù)定義模板使用Badgen.net創(chuàng)建GitHub徽章圖像。同樣，餐巾紙將讓我們在瀏覽器中快速編碼無服務(wù)器功能，然后將其部署為我們的GitHub徽章可以與之交談的終點。

用Badgen制作徽章

讓我們從最簡單的徽章解決方案開始：通過badgen.net的靜態(tài)徽章。 Badgen API使用URL模式即時創(chuàng)建模板徽章。 URL模式如下：

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

您在badgen.net上擁有有關(guān)顏色，圖標(biāo)等選項的完整列表。對于此示例，讓我們使用以下值：

• ：主題：你好
• ：狀態(tài)：：世界
• ：color ：：紅色
• ：ICON ：： Twitter

我們的最后一個URL看起來像這樣：

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

將github徽章添加到redme文件中

現(xiàn)在，我們需要將此徽章嵌入我們的github存儲庫的讀數(shù)文件中。我們可以使用先前查看的語法在Markdown中做到這一點：

 ！

Badgen提供了大量不同的選擇，因此我鼓勵您查看他們的網(wǎng)站并玩耍！例如，其中一個模板可讓您顯示給定的GitHub存儲庫已出演的次數(shù)。這是Next.js repo的明星github徽章。

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

很酷！但是，如果您希望您的徽章顯示一些Badgen不本地支持的信息怎么辦？幸運的是，Badgen具有用于使用您自己的HTTPS端點獲取數(shù)據(jù)的URL模板：

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

例如，假設(shè)我們希望我們的徽章在美元中顯示當(dāng)前的比特幣價格。我們需要的只是一個自定義端點，該端點像這樣返回此數(shù)據(jù)：

 {
  “顏色”：“藍色”，
  “狀態(tài)”：“ $ 39,333.7”，
  “主題”：“比特幣價格USD”
}

假設(shè)我們的端點可以在https://some-endpoint.example.com/bitcoin上找到，我們可以使用以下URL方案將其數(shù)據(jù)傳遞給BADGEN：

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

現(xiàn)在甚至更酷！但是，我們?nèi)匀槐仨殞嶋H創(chuàng)建為GitHub徽章提供數(shù)據(jù)的端點。 ？這帶我們到…

Badgen Napkin

有很多方法可以獲取您自己的HTTPS端點。您可以使用Digitalocean或AWS EC2旋轉(zhuǎn)服務(wù)器，也可以使用Google Cloud Functions或AWS Lambda之類的無服務(wù)器選項；但是，對于我們的簡單用例，這些都可能變得有些復(fù)雜和乏味。這就是為什么我建議Napkin的瀏覽器功能編輯器來代碼并部署端點，而無需任何安裝或配置。

前往餐巾紙的比特幣徽章示例，查看示例端點。您可以看到代碼以檢索當(dāng)前的比特幣價格并將其返回為編輯器中的JSON。您可以自己從編輯器運行代碼，也可以直接使用端點。

要與badgen一起使用端點，請從上方使用相同的URL方案，僅此一次與Napkin端點：

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

自定義GitHub徽章的更多方法

接下來，讓我們分配此功能，以便我們可以添加自己的自定義代碼。單擊頂部右上方的“叉子”按鈕進行操作。如果您尚未登錄，您會提示您與Napkin建立帳戶。

成功分配了該功能后，我們可以使用所需的任何NPM模塊添加所需的任何代碼。讓我們添加時刻。

導(dǎo)入從“ 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）“?！毙?shù)
}

導(dǎo)出默認async（req，res）=> {
  const btc =等待比特幣（）

  res.json（{
    圖標(biāo)：“比特幣”，
    主題：`比特幣價格USD（$ {MOMS（）。格式（'H：MMA'）}）`，
    顏色：“藍色”，
    狀態(tài)：`\\ $$ {btc}`
  }））
}</https:>

您可能會注意到，下次在GitHub上加載寄信我的文件時，徽章需要一些時間來刷新。這是因為Github使用代理機制提供徽章圖像。

GitHub以這種方式為徽章圖像提供防止濫用的方式，例如高要求量或JavaScript代碼注入。我們無法控制Github的代理，但幸運的是，它不會過于積極地緩存（否則這會破壞徽章的目的）。根據(jù)我的經(jīng)驗，TTL約為5-10分鐘。

好的，最后的老板時間。

餐巾的自定義SVG徽章

為了獲得最后的技巧，讓我們使用Napkin發(fā)送了一個全新的SVG，因此我們可以使用Next.js Repo上的自定義圖像。

GitHub徽章的常見用例是顯示網(wǎng)站的當(dāng)前狀態(tài)。讓我們這樣做。這是我們徽章將支持的兩個州：

Badgen不支持自定義SVG，因此，我們將直接與Napkin端點進行徽章對話。讓我們?yōu)榇朔Q為Site-Status-Badge創(chuàng)建一個新的Napkin功能。

此功能中的代碼提出了示例請求。如果請求狀態(tài)為200，則將綠色徽章作為SVG文件返回；否則，它將返回紅色徽章。您可以查看該功能，但我還將在此處包含代碼以供參考：

導(dǎo)入從“ node-fetch”中提取

const site_url =“ <https:>”

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

const issiteup = async（）=> {
  const res =等待提?。╯ite_url）
  返回res.ok
}

導(dǎo)出默認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:>

示例網(wǎng)站將永遠不會下降的賠率很低，因此我添加了ForceFail案例以模擬該方案。現(xiàn)在，我們可以在餐巾端點URL之后添加A /400來嘗試：

 ！
！

很不錯 ？

那里我們有！您的GitHub徽章培訓(xùn)已經(jīng)完成。但是旅程還遠遠沒有結(jié)束。有一百萬個不同的東西，這樣的徽章非常有幫助。玩得開心，然后去做那個讀書我的閃閃發(fā)光！ ?

以上是將自定義GitHub徽章添加到您的回購的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！