レポにカスタムGitHubバッジを追加します-CSSチュートリアル-php.cn

レポにカスタムGitHubバッジを追加します

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

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

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

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

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

Githubでいくつかのバッジの構築を開始する前に、それらがどのように実装されているかをすぐに説明しましょう。実際には非常にシンプルです。バッジは単なる画像です。 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ファイルに埋め込む必要があります。以前に見た構文を使用して、マークダウンでそれを行うことができます。

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

ログイン後にコピー

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

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

ログイン後にコピー

画像を表示します

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

バッジェンナプキン

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

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

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

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

ログイン後にコピー

画像を表示します

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

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

関数を正常に分岐したら、必要な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のプロキシを制御することはできませんが、幸いなことに、あまりにも積極的にキャッシュすることはありません（または、バッジの目的を打ち負かすことになります）。私の経験では、TTLは約5〜10分です。

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

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

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

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

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

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

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

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バッジを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。