[Jekyll]Header Image 설정

1. Header Image Overlay by yaml

post 최상단에 다음과 같은 yaml 코드를 집어넣으면 Header Image를 Overlay할 수 있다.

---
title:  "CUDA Stream"
excerpt: "Null Stream / Non-Null Stream"
header:
  overlay_image: /assets/images/white_img.jpg
  overlay_filter: 0.5
  actions:
    - label: "TIL로 돌아가기"
      url: "/til/TIL-11/#1031"
---      

1-1) 문제점

단순히 post 상단에 해당 코드를 넣기만 해도 잘 동작하지만, 나는 기존 포스팅이 약 90개 정도가 있기 때문에 일일이 다 수정해 줄 수가 없는 노릇이었다. 또한, 게시물마다 header image를 다르게 할 것도 아니기 때문에, 디폴트 header image를 만들어 일단 모든 게시물에 적용시키고, 특별하게 수정하고자 하는 게시물은 위 방법으로 수정할 수 있도록 설계하였다. 따라서 본 포스팅에서는 post 수정 없이 직접 html을 수정하여 default header image를 삽입할 수 있는 방법을 소개한다.

2. Default Header Image

2-1) Default Header Image 생성

Header Image와 관련된 내용은 /_include/page__hero.html에 작성되어 있다. 해당 html 파일의 내용을 다음과 같이 수정해준다.

{% if page.header %}
  <!--기존 page_hero.html의 내용을 여기에 넣으면 됩니다.-->

<!--여기부터는 default header image 설정부분-->
{% else %}
  <!--변수 선언부분-->
  {% capture overlay_img_path %}/assets/images/empty-header.jpg{% endcapture %} <!--원하는 이미지 경로로 바꿔주기-->
  {% capture overlay_filter %}rgba(0, 0, 0, 0.5){% endcapture %} <!--원하는 투명도로 바꿔주기-->
  {% capture overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}){% endcapture %}
  <!--end 변수 선언부분-->

  <div class="page__hero--overlay" style="background-image: {{ overlay_filter }}, url('{{ overlay_img_path }}');">
    <div class="wrapper">
      <h1 id="page-title" class="page__title" itemprop="headline">
        {% if paginator and site.paginate_show_page_num %}
          {{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page | default: "Page" }} {{ paginator.page }}{% endunless %}
        {% else %}
          {{ page.title | default: site.title | markdownify | remove: "<p>" | remove: "</p>" }}
        {% endif %}
      </h1>
      <p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
      {% include page__meta.html %}
      <p>
      {% assign month_int = month | plus: 0 %}
    </div>
  </div>
{% endif %}

post 상단 yaml에 header를 설정한 경우에는 사용자가 post에서 커스텀한대로 Header Image가 overlay되게 하였고, 그렇지 않은 경우에는 default Header Image가 overlay되게 하였다. 변수 선언 부분의 이미지 경로와 투명도를 원하는 값으로 바꾸어주면 된다. 또한, 코드가 너무 길어 원본 page_hero.html 내용은 생략하였기 때문에, 실제 사용할 때는 2번째 줄 주석처리 해놓은 곳에 원본 파일을 붙여넣기 하면 된다.

결과

일일이 post를 수정해주지 않아도, 다음과 같이 Header Image가 잘 표현되는 것을 확인할 수 있다.

2-2) Header Image Custom

만약 특정 post의 Header Image를 위에서 설정한 default Header Image와 다르게 커스텀하고 싶다면, 기존 방식과 같이 post 상단에 yaml 코드를 추가하면 된다.

---
header:
  overlay_image: http://www.kogl.or.kr/upload_recommend/%ED%82%A4%EC%9B%8C%EB%93%9C%20%EC%A0%80%EC%9E%91%EB%AC%BC/%EC%A0%84%ED%86%B5%EB%AC%B8%EC%96%91/2D/1667881149503.jpg
  overlay_filter: rgba(255, 0, 0, 0.5)
---

2-3) Default Header Image의 action 지정

만약 Header Image에 다음과 같이 버튼을 만들어 특정 링크와 연결시키고 싶다면, /_include/page__hero.html에 class=”btn”인 a 태그를 만들어주면 된다.

예를 들어, 나는 post 상단 yaml에 til이라는 key를 추가하여 해당 key가 존재하면 특정한 링크로 이동하게끔 하였다. 링크는 현재 날짜에 따라 자동으로 바뀌도록 하였으며, liquid문의 capture를 사용하여 변수를 선언해주었다.

(중략)

{% else %}

  (중략)

  <!--커스텀 변수-->
  {% capture date %}{{page.date | remove: '-'}}{% endcapture %} 
  {% capture month %}{{ date | slice: 4, 2 }}{% endcapture %}
  {% capture month_day %}{{ date | slice: 4, 4 }}{% endcapture %}


  <div class="page__hero--overlay" style="background-image: {{ overlay_filter }}, url('{{ overlay_img_path }}');">

      (중략)

      {% include page__meta.html %}
      <p>
      <!--til key가 존재하는 경우 버튼 생성-->
      {% if page.til %}
        <a href="https://on-jungwoan.github.io/til/TIL-{{month}}/#{{month_day}}" class="btn btn--light-outline btn--large">TIL로 돌아가기</a>
      {% endif %}
    
      (중략)

결과

---
title:  "[Django]DRF(Django Rest Framework) 듀토리얼"
excerpt: "DRF 초기 setting"
date: 2022-11-14
last_modified_at: 2022-11-14

til: 'true'
---