티스토리 스킨 - 사이드바 치환자(구조, 최근공지, 최근글, 인기글, 댓글)

티스토리 블로그를 시작하면서 처음에는 티스토리에서 제공되는 무료 스킨을 사용했다. 그러다 FastBoot 1.6.2 버전 스킨을 접하면서 FastBoot 스킨으로 변경하였고, 지금까지 사용중이다.

티스토리 시스템은 조금씩 변화가 있는데, FastBoot 스킨의 발전적인 변화는 없다. 그저 블로거들이 직접 오류를 수정하고, 포스팅한 글에 의존하면서 하루하루 조금씩 스킨을 수정하고 있는 실정이다.

티스토리 블로그가 어떤구조로 되어있는지 어떤 파일들이 있는지 모른채 시작했었다. 오류를 하나씩 수정하면서 어떤파일이 있는지 알게 되었고, html, css, js에 사용된 코드를 공부해야겠다는 생각이 들었다.

그래서 티스토리 블로그의 기본인 파일 구조부터 시작해서 티스토리 치환자에 대해 하나씩 알아보고 정리해보았다.

 

 

 

▶ 티스토리 스킨(사이드바 치환자)
1. 사이드바 구조
2. 최근 공지사항
3. 최근 글
4. 인기글
5. 최근 댓글

 

 

 

 

 

 

 

 

 

 

 

 

티스토리 스킨 - 사이드바 치환자(구조, 최근공지, 최근글, 인기글, 댓글)

 

 

 

 

▷ 티스토리 블로그 robots.txt 확인 및 분석 : https://barista7.tistory.com/1150
▷ 티스토리 스킨 가이드 : https://tistory.github.io/document-tistory-skin/
▷ 티스토리 스킨 - 파일 구조, 스킨 정보 파일, 치환자 구조 : https://barista7.tistory.com/1159
▷ 티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션) : https://barista7.tistory.com/1162
▷ 티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) : https://barista7.tistory.com/1179
▷ 티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지) : https://barista7.tistory.com/1192
▷ 티스토리 스킨 - 글 치환자(구조, 최근공지, 최근글, 인기글, 댓글) : https://barista7.tistory.com/1203
▷ 티스토리 스킨 - 글 치환자(카테고리, 랜덤태그, 방문자수, 검색) : https://barista7.tistory.com/1237

 

=

 

 

 

 

 

 

 

 

 

 

 

 

 

사이드바 치환자(사이드바 구조)

 

 

▶ 사이드바 구조

 

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

 

<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>

 

 

 

 

 

 

 

 

사이드바 치환자(최근 공지사항)

 

 

▶ 최근 공지사항

 

<s_rct_notice>: 공지사항 리스트를 출력할 영역입니다
<s_rct_notice_rep>: 공지사항 리스트를 반복 출력합니다
: 공지사항의 고유 주소
: 공지사항의 글 제목

 

<s_sidebar_element>
  <!-- 공지사항 -->
  <s_rct_notice>
    <div class="notice">
      <ul>
        <s_rct_notice_rep>
          <li>
            <a href=""></a>
          </li>
        </s_rct_notice_rep>
      </ul>
    </div>
  </s_rct_notice>
</s_sidebar_element>

 

 

 

 

 

 

사이드바 치환자(최근 글)

 

 

▶ 최근 글

 

<s_rctps_rep>: 최근에 올라온 글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)

<s_rctps_rep_thumbnail>: 대표 이미지가 있는 경우 치환
: 대표 이미지
: 카테고리 이름
: 카테고리 리스트 url

 

<s_sidebar_element>
  <!-- 최근에 올라온 글 -->
  <div class="recentPost">
    <h3>최근에 올라온 글 </h3>
    <ul>
      <s_rctps_rep>
        <li>
          <a href=""></a>
          <span class="cnt"></span>
          <s_rctps_rep_thumbnail>
            <img src=""/>
          </s_rctps_rep_thumbnail>
          <a href=""></a>
        </li>
      </s_rctps_rep>
    </ul>
  </div>
</s_sidebar_element>

 

=

 

 

 

 

 

 

 

 

 

 

 

 

 

사이드바 치환자(인기글)

 

 

▶ 인기글

 

<s_rctps_popular_rep>: 인기글을 반복 출력합니다
: 글 주소
: 글 제목
: 글 댓글 갯수
: 작성자 이름 (*팀블로그용 치환자)
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)

<s_rctps_rep_thumbnail>: 대표 이미지가 있는 경우 치환
: 대표 이미지
: 카테고리 이름
: 카테고리 리스트 url

 

<s_sidebar_element>
  <!-- 이 블로그 인기글 -->
  <div class="popularPost">
    <h3>이 블로그 인기글 </h3>
    <ul>
      <s_rctps_popular_rep>
        <li>
          <a href=""></a>
          <span class="cnt"></span>
          <s_rctps_rep_thumbnail>
            <img src=""/>
          </s_rctps_rep_thumbnail>
          <a href=""></a>
        </li>
      </s_rctps_popular_rep>
    </ul>
  </div>
</s_sidebar_element>

 

 

 

 

 

 

 

사이드바 치환자(최근 댓글)

 

 

▶ 최근 댓글

 

<s_rctrp_rep>: 댓글을 반복 출력합니다
: 댓글로 이동할 주소
: 댓글의 본문 일부
: 댓글을 쓴 사람 이름
: 댓글을 쓴 시간

 

<s_sidebar_element>
  <!-- 최근에 달린 댓글 -->
  <div class="recentComment">
    <h3>최근에 달린 댓글</h3>
    <ul id="recentComments">
      <s_rctrp_rep>
        <li>
          <a href="">.</a>
          <span class="info_wrap">
            <span class="name"></span>
            <span class="date"></span>
          </span>
        </li>
      </s_rctrp_rep>
    </ul>
  </div>
</s_sidebar_element>

 

 

 

[ 사진 출처 ] 티스토리 가이드 캡쳐

 

 

 

 

 

 

지금까지 티스토리 스킨 사이드바 치환자(구조, 최근공지, 최근글, 인기글, 댓글)에 대해 알아보았다.

 

 

 

 

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요!