Blogger Conditional Tags - 특정 페이지에서만 작동되는 조건부 코드

블로거(Blogger) 템플릿을 변경하다보면 특정 페이지에서만 위젯이 나타나게 하거나, CSS가 변경되었으면 하는 때가 있는데, Javascript를 사용해도 되지만 블로거의 자체 기능인 Conditional Tags를 사용하면 편합니다.

Conditional Tags는 다음과 같은 구조입니다.

<b:if cond='조건문'>
    <!-- 해당 조건을 만족한 페이지에 넣고 싶은 코드 -->
</b:if>

if문을 생각하면 되는데, else를 쓰고 싶으면 다음과 같이 사용합니다.

<b:if cond='조건문'>
    <!-- 조건을 만족한 페이지에 넣고 싶은 코드 -->
<b:else/>
    <!-- 조건을 만족하지 않는 페이지에 넣고 싶은 코드 -->
</b:if>

두 가지 이상의 조건을 만족하게 하고 싶다면 다음과 같이 응용할 수 있습니다.

<b:if cond='조건문1'>
    <b:if cond='조건문2'>
        <!-- 조건문1을 만족하고 조건문2도 만족한 페이지에 넣고 싶은 코드 -->
    <b:else/>
        <!-- 조건문1을 만족하고, 조건문2를 만족하지 않는 페이지에 넣고 싶은 코드 -->
    </b:if>
</b:else/>
    <!-- 조건문1을 만족하지 않는 페이지에 넣고 싶은 코드 -->
</b:if>

다양하게 응용할 수 있는데 조건문 안에 조건문을 많이 넣는 건 딱히 좋은 방법이 아니니까 너무 겹쳐서 사용하지 않는 게 좋습니다.

조건문은 다음과 같이 사용합니다.

<b:if cond='data:blog.url == "https://example.blogspot.com/example.html"'>
    <!-- 주소가 "https://example.blogspot.com/example.html"일 때만 작동 -->
</b:if>

data:blog.url은 현재 링크라고 생각하면 됩니다. 현재 링크가 https://example.blogspot.com/example.html일 때 해당 코드를 추가하겠다는 뜻입니다.

저렇게 주소를 직접 입력하기보다는 아래와 같이 블로거 자체 태그들을 사용하는 걸 추천합니다. 사용할 수 있는 태그들을 정리했습니다.

※ Blogger 템플릿은 XML 기반이기 때문에 템플릿을 저장하면 큰따옴표가 '"'로 변경됩니다. 상관없어요.

*정적 페이지는 블로거에서 작성한 페이지를 뜻합니다. Static page라고 부르길래 정적 페이지라고 썼습니다.

홈페이지

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
    <!-- 홈페이지에서만 작동 -->
</b:if>

모든 게시물 페이지

<b:if cond='data:blog.pageType == "item"'>
    <!-- 모든 게시물 페이지에서 작동 -->
</b:if>

모든 정적 페이지

<b:if cond='data:blog.pageType == "static_page"'>
    <!-- 모든 정적 페이지에서 작동 -->
</b:if>

특정 게시물 혹은 정적 페이지

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2023/06/example.html"'>
    <!-- https://example.blogspot.com/2023/06/example.html에서만 작동 -->
</b:if>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/example.html"'>
    <!-- https://example.blogspot.com/p/example.html에서만 작동 -->
</b:if>

위 코드가 제대로 작동하지 않는 경우가 있는데요. 그럴 때는 '+'를 'path'로 변경합니다.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl path "2023/06/example.html"'>
    <!-- https://example.blogspot.com/2023/06/example.html에서만 작동 -->
</b:if>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl path "p/example.html"'>
    <!-- https://example.blogspot.com/p/example.html에서만 작동 -->
</b:if>

라벨 페이지

<b:if cond='data:blog.searchLabel'>
    <!-- 모든 라벨별 글 목록 페이지에서 작동 -->
</b:if>

특정 라벨 페이지

<b:if cond='data:blog.searchLabel == "abc"'>
    <!-- 라벨이 abc인 글 목록 페이지에서 작동 -->
</b:if>

검색 결과 페이지

<b:if cond='data:blog.searchQuery'>
    <!-- 모든 검색 결과 페이지에서 작동 -->
</b:if>

특정 검색 결과 페이지

<b:if cond='data:blog.searchQuery == "abc"'>
    <!-- abc 검색 결과 페이지에서 작동 -->
</b:if>

에러 페이지(404)

<b:if cond='data:blog.pageType == "error_page"'>
    <!-- 에러 페이지에서 작동 -->
</b:if>

아카이브 페이지

<b:if cond='data:blog.pageType == "archive"'>
    <!-- 에러 페이지에서 작동 -->
</b:if>

인덱스 페이지

<b:if cond='data:blog.pageType == "index"'>
    <!-- 에러 페이지에서 작동 -->
</b:if>

NOT 구문

만약 특정 페이지를 제외한 다른 모든 페이지에 적용하고 싶다면 조건문을 작성할 때 '==' 대신 '!='를 사용합니다.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
    <!-- 홈페이지를 제외한 모든 페이지에서 작동 -->
</b:if>

사용 예시

(예시)홈페이지에서만 class가 'blue'인 div 안의 글자색이 파란색이었으면 좋겠다.

</head> 앞에 다음 코드를 추가합니다.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style type='text/css'>
    .blue {color: blue;}
    </style>
</b:if>

블로거 스킨 만들 때 참고하세요.