첫번째_8 사이드바

8. 사이드바

카테고리, 메뉴, 최근글, 트랙백, 카운터 등 블로그의 여러 정보를 모아놓은 영역.

• 블로그의 각 정보를 나타내는 사이드바 개별 모듈과 (e.g., 최근글 element, 트랙백 element 등)
• 여러개의 사이드바 모듈을 모아놓은 사이드바 '그룹'이 있다.
• 사이드바 그룹을 여러개 만들어 배치할 수도 있으며, 한 종류의 사이드바 모듈이 여러 그룹에 중복으로 존재할 수도 있다.

 

사이드바 치환자

---

• <s_sidebar>: 사이드바 그룹치환자
• <s_sidebar_element>: 사이드바 개별 엘리먼트 그룹치환자
  • 치환자 안의 첫번째 줄의 주석 <!-- TITLE -->은 사이드바 element의 타이틀로 사용된다.

사이드바 그룹은 [블로그 관리 - 꾸미기 - 사이드바] 항목에서 편집할 수 있으며 HTML에 사이드바와 모듈 치환자를 추가하면 편집이 활성화된다.

• 모듈을 HTML에 추가하고 난 뒤 티스토리에 보이지 않으면 블로그 관리에서 해당 모듈이 원하는 사이드바에 등록되었는지 확인해보자.

<!-- sidebar -->
<div class="sidebar">
  <s_sidebar>
    <s_sidebar_element>
    </s_sidebar_element>
  </s_sidebar>
</div>

사용 예시

<div id="sidebar">
  <s_sidebar>
    <!-- 오른쪽 사이드바 -->
    <s_sidebar_element>
      <!-- 카테고리 -->
      ...
    </s_sidebar_element>
    <s_sidebar_element>
      <!--최근에 올라온 글 -->
      ...
    </s_sidebar_element>
    <s_sidebar_element>
      <!-- 카운터 -->
      ...
    </s_sidebar_element>
  </s_sidebar>

  <s_sidebar>
    <!-- 배너 삽입 사이드바 -->
    <s_sidebar_element>
      <!-- 배너 모듈 - 태터툴즈 -->
      ...
    </s_sidebar_element>
    <s_sidebar_element>
      <!-- 배너모듈 - 올린 -->
      ...
    </s_sidebar_element>
    <s_sidebar_element>
      <!-- 배너모듈 - RSS Feed -->
      ...
    </s_sidebar_element>
  </s_sidebar>
</div>

위의 태그로 작성하면 다음과 같이 3개의 사이드바 element를 갖는 사이드바 그룹이 2개 생성된다.

사이드바 그룹	사이드바 element
사이드바 1	카테고리
	최근에 올라온 글
	카운터
사이드바 2	배너 모듈 - 태터툴즈
	배너 모듈 - 올린
	배너 모듈 - RSS Feed

각 모듈은 사이드바 관리 페이지에서 각 사이드바에 자유롭게 추가/제거 할 수 있다.

HTML

---

<div class="sidebar">
  <s_sidebar>
    <s_sidebar_element>
      <!-- 블로그 정보 -->
      ...
    </s_sidebar_element>

    <s_sidebar_element>
      <!-- 카테고리 -->
      ...
    </s_sidebar_element>

    <s_sidebar_element>
      <!-- 메뉴 -->
      ...
    </s_sidebar_element>
  </s_sidebar>
</div>

 

참고

---

• 사이드바 by nOo9ya Tistory
  • Section 6 - 티스토리 반응형 스킨 만들기 - sidebar 넌 누구냐?
  • Section 7 - 티스토리 반응형 스킨 만들기 - sidebar element 넌 또 뭐야?
• 사이드바 by Kurien's Blog
  • 6. 티스토리 스킨 만들기 사이드바 영역
  • 9. 티스토리 스킨 만들기 관리자 메뉴와 검색