레이아웃용 위젯 태그

레이아웃 테마를 사용해 블로그의 본문을 작성할 때 위젯을 사용하면 사진과 블로그롤 같은 페이지 요소를 추가할 수 있습니다.

태그 유형

이 섹션에서는 닫는 태그의 내부에 사용할 수 있는 HTML에 대해 설명합니다.

include(b:include)

include를 사용하는 경우

include는 다양한 위치에서 재사용하려 하거나 특정 상황에서만 포함하고자 하는 코드 섹션이 있는 경우 매우 유용합니다.

이 경우 b:includable 내부에 콘텐츠를 작성한 다음 게시하려는 위치에 b:include를 사용합니다.

형식

 

<b:includable id='main' var='thiswidget'>
  [원하는 콘텐츠를 여기에 삽입]
</b:includable>

 

속성

  • id(필수): 문자와 숫자로 이루어진 고유한 식별자입니다. 각 위젯에는 id='main'인 includable 태그가 하나 있어야 합니다.
  • var(선택): 문자와 숫자로 이루어진 식별자로 섹션 내에 있는 데이터를 참조하는 데 사용됩니다.

다른 ID를 사용하여 includable 태그를 추가로 만드는 경우에는 태그가 자동으로 표시되지 않습니다. 하지만 id='new'인 includable 태그를 만들면 이 태그는 기본 includable 내에서 <b:include name='new' />로 참조할 수 있으며 정해진 방식에 따라 표시됩니다.

b:include 태그의 속성은 다음과 같습니다.

  • name(필수): 문자와 숫자로 이루어진 식별자입니다. 동일한 위젯의 기존 b:includable 태그 ID와 일치해야 합니다.
  • data(선택): includable 섹션으로 전달할 수 있는 식이나 데이터 조각입니다. includable 태그의 var 속성 값이 됩니다.
  • cond(선택): 결과가 참일 경우에만 실행하도록 include를 유도하는 식입니다. b:if의 cond 속성과 동일합니다.

예

다음은 b:includable 및 b:include를 사용하는 방법을 보여주는 간단한 예입니다.

이 예에서는 우선 'main' 섹션에 어떻게 'post' 섹션이 포함되어 있는지를 이해해야 합니다. 'p'라는 게시물이 전달되면 include 섹션에서는 이 게시물을 'post'라는 이름의 변수로 참조하고 이 변수를 이용해 제목을 출력합니다.

인덱스가 10보다 작은 경우에만 include가 실행되므로 이 예에서는 최대 10개의 게시물만 표시됩니다(인덱스는 0에서 시작).

 

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>

 

데이터 출력(data:)

예

  • <data:title/>은 위젯의 제목을 인쇄합니다.

  • <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height />는 사진 구성요소의 속성을 출력합니다. 사진은 URL, 높이, 폭 등의 구성요소를 포함할 수 있습니다. '.' 기호를 사용하면 다른 항목의 URL이 아닌 이 사진의 URL이 필요함을 나타냅니다.

예 더보기

지원되는 레이아웃 데이터 태그의 전체 목록을 참조하세요.

 

Loop(b:loop)

b:loop를 사용하는 경우

b:loop 태그를 사용하면 콘텐츠의 섹션을 여러 번 반복할 수 있습니다. 이 태그는 특정 페이지의 게시물 목록에 각 게시물을 출력하거나 각 댓글이나 라벨을 출력할 때 가장 일반적으로 사용됩니다.

형식

loop를 사용하기 위한 일반 형식은 다음과 같습니다.

 

<b:loop var='identifier' values='set-of-data'>
  [반복되는 콘텐츠를 여기에 삽입]
</b:loop>

 

'identifier'(i) 부분에는 원하는 이름을 사용할 수 있으며, 매번 반복될 때마다 목록의 새로운 항목을 나타내는 데 사용됩니다. 값에 지정하는 데이터 집합은 데이터 태그 문서에 항목 목록으로 설명되어 있는 모든 데이터가 될 수 있습니다.

예를 들어, 다음 블로그 게시물 위젯의 경우에는 posts가 목록입니다. 다음과 같은 코드는 각 게시물 양쪽에 헤더 태그를 추가한 후 게시물의 제목을 출력하는 작업을 반복합니다.

 

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

 

'i'가 어떻게 각 게시물의 값을 번갈아 취하면서 각 게시물의 제목을 표시하는지 확인해 보세요.

숫자 범위

loop 태그를 사용하면 변수의 값이 숫자 값인 경우 ‘1 to 3', ‘-3 to -9'처럼 반복을 수행할 숫자 범위를 지정할 수 있습니다. 다음 예는 1, 2, 3을 정렬되지 않은 목록으로 생성합니다.

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>
 

Index 속성

Loop 태그에는 index 속성을 포함할 수 있으며, 이 경우 반복을 수행할 때 0에서 시작하는 인덱스를 사용할 수 있습니다.

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>

 

이 예를 실행하면 다음과 같이 정렬되지 않은 목록이 생성됩니다.

  • Index: 0, Number: 9
  • Index: 1, Number: 8
  • Index: 2, Number: 7
If, elseif 및 else(b:if)

if, elseif 또는 else를 사용하는 경우

경우에 따라 서로 다른 콘텐츠를 표시하려면 b:if, b:elseif, b:else 태그를 사용할 수 있습니다. 예를 들어 홈페이지에는 특정 텍스트만 표시하고 다른 텍스트는 개별 게시물을 볼 때 표시하기를 원하는 경우 이러한 태그를 사용할 수 있습니다.

형식

 

<b:if cond='condition'>
  [조건이 참인 경우 표시할 콘텐츠]
<b:elseif cond='another condition'/>
  [이전 if 또는 elseif 조건이 참이 아니고 이 elseif 조건이 참인 경우 표시할 콘텐츠]
<b:else/>
  [if 또는 elseif 조건 중 어느 것도 충족되지 않을 경우 표시할 콘텐츠]
</b:if>

 

b:elseif 및 b:else 태그는 선택사항입니다. 이 태그가 없으면 결과가 b:if 섹션에 나열되는 콘텐츠로 표시되거나 아무 것도 표시되지 않습니다. 그러나 어떤 경우든 닫는 </b:if> 태그는 항상 사용해야 합니다.

'condition'에는 참이나 거짓으로 평가될 수 있는 모든 항목을 넣을 수 있습니다. 게시물에 사용하는 allowComments처럼 일부 데이터 태그는 그 자체만으로 참/거짓 값을 갖는 경우도 있습니다. 다른 데이터의 경우에는 특정 값과 비교하여 참인지 거짓인지 여부를 알 수 있습니다. 예를 들면 다음과 같습니다.

  • <b:if cond='data:post.showBacklinks'>
    현재 게시물이 백링크를 표시하도록 설정되어 있는 경우 참입니다.
  • <b:if cond='data:blog.pageType == "item"'>
    현재 게시물이 항목 페이지(게시물 페이지)인 경우 참입니다.
  • <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
    현재 항목 페이지(게시물 페이지)이면서 백링크를 표시하도록 설정되어 있는 경우 참입니다.
  • <b:if cond='data:displayname != "Fred"'>
    표시 이름이 Fred가 아닌 경우 참입니다.
  • <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
    표시 이름이 Fred이거나 현재 페이지가 정적인 페이지(게시물 페이지 아님)인 경우 참입니다.
  • <b:if cond='data:post.numComments > 1'>
    현재 게시물에 댓글이 두 개 이상 있는 경우 참입니다.
  • <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
    현재 페이지가 특정 게시물 또는 페이지인 경우 참입니다.
Switch(b:switch)

Switch를 사용하는 경우

여러 b:elseif 태그가 있는 b:if 태그를 사용하는 것처럼 b:switch 태그를 사용할 수 있습니다. Switch 분기의 장점은 변수 이름을 반복할 필요가 없다는 것입니다. 각 케이스에 정의된 것과 기본 케이스를 쉽게 읽을 수 있습니다.

형식

<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [var의 평가 값이 Value 1과 같으면 출력합니다.]
<b:case value="[Value 2]" />
 [var의 평가 값이 Value 2와 같으면 출력합니다.]
[… 기타 다른 값]
<b:default />
 [var의 평가 값이 b:case에 지정된 값과 같지 않으면 출력합니다.]
</b:switch>

예

이 예는 렌더링되는 페이지 유형에 따라 다른 헤더를 출력하는 방법을 보여줍니다.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>페이지</h1>
<b:case value="item" />
  <h1>게시물</h1>
<b:default />
  <h2>블로그 게시물</h2>
</b:switch>

속성 식(expr:)

표현식을 사용하는 경우

expr 속성을 사용해 데이터 사전의 값에 따라 속성 값을 설정할 수 있습니다. 

예

  • <a expr:href='data:blog.homepageUrl'>홈</a>
    블로그 홈페이지 URL이 설정된 홈 링크입니다.
  • <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>게시물 RSS</a>
    블로그 게시물의 RSS 피드 URL이 설정된 링크입니다. ‘+' 연산자는 2개 문자열을 연결합니다.
  • <a expr:class='data:post.allowComments ? "comment" : "no-comment">댓글</a>
    댓글이 허용되는 경우 'comment' 클래스, 허용되지 않는 경우 'no-comment'로 설정된 링크입니다. 3항 연산자(?:)는 특정 부울 값을 취한 후 부울 값이 참이면 ? 다음의 첫 번째 값을 선택하고 부울 값이 거짓이면 : 다음에 있는 두 번째 값을 선택합니다.
평가된 표현식(b:eval)

평가 표현식을 사용하는 경우

b:eval 태그를 사용하면 표준 데이터 태그보다 복잡한 표현식을 평가할 수 있습니다.

형식

<b:eval expr='[표현식]' />

예

  • min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
    새 너비 값에 따라 상대적인 높이 값을 계산하여 출력합니다.
  • <b:eval expr="data:post.labels[0].url" />
    첫 번째 게시물 라벨의 URL을 출력합니다.
  • <b:eval expr='data:post.allowComments ? "댓글" : "댓글 사용 안함" />
    댓글이 허용되면 '댓글'을 출력하고 아니면 '댓글 사용 안함'이 출력됩니다. 이 표현식은 3항 연산자를 사용합니다.
변수 별칭(b:with)

변수 별칭을 사용하는 경우

계산된 식의 값을 b:with 태그를 사용하여 임시로 저장하면 복잡한 인라인 표현식을 사용할 필요가 없습니다.

형식

<b:with var='myComputedValue' value=’[데이터 표현식]’ />

예

데이터 변수를 기반으로 하는 복잡한 스타일 속성의 경우 중첩 HTML을 쉽게 읽을 수 있도록 나머지 HTML의 출력 이전에 계산할 수 있습니다.

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>내 헤더</h1>
   </div>
 </div>
</b:with>

b:with 태그의 하위 노드에만 이 변수가 존재합니다.

예시 보기

블로그에서 페이지 목록 위젯의 HTML에 위에 설명된 모든 태그를 사용한 예를 보려면 클릭하세요.

예

이 위젯에서는 b:widget, b:includable(및 b:include), b:if(및 b:else), b:loop 태그의 사용 예를 확인할 수 있습니다.

 

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

 

true
검색
검색어 지우기
검색 닫기
기본 메뉴
6982061532488434387
true
도움말 센터 검색
true
true
true
true
true
74
false
false