[공통치환자] 티스토리 - 스킨옵션

스킨 옵션

 

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

 

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

 

[##_var_{VARIABLE_NAME}_##]
옵션의 값

 

---

 

<style>

  .wrap_sub {

    background-image: url('[##_var_cover-image_##]');

  }

</style>

<s_if_var_scroll-load>

    <style>

        .article_skin .area_paging .inner_paging.scroll_spinner {

            width:48px; height:48px;

            background:url('./images/spinner.gif') no-repeat;

            height: 48px;

            width: 48px;

            margin: 0 auto;

        }

        .article_skin .area_paging .inner_paging.scroll_spinner * {

            display:none

        }

    </style>

    <script src="./images/scroll-load.js"></script>

</s_if_var_scroll-load>

 

옵션 정의 (index.xml)

 

<variables>

  <variablegroup name="그룹이름">

    <variable>

      <name>치환자에서 사용할 이름</name>

      <label>사용자에게 표시할 이름</label>

      <description>설명 (optional)</description>

      <type>타입</type>

      <option>max, min, select option등 값을 설정하는데 사용되는 정보 (optional: SELECT타입의 경우 필수)</option>

      <default>설정하지 않은 경우 기본 값</default>

    </variable>

  </variablegroup>

</variables>

 

---

 

type

 

STRING: 문자 입력

SELECT: 옵션 선택 (옵션은 name, label, value 값을 가진 json객체로 정의)
[option 예제]

<option><![CDATA[

  [

    {"name":"light", "label":"밝은색", "value":"light"},

    {"name":"dark", "label":"어두운색", "value":"dark"}

  ]

]]></option>

 

IMAGE: 이미지 url

BOOL: true/false

COLOR: 컬러값 (#000000)

 

---

 

옵션 정의 사용 예제

 

<variables>

  <variablegroup>

    <variable>

      <name>scroll-load</name>

      <label>

        <![CDATA[ 무한스크롤 ]]>

      </label>

      <type>BOOL</type>

      <option />

      <default>true</default>

      <description>

        <![CDATA[ 글 리스트 끝에 다다르면 다음 페이지를 불러옵니다. ]]>

      </description>

    </variable>

  </variablegroup>

  <variablegroup name="디자인">

    <variable>

      <name>cover-image</name>

      <label>

        <![CDATA[ 커버이미지 ]]>

      </label>

      <type>IMAGE</type>

      <option />

      <default>

        <![CDATA[ https://t1.daumcdn.net/tistory/0/Ray2/images/header_default.jpg ]]>

      </default>

      <description>

        <![CDATA[ 커버 이미지를 변경합니다. ]]>

      </description>

    </variable>

    <variable>

      <name>point-color</name>

      <label>

        <![CDATA[ 대표 색 ]]>

      </label>

      <type>COLOR</type>

      <option />

      <default><![CDATA[#6bacce]]></default>

      <description>

        <![CDATA[대표 색을 사용합니다.]]>

      </description>

    </variable>

  </variablegroup>

</variables>