구글 블로거 다루기 #이전글과 다음글 링크에 제목 표시하기

구글 블로거 다루기
- 깃허브 링크

구글 블로거에 없는 기능중 하나는, 이전글과 다음글로 가는 링크에 제목표시가 없다는것 입니다. 꼭 있을 필요는 없지만, 있으면 좋은 기능입니다.

제 블로그는 최근/이전 게시물 링크 하단에 제목이 표시되어있습니다.

블로거에서 제공하는 템플릿은 이러한 기능이 없습니다.

템플릿 편집화면으로 이동하여, nextprev를 검색합니다. 약 3~5개정도 결과가 나오는데, <b:includable id='nextprev'> ~ </b:includable> 부분을 찾으면 됩니다.

</b:includable> 바로 위에 코드를 추가합니다.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script>
  //<![CDATA[
      var newerLink = $("a.blog-pager-newer-link");
      var olderLink = $("a.blog-pager-older-link");

      $.get(newerLink.attr("href"), function(newer){
          newerLink.parent().append("<div class='next-title'>"+$(newer).find("h3.post-title").text()+"</div>");
      },"html");

      $.get(olderLink.attr('href'), function(older){
          olderLink.parent().append("<div class='prev-title'>"+$(older).find("h3.post-title").text()+"</div>");
      },"html");
  //]]>
  </script>
</b:if>

가장 먼저 나오는 <b:if cond='data:blog.pageType == &quot;item&quot;'> 는 조건문입니다. '현재 페이지의 타입이 아이템이라면 출력한다'라는 의미입니다. 여기서 아이템 타입이란 지금 보는것과 같은 게시물 화면을 의미합니다.

newerLink와 olderLink는 각각 다음글과 이전글인데, 다음글인 nwerLink를 기준으로 설명하겠습니다.

변수 newerLink 에 다음글 이동하는 링크를 저장하고, 비동기 요청 방식인 $.get() 을 이용하여 데이터를 가져옵니다. 가져오는 데이터는, olderLink.attr('href'), function(older) 로 인해 링크된 페이지 전체가 됩니다.

newerLink.parent().append() 를 이용해 newerLink의 부모(parent)요소에 <div class='next-title'>"+$(newer).find("h3.post-title").text()+"</div> 코드를 추가(append)합니다.

현재 블로그의 제목의 선택자가 h3.post-title 이므로 find("h3.post-title") 를 사용했습니다.

같은 방법으로 제목뿐만 아니라, 글 내용이나 첨부된 이미지도 가져올 수 있습니다.

이런 코드를 한줄 추가합니다.

newerLink.parent().append("<img src='"+$(newer).find(".post-body img").eq(1).attr("src")+"'>");

find(".post-body img").eq(1).attr("src") 는 본문(.post-body) 하위에있는 이미지 태그(img)중 두번째 있는 이미지의 주소(src)를 가져오는 코드입니다.

이때 eq(1)은 첫번째가 아니라 두번째라는것을 주의해야합니다. 첫번째 이미지는 eq(0) 입니다.

이렇게하면 실제로 최근 게시물의 링크에 있는 이미지중 두번째 이미지가 표시됩니다.

어떤 데이터를 가져오는지 알아보기 위해, console.log(newer); 를 추가합니다.

크롬 또는 사용하는 브라우저의 콘솔을 보면, 그 링크의 페이지 코드 전체를 가져오는걸 알 수 있습니다.