Shields.io 靜態徽章的 URL 會將簡短的標籤、文字訊息、顏色、選用的標誌以及樣式選項壓縮成單一圖片網址,而一個聚焦的表單讓你不必死記路徑跳脫規則或查詢參數,就能組合出該 URL。若要製作 Badge of Justice TBC 顯示徽章,你只需在分隔線兩側輸入可見文字、挑選具名或十六進位顏色、選擇支援的樣式、選填 Simple Icons 的 slug,然後預覽 Shields.io 即時渲染結果,並複製該表單為你產生的 URL、Markdown 片段或 HTML 圖片標籤。整個流程都在用戶端執行,因此你的徽章內容會停留在瀏覽器中,直到你將它貼到目的地文件。這種做法適合像《魔獸世界》TBC 同人計畫、私人公會名冊或模組典藏庫等靜態文件,讓你以一致且易辨識的標籤標記內容。由於預覽圖片直接由 Shields.io 提供,你在預覽區看到的徽章,正是讀者最終會載入的同一張圖片。

how to get badge of justice tbc
how to get badge of justice tbc

為什麼要用產生器來製作 Badge of Justice TBC 顯示徽章

一個小型的狀態徽章能讓 README、文件頁面、版本說明或專案儀表板更易於瀏覽。困難之處通常不是文字內容;而是要記住 Shields.io 靜態 URL 如何分隔標籤、訊息與顏色、空白字元與字面上的分隔符該如何跳脫,以及哪些查詢參數會決定最終外觀。徽章產生器會把這些細節整理成聚焦的表單,因此你所組合的 Badge of Justice TBC 徽章每次都能以同樣方式呈現,無需手動編輯路徑。手動編輯 URL 容易出錯,特別是當標籤中含有字面上的破折號或底線時,而產生器會依照 Shields.io 的官方重複規則自動處理,幫你消除這個風險。

Shields.io 靜態徽章 URL 的實際運作方式

Shields.io 徽章 URL 遵循基於靜態徽章端點的固定結構,可見部分與顏色透過查詢字串傳遞,選用的 style、labelColor 與 logo 參數則透過 URLSearchParams 附加於其後。可見文字中的字面破折號與底線會依 Shields.io 的重複規則編碼,而其他特殊字元則以 URL 編碼處理。這能避免標籤內部的破折號被誤判為徽章各部分之間的分隔符。選用的 style、標籤顏色與 logo 值會以查詢參數形式加入,而非混入路徑中。徽章產生器會自動為你完成這些編碼、驗證每個輸入,並顯示它將渲染的標準 URL。shields.io/badges 上的參考文件描述的是同一組參數,因此產生器的輸出會與徽章載入時上游服務所預期的內容保持一致。

輸入你 TBC 徽章的標籤、訊息與顏色

這是準備 Badge of Justice TBC 顯示徽章的核心步驟。請依序執行以下操作:

  1. 開啟徽章產生器表單,輸入應顯示於徽章左側的標籤。使用簡短的名詞,例如 tbc、wow-tbc 或 badge-of-justice,可讓渲染寬度維持精簡。任何你想以文字形式保留的可見內容都放在此處,表單會自動將字面上的破折號或底線加倍,確保徽章正確渲染。
  2. 輸入顯示於分隔線右側的訊息。此徽章常見的選項包括 justice、tier 5、phase 1,或 karazhan-ready 這類公會標籤。訊息應保持簡短,以便與標籤整齊並排,因為每多一個可見字元,渲染寬度就會增加。
  3. 選擇具名顏色,例如 blue、brightgreen 或 gold,或貼上三位數或六位數的十六進位值。前端的井字號 (#) 會在建構 URL 之前自動移除。若希望標籤區塊使用不同顏色,請在選用的 label-color 欄位填入另一個具名或十六進位值。
  4. 點入預覽區,確認徽章的渲染符合你的預期。預覽直接使用表單組合出的 URL 從 Shields.io 載入,因此你看到的圖片就是讀者將會看到的圖片。

挑選樣式與選用的 Simple Icons 標誌

從下拉選單中選擇支援的樣式:plastic、flat、flat-square、for-the-badge 或 social。每種樣式在圓角、陰影與字型上的呈現方式不同,請以徽章實際顯示的大小預覽幾種樣式。若想在徽章上加入品牌標誌,請在 logo 欄位輸入 Simple Icons 的 slug。針對 TBC 專案,你可以試試 wow、worldofwarcraft,或目錄中相關的 slug。若標誌未顯示,請比對目前的 Simple Icons 目錄確認 slug 是否正確。這些選項會以查詢參數形式加入,而非路徑的一部分,因此新增或移除它們不會破壞 URL 的其他部分。

若專案頁首已使用多個徽章,flat-square 與其他矩形標籤並排時看起來較為整齊。若在登陸頁上單獨放置一個徽章,for-the-badge 會產生更大、更粗體的文字。plastic 重現經典的 Shields.io 風格,而 social 適合作為計數或狀態列的徽章。

在 README 中預覽、複製並測試徽章

徽章產生器會回傳三種實用格式,它們都指向同一個標準 URL。請比較並挑選最符合你目的地的格式。

格式適用於取得的內容
直接圖片 URL接受遠端圖片來源的系統https://img.shields.io/static/v1?label=...&message=...&color=...
Markdown 片段GitHub 或 GitLab 的 README、issue 範本、文件檔案![alt text](https://img.shields.io/...)
HTML 圖片標籤網頁、CMS 內容及靜態網站產生器<img src="..." alt="...">

複製符合目的地的格式。對於記載 TBC 公會名冊或模組典藏庫的 GitHub 或 GitLab 專案,Markdown 片段通常是最合適的選擇。對於個人網站或部落格文章,HTML 標籤能將徽章直接渲染於標記之中。單獨使用圖片 URL 則適用於你想將徽章放入只接受遠端圖片連結的工具時,例如 Discord 嵌入或無法解析 Markdown 的靜態頁面產生器。複製完成後,請測試渲染後的目的地。某些目標平台會代理遠端圖片,且更新可能會在此工具之外被快取,因此當你日後更新訊息時,可能需要強制重新整理或加上避免緩存的查詢參數。

驗證規則與實際限制

徽章產生器會對模糊或不安全的輸入進行嚴格檢查。以下規則規範了表單可接受的內容,以及標準 URL 中將包含的內容。

輸入規則備註
標籤必須包含可見文字、維持在實際的長度限制內、不可包含控制字元在建構任何 URL 之前,空白標籤會被拒絕
訊息與標籤相同,須通過可見文字與控制字元檢查特殊字元會自動以 URL 編碼處理
顏色精簡的具名格式,或三位數與六位數的十六進位值前端的井字號會在建構 URL 之前被移除
標誌必須符合 Simple Icons slug 的格式表單不會驗證該項目是否存在於目前的目錄中

這些檢查能抓出常見的打字錯誤,同時不會假裝能驗證外部服務上每個可能的具名顏色或標誌是否真實存在。此表單同樣完全在用戶端執行、不需要帳號,且不會在工作階段之間保存徽章紀錄。

靜態徽章不適用的情境

自動產生的徽章只是呈現,並非證明。手動輸入的「通過」、「安全」或「100%」訊息並不能驗證建置、稽核或涵蓋率報告。對於 Badge of Justice TBC 顯示來說,這通常沒問題,因為徽章是針對穩定內容的靜態標籤。請將靜態徽章用於你願意持續維護的穩定標籤、連結、版本或聲明。對於會自動變動的資料,請改用由相關 CI 系統、套件註冊中心或已驗證端點所支援的徽章,因為這些端點承載的是即時資料,而非仰賴手動維護的字串。同時,在需要脈絡的地方加入周邊說明文字或具意義的 alt 描述,因為單靠顏色永遠不應承載徽章的完整含義。

若要獲得可預期的結果,請先從簡短的標籤開始,例如 build、docs、version 或 license,搭配簡潔的訊息,以徽章實際顯示的大小預覽幾種樣式,文件庫文件複製 Markdown、網頁複製 HTML,然後測試渲染後的目的地。若標誌未顯示,請比對目前的 Simple Icons 目錄確認 slug 是否正確。若目標平台會代理遠端圖片,請記住更新可能會在此工具之外被快取。

延伸閱讀:將 2K26 徽章獎勵顯示為 Shields.io README 徽章

延伸閱讀:如何在 2K26 中取得徽章並加入你的 README