블로거 썸네일과 요약글을 자바스크립트 없이 표현하는 방법

보통 블로그라 함은 홈페이지의 게시판과는 달리 여러개의 게시글 본문이 연이어 보여지는 형태가 많다. 이것은 여러 글을 화면이동 없이 한 화면에서 바로 확인 한다는 장점이 있으나 필요한 정보만 원할 경우 다소 검색이 지루해 진다.

더욱이 요즘 블로그로 광고수익을 올리려는 블로거들의 블로그를 방문하면 여기저기 덕지덕지 붙어 있는 광고가 상단이며 사이드바, 하단, 심지어 게시글 중간중간 까지 점령하고 있는더라 상당히 눈이 어지러워진다. 적정한 수준의 페이지광고는 이쁘게 봐 줄 수는 있으나 무분별한 광고배치는 가급적 삼가했으면 하는 바램이 있다.

본론으로 돌아가서 블로거를 방문했을 때 바로 본문이 보여지는 것이 아닌 썸네일과 요약글을 표현하는 방법을 소개한다. 블로거의 템플릿을 꾸미는데 상당히 도움이 되는 소스코드이기 때문에 잘 이해 응용하면 많은 도움이 될 것이다.

참고로 구글 블로거에서 썸네일과 요약글을 표현하는 방법으로 피드를 이용한 자바스크립트가 많이 활용된다. 실제 검색을 해보면 블로거에 자바스크립트가 빠져서는 안될 정도로 무분별히 사용되고 있는 것을 확인 할 것이다. 아래 소스코드는 자바스크립트 없이 블로거 구문만으로 표현하는 방법이다.

아래 코드를 복사 한 후 템플릿 수정에서 <data:post.body/>를 검색하여 아래코드로 바꿔 준다. 간혹 템플릿 마다 여러개가 표현되어 있을 수 있다. 템플릿을 잘 해석하여 필요한 부분을 정확히 수정해야 한다.

---

소스코드

<b:if cond='data:blog.pageType != &quot;item&quot;'>   <!-- 만약 블로거의 페이지 타입이 게시물 형태일 경우 숨기기 -->
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <!-- 만약 블로거의 페이지 타입이 페이지 형태일 경우 숨기기 -->
  <div class='thumbnail'>
   <b:if cond='data:post.firstImageUrl'>   <!-- 만약 첫번째 이미지가 있으면 -->
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>   <!-- 첫번째 이미지를 표현 -->
   <b:else/>   <!-- 첫번째 이미지가 없고 -->
    <b:if cond='data:post.thumbnailUrl'>   <!-- 만약 썸네일 이미지가 있으면 -->  
     <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/> <!-- 썸네일 이미지 표현 -->
    <b:else/>   <!-- 첫번째 이미지도 없고 썸네일도 없으면 -->
     <span>No thumbnail</span>   <!-- No thumbnail이라고 표현 -->
    </b:if>
   </b:if>
  </div>
  <data:post.snippet/>   <!-- 요약글을 표현 (요약글은 140까지 표현) -->
 <b:else/>   <!-- 페이지 형태에서 썸네일과 요약글을 숨기는 경우 -->
  <data:post.body/>   <!-- 페이지 본문 표현 -->
 </b:if>
<b:else/>   <!-- 게시물 형태에서 썸네일과 요약글을 숨기는 경우 --> 
 <data:post.body/>   <!-- 게시물 본문 표현-->
</b:if>

해설

if else 구문이 두가지가 중복되어 굉장히 이해하기 힘들 것이다. 더욱이 게시물과 페이지 타입에서 숨기는 경우라 더욱 그러하다. 나눠서 생각하면 상당히 간단하다. 우선 썸네일과 요약글 구문부터 파헤친다.

  <div class='thumbnail'>
   <b:if cond='data:post.firstImageUrl'>   <!-- 만약 첫번째 이미지가 있으면 -->
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>   <!-- 첫번째 이미지를 표현 -->
   <b:else/>   <!-- 첫번째 이미지가 없고 -->
    <b:if cond='data:post.thumbnailUrl'>   <!-- 만약 썸네일 이미지가 있으면 -->  
     <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/> <!-- 썸네일 이미지 표현 -->
    <b:else/>   <!-- 첫번째 이미지도 없고 썸네일도 없으면 -->
     <span>No thumbnail</span>   <!-- No thumbnail이라고 표현 -->
    </b:if>
   </b:if>
  </div>
  <data:post.snippet/>   <!-- 요약글을 표현 (요약글은 140까지 표현) -->

첫번째 이미지가 있으면 그 이미지를 표현하고 첫번째 이미지가 없고 썸네일이라도 있으면 그 썸네일을 표현한다. 이마자저도 없으면 No thumbnail이라고 표현한다. 그리고 이미지나 썸네일 다음으로 요약글을 표현한다.

다음은 위 소스를 제거한 구문을 본다.

<b:if cond='data:blog.pageType != &quot;item&quot;'>   <!-- 만약 블로거의 페이지 타입이 게시물 형태일 경우 숨기기 -->
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <!-- 만약 블로거의 페이지 타입이 페이지 형태일 경우 숨기기 -->

<!-- 썸네일 요약글 부분 -->

 <b:else/>   <!-- 페이지 형태에서 썸네일과 요약글을 숨기는 경우 -->
  <data:post.body/>   <!-- 페이지 본문 표현 -->
 </b:if>
<b:else/>   <!-- 게시물 형태에서 썸네일과 요약글을 숨기는 경우 --> 
 <data:post.body/>   <!-- 게시물 본문 표현-->
</b:if>

블로거의 페이지 타입이 페이지 형태일 경우 썸네일 요약글 부분을 숨기고 페이지 본문을 표현한다. 페이지 타입이 페이지 형태가 아니고 게시물 형태일 경우 썸네일 요약글 부분을 숨기고 페이지 본문을 표현한다.

따라서 블로그 페이지 타입이 게시물이나 페이지 타입이 아니면 썸네일과 요약글을 표현하고 그 반대이면 숨긴다와 같은 말이다.