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

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

GitHub

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

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

요구 사항

JavaScript

Vue.js

vue apollo

내가 취한 절차

automating with github api에 대한 마지막 문장을 준비한 후에 저는 Hashnode API를 사용하기 시작했습니다.

이렇게 보여요.

여기는 GraphQL 놀이터입니다.

문서 탭은 스크롤 막대 옆에 있습니다.

나는 그것을 찾을 때까지 많은 검색을 했다. 왜냐하면 이것은 내가 처음으로 이 사용자 인터페이스를 보았기 때문이다

차근차근 설명해 보도록 하겠습니다.

사용자 지정

username: String!느낌표는 지정한 내용을 입력해야 한다는 것을 나타낸다. 이 예에서는 문자열이다.age: Int?물음표는 지정한 내용을 입력할 필요가 없다는 것을 의미한다. 이 예에서는 Int이다. 이것은 단지 예일 뿐이다. 우리는'사용자 이름'위의 하나만 필요로 한다.

출판물 선택

그리고 기둥

마지막으로 API에서 검색할 데이터 선택

우리의 사례에서 우리는 표지 사진, 제목, 프로필(설명)이 필요하다.
그 밖에 cuid와slug 동적 링크 사이트의 블로그 카드가 원시 게시물을 직접 가리키도록 해야 한다.우리는 잠시 후에 다시 토론합시다.

나는 내 사용자 이름을 사용해서 시범을 보일 것이다. 너는 네가 좋아하는 모든 사용자 이름을 사용할 수 있다.

query {
    user(username: "ahmedaltaai") {
        publication {
                  posts {
                    coverImage
                    title
                    brief
                    slug
                    cuid
                    }
              }
    }
}

화면 중간에 있는 재생 버튼을 누른 결과입니다.

좋습니다. 우리는 GraphQL 플랫폼에서 아주 잘하고 있습니다. 그러나 우리는 어떻게 우리의 코드 라이브러리에서 합니까?

Vue를 사용하고 있기 때문입니다.우리는 vue apollo를 사용할 것이다.React 및 Angular 버전도 있습니다.
따라서 우리는npm i vue-apollo --save이후, 우리는 우리의 프로젝트 src 디렉터리 "vue apollo.js"에서 새로운 js 파일을 찾을 것입니다

vue apollo 안에 있습니다.js 파일 두 가지를 수정해야 합니다.

httpEndpoint

wsEndpoint(Web 소켓)

우리의 API 주소 링크는 httpEndpoint에 들어가고 wsEndpoint는null로 설정됩니다.

이제 호출할 구성 요소로 전환합니다. (Vuex 같은 상태 관리 시스템을 사용하지 않았습니다.)

<script>
//we need to import graphql
//gql is the graphql query language

import gql from 'graphql-tag'

export default {
  name: 'blog',

//use the "apollo" object
//to query and retrieve the data

  apollo: {

//add an attribute which has the same name 
//as the field name in the query

    user: gql`
      query {
        user(username: "ahmedaltaai") {
          publication {
            posts {
              coverImage
              title
              brief
              slug
              cuid
            }
          }
        }
      }
    `
  }
}
</script>

읽기vue-apollo documentationname matchnig &co를 더 잘 이해하기 위해.

지금 우리는 아폴로 물체에서 데이터를 순환하여 표시할 수 있다

'사용자'하의'publication'에서'posts'대상을 순환해야 합니다.v-for="post in user.publication.posts" :key="post.cuid"

이것이 바로 나의 구성 요소의 외관이다

블로그의 편폭을 위해서 나는 스타일 부분을 너에게 남겨 줄 것이다.내 github 프로필에서 전체 코드를 볼 수 있습니다.

<section
        v-for="post in user.publication.posts"
        :key="post.cuid"
        class="card"
      >
        <a :href="`https://ahmeds.tech/${post.slug}`">
          <div class="cover-image">
            <img :src="post.coverImage" />
          </div>
          <div class="text">
            <div class="title">
              <h3>{{ post.title }}</h3>
            </div>
            <div class="description">
              <p>{{ post.brief }}</p>
            </div>
          </div>
        </a>
      </section>

보시다시피 클릭하면'a'해시태그로 카드를 원본 게시물에 연결합니다.
너는 완전히 마음대로 할 수 있어!

"a" 태그의 URL을 수정하는 방법

이것은 자신의 필드가 있거나hashnode 아래의 하위 필드를 사용하느냐에 달려 있습니다.

자체 도메인

Hashnode의 하위 도메인

자신의 영역

api.hashnode.com에서 우리가 데이터를 조회할 때, 우리는 "slug"를 요청했다

A slug is a human-readable, unique identifier, used to identify a resource instead of a less human-readable identifier like an id . You use a slug when you want to refer to an item while preserving the ability to see, at a glance, what the item is.

slug의 가치는 귀하의 게시물 제목이 될 것입니다.

따라서 "a"표시에서 우리는 v-bind를 사용하여 "href"동태를 원한다. 나는 이것을 사칭으로 줄인다. "이렇게:<a :href="`https://ahmeds.tech/${post.slug}`">v-for 순환 "post"요소에 접근
나는 링크를 반올림표에 두었다. - 이것은 템플릿 문자열(템플릿 문자열)을 초래할 수 있다

Template literals are string literals allowing embedded expressions.

따라서 저는 v-for 순환 중의 "post"속성을 사용하여 slug를 추출하여 URL에 추가할 수 있습니다. 이 URL은 제 개인 블로그의 전체 링크에 누적됩니다.클릭 중인 블로그.https://ahmeds.tech/how-to-automate-your-portfolio-website-part-1-1

Hashnode 아래의 하위 도메인

우리가 지금 cuid를 필요로 하는 것 외에 다른 절차는 같다

The Customer user ID (CUID) field is a unique user identifier set by app and website owners.

개인 도메인이 없는 블로거 URL은 다음과 같습니다.<username>.hashnode.dev/<slug>또는<username>.hashnode.dev/<slug>-<cuid>나는 왜 이 두 가지가 다른지 모르겠다.너는 반드시 어느 것이 너에게 적합한지 찾아내야 한다.만약 Hashnode에서 준비가 되었을 때 URL에 더욱 관심을 가지신다면, 제가 여기서 말한 내용을 주의하고 이해하실 것입니다.
Hashnode의 사용자 이름, 하드 인코딩으로 바꿉니다.URL의 나머지 부분에 대해 동일한 절차를 수행합니다.<a :href="`https://<username>.hashnode.dev/${post.slug}`">또는<a :href="`https://<username>.hashnode.dev/${post.slug}-${post.cuid}`">

지금 이 게시물들은 아마 너의 사이트에 표시될 것이다.비록 긴 로드 시간이 있지만, 나는 좋아하지 않는다. 나는 너도 좋아하지 않는다고 생각한다.

마운트 뼈대로 전문적으로

뼈대 로드

나는 인터넷에 많은 강좌가 있기 때문에 골격을 불러오는 스타일을 만들거나 설정하는 방법을 상세하게 소개하지 않을 것이다.이것도fleek에서 구글 검색 기술을 얻을 수 있는 기회입니다:p
내가 뼈대를 세울 때 겪은 도전을 알려줄게.

vue apollo 문서의 로드 상태

You can display a loading state thanks to the $apollo.loading prop:

<div v-if="$apollo.loading">Loading...</div>내가 막 이 기능을 실현하기 시작했을 때, 그것은 작용하지 않았다.뼈대가 표시되지 않습니다.그래서 제가 뒤바뀌었어요.v-if:

<div v-if="!$apollo.loading">
  <blog-card />
</div> 

<div v-else>
  <loading-skeleton />
<div>

이런 상황에서 불러오지 않으면 데이터를 얻지 못했기 때문에 표지 이미지, 제목, 설명이 있는 블로그 카드를 보여 주십시오. 그렇지 않으면 불러오는 뼈대를 보여 주십시오.

홀가분하다

그렇습니다. 새로운 것을 배웠으면 좋겠습니다.😃