blogger - 유동적인 레이아웃 페이지 만들기

일반적으로 왼쪽에 사이드 메뉴가 위치하고 가운데 본문이 들어갑니다. 특정 게시물 목록이나 본문을 열람할 때 사이드 메뉴를 오른쪽으로 위치시키거나 아예 보이지 않게 할 수 있습니다.

이 방법은 약간의 트릭을 필요로 합니다. 게시물이나 페이지를 열람할 때 특정 단어에 취소선을 발견하면 메뉴를 이동시키거나 감추는 것입니다. 예를 들어 full-width 라는 단어가 취소선이면 메뉴를 감춥니다. 게시물을 작성할 때 full-width 단어를 입력하고 이 단어에 취소선을 추가합니다.

$('.post-body strike').each(function() {
  var $this = $(this), type = $this.text();
  if (type.match('left-sidebar')) {
    if (type.match('full-width')) {
     $this.replaceWith('<style>
      .item #main-wrapper{width:100%}
      .item #sidebar-wrapper{display:none}
     </style>');
    }
});

class 속성이 post-body 로 되어있는데, 보통은 본문 컨테이너입니다. 어떤 테마를 사용하느냐에 따라 약간씩 달라지겠지만 보통은 post-body 입니다. strike 태그를 발견하였고, full-width 단어이면 사이드 바 메뉴를 감추라는 뜻입니다. .replaceWith 를 사용했기 때문에 full-width 문자열이 위 스타일시트로 변경되어 눈에는 보이지 않습니다.

아래 예제는 몇 가지 기능을 추가한 코드입니다.

$('.post-body strike').each(function() {
  var $this = $(this), type = $this.text();
  <!--// left-sidebar 이면 메뉴를 왼쪽으로 배치합니다. //-->
  if (type.match('left-sidebar')) {
    $this.replaceWith('<style>.item #main-wrapper{float:right}
    .item #sidebar-wrapper{float:left}</style>');
  }
  <!--// right-sidebar 이면 메뉴를 왼쪽으로 배치합니다. //-->
  if (type.match('right-sidebar')) {
    $this.replaceWith('<style>.item #main-wrapper{float:left}
    .item #sidebar-wrapper{float:right}</style>');
  }
  <!--// full-width 이면 메뉴를 감춥니다. //-->
  if (type.match('full-width')) {
    $this.replaceWith('<style>.item #main-wrapper{width:100%}
    .item #sidebar-wrapper{display:none}</style>');
  }
});

이와 같이 약간의 트릭을 이용하면 특정 페이지에만 나만의 독창적인 페이지를 만들 수 있습니다. 예를 들어 상단에 점보트론(jumbotron)을 넣거나 카탈로그를 구현할 수 있습니다. 아니면 특정 요소를 숨겨서 페이지마다 다른 사이드 메뉴를 보여줄 수도 있습니다. 이건 단지 여러분 상상력의 문제입니다. 이것은 블로거의 무한한 잠재력을 보여주는 것이 되겠지요.