Hugo 웹사이트에 DTube 비디오를 삽입하는 방법

Hugo은 정적 웹 페이지를 위한 빠르고 사용하기 쉬운 생성기이고, DTube은 Avalon 블록체인을 기반으로 하는 분산형 비디오 스트리밍 플랫폼이지만 원래 Steem 블록체인에서 시작되었습니다. 사용자는 플랫폼에서의 활동에 대해 암호화폐DTC(디튜브 코인)로 보상을 받습니다.

Hugo는 이미 YouTube 동영상을 쉽게 삽입할 수 있도록 많은 소위 shortcodes와 함께 제공됩니다.

따라서 이 게시물에서는 DTube 비디오를 포함하기 위해 재사용 가능한 단축 코드를 개발하는 방법을 살펴보겠습니다.

목차

Introduction to Hugo shortcodes

Creating your own shortcodes

DTube shortcode

Full example

Hugo 단축 코드 소개

Hugo 단축 코드를 사용하면 자주 사용하는 복잡한 HTML 스니펫을 간단한 템플릿 파일에 넣을 수 있습니다. 예를 들어 YouTube 비디오는 실제 iFrame 코드 대신 다음 단축 코드로 간단히 포함할 수 있습니다.

# Example

{{< youtube dQw4w9WgXcQ >}}

이 단축 코드는 Hugo의 빌드 프로세스에서 YouTube 내장 iFrame으로 대체되어 포함된 YouTube 비디오가 웹 페이지에 표시됩니다.

나만의 숏코드 만들기

Hugo는 다음 위치에서 사용자 정의 단축 코드를 검색합니다.

/layouts/shortcodes/<SHORTCODE>.html

/themes/<THEME>/layouts/shortcodes/<SHORTCODE>.html

첫 번째 장소는 프로젝트에 단축 코드를 추가하려는 경우이고, 두 번째 장소는 테마를 만들고 사용자 정의 단축 코드를 포함하려는 경우입니다.

단축 코드 파일의 이름은 나중에 페이지에서 단축 코드를 사용하는 데 사용되는 이름이기도 합니다.

단축 코드의 형식은 삽입할 비디오의 ID와 같은 인수와 같은 일부 특수 매개변수를 포함할 수 있는 단순히 HTML 파일입니다. 물론 Hugo/Go 템플릿 시스템의 모든 기능을 사용할 수도 있습니다.

DTube 단축 코드

DTube 비디오의 일반 iFrame 삽입 코드는 다음과 같습니다.

<div
    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
        src="https://emb.d.tube/#!/<USERNAME>/<VIDEO ID>"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
    ></iframe>
</div>

두 개의 매개변수(YouTube의 비디오 ID와 반대)가 필요합니다. 채널의 사용자 이름과 비디오 ID입니다. 따라서 우리의 단축 코드는 이제 YouTube 단축 코드와 같은 매개변수 대신 두 개의 매개변수를 허용해야 합니다.

따라서 이 HTML 코드를 단축 코드 파일에 넣고 인수/매개변수(사용자 이름 및 비디오 ID)를 iFrame에 전달하기만 하면 됩니다.

인수는 .Params 배열의 단축 코드로 전달되므로 첫 번째 인수를 얻으려면 다음 코드를 사용해야 합니다.

{{ index .Params 0 }}

따라서 단축 코드는 다음과 같아야 합니다.

<div
    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
        src="https://emb.d.tube/#!/{{ index .Params 0 }}/{{ index .Params 1 }}"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
    ></iframe>
</div>

이제 이 파일을 layouts/shortcodes/dtube.html 에 저장합니다.

그게 다야! 이제 페이지의 어느 지점에서나 단축 코드{{</* dtube USERNAME VIDEO_ID */>}}를 사용할 수 있으며 해당 지점에서 DTube 비디오가 포함됩니다.

전체 예

layouts/shortcodes/dtube.html

<div
    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
        src="https://emb.d.tube/#!/{{ index .Params 0 }}/{{ index .Params 1 }}"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
    ></iframe>
</div>