데모보기
지난번에 관리자만 볼 수 있는 가젯 만들기 라는 글에서도 말씀을 드렸는데요. 템플릿을 HTML편집 모드에서 보시면 위젯은 아래와 같은 구조로 되어 있습니다.
<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
내용
</b:includable>
</b:widget>
그리고, 어떤 위젯을 조건에 따라서 작동시키고자 할 때 조건 태그가 들어가는 자리는 '<b:includable id='main'>'과 '</b:includable>' 사이입니다.
<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>또는,
<b:includable id='main'>
<b:if cond='조건'>
내용
</b:if>
</b:includable>
</b:widget>
<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<b:if cond='조건'>
조건이 참일 경우 표시할 내용
<b:else/>
조건이 참이 아닌 경우 표시할 내용
</b:if>
</b:includable>
</b:widget>
'조건'에는 참이나 거짓으로 평가될 수 있는 모든 항목을 넣을 수 있으며, 조건 태그를 사용하여 컨텐츠를 표시할 수 있는 위치도 있고 그렇지 않은 위치도 있습니다.
! 참고. 레이아웃용 Widget 태그 (구글 도움말)
구글 도움말의 설명과 예가 충분하지 않기 때문에 어떤 조건들이 가능한지 전부 알 수는 없지만, 위젯 설정과 관련하여 해외 블로거들 사이에 많이 공유되고 있는 조건 태그는 주로 9가지였습니다.
! 참고. 구글 블로그(blogger)의 조건 태그
그리고 이 9가지를 테스트용 블로그에서 직접 테스트를 해보았을 때 작동하는 조건 태그는 아래의 7가지였습니다.(나머지 2개는 제가 적용을 잘못해서 작동하지 않은 것일 수도 있습니다.)
1. Home Page
<b:if cond='data:blog.url == data:blog.homepageUrl'>
홈 페이지에서만 나타난다
2. Index Pages
<b:if cond='data:blog.pageType == "index"'>
홈 페이지와 레이블 검색 페이지, 그리고 블로그 보관함의 년 단위 페이지에서 나타난다.
3. Post Page, 또는 Item Page (각각의 개별 포스트)
<b:if cond='data:blog.pageType == "item"'>
포스트(아이템) 페이지, 즉 개별 포스트의 본문을 읽을 때만 나타난다.
4. Label-Search Pages
<b:if cond='data:blog.searchLabel'>
라벨 검색 페이지에서만 나타난다.
5. Static Page(s)
<b:if cond='data:blog.pageType == "static_page"'>
페이지 탭의 페이지에서만 나타난다. (블로거 대시보드 페이지 메뉴를 통해서 생성한 '새 페이지'를 static page라고 합니다.)
6. Archive Pages
<b:if cond='data:blog.pageType == "archive"'>
블로그 보관함의 월단위 페이지를 조회할 때 나타난다.
7. Specific Page
<b:if cond='data:blog.url == "URL주소"'>
특정 URL에서만 나타난다. .com 과 .kr 과 상관없이 똑똑하게 나타난다.
참고로, 위의 조건 태그들을 각각 역의 조건으로 바꿀 수도 있습니다. 예를 들어,
<b:if cond='data:blog.url == data:blog.homepageUrl'>
이 조건 태그는 홈페이지에서만 표시한다는 조건태그이지만, 코드 중간의 "=="를 "!="로 바꿔주면
<b:if cond='data:blog.url != data:blog.homepageUrl'>
이 조건 태그는 '홈페이지가 아닐 경우에만 표시한다'가 됩니다. (해당 조건이 거짓일 경우 표시한다.)
자, 이제 직접 적용을 해보겠습니다.
 |
| 그림1 |
<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
이를 HTML편집 모드에서 확인해보았더니 위젯의 코드는 위와 같은 모습이었습니다. 말씀드렸던 바와 같이, 위젯 코드의 시작 지점에는 '<b:includable id='main'>'이 보이고 종료 지점에는 '</b:includable>'라는 코드가 보입니다.
이 위젯을 가령 홈페이지에서만 표시하고자 한다면, 위에서 열거한 조건들 중 첫번째 조건 태그를 삽입하면 되겠죠.
<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
즉, 이런 모습이 됩니다.
 |
| 그림2 |
+
여기까지가 해외 블로거들 사이에서 조건 태그와 관련하여 주로 공유되는 내용입니다. 사실상 거의 그대로 번역하여 설명을 드린 것인데요. 위의 내용도 물론 맞습니다. 그런데, 위의 내용을 그대로 적용했을 때 한가지 문제점이 있었습니다. 바로, 스타일 설정입니다. 위젯에 공통적으로 적용되어 있는 스타일 설정 때문에 위젯이 사라져도 간격이나 악센트(경계선) 등은 사라지지 않았습니다.
이는 위의 예에서처럼 하얀 바탕색에 경계선이 없는 경우에는 잘 나타나지 않는데요. 다른 템플릿을 적용해서 보여드리겠습니다.
 |
| 그림3. 동일한 테스트용 블로그를 이번에는 색상과 경계가 뚜렷한 '세련' 템플릿으로 적용시켜 보았다. |
참고로, 어떤 요소를 표시되지 않도록 설정해주는 css의 태그는
display: none;
입니다. 즉, 자신이 원하지 않는 조건에서는 이 스타일 설정이 적용되도록 만들어주어야 하는데, 다음과 같이 입력함으로써 이를 적용시킬 수 있습니다.
<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#HTML1 {
display:none;
}
</style>
</b:if>
</b:includable>
</b:widget>
이해를 돕기 위해 그림을 추가합니다.
 |
| 그림4 |
 |
| 그림5 |
<그림4>와 같은 방법으로 코드를 적용해주었더니, 위젯이 깔끔하게 사라지는 것을 볼 수 있었습니다.
조건 태그를 사용하거나 스타일을 설정하는데 어떤 정해진 방법이 있는 것은 아닙니다. 데모 블로그의 경우에는 else 태그 대신 거짓(!=) 조건을 사용했습니다. 하나의 예로써 참고하실 수 있도록 코드와 설명을 아래에 첨부하겠습니다.
<b:widget id='Text2' locked='false' title='본문을 읽을 때만 표시되는 위젯' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#Text2 {
display:none;
}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#Text2 {
margin-top:0px;
}
</style>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
 |
| 그림6 |
! 테스트용 블로그에서 충분한 테스트를 통해 내용을 이해한 후 적용하시기 바랍니다. 적용 전 템플릿을 백업해두는 것은 기본입니다~!
정말 힘들게 작성했는데 +1 안눌러주면 완전 섭함요.