Tistory 스킨 분석

스킨 구성 필수 요소는 크게 5개의 영역으로 나뉨

 

index.xml : 스킨 구성의 필요정보를 담고 있음. 스킨의 모든 설정을 담당.

skin.html : 메인 템플릿 파일. 치환을 통해 각 URL에 맞는 HTML로 변환.

style.css : 스타일을 위한 css 분리.

preview : 각 페이지의 미리보기 이미지. 112*84, 256*192, 560*420, 1600*1200 사이즈를 준비

images : 위 요소들을 제외한 모든 파일들.

 

 

 

 

index.xml

<infomation> : 스킨의 이름, 버전, 설명, 저작권을 명시.

<author> : 스킨 제작자의 정보, 이름, 홈페이지, 이메일을 명시.

<default> : 각종 설정의 기본값. 자세한건 요기서 tistory.github.io/document-tistory-skin/common/index.xml.html

스킨 정보 파일 (index.xml) · GitBook

<cover> : 페이지에 커버 그룹으로 표시될 각 아이템들을 정의하는 곳.

<item> : 커버그룹의 구성 요소들. 이름, 라벨, 설명을 명시.

<variable> : 옵션. 이름,라벨, 설명, 타입, 선택할 값, 기본값을 명시

이후 으로 사용.

 

skin.html 에서  <s_~~> 이런 치환자를 사용하면 

index.xml 에서 ~~ 라는 name을 가진 태그의 속성으로 치환 적용.

 

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

 

치환자 : 그룹,값치환자 2개로 나뉘며

그룹치환자는 스킨데이터를 포함하며 렌더링된 값으로 변환.  <s_tag>, <s_tag_rep>

값치환자는 해당 값으로 변환. [##변수명##] 변수명은 이미 지정된 변수들이 있음.

tistory.github.io/document-tistory-skin/common/global.html

공통 · GitBook

 

이후 자세한건 하나하나 만들어보면서 감을 잡아보자