티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록)

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

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

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

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

 

 

 

▶ 티스토리 스킨(컨텐츠 치환자)
1. 태그 클라우드
2. 방명록

 

 

 

 

 

 

 

 

 

 

 

 

티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록)

 

 

 

 

▷ 티스토리 블로그 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

 

=

 

 

 

 

 

 

 

 

 

 

 

 

 

스킨 컨텐츠 치환자(태그 클라우드)

 

 

▶ 태그 클라우드 치환자
- 태그 클라우드는 사용한 태그 리스트를 출력합니다.
url : /tag

 

1) 태그 그룹
<s_tag> : 태그 클라우드 그룹치환자

 

 

2) 태그 정보

 

<s_tag_rep> : 개별태그 그룹치환자
 : 태그가 포함된 글을 출력하기 위한 URL
 : 총 5단계가 있는데 자주 사용한 순서로 cloud1-cloud5가 표시됩니다.
 : 태그의 이름

 

 

예

 

<!-- 스킨 -->
<s_tag>
    <div class="taglog">
        <h3>태그</h3>
        <ul>
            <s_tag_rep>
            <li>
                <a href="" class=""></a>
            </li>
            </s_tag_rep>
        </ul>
    </div>
</s_tag>

 

<!-- 변환 예 -->
<div class="taglog">
    <h3>태그</h3>
    <ul>
        <li>
            <a href="/tag/tistory" class="cloud1">tistory</a>
        </li>
        <li>
            <a href="/tag/kakao" class="cloud4">kakao</a>
        </li>
        <li>
            <a href="/tag/blog" class="cloud5">blog</a>
        </li>
    </ul>
</div>

=

 

 

 

 

 

 

 

 

 

 

 

 

 

스킨 컨텐츠 치환자(방명록)

 

 

▶ 방명록
<s_guest> : 방명록 그룹치환자

 

<s_guest>
  <div class="guestbook">
    <h3>방명록</h3>
    <div class="guestWrite">입력 폼</div>
    <div class="guestList">리스트</div>
  </div>
</s_guest>

 

 

 

1) 입력 폼

 

<s_guest_input_form> : 방명록을 달기 위한 입력폼을 출력합니다
 : 글 내용 입력박스 이름
 : 입력 완료 온클릭 이벤트
<s_guest_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
<s_guest_form> : 로그인을 하지 않았을경우 보여지는 영역
 : 이름입력 박스 이름
 : 이름
 : 비밀번호 입력 박스 이름
 : 비밀번호
 : 홈페이지 입력 박스 이름
 : 홈페이지

 

<s_guest_input_form>
  <div class="guestWrite">
    <s_guest_member>
      <s_guest_form>
        <div>
          <input type="text" name="" value="" />
          <label for="name"> : 이름 </label>
        </div>
        <div>
          <input type="password" maxlength="8" name="" value="" />
          <label for="password"> : 패스워드 </label>
        </div>
        <div>
          <input type="text" name="" value="" />
          <label for="homepage"> : 홈페이지 </label>
        </div>
      </s_guest_form>
    </s_guest_member>
    <div>
      <textarea name="" cols="50" rows="6"></textarea>
    </div>
    <div>
      <input type="submit" value="안부 남기기" onclick=""/>
    </div>
  </div>
</s_guest_input_form>

 

 

2) 리스트

 

<s_guest_container> : 방명록 리스트 그룹치환자
<s_guest_rep> : 방명록 정보 그룹치환자
<s_guest_reply_container> : '방명록'의 댓글 리스트를 출력할 영역입니다.
<s_guest_reply_rep> : '방명록' 댓글 리스트의 반복열입니다

 

 

 

3) 내용 (rep 내부)

 

 : 방명록의 고유 ID
 : 방명록의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
 : 글쓴사람 이름
 : 글쓴 날짜
 : 글 내용
 : 작성자 프로필
 : 답글 삭제 온클릭 이벤트
 : 답글 수정 온클릭 이벤트

 

<s_guest_container>
  <div class="guestList">
    <ol>
      <s_guest_rep>
        <li id=''>
          <div class="">
            <span class="name"></span>
            <span class="date"> </span>
            <span class="control">
              <a href="#" onclick="">MODIFY/DELETE</a>
              <a href="#" onclick="">REPLY</a>
            </span>
            <p></p>
          </div>
          <s_guest_reply_container>
            <ul>
              <s_guest_reply_rep>
              <li id=''>
                <div class="">
                  <span class="name"></span>
                  <span class="date"> </span>
                  <span class="control">
                    <a href="#" onclick="">MODIFY/DELETE </a>
                  </span>
                  <p></p>
                </div>
              </li>
              </s_guest_reply_rep>
            </ul>
          </s_guest_reply_container>
        </li>
      </s_guest_rep>
    </ol>
  </div>
</s_guest_container>

 

 

 

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

 

 

 

 

 

 

 

지금까지 티스토리 스킨 컨텐츠 치환자(태그 클라우드, 방명록)에 대해 알아보았다.

 

 

 

 

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

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