Blogger 라벨 사이에 쉼표 찍기

Blogger에서 간단하게 글의 라벨(label)을 표시할 수 있는 코드는 다음과 같습니다.

<div class='label'>
  <b:loop var='label' values='data:post.labels'>
    <span><a expr:href='data:label.url'><data:label.name/></a></span>
  </b:loop>
</div>

라벨들이 span 컨테이너에 각각 담겨 있으므로 span에 background-color나, border-radius를 주면 다양하게 라벨을 꾸밀 수 있습니다. 예시로 라벨을 꾸며 보았습니다.

하지만 라벨을 꾸미지 않고 쉼표를 사용해 라벨을 나누고 싶다면 어떻게 해야 할까요? 예를 들어서 라벨1, 라벨2, 라벨3 식의 표현을 원한다고 해 봅시다.

가장 간단한 방법은 CSS를 이용해 마지막 자식이 아닌 span에 after을 사용해 ", "를 추가해 주는 것입니다.

.label span:not(:last-child)::after {
  content: ', '; 
}

그러면 라벨1라벨2라벨3 처럼 표시되던 라벨이 라벨1, 라벨2, 라벨3 으로 잘 표시되게 됩니다. 아래 예시를 드래그해 보면 쉼표가 드래그가 되지 않는 것을 볼 수 있습니다. after 요소는 드래그가 되지 않습니다.

하지만 CSS를 사용하지 않는 방법은 없는 것일까요? Blogger에는 isLast라는 속성이 존재합니다. 이 속성은 현재 라벨이 마지막 라벨이면 true를, 나머지는 false를 반환합니다. 즉 코드를 다음과 같이 짜 봅시다.

<div class='label'>
  <b:loop var='label' values='data:post.labels'>
    <span><a expr:href='data:label.url'><data:label.name/></a><b:if cond='!data:label.isLast'>, </b:if></span>
  </b:loop>
</div>

b:if를 활용해 이 라벨이 마지막 라벨인지 구분한 후 마지막 라벨이 아니라면 ", "를 라벨 뒤에 붙입니다. 하지만 이 코드는 위젯 버전 1에서만 실행됩니다. 즉 최신 테마인 contempo나 soho 등에서는 이 코드가 작동하지 않습니다.

실망하기에는 이릅니다. 위젯 버전 2에서도 사용할 수 있는 last 속성이 있습니다. b:if의 조건을 다음과 같이 조금 바꾸어 봅시다.

<div class='label'>
  <b:loop var='label' values='data:post.labels'>
    <span><a expr:href='data:label.url'><data:label.name/></a><b:if cond='data:post.labels.last.name != data:label.name'>, </b:if></span>
  </b:loop>
</div>

이 코드는 isLast를 사용한 코드와 완벽히 같은 기능을 합니다.

여담으로 Blogger Code PE 블로그가 정말 많은 도움이 됩니다. 이 블로그 하나만 보아도 Blogger 테마 개발에 문제가 없을 정도로 정보 양이 많습니다. 앞으로 해당 블로그를 자주 보게 될 듯합니다.