Eleventy - Codepen 삽입을 위한 단축 코드

Don't know what eleventy is? Before you read further, check out this amazing series of articles by to know more about eleventy and static site generators in general.

Eleventy는 단축 코드를 사용하여 템플릿에 콘텐츠를 매우 간단하게 포함할 수 있도록 합니다.

단축 코드는 전달된 정보를 기반으로 일부 html 또는 기타 데이터를 반환하는 특정 함수를 호출하는 데 사용됩니다. 주로 일부 전처리가 필요한 html 템플릿을 재사용하는 데 사용됩니다.

블로그를 작성하는 동안 빠른 코드 데모를 위해 내 기사에 코드펜을 포함해야 할 필요성을 발견했습니다.

처음에는 코드펜 사이트에서 제공하는 임베드 코드를 복사해서 붙여넣기로 했습니다. 그것은 전혀 실현 가능하지 않습니다.

숏코드를 DEV에서 사용했기 때문에 숏코드를 전혀 몰랐던 것은 아니지만 일레븐티에도 그런 것이 있는지는 잘 모르겠습니다. 그래서 버클을 채우고 110에서 단축 코드를 탐색했습니다!

지도 시간

Eleventy's official documentation 에 따라 마크다운 파일의 기본 템플릿 엔진은 liquid 이므로 여기서는 liquid 단축 코드를 예로 사용했습니다. 할 수도 있습니다create a shortcode for other templating engines.
.eleventy.js 내부에 다음 코드를 작성합니다.

eleventyConfig.addLiquidShortcode("codepen", function (url) {

    const url_array = url.split("/");

    const profile_url_array = url_array.filter((string, index) => {
        return (index < (url_array.length - 2)) ? true : false
    })

    const username = profile_url_array[profile_url_array.length - 1];
    const user_profile = profile_url_array.join("/");
    const data_slug_hash = url_array[url_array.length - 1];

    return `<p class="codepen" data-height="600" data-default-tab="result" data-slug-hash="${data_slug_hash}" data-user="${username}" style="height: 571px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
    <span><a href="${url}">See the pen</a> (<a href="${user_profile}">@${username}</a>) on <a href="https://codepen.io">CodePen</a>.</span>
    </p>
    <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>`;
});

Shortcode: {% codepen 'url' %}

숏코드 기능에 코드펜url을 전달합니다. url를 구분 기호로 사용하여 /를 나눕니다.
profile URL 다음에 슬러그를 필터링할 수 있는 배열을 얻게 됩니다. join("") 를 사용하여 필터링된 배열을 문자열로 변환합니다. 당신이 얻는 것은 codepen 사용자의 profile url입니다.

마찬가지로 username 뿐만 아니라 codepen id 도 추출할 수 있습니다.

codepen에서 embed 코드를 복사하고 편집하여 동적으로 만듭니다. 이 함수는 동적embed 코드를 반환합니다.

종료합니다.

This post was originally published in Syntackle