데모

짧은 버전

nuxt.js에 대한 경험이 많다면 다음과 같은 논리가 있습니다.

이 접근 방식은 https://gist.github.com/xxxxx/xxxxx.js 임베딩 방식을 없애고 대신 Github API에서 제공하는 json 파일, 즉 https://api.github.com/gist/를 가져와 데이터를 표시합니다.

URL 형식은 https://api.github.com/gist/<gist-id>이며, 여기서 <gist-id>는 요지 URLxxxxxx의 https://gist.github.com/username/xxxxxx 비트입니다.

이것은 약간의 수정이 있는 Vue.js에서도 작동합니다.

관심이 있는 경우 구현 부분을 건너뛰고 limitations 및 parallel approaches 을 빠르게 볼 수 있습니다.

긴 버전

동기, 몇 가지 병렬 접근 방식, 구현 및 제한 사항.

동기 부여

내가 이 접근 방식을 생각해 낸 이유는 다른 모듈 및 플러그인의 도움 없이 Vue.js 프레임워크에 적합하지 않은 호출js을 포함하기 위해 Github에서 제공하는document.write() 스크립트입니다.

원시 html에서와 같이 <script src="embedded-gist-js-url"></script>와 같이 직접 삽입하면 아래 경고가 표시될 수 있습니다.

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

병렬 접근

postscribe (두 번째 솔루션 언급)

와 같은 플러그인으로 nuxt.js와 함께 top answer from Stack Overflow 사용

사용 vue-embed-gist

다른 병렬 접근 방식이나 아이디어가 있으면 지금 알려주세요

슬프게도 위의 어느 것도 @_@ 작동하지 않습니다. 적어도 저에게는 그렇습니다. 따라서 나는 이런 종류의 멍청하지만 유일한 작동 방식을 선택합니다.

구현

표시할 요지 ID 목록을 데이터에 저장합니다.

nuxt.js에서 제공하는 async fetch() {}를 사용하여 github API에서 json을 가져옵니다.

가장 기본적인 v-for 및 v-if를 사용하여 json 파일을 올바르게 표시합니다.

좀 스타일링

소스 코드의 경우 this link을 클릭하거나 게시물 맨 처음에 있는 데모를 검토할 수 있습니다.

제한 사항

Github에서 제공하는 무제한 조회수js와 달리 조회수 제한(자세한 정보는 방문documentation ).

더 무거운 코딩, 이 접근 방식은 10-20줄의 코드를 추가하는 많은 vue.js 코딩을 포함하는 반면 병렬 접근 방식은 2-3줄만 사용할 수 있습니다.

다른 알려지지 않은 제한 사항이 있을 수 있습니다. 저를 위해 지적해 주시기 바랍니다.

결론

이 게시물을 읽어 주셔서 감사합니다.

다시 말하지만, 같은 주제에 관심이 있거나 이 접근 방식에 대한 아이디어가 있거나 같은 문제에 걸려 넘어진 경우 언제든지 의견을 남겨주세요.