Hinzufügen von benutzerdefinierten Github -Abzeichen zu Ihrem Repo

Wenn Sie sich Zeit damit verbracht haben, Open-Source-Repos Ongithub zu suchen, haben Sie wahrscheinlich bemerkt, dass die meisten von ihnen Abzeichen in ihren Readme-Dateien verwenden.

Solche Abzeichen bieten eine gute Möglichkeit, wichtige Informationen zu einem Repository hervorzuheben. Sie können sogar Ihre eigenen benutzerdefinierten Vermögenswerte als Abzeichen verwenden, wie es Next.js in seinem Repo tut.

Aber das Nützlichste an Github -Abzeichen ist bei weitem, dass sie selbst aktualisieren. Anstelle von Hardcoding -Werten in Ihr Readme können Abzeichen in GitHub automatisch Änderungen von einem Remote -Server abholen.

Lassen Sie uns diskutieren, wie Sie der Readme -Datei Ihres eigenen Projekts dynamische Github -Abzeichen hinzufügen. Wir werden zunächst einen Online -Generator namens badgen.net verwenden, um einige grundlegende Abzeichen zu erstellen. Dann werden wir unsere Abzeichen dynamisch machen, indem wir sie über unsere eigene serverlose Funktion über die Serviette anschließen. Schließlich gehen wir noch einen Schritt weiter, indem wir unsere eigenen benutzerdefinierten SVG -Dateien verwenden.

Zunächst einmal: Wie funktionieren Abzeichen?

Bevor wir einige Abzeichen in Github aufbauen, gehen wir schnell durch, wie sie implementiert werden. Es ist eigentlich sehr einfach: Abzeichen sind nur Bilder . ReadMe -Dateien sind in Markdown geschrieben, und Markdown unterstützt Bilder wie SO:

 ! \ [Alt Text \] (Pfad oder URL zu Bild)

Die Tatsache, dass wir eine URL in ein Bild einfügen können, bedeutet, dass eine Markdown -Seite die Bilddaten von einem Server anfordert, wenn die Seite gerendert wird. Wenn wir den Server mit dem Bild steuern, können wir ändern, was das Bild mit der gewünschten Logik zurücksendet wird!

Zum Glück haben wir einige Optionen, um unsere eigene Serverlogik ohne den gesamten Teil „Einrichten des Servers“ bereitzustellen. Für grundlegende Anwendungsfälle können wir unsere GitHub -Badge -Bilder mit badgen.net unter Verwendung der vordefinierten Vorlagen erstellen. Und wieder lässt uns Napkin schnell eine serverlose Funktion in unserem Browser codieren und sie dann als Endpunkt bereitstellen, mit dem unsere Github -Abzeichen sprechen können.

Abzeichen mit schlechter machen

Beginnen wir mit der einfachsten Lösung für die Abzeichen: ein statisches Abzeichen über badgen.net. Die Badgen -API verwendet URL -Muster, um Vorlagen im laufenden Fliegen zu erstellen. Das URL -Muster lautet wie folgt:

 https://badgen.net/badge/:subject/:status/:color?icon=github

Es gibt eine vollständige Liste der Optionen für Farben, Symbole und mehr auf badgen.net. Lassen Sie uns für dieses Beispiel folgende Werte verwenden:

• : Betreff: Hallo
• : Status :: Welt
• : Farbe :: rot
• : Symbol :: Twitter

Unsere endgültige URL sieht so aus:

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

Das Bild anzeigen

Hinzufügen eines Github -Abzeichens zur Readme -Datei

Jetzt müssen wir dieses Abzeichen in die Readme -Datei unseres Github -Repo einbetten. Wir können das in Markdown mit der Syntax, die wir uns zuvor angesehen haben, tun:

 ! \ [mein Abzeichen \] (https://badgen.net/badge/hello/world/red?icon=twitter)

BadGen bietet eine Menge verschiedener Optionen, daher ermutige ich Sie, ihre Website zu überprüfen und herumzuspielen! Zum Beispiel können Sie mit einem der Vorlagen zeigen, wie oft ein bestimmtes Github -Repo mitgespielt wurde. Hier ist ein Star Github -Abzeichen für das nächste.js Repo als Beispiel:

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

Das Bild anzeigen

Ziemlich cool! Aber was ist, wenn Sie möchten, dass Ihr Abzeichen einige Informationen zeigt, die Badgen nicht nativ unterstützt? Glücklicherweise hat Badgen eine URL -Vorlage für die Verwendung Ihrer eigenen HTTPS -Endpunkte, um Daten zu erhalten:

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

Nehmen wir zum Beispiel an, wir möchten, dass unser Abzeichen den aktuellen Preis für Bitcoin in USD zeigt. Alles, was wir brauchen, ist ein benutzerdefinierter Endpunkt, der diese Daten als JSON wie folgt zurückgibt:

 {
  "Farbe": "Blau",
  "Status": "$ 39.333,7",
  "Betreff": "Bitcoin Preis USD"
}

Unter der Annahme, dass unser Endpunkt unter https://some-endpoint.example.com/bitcoin verfügbar ist, können wir seine Daten mit dem folgenden URL-Schema an BadGen weitergeben:

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

Noch cooler jetzt! Wir müssen jedoch noch den Endpunkt erstellen, der die Daten für das GitHub -Abzeichen liefert. ? Was uns zu…

Badgen Serviette

Es gibt viele Möglichkeiten, Ihren eigenen HTTPS -Endpunkt zu erhalten. Sie können einen Server mit Digitalocean oder AWS EC2 aufspannen oder eine serverlose Option wie Google Cloud -Funktionen oder AWS Lambda verwenden. Diese können jedoch alle für unseren einfachen Anwendungsfall immer noch ein bisschen komplex und langweilig werden. Aus diesem Grund schlage ich vor, dass der In-Browser-Funktionseditor von Napkin einen Endpunkt ohne Installationen oder Konfiguration bereitstellt.

Gehen Sie zu Napkins Bitcoin -Abzeichenbeispiel, um einen Beispielendpunkt zu sehen. Sie können den Code sehen, um den aktuellen Bitcoin -Preis abzurufen und ihn als JSON im Herausgeber zurückzugeben. Sie können den Code selbst vom Editor ausführen oder den Endpunkt direkt verwenden.

Um den Endpunkt mit BadGen zu verwenden, arbeiten Sie mit demselben URL -Schema von oben, nur diesmal mit dem Serviettenendpunkt:

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

Das Bild anzeigen

Weitere Möglichkeiten, Github -Abzeichen anzupassen

Geben wir diese Funktion als nächstes, damit wir unseren eigenen benutzerdefinierten Code hinzufügen können. Klicken Sie dazu auf die Schaltfläche "Fork" im oberen Rechten. Sie werden aufgefordert, ein Konto bei Serviette zu erstellen, wenn Sie noch nicht angemeldet sind.

Sobald wir die Funktion erfolgreich gepackt haben, können wir den gewünschten Code mit den gewünschten NPM -Modulen hinzufügen. Fügen wir den Moment hinzu.js NPM -Paket und aktualisieren Sie die Endpunktantwort, um die Zeit zu zeigen, dass der Preis für Bitcoin zuletzt direkt in unserem GitHub -Abzeichen aktualisiert wurde:

 Fetch von 'Node-Fetch' importieren
Moment aus 'Moment' importieren

const bitcoinprice = async () => {
  const res = warte fetch ("<https:>")
  const json = warte res.json ()
  const lastprice = json.usd.last ""

  const [ints, decimals] = lastprice.split (".")

  return ints.slice (0, -3) "," ints.slice (-3) "." Dezimalstellen
}

Standard -Standard -Async (req, res) => {
  const btc = warte bitcoinprice ()

  res.json ({{
    Ikone: 'Bitcoin',
    Betreff: `Bitcoin Price USD ($ {moment (). Format ('H: MMA')})`,,
    Farbe: 'Blau',
    Status: `\\ $$ {btc}`
  })
}</https:>

Sie werden möglicherweise feststellen, dass der Abzeichen einige Zeit braucht, um zu aktualisieren, wenn Sie das nächste Mal die Readme -Datei bei GitHub laden. Das liegt daran, dass GitHub einen Proxy -Mechanismus verwendet, um Abzeichenbilder zu bedienen.

GitHub dient den Auszeichenbildern auf diese Weise, um Missbrauch wie hohe Anforderungsvolumen oder JavaScript -Code -Injektion zu verhindern. Wir können Githubs Stellvertreter nicht kontrollieren, aber zum Glück kann es nicht zu aggressiv zwischengespeichert (oder das würde den Zweck von Abzeichen besiegen). Nach meiner Erfahrung ist die TTL ungefähr 5-10 Minuten.

OK, Final Boss Time.

Benutzerdefinierte SVG -Abzeichen mit Servietten

Für unseren letzten Trick verwenden wir eine Serviette, um ein völlig neues SVG zurückzuschicken, damit wir benutzerdefinierte Bilder verwenden können, wie wir es beim nächsten.js Repo gesehen haben.

Ein allgemeiner Anwendungsfall für GitHub -Abzeichen ist der aktuelle Status für eine Website. Lass uns das machen. Hier sind die beiden Staaten, die unser Abzeichen unterstützen wird:

BadGen unterstützt keine benutzerdefinierten SVGs. Stattdessen werden wir unsere Badge direkt mit unserem Serviettenendpunkt sprechen lassen. Erstellen wir eine neue Serviettenfunktion für diese als Site-Status-Badge.

Der Code in dieser Funktion stellt eine Anfrage an example.com. Wenn der Anforderungsstatus 200 beträgt, wird das grüne Abzeichen als SVG -Datei zurückgegeben. Ansonsten gibt es das rote Abzeichen zurück. Sie können die Funktion überprüfen, aber ich werde den Code hier auch als Referenz einfügen:

 Fetch von 'Node-Fetch' importieren

const seiten_url = "<https:>"

// Full SVGs bei <https:>
const CustomUpbadge = ''
const Customdownbadge = ''

const isSiteUp = async () => {
  const res = warte fetch (Site_url)
  Return Res.OK
}

Standard -Standard -Async (req, res) => {
  const forcusfail = req.path ?.endswith ('/400')

  const gesund = warte isSiteUp ()
  res.set ('Inhaltstyp', 'Image/SVG XML')
  if (gesund &&! ForceFail) {
    res.send (buffer.from (CustomUpbadge) .ToString ('Base64'))
  } anders {
    res.send (buffer.from (Customdownbadge) .ToString ('Base64'))
  }
}</https:></https:>

Die Chancen sind ziemlich niedrig, dass die Seite example.com jemals sinken wird. Deshalb habe ich den ForceFail -Fall hinzugefügt, um dieses Szenario zu simulieren. Jetzt können wir A /400 nach der URL der Serviettenendpunkt hinzufügen, um es zu versuchen:

 ! \ [Status up \] (https://napkin-examples.npkn.net/site-status-badge/)
! \ [Status Down \] (https://napkin-examples.npkn.net/site-status-badge/400)

Status Up Badge Status Down Badge anzeigen

Sehr schön ?

Und da haben wir es! Ihr GitHub -Abzeichen -Training ist abgeschlossen. Aber die Reise ist noch lange nicht vorbei. Es gibt eine Million verschiedene Dinge, bei denen solche Abzeichen super hilfreich sind. Viel Spaß beim Experimentieren und machen Sie diese Readme funkeln! ✨

Das obige ist der detaillierte Inhalt vonHinzufügen von benutzerdefinierten Github -Abzeichen zu Ihrem Repo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!