블로그를 게시하거나 새 프로젝트를 GitHub로 전송할 때마다 서류 가방을 편집하는 절차를 줄이기 위해 서류 가방을 자동화하는 것이 옳다.
본고에서 저는 여러분과 API를 빌려 당신의 투자조합 사이트를 자동화하는 방법을 공유하고 싶습니다. 제가 어떻게 하는지 보여드리겠습니다.

이 프로젝트는 무엇을 실현해야 하는가

GitHub

로부터 내 항목 자동 표시 및 링크

Hashnode에서 내 블로그 자동 표시 및 링크

요구 사항

JavaScript

Vue.js

API 얻기

내가 취한 절차

우선,github API를 사용하고 vuejs로 사용자 검색 프로그램을 만들었습니다.그리고 갑자기 생각이 났어요!만약 내가 사용자를 검색하고 이런 방식으로 그들을 표시할 수 있다면, 반드시 내 사이트의 모든 저장소를 자동으로 표시할 수 있는 방법이 있을 것이다.
그래서 나는 필요한 것을 찾을 때까지 API links 살펴보기 시작했다.그 후에 저는 Hashnode API를 연구했습니다. 이것은 다음 글에서 설명할 것입니다. 계속 관심을 가져 주십시오.

GitHub API

추출 요청 준비

선택한 프로파일의 모든 공용 저장소를 가져오기 위해 이 링크를 준비합니다."https://api.github.com/users/{user}/repos{?type,page,per_page,sort}"

// change {user} with a GitHub username
// remove the curly braces and insert the username
// to retrieve all the public repositories remove everything 
// after repos within the quotation marks

// this is how the link looks like in my case 
"https://api.github.com/users/ahmedaltaai/repos"

모든 작업은 구성 요소 내부에서 발생한다

인스턴스를 만들 때 JavaScript를 사용하여 GitHub API에서 저장소를 요청하는 API를 가져옵니다.

  created() {
    fetch('https://api.github.com/users/ahmedaltaai/repos')
      .then(res => res.json())
      .then(data =>
        console.log(data)
      })
  }

응답

이후

색인 링크 옆에 있는 삼각형을 클릭하여 되돌아오는 데이터를 분석하여 대상 내의 정보를 표시합니다. 이 정보는 되돌아오는 데이터와 사이트에 표시되는 데이터를 알아야 합니다.
나는 표시할 메시지 옆에 빨간 점을 하나 놓았다.

이름

언어

설명

저장소 URL

실시간 미리보기 항목의 URL

이제 모든 정보를 저장합시다.

응답을 그룹에 저장

데이터를 저장할 수 있도록 우리는 우선 공수 그룹을 만들어야 한다.

data() {
    return {
      // empty array to store the data
      // coming from the api
      repos: []
    }
  }

그리고 데이터를 수조에 분배합니다.

이전에 생성된 빈 그룹 채우기

  created() {
    fetch('https://api.github.com/users/ahmedaltaai/repos')
      .then(res => res.json())
      .then(data =>
// select the array with this.repos and insert the data into it
        this.repos = data
      })
  }

순환 환매

우리는 v-for 명령을 사용하여 그룹 기반 프로젝트 목록을 보여줄 수 있습니다.v-for 명령은 item-in-items 형식의 특수한 문법을 필요로 하는데 그 중에서 items는 원본 데이터 그룹이고 item는 교체된 그룹 요소의 별명이다.v-for="(repo, i) in repos" :key="i"Vue가 각 노드의 ID를 추적하여 기존 요소를 재사용하고 순서를 변경할 수 있도록 하려면 각 항목에 고유한 키 속성을 제공해야 합니다.

이것이 바로 나의 구성 요소의 외관이다.내 GitHub repo에서 찾을 수 있는 스타일을 절약할 거예요.

<template>
  <!-- projects container -->
  <article class="projects__container">
    <!-- card container -->
    <section class="card" v-for="(repo, i) in repos" :key="i">
      <div>
        <!-- card header -->
        <header class="header">
          <div>
            {{ repo.name }}
          </div>
          <div class="lang">
            <span class="tag"></span>
            <div>
              {{ repo.language }}
            </div>
          </div>
        </header>
        <!-- card body -->
        <div class="description">
          {{ repo.description }}
        </div>
        <!-- links / buttons -->
        <footer class="buttons">
          <a :href="repo.svn_url">
            <i class="fab fa-github"></i>
            CODE
          </a>
          <a :href="repo.homepage">
            <i class="fas fa-play-circle"></i>
            DEMO
          </a>
        </footer>
      </div>
    </section>
  </article>
</template>

이것은 브라우저에서 보이는 모양입니다.

보시다시피 제가 돌아오기를 원하지 않는 모든 공공 저장소로 돌아가고 있습니다.따라서, 나는if성명을 사용하고, 홈페이지 링크가 있는 환매만 표시해야 한다고 공개할 것이다.
이것은 흔히 볼 수 있는 장면으로 조건적으로 대상을 순환하기를 희망한다고 상상할 수 있다.주어진 조건에 부합되는 대상에서만 실제 순환을 실행합니다.문제는 네가 어떻게 하느냐는 것이다.

이거 어떻게 하는 거야?

이if문장을 v-for 순환 후에 놓으면 단일 항목에 접근할 수 있고 환매가 필요한지 판단할 수 있습니다.홈페이지가 진짜인지 가짜인지
v-if="홈 페이지 재구매"
우리는 v-for 명령을 사용하여 이 Repos 그룹을 순환하고 싶습니다.매번 순환이 교체될 때, 우리는 또 다른 환매를 나타낸다.그러나 우리는 현장 프레젠테이션에 연결된 환매를 통해 순환하고 싶을 뿐이다.만약 환매 협의에 아무런 내용이 없다면.홈페이지를 우리는 기본적으로 그것을 건너뛰고 싶다.
이것은 만약에 개인 환매 중의 홈페이지가 진실이라면 저에게 요청한 상세한 정보, 예를 들어 명칭, 설명 등을 보여 주십시오.

if 문장의 결과

보시다시피 이것은 기술적으로 실행할 수 있습니다.그러나 우리는 현재 모든 대상 주위에 빈 div 요소를 가지고 있습니다. 이것은 DOM 스트리밍과 환영 CSS 스타일을 방해할 수 있습니다.또한 응용 프로그램을 어지럽히고 HTML 태그에 불필요한 구조를 추가합니다.
내가 언급해야 할 것은 다음 순환이 중단되고 교체되기 전에, 당신은 여전히 필요하지 않은 환매를 순환하고 조건을 실행하고 있다는 것이다.이것은 시각적으로 문제를 해결할 수 있지만, 계산적으로, 우리는 여전히 시스템에서 필요한 환매만 반복하는 것이 아니라, 모든 환매를 반복하고 있다.유효 부하의 크기에 따라 성능 문제가 발생할 수 있습니다.

솔루션: 속성 계산

우리는 모든 환매 대상을 두루 훑어본 후에 중간 순환이 우리의 표준에 부합되는지 검사할 필요가 없다. 우리는 하위 집합을 만들 수 있다. 이것은 원하는 환매를 대표하고 홈페이지 링크가 있으며 이 하위 집합만 순환할 수 있다.
우리는 환매를 하나의 수조로 할 것이기 때문에 우리는 사용할 수 있다.filter () 방법은 필요한 저장소만 되돌려줍니다.

    // this function is made to filter every public
    // repo and return only the ones with a homepage in it
    // to overcome empty divs and phantom CSS styling

computed: {
    wantedRepos: function() {
      return this.repos.filter(repo => {
        return repo.homepage
      })
    }
  }

지금 저희가 v-for 순환을 업데이트했습니다.

v-for="(repo, i) in wantedRepos" :key="i"

계산적 성질을 지닌 새로운 결과

90퍼센트의 작업이 이미 끝났다.카드에 추가하고 싶은 것이 하나 더 있습니다. GitHub와 같은 컬러 언어 표시를 추가하고 싶습니다.

인스턴스

들다

설명과 홈 페이지를 저장소에 연결할 수 있는 방법을 물어볼 수도 있습니다.

그만해.

원하는 저장소로 이동

cog 아이콘 클릭

필드를 작성하고 변경 사항 저장

을 클릭합니다.

이제 컬러 언어로 돌아가겠습니다.

우선,languages 요소에 클래스나 id를 배치합니다.나는 클래스를 사용했고, 그것을 "lang"이라고 명명했다

<header class="header">
    <div>
      {{ repo.name }}
    </div>
    <div class="lang">
        <span></span>
      <div>
          {{ repo.language }}
      </div>
    </div>
</header>

나는 모든 사람이 여러 개의 저장소를 가지고 묘사할 것이라고 믿는다. 그러므로 당신이 언어의 요소를 잡을 때, 예를 들어 "lang"클래스는 같은 값을 가진 클래스가 여러 개 있을 것이다. 왜냐하면 모든 환매 카드에는 자신의 언어 요소가 있기 때문이다.그래서 다 잡아야 돼.

updated() {
    // grab the all element of the language tag
    let lang = document.querySelectorAll('.lang')

    // and cycle through them
    // with a for-of loop then use if and else if statements
    // to decide which language gets which color
    // with 'tag' you can access the individual nodes
    // within the grabed element
    // tag.firstChild is the span element where
    // the colored dot is being displayed

   for (let tag of lang) {
      if (tag.innerText === 'PHP') {
        tag.firstChild.style.backgroundColor = '#4F5D95'
      } else if (tag.innerText === 'HTML') {
        tag.firstChild.style.backgroundColor = '#e34c26'
      } else if (tag.innerText === 'JavaScript') {
        tag.firstChild.style.backgroundColor = '#f1e05a'
      } else if (tag.innerText === 'CSS') {
        tag.firstChild.style.backgroundColor = '#563d7c'
      } else if (tag.innerText === 'C') {
        tag.firstChild.style.backgroundColor = '#f34b7d'
      } else if (tag.innerText === 'C++') {
        tag.firstChild.style.backgroundColor = '#b07219'
      } else if (tag.innerText === 'Java') {
        tag.firstChild.style.backgroundColor = '#b07219'
      } else if (tag.innerText === 'Python') {
        tag.firstChild.style.backgroundColor = '#3572A5'
      } else if (tag.innerText === 'Vue') {
        tag.firstChild.style.backgroundColor = '#2c3e50'
      } else if (tag.innerText === 'TypeScript') {
        tag.firstChild.style.backgroundColor = '#2b7489'
      }
    }

색상 점은 CSS 섹션에서 스타일을 설정하고 배경색만 추가합니다.
개발 도구 관리자의 도움으로 GitHub에서 색상을 가져옵니다.

투자조합 홈페이지에서 프로젝트 부분의 자동화를 실현하신 것을 축하합니다.

다음 단계: Hashnode API 구현, 놓치지 말고 계속 주목하세요!