Saturday, September 12, 2009

Jump Break - Read More/Post Summaries

블로거닷컴이 10주년 기념 선물로 그동안 블로거들이 원했던 기능 중의 하나인 Read More 기능을 선보였다. 이름하여 Jump Break.

Jump Break는 블로그 페이지 상태에서는 요약 글을 보여주다가 'Read more' 링크를 클릭하면 아이템 페이지 (개별 글 페이지)에서 글 전체를 보여주는 기능이다. 이 기능은 여러 블로거가 원했던 기능이지만, 블로거닷컴에서 제공하지 않아서, 별도로 템플릿을 수정하거나 이 기능을 제공하는 코드를 삽입하여 사용하던 기능이다. 텍스트큐브닷컴 블로그에서 볼 수 있는 '더 보기'와 '감추기'와 같은 페이지나 개별 글 페이지의 글을 펼쳐보이거나, 펼쳐진 글을 다시 감추는 기능은 아니지만, 긴 글을 요약해서 보여주고 독자가 더 보고 싶으면 펼쳐서 읽을 수 있는 기능으로, 블로그 페이지를 글 목차와 같이 보여주는 효과도 있으리라 생각한다.


이 기능을 사용하는 방법은 매우 간단하다.
  • 글을 작성할 때 Blogger in Draft에서 로그인하여 글을 작성한다.
  • 블로거 닷컴의 새 글 편집기로 글을 작성한다. 설정은 '대시보드 > 설정 > 기본사항 > 게시물 편집기 선택'에서 '편집기가 업데이트됨'을 선택하고 저장한 다음에 글을 작성하면 된다.

새 글 편집기 도구모음에 Jump Break를 삽입할 수 있는 아이콘이 있어서, 감추고 싶은 글의 앞부분에 커서를 두고, Jump Break 아이콘을 클릭하여 쉽게 Jump Break를 할 수 있다. 또는 새 게시물 편집기의 HTML 편집 탭에서 <!-- more -->를 삽입하면 된다.


새 글 편집기도 사용하기는 싫고, Blooger in Draft로 로그인하기는 더더욱 싫다면? 또 위와 같은 방법으로 했더니, 잘 안되더라. 사용하는 템플릿이 오래된 것인데 Jump Break를 사용할 수 없을까?

Creating 'After the jump' summaries에서 이에 대한 방법을 제시하고 있다. 이 블로그의 템플릿도 표준 템플릿이 아니라, 위와 같은 방법으로 해도 Jump Break가 되지 않아서 Creating 'After the jump' summaries에서 제시한 방법으로 템플릿에 간단한 코드를 삽입하여 해결하였다.

'레이아웃 > HTML 편집'에서 '도구 템플릿 확장'을 클릭하고 다음 코드를 찾는다.

<data:post.body/>


찾은 코드 바로 아래에 다음 코드를 복사하여 붙이고 저장한다.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >


새 게시물 편집기를 사용하지 않으므로 Jump Break 삽입 아이콘이 기존 편집기 도구모음에는 없을 것이다. 그저 HTML 편집 탭 상태에서 감추고 싶은 글 앞부분에 커서를 두고 간단히 <!-- more -->를 삽입하면 된다.


'Read more' 링크 문구를 다른 말로 바꾸고 싶으면, '대시보드 > 레이아웃'에서 Blog Posts 페이지 요소의 수정을 클릭하여 '게시물 페이지 링크 텍스트'를 수정하면 된다.


Amanda가 작성한 How to add Blogger's Read More function to customized templates에는 'Read more'를 더 예쁘게 바꾸고 방법을 제시하고 있다.