Thursday, April 9, 2009

블로그 페이지 상태보기 Breadcrumbs Trail and Status Message

다음사전에서 'Breadcrumbs'를 찾아보니, very small pieces of bread that can be used in cooking라고 하고, 'Breadcrumbs Trail'이라 하면 '길에 흘린 빵부스러기 찾으면서 길 찾아가는 것'을 말하는지는 모르겠지만, 위키피디아에서 찾아보니, 일종의 사용자 인터페이스 User Interface로써 브라우저에 있는 앞으로 또는 뒤로 페이지를 이동하는 것을 사용자에게 알려주는 것을 의미하는 것 같다.

Blogger Buster의 Add a "breadcrumb" trail and status messages to your blog을 읽어보면, 'Breadcrumbs Trail'과 'Status Message'는 블로그 페이지를 읽은 상태, 레이블 또는 검색어로 찾은 상태, 또는 보관된 글로 찾은 상태를 블로그 제목 줄 아래에 출력하여, 독자가 블로그 글 중에 어디에 있는지를 알 수 있는 [흘린 빵부스러기로 길을 찾는] 상태와 그 상태를 알려주는 메시지 라고 할 수 있다. 이러한 Breadcrumbs Trail을 간단하게 적용한 블로그가 트위터 블로그인데, 트위터 블로그는 어느 페이지에 있던지 블로그 제목줄 아래에 '<< Back to the main Twitter Blog page'라는 메시지를 알려준다.

Blogger Buster의 을 보고 아래와 같이 수정하여, 각 페이지를 볼 때는 'Home'을, 레이블이나 검색어로 페이지를 찾은 상태에서는 'Showing posts for query 검색어/레이블. Show all posts'라고, 보관된 글을 찾으면 'Home » Archives for 보관년월'을 표시하게 하였다.


먼저, '대시보드 -> 레이아웃 -> HTML 편집 -> 백업 / 복원 템플릿'에서 '전체 템플릿 다운로드'를 클릭하여 안전하게 템플릿을 보관하여, 혹시라도 템플릿을 잘못 수정했을 경우에 '하드 드라이브의 파일에서 템플릿 업로드'를 하여 템플릿을 복원해야 한다.

'템플릿 수정'에서 '도구 템플릿 확장'을 클릭한 다음에, 검색을 이용하여 '<b:includable id='main' var='top'>'를 찾는다. 그 다음 줄에 다음 코드를 복사하여 템플릿에 붙여넣기를 한다.

<!-- Start places -->
<div id='places'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='breadcrumbs'>
<!--- Welcome to <data:blog.title/> -->
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<!-- <b:loop values='data:posts' var='post'> -->
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
<!--- » <span class='post-title entry-title'><data:post.title/></span> -->
</b:loop>
</b:if>
<!-- </b:loop> -->


</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div>
<!-- end places -->


원래 코드와 비교하면 내게는 불필요한 다음 코드를 코멘트 처리하여 작동하지 않도록 하였으며, 메시지 스타일을 조정하는 코드도 있지만, 링크만 나오므로 무시하였다.
  • Welcome to <data:blog.title/>
  • <b:loop values='data:posts' var='post'>
  • » <span class='post-title entry-title'><data:post.title/<>/span>
  • </b:loop>



쓰고보니, 페이지 아래에도 'Home'이 표시되며, 블로그 제목을 클릭해도 'Home'으로 이동할 수 있다. 그래도 직관적으로 상태를 알려주는 것도 도움이 되지 않을까..... ㅡ.ㅡa;;;;