개요

Jekyll로 사이트를 만들다보면 내부 문서를 링크해야 하는 경우가 있습니다. 이때 링크하는 방법은 A 태그로 단순 링크하는 방법도 있고, 티스토리나 네이버 블로그처럼 Editor가 지원되는 곳에서 썸네일 이미지와 문서 제목이나 요약 내용도 함께 보여주는 경우도 있습니다.

여기서는 Editor에서 지원하는 썸네일 이미지와 제목이나 내용을 함께 보여주는 방법에 대해 정리 해보겠습니다.

단순 링크

단순 링크는 아래와 같이 페이지 URL이나 제목 등으로 링크만 시켜서 보여주는 방법입니다.

RJekyll로 만드는 사이트에서 내부 문서를 링크하는 방법에 대해 정리해보았습니다

티스토리 방식

티스토리는 아래와 같이 왼쪽에 작은 썸네일 이미지와 오른쪽에 문서 Title과 Description을 보여줍니다.

Jekyll로 만드는 사이트에서 내부 문서를 링크하는 방법에 대해 정리해보았습니다

네이버 블로그 방식

네이버 블로그는 위쪽에 이미지를 크게 보여주고 아래쪽에 문서 Title과 Description을 보여주는 방식입니다.

Jekyll로 만드는 사이트에서 내부 문서를 링크하는 방법에 대해 정리해보았습니다

썸네일 방식

지금부터 만들어볼 링크 방식은 아래와 같이 왼쪽 썸네일 이미지에 오른쪽에 본문 내용 일부를 확인할 수 있는 형태의 링크방식입니다.

Jekyll로 만드는 사이트에서 내부 문서를 링크하는 방법에 대해 정리해보았습니다

문서 정보

각 문서 정보 중에서 아래의 title, permalink, image 이렇게 3가지는 필수로 설정해둡니다.

  ---
title: 사이트 내부 문서 링크하기 | Jekyll
permalink: /programming/sample.html
image: "/images/programming/sample-01.png"
---

내부 링크용 파일 include

우선 first.html 파일에서 second.html 파일을 include 한다고 가정해보겠습니다.
first.md 파일 소스코드에 아래와 같이 include_doc.html 파일을 include하면서 파라미터 file에는 include할 문서의 permalink 정보를 전달합니다.

  {% include include_doc.html file="/programming/second.html" %}

내부 링크용 파일

그리고 위에서 호출한 include_doc.html 파일의 소스코드는 아래와 같이 저장합니다.

  {% assign docs = site.posts | where:"permalink", include.file %}

<section class="blog blog-block">
    <div class="row">
    <div class="col-sm-12 col-md-12">  
    {% for doc in docs %}
            <div class="blog-post-small">
            <img src="{{ doc.image }}">
            <div class="title">
            <a href="{{ doc.url }}">{{ doc.title | truncate: 40 }}</a></div>
            <p>{{ doc.content | markdownify | strip_html | truncatewords: 30 }}</p>
            <a href="{{ doc.url }}" class="link-url">Read More</a>
            </div>  
    {% endfor %}   
    </div>
    </div>
    <div class="mb-30"></div> 
</section>

핵심 소스

위에서 본 include_doc.html 소스중에서 나머지는 그냥 html, css 코드이니 원하는대로 설정하면 되고 아래의 코드가 핵심이니 자세히 살펴 보겠습니다.

지정한 문서 정보 배열에 저장

이 코드는 liquid의 문법 중에서 where 필터를 이용해서 사이트의 전체 포스트 중에서 permalink 속성 정보가 파라미터 file로 넘어온 문서만 docs 변수에 배열로 저장합니다.

  {% assign docs = site.posts | where:"permalink", include.file %}

문서 정보 출력

docs 배열에서 문서 정보를 가져와서 출력합니다. 물론 배열에 들어 있는 문서 정보는 하나 뿐이지만 무조건 배열로 담아와야 하기 때문에 아래와 같이 for 문으로 출력했습니다.

  {% for doc in docs %}
  <img src="{{ doc.image }}">
  <a href="{{ doc.url }}">{{ doc.title | truncate: 40 }}</a></div>
  <p>{{ doc.content | markdownify | strip_html | truncatewords: 30 }}</p>
{% endfor %}

다른 출력 방식

혹시 for 문을 사용하지 않을 경우에는 다음과 같이 배열의 첫번째 요소를 가져와서 처리하면 됩니다.

  <img src="{{ docs[0].image }}">
<a href="{{ docs[0].url }}">{{ docs[0].title | truncate: 40 }}</a></div>
<p>{{ docs[0].content | markdownify | strip_html | truncatewords: 30 }}</p>

문서 업데이트 내역

날짜 내용
2022-06-14 문서 최초 생성