지킬에 포함
Jekyll용 Git 기반 CMS인 CloudCannon에서 가져왔습니다.
여기서 배울 내용:
# Starting repo
git clone https://github.com/CloudCannon/jekyll-learn-blog-template.git
# Starting branch:
git checkout includes-intro-start
# Finished branch:
git checkout includes-intro-finish
Jekyll에는 무엇이 포함되어 있나요?
이전에는 페이지 콘텐츠의 외부 "프레임"으로 레이아웃을 만드는 방법을 살펴보았습니다. 그러나 때로는 여러 페이지에서 일관성을 유지하려는 더 작은 페이지 조각이 있습니다. 이에 대한 좋은 예는 소셜 미디어 공유 및 양식입니다. Jekyll includes 페이지를 탐색, 섹션 제목 및 바닥글과 같은 더 작은 "구성 요소"로 나눌 수 있습니다. 많은 잠재적 사용 사례가 있습니다. 포함on Jekyll’s official site에 대해 자세히 알아보십시오.
사용 방법 포함
포함 설정은 레이아웃과 매우 유사합니다. Jekyll이 인식할 수 있도록
_includes 폴더를 생성한 다음 HTML 조각을 그 안에 넣을 수 있습니다.첫 번째 예에서는
default.html 레이아웃에서 기존 탐색 및 바닥글을 가져와 자체 파일에 배치해 보겠습니다._includes/nav.html . <header>의 모든 _layouts/default.html 요소를 잘라서 이 파일에 붙여넣습니다. _includes/footer.html . <footer>의 모든 _layouts/default.html 요소를 잘라서 이 파일에 붙여넣습니다. 마지막으로 새 포함을 사용하려면 이동한 콘텐츠 위치에 다음을 추가하기만 하면 됩니다.
---
---
<!DOCTYPE html>
<html lang="en">
... rest of head ...
<body class="page">
{% include nav.html %}
<main class="main-content">
<div class="container">
<div class="page-content">
{{ content }}
</div>
</main>
{% include footer.html %}
</body>
</html>
이제 기본 레이아웃이 상당히 깔끔하고 읽기 쉬워졌으며 이러한 영역을 개별적으로 작업하기가 더 쉬워졌습니다.
다재다능함 추가 - 인클루드에 매개변수 전달
사이트를 더 세분화할 수 있다는 것은 좋은 일이지만 여러 소셜 미디어 게시물과 같이 필요에 따라 변경되는 구성 요소를 만들고 싶다면 어떻게 해야 할까요? 일반적으로 우리는 공급자로부터 임베드 코드를 복사하여 붙여넣기만 하면 되지만 Jekyll은 매개변수라는 또 다른 솔루션을 제공합니다.
게시물/동영상 등을 볼 때 일반적으로 고유 코드로 식별됩니다. 이 코드를 "매개 변수"로 사용하여 포함의 URL에 전달할 수 있으므로 포함을 훨씬 더 재사용할 수 있습니다.
페이지에 넣을 수 있는 YouTube 구성 요소를 만들어 보겠습니다.
youtube.html 폴더에 _includes를 만들고 이 코드를 붙여넣습니다. <div class="spacing youtube">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/{{ include.youtube_id }}"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
YouTube 동영상 ID의 자리 표시자를 확인하세요. 이제 고유한 코드와 함께 YouTube 구성 요소를 페이지에 포함하기만 하면 됩니다. 페이지에 2개를 추가하여 이제 서로 다른 비디오를 얼마나 쉽게 표시할 수 있는지 보여드리겠습니다.
<p class="featured">Featured posts</p>
<h2 class="heading-secondary dark-blue">Latest videos</h2>
<div class="includes-grid">
{% include youtube.html youtube_id="7W7hEUGtv4U" %>
{% include youtube.html youtube_id="E3a88_SjJR0" %}
</div>
Instagram, Facebook 또는 기타 소셜 미디어 게시물에 동일한 논리를 적용할 수 있습니다. 게시물/콘텐츠에 대한 "삽입"옵션을 찾아 포함을 생성한 다음 고유 코드를
{{ include.<your variable> }}로 바꾸십시오. 이제 추가할 새 게시물이 있을 때마다 고유 코드를 추가하기만 하면 됩니다.무엇 향후 계획?
포함은 웹 사이트를 관리하고 복사 및 붙여넣기의 필요성을 방지하는 데 도움이 되는 좋은 방법입니다. 하지만 지금은 게시물을 통해 블로그 콘텐츠를 만드는 데 집중하겠습니다.
Reference
이 문제에 관하여(지킬에 포함), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cloudcannon/includes-in-jekyll-145b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
