Markdown 파일을 통해 Nuxt 웹 사이트에 Youtube를 삽입하는 방법

Nuxt를 사용하여 블로그 빌드에 Youtube를 삽입하는 것이 그 어느 때보다 쉬워졌습니다. lite-youtube-embed 패키지를 포함하고 Nuxt 플러그인 및 구성 요소를 생성하면 모든 Markdown 콘텐츠 파일에서 사용할 수 있습니다.

이 게시물에서는 직접 할 수 있는 방법을 보여 드리겠습니다. 다음 단계를 따릅니다.

Youtube Lite 패키지 포함

플러그인 추가

구성 요소 생성

Markdown 파일에서 구성 요소 사용

1. Youtube Lite 패키지 포함

먼저 Google Chrome 팀 구성원과 프런트엔드 개발자Paul Irish 💪가 만든 npm 패키지를 설치해야 합니다. 이 패키지는 "일반적인"방식보다 더 나은 성능으로 Youtube 비디오를 삽입하기 위해 제작되었습니다.

하지만 블로그에 Youtube 플레이어를 삽입할 때 발생하는 성능 병목 현상에 대해 깊이 파고들고 싶지는 않습니다. Nuxt를 사용하여 Markdown 파일에 Youtube 플레이어를 구현하는 방법을 보여드리고자 합니다.

Nuxt 프로젝트에 설치하려면 이 명령을 실행하세요.

yarn add lite-youtube-embed

또는

npm i lite-youtube-embed

nuxt.config.js의 CSS 파일을 css 속성에 추가합니다.

https://gist.github.com/devbyray/ba094f0b488ac5152f00b5efd36d4dff

2. 플러그인 추가

플러그인 파일youtube.client.js을 플러그인 폴더에 생성합니다. 이름에 .client.js를 포함해야 Nuxt가 브라우저에서만 로드합니다. 물론 JavaScript 라이브러리도 가져와야 합니다.

https://gist.github.com/devbyray/6ee03592419349b6a664fc2536a5620e

이제 아래와 같이 이 플러그인을 nuxt.config.js에 등록해야 합니다.

https://gist.github.com/devbyray/3e8ab7649b7d1cbee387c8bba4019733

3. 컴포넌트 생성

Markdown 파일에서 웹 구성 요소<lite-youtube>를 사용하려면 이를 래핑할 Vue 구성 요소를 생성해야 합니다. 그렇지 않으면 페이지에 표시할 수 없습니다.
Youtube.vue 폴더에 components 컴포넌트를 생성했습니다. Youtube 비디오 ID와 레이블을 전달하기 위해 두 개의 소품을 추가했습니다.

https://gist.github.com/devbyray/7667b330b483c40b28f2bf9eb5a8b7cb

이 Youtube 구성 요소를 사용하면 Markdown 파일에서 사용할 수 있습니다.

4. Markdown 파일에서 컴포넌트 사용

따라서 문제는 Markdown 파일에서 어떻게 사용하는가입니다.

일반적으로 Vue 구성 요소에서 하는 것처럼 파일에 추가합니다.

https://gist.github.com/devbyray/3e2085fcec376d81a022b8552d07e0d6

Nuxt는 전체 Markdown 파일을 HTML 페이지로 마술처럼 변환하여 브라우저에서 이와 같이 볼 수 있습니다.

감사!

이 이야기를 읽은 후 새로운 것을 배웠거나 새로운 것을 창조하도록 영감을 받았기를 바랍니다! 🤗 그렇다면 이메일(이 페이지 상단으로 스크롤)을 통해 구독하거나 여기 Hashnode에서 저를 팔로우하세요.

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

답변으로 질문이나 할 말이 남았다면 아래로 스크롤하여 메시지를 입력하세요. 비공개로 하고 싶을 때 를 보내주세요. 제 디엠은 언제나 열려있습니다😁