티스토리 스킨 개발환경 만들기 [#2]

개발

티스토리 스킨 개발환경 만들기 [#2]

happytanuki 2024. 12. 9. 18:33

티스토리의 스킨 파일 구조는 몇 개의 파일과 디렉터리로 이뤄진다.

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

각각의 파일은 역할을 가지고 있는데.

index.xml

스킨의 메타데이터를 담는 파일이다. 이 내용으로 스킨 제작자, 이름 등이 포함된다.

skin.html

스킨 템플릿 파일이다. 여기에 적은 내용을 바탕으로 치환자를 치환하여 블로그 페이지를 렌더링하게 된다.

style.css

스타일시트이다. 아무래도 일반 HTML의 그것과 같은 것인 듯?

preview

미리보기용이라고 한다. 나중에 알게 될 듯?

preview.gif : 미리보기 기본 파일로 아래 파일이 없는 경우에 사용 (112x84)
preview256.jpg : 사용 중인 스킨 미리보기 (256x192)
preview560.jpg : 스킨 목록 미리보기 (560x420)
preview1600.jpg : 스킨 상세보기 미리보기 (1600x1200)

images

모든 필수가 아닌 파일들이 모두 위치한 짬통.

index.xml

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

파트:

name: 스킨 이름
version: 스킨 버전
description: 상세 설명
license: 저작권

파트:

name: 제작자 이름
homepage: 제작자 웹사이트 주소
email: 이메일

파트:

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: 홈 커버 기본값이다. 추후 다시 설명한다고 한다.

스킨 옵션:

스킨 옵션이라는 게 있다는데 파일에 안보인다. 추후 설명을 보아야 할 듯?

리스트 스타일:

사용할 수 있는 글 목록 스타일을 정의한다고 한다. 추후에 수정하겠다.

치환자 구조

티스토리 스킨 템플릿의 치환자는 그룹 치환자, 값 치환자로 두가지인데, 각각 다음과 같이 표현된다.

<s_tag></s_tag>:

그룹 치환자로, 내부의 다른 데이터들을 포함하여 렌더링된(HTML로 변환된) 값으로 변환된 값으로 치환될 부분입니다.

[¡##_tag_##]:

값 치환자로, 해당하는 값으로 치환됩니다. 아마도 변수의 값을 읽어와 출력하는 느낌일 듯 하다.

(태그 안쪽의¡는 티스토리에서 자동으로 치환해버리기에 추가한 문자이다. 실제로는 없이 작성해야 작동한다.)