REPO에 사용자 정의 GitHub 배지 추가

Open-Source Repos Ongithub에서 시간을 보냈다면 아마도 대부분의 readme 파일에 배지를 사용하는 것을 알았을 것입니다. 예를 들어 공식 반응 리포지토리를 사용하십시오.

이와 같은 배지는 저장소에 대한 주요 정보를 강조하는 좋은 방법을 제공합니다. Next.js는 저장소에서하는 것처럼 자신의 사용자 정의 자산을 배지로 사용할 수도 있습니다.

그러나 지금까지 Github 배지의 가장 유용한 점은 스스로 업데이트한다는 것입니다. readme에 값을 하드 코딩하는 대신 Github의 배지는 원격 서버에서 자동으로 변경 사항을 선택할 수 있습니다.

자신의 프로젝트의 readme 파일에 동적 github 배지를 추가하는 방법에 대해 논의 해 봅시다. Badgen.net이라는 온라인 생성기를 사용하여 기본 배지를 만들어 드리겠습니다. 그런 다음 배지를 냅킨을 통해 우리 자신의 서버리스 기능에 연결하여 배지를 역동적으로 만들게됩니다. 마지막으로, 우리는 자신의 사용자 정의 SVG 파일을 사용하여 한 걸음 더 나아갈 것입니다.

먼저 : 배지는 어떻게 작동합니까?

Github에 배지를 구축하기 전에 구현 방법을 빨리 살펴 보겠습니다. 실제로는 매우 간단합니다. 배지는 단지 이미지 일뿐입니다 . readme 파일은 Markdown으로 작성되었으며 Markdown은 다음과 같은 이미지를 지원합니다.

 ! \ [Alt Text \] (이미지의 경로 또는 URL)

URL을 이미지에 포함시킬 수 있다는 사실은 마크 다운 페이지가 페이지를 렌더링 할 때 서버의 이미지 데이터를 요청한다는 것을 의미합니다. 따라서 이미지가있는 서버를 제어하면 원하는 논리를 사용하여 다시 전송되는 이미지를 변경할 수 있습니다!

고맙게도“서버 설정”부분없이 자체 서버 로직을 배포하는 몇 가지 옵션이 있습니다. 기본 사용 사례의 경우 사전 정의 된 템플릿을 사용하여 Badgen.net을 사용하여 GitHub 배지 이미지를 만들 수 있습니다. 그리고 다시, 냅킨을 사용하면 브라우저에서 서버리스 기능을 신속하게 코딩 한 다음 Github 배지와 대화 할 수있는 엔드 포인트로 배포 할 수 있습니다.

오소리로 배지 만들기

Badgen.net을 통한 가장 간단한 배지 솔루션 : 정적 배지부터 시작하겠습니다. Badgen API는 URL 패턴을 사용하여 템플릿 배지를 즉시 생성합니다. URL 패턴은 다음과 같습니다.

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

Badgen.net에는 색상, 아이콘 등에 대한 옵션의 전체 목록이 있습니다. 이 예에서는 다음 값을 사용해 봅시다.

• : 제목 : 안녕하세요
• : 상태 : : 세계
• : 색상 : 색상 : : 빨간색. 빨간색
• : 아이콘 : : 트위터

우리의 마지막 URL은 다음과 같이 보입니다.

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

이미지를보십시오

readme 파일에 github 배지를 추가합니다

이제 우리는 GitHub Repo의 readme 파일 에이 배지를 포함시켜야합니다. 우리는 앞에서 살펴본 구문을 사용하여 Markdown에서 그렇게 할 수 있습니다.

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

Badgen은 다양한 옵션을 제공하므로 사이트를 확인하고 놀기를 권장합니다! 예를 들어, 템플릿 중 하나를 사용하면 주어진 Github Repo가 출연 한 횟수를 표시 할 수 있습니다. 다음은 다음에 다음에 대한 Star Github 배지입니다. JS Repo 예를 들어 :

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

이미지를보십시오

꽤 멋지다! 그러나 배지가 기본적으로 지원하지 않는 정보를 보여주기를 원한다면 어떻게해야합니까? 운 좋게도 Badgen은 자신의 HTTPS 엔드 포인트를 사용하여 데이터를 가져 오는 URL 템플릿을 가지고 있습니다.

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

예를 들어, 배지가 USD로 Bitcoin의 현재 가격을 보여주기를 원한다고 가정 해 봅시다. 우리에게 필요한 것은이 데이터를 다음과 같이 JSON으로 반환하는 사용자 정의 엔드 포인트입니다.

 {
  "색상": "파란색",
  "상태": "$ 39,333.7",
  "제목": "Bitcoin Price 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와 같은 서버리스 옵션을 사용할 수 있습니다. 그러나, 그것들은 여전히 ​​우리의 간단한 사용 사례에 대해 약간 복잡하고 지루할 수 있습니다. 그렇기 때문에 냅킨의 브라우저 내 함수 편집기가 설치 나 구성없이 엔드 포인트를 코딩하고 배포 할 것을 제안합니다.

냅킨의 비트 코인 배지 예제로 가서 예제 엔드 포인트를보십시오. 현재 비트 코인 가격을 검색하고 편집기에서 JSON으로 반환하는 코드를 볼 수 있습니다. 편집기에서 직접 코드를 실행하거나 엔드 포인트를 직접 사용할 수 있습니다.

Badgen과 함께 엔드 포인트를 사용하려면 위에서 동일한 URL 구성표로 작업하면 이번에는 냅킨 엔드 포인트에서만 작업하십시오.

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

이미지를보십시오

GitHub 배지를 사용자 정의하는 더 많은 방법

다음으로,이 기능을 포크하여 고유 한 사용자 정의 코드를 추가 할 수 있습니다. 오른쪽 상단의 "포크"버튼을 클릭하여 그렇게하십시오. 아직 로그인하지 않은 경우 냅킨으로 계정을 만들 것입니다.

이 기능을 성공적으로 포기한 후에는 원하는 NPM 모듈을 사용하여 원하는 코드를 추가 할 수 있습니다. Moment.js NPM 패키지를 추가하고 엔드 포인트 응답을 업데이트하여 Bitcoin의 가격이 Github 배지에서 직접 업데이트 된 시간을 보여줍니다.

 '노드 페치'에서 가져 오기 가져 오기
'순간'에서 수입 순간

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

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

  ints.slice (0, -3) ","ints.slice (-3) "을 반환합니다." 소수
}

내보내기 기본 비동기 (req, res) => {
  const btc = bitcoinprice ()를 기다립니다.

  res.json ({
    아이콘 : '비트 코인',
    제목 :`Bitcoin Price USD ($ {moment (). 형식 ( 'h : mma')})`,
    색상 : '파란색',
    상태 :`\\ $$ {btc}`
  })
}</https:>

다음에 github에서 readme 파일을로드 할 때 배지가 소비하는 데 약간의 시간이 걸릴 수 있습니다. Github은 배지 이미지를 제공하기 위해 프록시 메커니즘을 사용하기 때문입니다.

Github는 배지 이미지를 제공하여 요청 볼륨 또는 JavaScript 코드 주입과 같은 학대를 방지합니다. 우리는 Github의 프록시를 제어 할 수는 없지만 다행히도 너무 공격적으로 캐시는 아닙니다 (또는 배지의 목적을 물리 칠 수있는 다른 사람). 내 경험상 TTL은 약 5-10 분입니다.

좋아, 마지막 보스 시간.

냅킨이있는 맞춤형 SVG 배지

마지막 트릭을 위해 냅킨을 사용하여 완전히 새로운 SVG를 다시 보내 봅시다. 따라서 다음.js Repo에서 본 것처럼 사용자 정의 이미지를 사용할 수 있습니다.

GitHub 배지의 일반적인 사용 사례는 웹 사이트의 현재 상태를 보여줍니다. 그렇게합시다. 우리의 배지가 지원할 두 가지 상태는 다음과 같습니다.

Badgen은 맞춤형 SVG를 지원하지 않으므로 대신 냅킨 엔드 포인트와 직접 배지 대화를 할 것입니다. Site-Status-Badge라는 새로운 냅킨 함수를 만들어 봅시다.

이 기능의 코드는 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
}

내보내기 기본 비동기 (req, res) => {
  const forcefail = req.path? .endswith ( '/400')

  Const Healthy = AWAIT ISSITEUP ()
  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을 추가하여 시도 할 수 있습니다.

 ! \ [상태 업 \] (https://napkin-examples.npkn.net/site-status-badge/)
! \ [상태 다운 \] (https://napkin-examples.npkn.net/site-status-badge/400)

상태 업 배지보기 상태 조회 상태 다운 배지

아주 좋아?

그리고 거기에 우리는 그것을 가지고 있습니다! Github 배지 교육이 완료되었습니다. 그러나 여행은 끝나지 않았습니다. 이와 같은 배지가 매우 도움이되는 백만 가지가 있습니다. 재미있게 실험하고 그 Readme Sparkle을 만드십시오! ✨

위 내용은 REPO에 사용자 정의 GitHub 배지 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!