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

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

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

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)

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!