티스토리 스킨 만들기 #2 스킨 구조

   티스토리가 개편 이전에 꾀 구체적으로 스킨 제작에 대한 가이드가 나름 구체적으로 볼만했는데. 개편 이후 싹 없어졌는지 찾아볼 수 없어졌고. 너무 간편해진 도큐먼트 페이지만 하나 생겼습니다. 일단 볼것이 이것밖에 없기때문에 이것을 토대로 하나씩 따라가면서 스킨 구조를 파악 해 봅시다. 아 그전에.

새 스킨을 만들생각을 하셨으면. 기존의 블로그를 사용하시면 스킨을 제작 수정함에 있어서 사용자에게 무리가 갈 수 있으니. 꼭 새로운 스킨 제작용 블로그를 하나 만드셔서 테스트 글, 태그, 댓글, 방명록, 등을 여러개 생성해 둡시다.

---

https://tistory.github.io/document-tistory-skin/common/files.html

우선 공식 도큐먼트에서 스킨파일 구조를 어떻게 짜야하는지 읽어 봅시다. 하라는 대로 저렇게 해줍시다.

필수적으론 3가지만 있으면 되고 나머지는 생각날때 넣어줍시다.

---

2개의 파일은 이미 전에 이미 작성했고. 나머지 하나의 이 스킨에 대한 정보 값이 담길 index.xml 을 작성해봅시다.

<?xml version="1.0" encoding="utf-8"?>
<skin>
  <information>
    <name>JStory</name><!-- 스킨의 이름 -->
    <version>0.1</version><!-- 스킨의 버전 -->
    <description><!-- 스킨의 상세 설명 -->
      <![CDATA[웹표준을 준수한 XHTML 기반의 Tistory 기본 스킨입니다.]]>
    </description>
    <license><!-- 스킨의 라이센스 -->
      <![CDATA[자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.]]>
    </license>
  </information>
  <author>
    <name>tistory</name><!-- 스킨 제작자 이름 -->
    <homepage>http://espb.tistory.com</homepage><!-- 스킨 제작자 홈페이지 -->
    <email>jingukangnc@gmail.net</email><!-- 스킨 제작자 이메일 주소 -->
  </author>
  <default>
    <recentEntries>5</recentEntries><!-- 사이드바의 최근글 표시 갯수 -->
    <recentComments>5</recentComments><!-- 사이드바의 최근 댓글 표시 갯수 -->
    <recentTrackbacks>5</recentTrackbacks><!-- 사이드바의 최근 트랙백 표시 갯수 -->
    <itemsOnGuestbook>10</itemsOnGuestbook><!-- 한페이지에 표시될 방명록 갯수 -->
    <tagsInCloud>30</tagsInCloud><!-- 사이드바에 표시될 태그 갯수 -->
    <sortInCloud>3</sortInCloud><!-- 태그 클라우드 표현 방식 (1:인기도순, 2:이름순, 3:랜덤) -->
    <expandComment>0</expandComment><!-- 댓글영역 표현 방식 (0:감추기, 1:펼치기) -->
    <expandTrackback>0</expandTrackback><!-- 트랙백영역 표현 방식 (0:감추기, 1:펼치기) -->
    <lengthOfRecentNotice>25</lengthOfRecentNotice><!-- 최근 공지 표현될 글자수 -->
    <lengthOfRecentEntry>27</lengthOfRecentEntry><!-- 최근 글 표현될 글자수 -->
    <lengthOfRecentComment>30</lengthOfRecentComment><!-- 최근 댓글에 표현될 글자수 -->
    <lengthOfRecentTrackback>30</lengthOfRecentTrackback><!-- 최근 트랙백에 표현될 글자수 -->
    <lengthOfLink>30</lengthOfLink><!-- 링크에 표현될 글자수 -->
    <showListOnCategory>1</showListOnCategory><!-- 카테고리 클릭시 리스트 표현(0:숨김, 1:보임) -->
    <showListOnArchive>1</showListOnArchive><!-- 글보관함 클릭시 리스트 표현(0:숨김, 1:보임) -->
    <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><!-- 카테고리 글 수 표현(0:숨김, 1:보임) -->
    </tree>
    <contentWidth>720</contentWidth><!-- 콘텐츠영역 가로 사이즈, 이 사이즈에 맞춰 에디터의 위지윅이 제대로 구현된다. -->
  </default>
</skin>

https://tistory.github.io/document-tistory-skin/common/index.xml.html

도큐먼트에 있는 내용에다가 주석을 직접단 코드입니다. 주석을 지우셔도 되고. 그대로 두시고 원하는 값을 수정해 주시면됩니다.

저것들은 스킨이 적용 된 이후에도 티스토리 설정에서 쉽게 변경할 수 있는 연동 설정들입니다.

---

이제 바로 이대로 스킨을 등록해봅시다.

블로그 관리페이지에서 스킨변경, 우측의 스킨 등록을 누르시고

위 그림처럼 3가지의 파일을 등록하시고 저장을 눌러 스킨 이름을 지정합시다.

---

정상적으로 스킨이 업로드 되었다면, 오른쪽 스킨 보관함을 누르셔야 표시 됩니다.

---

스킨 목록에 스킨이 표시되고.

적용을 누르시면 바로 적용됩니다.

아시다시피. 아무것도 표시 안됩니다.

이제 여기다가 치환자 라는녀석을 이용해서 내용을 하나씩 채워 봅시다.