티스토리 스킨 - 파일 구조, 스킨 정보 파일(index.xml), 치환자 구조

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

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

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

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

▶ 티스토리 스킨
1. 파일 구조
2. 스킨 정보 파일(index.xml)
3. 치환자 구조

티스토리 스킨 - 파일 구조, 스킨 정보 파일(index.xml), 치환자 구조

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

티스토리 스킨 파일 구조

▶ 파일구조

SKIN ─┬─ index.xml
├─ skin.html
├─ style.css
├─ preview.gif
├─ preview256.jpg
├─ preview560.jpg
├─ preview1600.jpg
└─ images ─┬─ script.js
├─ background.jpg
├─ background.jpg
└─ background.jpg

1) index.xml
- 스킨에 필요한 정보를 담고 있는 xml 파일로 이 파일이 변경되면 스킨의 모든 설정이 초기화된다.

2) skin.html
- 스킨의 메인 템플릿 파일로 치환자를 사용해 각 url에 해당하는 HTML 결과물로 치환된다.

3) style.css
- css 분리를 위한 파일이며 skin.html과 마찬가지로 스킨에디터에서 편집할 수 있다.

4) preview
- 티스토리 각 영역에서 미리보기를 표시하기 위한 파일이다.
- preview.gif : 미리보기 기본 파일로 아래 파일이 없는 경우에 사용 (112x84)
- preview256.jpg : 사용 중인 스킨 미리보기 (256x192)
- preview560.jpg : 스킨 목록 미리보기 (560x420)
- preview1600.jpg : 스킨 상세보기 미리보기 (1600x1200)

5) images
- 필수요소가 아닌 파일은 모두 images 아래에 위치하게 됩니다. image, script, css 등을 업로드하여 스킨에서 사용한다.

티스토리 스킨 스킨 정보 파일(index.xml)

- 스킨에 필요한 정보를 담고 있는 xml 파일로 이 파일이 변경되면 스킨의 모든 설정이 초기화된다.

<?xml version="1.0" encoding="utf-8"?>
<skin>
  <information>
    <name>기본 스킨</name>
    <version>1.1</version>
    <description>
      <![CDATA[웹표준을 준수한 XHTML 기반의 Tistory 기본 스킨입니다.]]>
    </description>
    <license>
      <![CDATA[자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.]]>
    </license>
  </information>
  <author>
    <name>tistory</name>
    <homepage>http://notice.tistory.com</homepage>
    <email>tistoryblog@daum.net</email>
  </author>
  <default>
    <recentEntries>5</recentEntries>
    <recentComments>5</recentComments>
    <recentTrackbacks>5</recentTrackbacks>
    <itemsOnGuestbook>10</itemsOnGuestbook>
    <tagsInCloud>30</tagsInCloud>
    <sortInCloud>3</sortInCloud>
    <expandComment>0</expandComment>
    <expandTrackback>0</expandTrackback>
    <lengthOfRecentNotice>25</lengthOfRecentNotice>
    <lengthOfRecentEntry>27</lengthOfRecentEntry>
    <lengthOfRecentComment>30</lengthOfRecentComment>
    <lengthOfRecentTrackback>30</lengthOfRecentTrackback>
    <lengthOfLink>30</lengthOfLink>
    <showListOnCategory>1</showListOnCategory>
    <showListOnArchive>1</showListOnArchive>
    <commentMessage>
      <none>댓글이 없습니다.</none>
      <single>댓글 &lt;span class="cnt"&gt;하나&lt;/span&gt; 달렸습니다.</single>
    </commentMessage>
    <trackbackMessage>
      <none>받은 트랙백이 없고</none>
      <single>트랙백이 &lt;span class="cnt"&gt;하나&lt;/span&gt;이고</single>
    </trackbackMessage>
    <tree>
      <color>000000</color>
      <bgColor>ffffff</bgColor>
      <activeColor>000000</activeColor>
      <activeBgColor>eeeeee</activeBgColor>
      <labelLength>27</labelLength>
      <showValue>1</showValue>
    </tree>
    <contentWidth>500</contentWidth>
  </default>
</skin>

1) 기본 정보
스킨 목록, 상세보기에서 표시되는 정보다.

- name: 표시되는 이름
- version: 스킨 버전
- description: 스킨 상세 설명
- license: 저작권

2) 제작자
스킨 정보에서 표시할 제작자 정보다.

- name: 표시되는 이름
- homepage: 제작자 웹사이트 주소
- email: 연락할 이메일 주소

3) 설정 기본값
스킨의 설정 기본값이다. 이를 통해 스킨 적용하면 제작자가 추천하는 설정을 제공할 수 있다.

- recentEntries: 사이드바의 최근글 표시 갯수
- recentComments: 사이드바의 최근 댓글 표시 갯수
- recentTrackbacks: 사이드바의 최근 트랙백 표시 갯수
- itemsOnGuestbook: 한페이지에 표시될 방명록 갯수 *
- tagsInCloud: 사이드바에 표시될 태그 갯수
- sortInCloud: 태그 클라우드 표현 방식 (1:인기도순, 2:이름순, 3:랜덤)
- expandComment: 댓글영역 표현 방식 (0:감추기, 1:펼치기)
- expandTrackback: 트랙백영역 표현 방식 (0:감추기, 1:펼치기)
- lengthOfRecentNotice: 최근 공지 표현될 글자수
- lengthOfRecentEntry: 최근 글 표현될 글자수
- lengthOfRecentComment: 최근 댓글에 표현될 글자수
- lengthOfRecentTrackback: 최근 트랙백에 표현될 글자수
- lengthOfLink: 링크에 표현될 글자수
- entriesOnPage: 홈 화면 글 수
- entriesOnList: 글 목록 글 수
- showListOnCategory: 커버 미사용 홈에서 글 목록 표현(0:내용만, 1:목록만, 2: 내용+목록)
- showListLock : 홈 설정과 기본 설정에서 '목록 구성 요소' 항목의 노출 여부 결정 (0: 노출, 1: 노출 안 함)
- tree: 카테고리
- color: 카테고리 글자색
- bgColor: 카테고리 배경색
- activeColor: 선택시 글자색
- activeBgColor: 선택시 배경색
- labelLength: 표현될 카테고리 글자 수
- showValue: 카테고리 글 수 표현(0:숨김, 1:보임)
- contentWidth: 콘텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다.
- cover: 홈 커버 기본값으로 자세한 내용은 '홈 커버 > 기본값' 에서 설명.

4) 홈 커버
- 홈 커버에 사용한 아이템을 정의한다.
- 스킨 적용 즉시 제작자가 추천하는 홈커버가 적용되도록 하기 위해서 기본값을 사용할 수 있다. 스킨 정보 파일의 기본값에 JSON 값을 string으로 설정한다.

5) 스킨 옵션
- 스킨 옵션에서 제공할 옵션을 정의한다.

- <s_if_var_{VARIABLE_NAME}>: 옵션의 값이 있으면 (bool 타입인 경우 true이면) 치환
- <s_not_var_{VARIABLE_NAME}>: 옵션의 값이 없으면 (bool 타입인 경우 false이면) 치환
- : 옵션의 값

6) 리스트 스타일
- 사용할 수 있는 글 목록 스타일을 정의한다.
- 리스트 스타일을 사용하기 위해서는 스킨 정보 파일에 리스트 스타일 아이템을 정의해야 한다. 리스트 스타일을 정의하면 카테고리 관리화면에서 리스트 스타일이 표시되고 사용자가 선택할 수 있다. 이를 사용하여 카테고리별로 다른 스타일을 적용할 때 사용할 수 있다.

치환자 구조

- 티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태가 있다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환된다. 값치환자는 해당하는 값으로 변환된다.

치환자 예)

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

- 그룹치환자 : <s_tag>, <s_tag_rep>

- 값치환자 : , ,

1) 그룹치환자

<s_NAME>VALUE</s_NAME>

2) 값치환자

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

지금까지 티스토리 스킨 파일 구조, 스킨 정보 파일(index.xml), 치환자 구조에 대해 알아보았다.

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

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

저작자표시 비영리 변경금지

'B7 블로그 > 티스토리' 카테고리의 다른 글

티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) (0)	2019.03.27
티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션) (0)	2019.03.22
티스토리 블로그 robots.txt 확인 및 분석 (1)	2019.03.18
티스토리 블로그 2019년 2월 애드센스 수익공개 (0)	2019.03.12
티스토리 블로그 2019년 1월 애드센스 수익공개 (0)	2019.02.07