Jekyll 체크박스 추가하기

TIL에 todo list를 추가하려다 보니 checkbox 기능이 필요해 졌다. Jekyll에서 체크박스를 어떻게 추가할 수 있을지 찾아보니 liquid filter 기능으로 구현할 수 있다고 한다. 그럼, 해봐야쥬?

liquid filter 기능으로 체크박스 구현하기

liquid에는 filter 기능이 있는데, 그 중, replace 기능을 쓰면 특정 부분을 원하는 내용으로 바꿀 수 있다.

| 좌측에는 orinigal 콘텐츠에 포함된, 우측 , 왼쪽 인수를 오른쪽 인수로 바꾼다. 아래 예제를 보면 확실히 이해할 수 있다.

{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}

위의 코드 실행 결과는, | 왼쪽 문장의 “my”가 “your”로 바뀌어 아래와 같은 문장이 된다.

Take your protein pills and put your helmet on

default.html에서 {{ content }}를 렌더하는데, 콘텐츠 내 <li>[ ]를 <li class="box">로 <li>[x]를 <li class="box_done>로 변경하면 마크다운에서 - [ ]와 - [x]를 쓰는 것으로 체크박스를 구현할 수 있다.

<div id="main" role="main">
  {{ content | replace: '
  <li>[ ]', '</li>
  <li class="box">' | replace: '</li>
  <li>[x]', '</li>
  <li class="box_done">' }}</li>
</div>

여기까지 하면 각 task-list-item이라는 class를 가진 리스트가 생성되며, 각 리스트는 <input type="checkbox" class="task-list-item-checkbox"> 를 가진다.

보기좋게 css를 추가하면 끝!

.box,
.box_done,
.task-list-item {
  list-style-type: none;
}

.task-list-item input {
  font-size: 16px;
  margin: 0 01em 0.25em -1.6em;
  vertical-align: middle;
}

짜잔 😎

참고자료

Liquid 공식문서