blogger - b:widget 태그

위젯 태그(또는 가젯)은 일종의 플러그인으로서 섹션(b:section) 태그 자식요소로 포함되는 코드입니다. 위젯에는 HTML, 애드센스, 글 목록, 최근 글, 링크 등 다양한 사용자용 코드가 설치됩니다.

<b:section id='nav'>
  <b:widget id='HTML100' type='HTML'> … </b:widget>
</b:section>

형식은 다음과 같습니다.

<b:widget 
  id='ID 이름(필수)'
  type='위젯 타입(필수)'
  cond='조건식(선택)'
  locked='BOOLEAN(선택)'
  title='제목(선택)'
  version='버전 번호(선택)'
  pageType='페이지타입(선택)'
  mobile='BOOLEAN(선택)'
  visible='BOOLEAN(선택)'>
</b:widget>

위젯의 필수 속성은 id, type입니다. Id는 문자와 숫자로 조합되며 위젯은 고유한 ID 값이어야 합니다. 예를 들어 HTML 위젯을 설치하면 HTML100, HTML101 등으로 고유한 ID가 자동으로 할당됩니다. 링크목록 위젯을 설치하면 LinkList100, LinkList101 인 형식으로 위젯 이름 뒤에 자동으로 중복되지 않는 번호가 붙게 됩니다. 중복되지 않는 번호는 1 ~ 999 사이의 값인데, 예를 들어 ‘위젯이름1’ ~ ‘위젯이름999’ 사이의 값으로 할당됩니다.

type 속성은 위젯 종류를 나타냅니다. type='LinkList' 은 링크 목록을 나타내며, 페이지 헤더는 type='Header', HTML/JavaScript 위젯은 type=’HTML’ 로 표시됩니다. 블로거 편집기에서 필요한 위젯을 설치한 다음 XML 코드에서 위젯을 편집하는 것이 좋습니다.

locked 속성은 위젯을 잠글지를 설정합니다. yes(혹은 true) 나 no(혹은 false) 가 올 수 있으며 기본 값은 no 입니다. 잠긴 위젯은 다른 섹션으로 이동하거나 삭제할 수 없습니다. 위젯을 잠그려면 yes 로 설정하세요.

위 그림을 보는 바와 같이 위쪽은 잠긴 위젯이고, 아래는 이동 및 수정이 가능한 위젯이라는 뜻입니다.

title 은 위젯의 제목을 설정합니다. 블로거 편집기 > 레이아웃에서 위젯을 설치하면 가젯 제목을 입력하는 부분이 있는데, 위젯을 설치하고 나면 위젯 "자리 표시자"에 가젯 제목으로 표시됩니다.

pageType 은 'all', 'archive', 'main' 또는 'item' 이 올 수 있으며 기본값은 'all'입니다. 위젯을 지정된 페이지에만 표시하려면 이 값을 설정하세요.

mobile 속성은 모바일 기기에서 위젯을 표시할지를 결정합니다. yes, no, only, default 중 하나가 올 수 있습니다. 레이아웃 버전 1에서만 동작하며 선언하지 않으면 기본 값 no 로 설정됩니다. 모바일 기기에서 보이게 하려면 yes 로 설정하세요.

설정 값이 'default' 인 경우, 헤더, 블로그, 프로필, PageList, 애드센스, 저작자 표시만 모바일에 표시됩니다. 모바일 표시여부는 블로거 편집기의 테마 > 모바일 설정에서 모바일 테마를 선택할 수 있는데, 모바일 테마 표시하기를 선택하였을 때 영향을 받습니다.

visible 은 위젯을 사용자 블로그에 표시할지를 결정합니다. version=’2’ 인 최신 레이아웃 버전에서만 동작합니다. visible 값은 yes(혹은 true), no(혹은 false) 중 하나가 올 수 있으며 기본값은 yes 입니다. cond 조건식을 이용해서 상황에 따라 위젯을 보이거나 숨길 수 있습니다.

위 그림에서 하나는 visible 을 no 로 하였고, 다른 하나는 yes 로 설정한 그림입니다. 아래 코드는 모바일 기기일 때 ‘내 프로필’ 위젯을 보이게 하는 코드입니다.

<b:widget 
  cond='data:blog.isMobileRequest'
  id='HTML101' title='내 프로필' type='HTML' version='2' visible='true'>
  …
</b:widget>

아래 코드에서 <b:widget> 태그는 HTML 로 렌더링 될 때 <div> 태그로 자동 변환되어 보여지며 class, id, version 속성이 <div> 태그에 자동으로 포함됩니다.

<b:widget 
 id='HTML71'
 locked='false'
 title='최근글 위젯'
 type='HTML'
 version='2'
 visible='true'>
  …
</b:widget>
<!--//
결과:
<div class=’widget HTML’ id=’HTML71’ data-version=’2’>
 …
</div>
//-->

Id 속성은 그대로 <div>태그에 추가가 되고, version 속성은 data-version=’2’ 로 변환됩니다. 마지막으로 type 속성은 class 속성으로 변환되어 추가됩니다.

다음은 HTML 위젯을 추가하여 HTML 렌더링된 페이지 결과입니다.

<b:widget
 id='HTML101'
 locked='false'
 title='내 프로필'
 type='HTML'
 version='2'
 visible='true'>
  <b:includable id='main'>
    <h1>안녕 하보니!</h1>
  </b:includable>
</b:widget>
<!--//
결과:
<div class="widget HTML" data-version="2" id="HTML101">
  <h1>안녕 하보니!</h1>
</div>
//-->