オープンソースのリポジトリongithubを見るのに時間を費やした場合、それらのほとんどがreadmeファイルにバッジを使用していることに気付くでしょう。たとえば、公式のReactリポジトリなど、最新リリースバージョンや現(xiàn)在のビルドが渡されているかどうかなどの重要なダイナミックな情報を構(gòu)成するgithubバッジがあります。

このようなバッジは、リポジトリに関する重要な情報を強調(diào)する良い方法を提供します。 next.jsがリポジトリで行うように、獨自のカスタム資産をバッジとして使用することもできます。

しかし、Githubバッジの最も有用なことは、はるかに役立つことです。 GitHubのバッジは、readmeにハードコード値を作成する代わりに、リモートサーバーから自動的に変更をピックアップできます。

獨自のプロジェクトのREADMEファイルに動的なGitHubバッジを追加する方法について説明しましょう。まず、badgen.netというオンラインジェネレーターを使用して、基本的なバッジを作成します。次に、ナプキンを介して自分のサーバーレス機能に接続することにより、バッジを動的にします。最後に、獨自のカスタムSVGファイルを使用して、さらに一歩進(jìn)めます。

まず、バッジはどのように機能しますか？

Githubでいくつかのバッジの構(gòu)築を開始する前に、それらがどのように実裝されているかをすぐに説明しましょう。実際には非常にシンプルです。バッジは単なる畫像です。 readmeファイルはマークダウンで記述されており、マークダウンは次のような畫像をサポートしています。

 ！\ [alt text \]（畫像へのパスまたはurl）

畫像にURLを含めることができるという事実は、マークダウンページがページがレンダリングされたときにサーバーから畫像データを要求することを意味します。したがって、畫像があるサーバーを制御すると、必要なロジックを使用して送信される畫像を変更できます。

ありがたいことに、「サーバーのセットアップ」パーツ全體を使用せずに獨自のサーバーロジックを展開するためのいくつかのオプションがあります?；镜膜圣姗`スケースの場合、事前定義されたテンプレートを使用してbadgen.netを使用してGitHubバッジ畫像を作成できます。繰り返しになりますが、Napkinはブラウザでサーバーレス機能をすばやくコーディングし、GitHubバッジが通信できるエンドポイントとして展開します。

バッジェンでバッジを作る

最もシンプルなバッジソリューション：badgen.net経由の靜的バッジから始めましょう。 Badgen APIは、URLパターンを使用して、その場でテンプレートバッジを作成します。 URLパターンは次のとおりです。

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

badgen.netには、色、アイコンなどのオプションの完全なリストがあります。この例では、これらの値を使用しましょう。

• ：件名：こんにちは
• ：ステータス：：世界
• ：色：：赤
• ：アイコン：： Twitter

私たちの最後のURLは次のように見えます：

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

readmeファイルにgithubバッジを追加します

次に、このバッジをGitHubリポジトリのReadMeファイルに埋め込む必要があります。以前に見た構(gòu)文を使用して、マークダウンでそれを行うことができます。

 ！\ [My Badge \]（https://badgen.net/badge/hello/world/red?con=twitter）

Badgenはさまざまなオプションを提供しているので、彼らのサイトをチェックして遊ぶことをお勧めします！たとえば、テンプレートの1つを使用すると、特定のGitHubリポジトリが主演した回數(shù)を表示できます。次に、次のような星のgithubバッジです。

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

かなりクール！しかし、バッジがネイティブにサポートしていない情報をバッジに表示したい場合はどうでしょうか。幸いなことに、Badgenには、獨自のHTTPSエンドポイントを使用してデータを取得するためのURLテンプレートがあります。

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

たとえば、バッジにUSDの現(xiàn)在の価格を表示してほしいとしましょう。必要なのは、このデータをこのようにJSONとして返すカスタムエンドポイントだけです。

 {
  「色」：「青」、
  「ステータス」：「$ 39,333.7」、
  「件名」：「ビットコイン価格USD」
}

エンドポイントがhttps://some-endpoint.example.com/bitcoinで利用できると仮定すると、次のURLスキームを使用してデータをBadgenに渡すことができます。

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

今はさらに涼しい！しかし、GitHubバッジのデータを提供するエンドポイントを?qū)g際に作成する必要があります。 ？それは私たちを…

バッジェンナプキン

獨自のHTTPSエンドポイントを取得する方法はたくさんあります。 DigitalOceanまたはAWS EC2を使用してサーバーをスピンアップすることも、Google Cloud FunctionsやAWS Lambdaなどのサーバーレスオプションを使用することもできます。ただし、それらはすべて、私たちの単純なユースケースに対して少し複雑で退屈になる可能性があります。そのため、Napkinのブラウザ內(nèi)関數(shù)エディタに、インストールや構(gòu)成なしでエンドポイントをコードして展開することを提案しています。

ナプキンのビットコインバッジの例にアクセスして、エンドポイントの例を確認(rèn)してください。現(xiàn)在のビットコイン価格を取得し、編集者のJSONとして返すコードを確認(rèn)できます。エディターからコードを自分で実行するか、エンドポイントを直接使用できます。

バッドゲンでエンドポイントを使用するには、上から同じURLスキームを使用して作業(yè)します。今回はナプキンエンドポイントでのみ：

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

Githubバッジをカスタマイズする方法

次に、この関數(shù)をフォークして、獨自のカスタムコードを追加できるようにしましょう。トップライトの「フォーク」ボタンをクリックして、そうすることを行います。まだサインインしていない場合は、ナプキンでアカウントを作成するように求められます。

関數(shù)を正常に分岐したら、必要なNPMモジュールを使用して、必要なコードを追加できます。 Moment.js NPMパッケージを追加し、エンドポイント応答を更新して、ビットコインの価格が最後にGitHubバッジで直接更新されたことを示します。

 「ノードフェッチ」からフェッチをインポートする
「瞬間」からモーメントをインポートする

const bitcoinprice = async（）=> {
  const res = await fetch（ "<https:>"）
  const json = await res.json（）
  const lastprice = json.usd.last ""

  const [ints、decimals] = lastprice.split（ "。"）

  return ints.slice（0、-3） "、" intslice（-3） "。"。デシマル
}

デフォルトのasync（req、res）=> {エクスポート
  const btc = await bitcoinprice（）

  Res.Json（{
    アイコン：「ビットコイン」、
    件名： `Bitcoin Price USD（$ {moment（）。format（ 'h：mma'）}）`、
    色：「青」、
    ステータス： `\\ $$ {btc}`
  }）
}</https:>

バッジは、GitHubでReadMeファイルを次にロードするときに更新するのに時間がかかることに気付くかもしれません。これは、GitHubがプロキシメカニズムを使用してバッジ畫像を提供するためです。

GitHubは、この方法でバッジ畫像を提供して、高いリクエストボリュームやJavaScriptコードインジェクションなど、亂用を防ぎます。 Githubのプロキシを制御することはできませんが、幸いなことに、あまりにも積極的にキャッシュすることはありません（または、バッジの目的を打ち負(fù)かすことになります）。私の経験では、TTLは約5?10分です。

OK、最終的なボスの時間。

ナプキンを備えたカスタムSVGバッジ

最後のトリックについては、Napkinを使用して完全に新しいSVGを送り返しましょう。Next.JSリポジトリで見たようなカスタム畫像を使用できます。

GitHubバッジの一般的なユースケースは、Webサイトの現(xiàn)在のステータスを示しています。それをしましょう。バッジがサポートする2つの州は次のとおりです。

BadgenはカスタムSVGをサポートしていないため、代わりに、バッジに直接ナプキンエンドポイントに話しかけます。サイトと呼ばれるこのための新しいナプキン関數(shù)を作成しましょう。

この関數(shù)のコードは、example.comにリクエストを行います。要求ステータスが200の場合、SVGファイルとしてグリーンバッジを返します。それ以外の場合は、赤いバッジを返します。関數(shù)を確認(rèn)できますが、參照のためにここにコードも含めます。

 「ノードフェッチ」からフェッチをインポートする

const site_url = "<https:>"

// <https:>の完全なsvgs
const customupbadge = ''
const customdownbadge = ''

const IssiteUp = async（）=> {
  const res = await fetch（site_url）
  Res.okを返します
}

デフォルトのasync（req、res）=> {エクスポート
  const forcefail = req.path？.endswith（ '/400'）

  const healthing = await siteup（）
  res.set（ 'content-type'、 'image/svg xml'）
  if（Healthy &&！forceFail）{
    res.send（buffer.from（customupbadge）.toString（ 'base64'）））
  } それ以外 {
    res.send（buffer.from（customdownbadge）.toString（ 'base64'）））
  }
}</https:></https:>

Example.comサイトがダウンするオッズはかなり低いため、そのシナリオをシミュレートするためにForceFailケースを追加しました。これで、ナプキンエンドポイントURLの後にA /400を追加して試してみることができます。

 ！\ [status up \]（https://napkin-examples.npkn.net/site-status-badge/）
！\ [ステータスダウン\]（https://napkin-examples.npkn.net/site-status-badge/400）

非常に素晴らしい ？

そして、私たちはそれを持っています！ GitHubバッジトレーニングは完了です。しかし、旅は終わっていません。このようなバッジが非常に役立つ100萬の異なることがあります。実験を楽しんで、そのreadmeの輝きを作りましょう！ ?

以上がレポにカスタムGitHubバッジを追加しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。