5/20/2018

구글 블로그 다루기 #글 목록에서 제목만 표시하기

구글 블로그 다루기

구글 블로그에서 기본적으로 지원하지 않는 기능 중 하나인, 글 목록에서 제목만 표시하는 방법입니다.

본문을 한두줄만 쓰는 경우엔 문제 없겠지만, 일반적으로 그런경우는 보기 힘들지요.

제 테스트 블로그인데, 딱히 내용을 채워넣지 않았음에도 깁니다.
어떠한 경로로 블로그에 접속한 뒤, 블로그의 목록으로 다른 글을 찾는 경우가 흔한건 아니지만, 스크롤이 길어져서 불편해지는 일은 없는게 좋겠지요.

또한, 블로거에서는 특정 조건을 만족하는 경우 게시물이 출력되는 갯수를 제한하는 기능이 있습니다.

이미지 태그 <img> 의 갯수가 일정량 이상인 경우와, 게시물의 이미지와 텍스트량이 일정 용량 이상인 경우 제한됩니다. 용량으로 제한되는 경우는 거의 없다고 보시면 됩니다.

이런 조건이 있는 이유는 블로거의 접속 속도와 트래픽 때문이라고 포럼에서 본적이 있는데, 사실 여부는 확인하지 못했습니다.

게시물을 작성할 때, '점프 브레이크'라는 기능을 이용하면 간단히 해결할 수 있습니다.

점프 브레이크를 삽입하면 선이 하나 생기고, 선의 위나 아래에 글이나 그림추가등 평소처럼 자유롭게 게시물을 작성할 수 있습니다. 이때 선 위에있는 부분은 미리보기 처럼 표시되는 부분이고, 선 아랭있는 부분은 '내용 보기' 링크를 클릭해야만 보이는 부분입니다.

즉, 선 위에는 간단한 서론정도만 작성하고 선 아래에는 본문을 작성하면 됩니다.

실제로 보이는 화면은 위와 같습니다.

'자세한 내용 보기 ≫' 링크를 클릭하면 모든 내용을 볼 수 있습니다.

점프 브레이크가 항상 필요하다면, 관리자 → 설정 → 글, 댓글 및 공유 → 글 템플릿에 <!-- more --> 를 추가하면 됩니다.

이렇게 글 템플릿을 추가해두면, 게시물을 작성할 때마다 미리 입력되어있는걸 확인할 수 있습니다. 이렇게 점프 브레이크를 사용하는게 기본적이며 필수적인 방법입니다.

단순히 게시물 내용만 숨기는 방법도 있지만, 위에서 언급했던 특정 조건에서 게시물의 출력 갯수를 제한하는 기능 때문입니다.

이번엔 점프 브레이크+조건문을 이용하여 게시물 본문을 숨겨보겠습니다.

먼저 본문의 클래스를 확인합니다.

본문의 클래스는 post-bodyentry-content 2가지인데, 기본 클래스는 가장 처음 선언된 post-body입니다.

관리자 → 테마 → HTML편집으로 이동한 뒤, post-body 를 검색합니다.

이때 <b> 태그의 변수(var)가 post인것을 확인해야합니다. 구글 블로거는 일반 모드와 모바일 모드가 있으며 서로 다른 코드로 작동하기 때문입니다.

post-body 를 조건문으로 한번 감싸줍니다.

<b:if cond='data:blog.pageType == "item"'>
~
</b:if>

이 조건문의 의미는 [ 현재 페이지 타입(data:blog.pageType)이 게시물 조회(item)일 경우 ]입니다. 페이지 타입은 목록, 게시물 조회, 페이지 조회로 나뉩니다.

여기서 목록 타입은 블로그 주소 또는 라벨(태그)이나 보관함(아카이브)를 이용하여 다수의 게시물을 볼 수 있는 타입.
게시물 조회 타입은 게시물 1개만 조회하는 타입.
페이지 조회 타입은 페이지 1개만 조회하는 타입.

이렇게 구분할 수 있습니다.

목록 상태에서의 페이지 타입은 목록이므로, 위 조건의 값이 거짓(false)가 되어 조건문 내부는 출력되지 않습니다. 게시물의 본문은 보이지 않고 게시물의 제목과 정보(작성자, 작성일, 댓글, 라벨 등)만 보이기 때문에 게시물 목록의 역할을 제대로하고 있습니다.

취향에 따라 게시물 정보 부분까지 조건문을 이용하여 숨길 수 있습니다.

게시물 제목을 클릭하면 게시물 내용이 모두 표시됩니다.

게시물 수정
  1. 익명5/16/2019

    썸네일에 바로 링크거는 방법이 있을까요?

    썸네일만 표시하고 싶은데 어찌하면 되는지오

    답글삭제
    답글
    1. 안녕하세요?

      썸네일에 링크거는 방법은, 썸네일 태그를 링크태그로 감싸주시면 됩니다.
      <a href='data:post.url'> [썸네일 코드] </a>

      글 목록에서 썸네일만 표시하거나, 썸네일+제목 또느 썸네일+제목+내용으로 표시하는 방법에 대해선 추가적으로 게시물을 작성하겠습니다.

      삭제
    2. 익명5/16/2019

      고맙습니다.
      초면인데 한번해볼께요

      삭제
    3. #썸네일이 있는 글 목록을 작성했습니다. 템플릿이 다르더라도 적용 방법은 동일합니다.

      삭제
  2. 도움이 많이 되었어요. 감사해요.

    답글삭제
  3. 유용한 정보 감사합니다.

    답글삭제
  4. 유용한 정보 감사합니다.

    답글삭제