티스토리 스킨 제작기-4-스킨 구조 분석(index.xml 구조)
스킨 파일에서 index.xml 은 설정 데이터를 보관하는 파일로 생각 하시면 됩니다.
구성 부분은 크게 <default></default>, <cover></cover>, <variables></variables> 3가지로 분류 할 수 있습니다.
1. 스킨 구조 분석(index.xml 분석)
<?xml version="1.0" encoding="utf-8"?>
<skin>
<information>
<name>EPARI 기본스킨 v1.0</name>
<version>1.0</version>
<description>
<![CDATA[EPARI 기본 스킨입니다.]]>
</description>
<license>
<![CDATA[자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.]]>
</license>
</information>
<author>
<name>Wise Dragons</name>
<homepage>https://www.epari.net/@wisedragons</homepage>
<email>wisedragons7@gmail.com</email>
</author>
<default>
<entriesOnPage>9</entriesOnPage>
<entriesOnList>10</entriesOnList>
<recentEntries>12</recentEntries>
<recentComments>12</recentComments>
<recentTrackbacks>12</recentTrackbacks>
<itemsOnGuestbook>10</itemsOnGuestbook>
<tagsInCloud>30</tagsInCloud>
<sortInCloud>3</sortInCloud>
<expandComment>1</expandComment>
<lengthOfRecentNotice>100</lengthOfRecentNotice>
<lengthOfRecentEntry>100</lengthOfRecentEntry>
<lengthOfRecentComment>100</lengthOfRecentComment>
<lengthOfRecentTrackback>100</lengthOfRecentTrackback>
<lengthOfLink>100</lengthOfLink>
<showListOnCategory>1</showListOnCategory>
<showListOnArchive>1</showListOnArchive>
<contentWidth>1920</contentWidth>
</default>
<variables>
<variablegroup name="로고">
<variable>
<name>logo-image</name>
<label><![CDATA[ 로고 이미지 ]]></label>
<description><![CDATA[]]></description>
<type>IMAGE</type>
<option />
<default></default>
</variable>
<variable>
<name>logo-link-target</name>
<label><![CDATA[ 새창으로 열기 ]]></label>
<description><![CDATA[]]></description>
<type>BOOL</type>
<option />
<default>false</default>
</variable>
<variable>
<name>logo-link-user</name>
<label><![CDATA[ 사용자정의 로고 Link ]]></label>
<description><![CDATA[]]></description>
<type>STRING</type>
<option />
<default></default>
</variable>
</variablegroup>
<variablegroup name="사이드바">
<variable>
<name>sidebar-theme</name>
<label><![CDATA[ 태마(색상) ]]></label>
<description><![CDATA[]]></description>
<type>SELECT</type>
<option><![CDATA[[ { "name":"white" , "label":"흰색" , "value":"white" },
{ "name":"bright", "label":"밝은색" , "value":"bright" },
{ "name":"dark" , "label":"어두운색", "value":"dark" },
{ "name":"black" , "label":"검정색" , "value":"black" }
]]]></option>
<default>dark</default>
</variable>
<variable>
<name>sidebar-is-menu-iconbar</name>
<label><![CDATA[ 아이콘바 사용 ]]></label>
<description><![CDATA[]]></description>
<type>BOOL</type>
<option />
<default>true</default>
</variable>
<variable>
<name>sidebar-size</name>
<label><![CDATA[ 메뉴 크기(250, 300, 350, 400, 450, 500)PX ]]></label>
<description><![CDATA[]]></description>
<type>STRING</type>
<option />
<default>300</default>
</variable>
<variable>
<name>sidebar-background-upload</name>
<label><![CDATA[ 배경이미지 사용-업로드 ]]></label>
<description><![CDATA[]]></description>
<type>IMAGE</type>
<option />
<default></default>
</variable>
<variable>
<name>sidebar-font-color</name>
<label><![CDATA[ 컬러 ]]></label>
<description><![CDATA[]]></description>
<type>COLOR</type>
<option />
<default>#04beb8</default>
</variable>
</variablegroup>
</variables>
</skin>
2. default : 기본적으로 표시할 설정갯수를 index.xml 설정파일에 지정해두면 처음 skin이 등록시 자동 설정 된다.
3. variables : 사용자 변수를 설정하는 항목 입니다.
- variablegroup : 로고
- variablegroup : 사이드바
- 변수 데이터 기본 구성
<variable>
<!-- 1. 변수 이름 --> <name>sidebar-theme</name>
<!-- 2. 변수 설명 --> <label><![CDATA[ 태마(색상) ]]></label>
<!-- 3. 변수 설명 --> <description><![CDATA[]]></description>
<!-- 4. 데이터 타입 --> <type>SELECT</type>
<!-- 5. 데이터 값 --> <option>
<![CDATA[[ { "name":"white" , "label":"흰색" , "value":"white" },
{ "name":"bright", "label":"밝은색" , "value":"bright" },
{ "name":"dark" , "label":"어두운색", "value":"dark" },
{ "name":"black" , "label":"검정색" , "value":"black" }
]]]>
</option>
<!-- 6. 기본 값 --> <default>dark</default>
</variable>
- 변수의 데이터 type 종류 : SELECT, BOOL, STRING, IMAGE, COLOR
SELECT : select box로 데이터를 설정
BOOL : boolean 으로 check box로 데이터를 설정
STRING : input box로 데이터 설정
IMAGE : 이미지 업로드 기능이 활성화 됨
COLOR : 컬러를 선택할수 있는 컬러 픽커가 활성화됨
4. 설정한 변수를 skin.html에서 사용
<s_if_var_logo-image>
<a href="" <s_if_var_logo-link-target> target="_blank" </s_if_var_logo-link-target>>
<img src="" height="100%"></img>
</a>
</s_if_var_logo-image>
- 조건별 적용 : <s_if_var_변수이름> 해당 밴수에 값이 있을때만 : 이곳이 보여짐 </s_if_var_변수이름>
- 변수값 출력 :
- 적용 예시 :
5. 티스토리 스킨 가이드(참고)
https://tistory.github.io/document-tistory-skin/
