SKIN Guideline
tistory에서 제공하는 skin 가이드라인 보면 됩니다.
https://tistory.github.io/document-tistory-skin/
소개 · GitBook
티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토
tistory.github.io
SKIN Guideline 보는 법
처음에 tistory에서 제공해주는 guidline을 보면 html수준의 개발을 한 사람이 보면 이건 어떻게 하라는 건지 할 겁니다.
그래서 해당 guidline을 보는 법을 공유합니다.
Tistory skin은 어디서 편집하나요?
1. 관리 페이지로 로그인 후 좌측 메뉴에 존재하는 "스킨 편집" 클릭
2. 우측 중간에 존재하는 html 편집
3. HTML에서는 HTML 관련 사항 편집, CSS에서 HTML에서 사용하는 CSS 편집
Tistory skin의 기본 동작 방식
소개를 보면 아래와 같이 나와있습니다.
"스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다.
이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다."
즉, tistory 스킨을 만든 다는 것은 "치환자" + "html code"를 지지고 볶아 새로운 스킨을 만드는 것입니다.
치환자로 기능을 추가하고, html code로 구조를 잡으면 끝입니다.
치환자란
<s_t3> </s_t3> 같은 tistory에서 제공하는 "custom tag"를 말한다고 보면 됩니다. 이 "치환자"를 사용하면 "치환자" 내부에서 사용한 데이터를 기반으로 다시 렌더링 하여 사용자게 보여줍니다.
아래 예시에서 보면 <s_t3> </s_t3>는 <script>와 <div> tag를 사용하는 것으로 치환이 됩니다.
<!-- 치환 전 -->
<body>
<s_t3>
...
</s_t3>
</body>
<!-- 치환 후 -->
<body>
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/blogs/script/blog/common.js"></script>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
...
</body>
치환자의 종류
1. 그룹 치환자
tistory의 정의 : 내부에 스킨 데이터를 포함하며 렌더링 된 값으로 변환됩니다
설명 : <s_NAME> <s_NAME> 앞의 값을 tistory에서 제공하는 형태로 변환합니다.
단순히 값만으로는 표시할 수 없고 복잡한 내용이 포함되는 치환자입니다.
여러 값 치환자가 포함된 긴 내용의 태그들의 집합을 간단히 그룹 치환자로 묶어서 처리한다고 보시면 됩니다.
<s_NAME>VALUE</s_NAME>2. 값 치환자
tistory의 정의 : 해당하는 값으로 변환됩니다.
설명 : tistory에서 제공하는 NAME에 맞는 값으로 변환합니다.
3. 예제
아래 예제는 <s_t3>와 https://doitnow-man.tistory.com/" 및 즐거운인생 (미련없이 하자)를 이용하여 link를 만든 예제입니다.
<html>
<body>
<s_t3>
<header>
<h1><a href="https://doitnow-man.tistory.com/">즐거운인생 (미련없이 하자)</a></h1>
</header>
</s_t3>
</body>
</html>
tistory skin의 기본 구조
모든 skin의 기본은 <s_t3> 안에서 만들어야 정상 동작을 합니다.
- <s_t3>: 티스토리의 공통 javascript를 삽입해주는 tag입니다.
<body>
<s_t3>
...
</s_t3>
</body>이제 <s_t3> 안에서 tistory가 제공해주는 각종 "그룹 치환자"와 html tag를 이용하여 tistory 스킨을 만들면 됩니다.
말은 쉬우나 구조 잡고, 디자인하고 하는 것은 수많은 시행착오가 필요합니다.
중요 사항.
"그룹 치환자"가 잘 동작하려면 "최상위 그룹 치환자"부터 만들어서 해당 "최상위 그룹 치환자"와 연관된 "하위 그룹 치환자"를 "최상위 그룹 치환자" 하위에 배치해야 합니다.
예를 들어 방명록 관련된 "최상위 그룹 치환자"는 다음과 같습니다.
<s_guest>그리고 <s_guest>는 "하위 그룹 치환자"로 다음이 존재합니다.
<s_guest_input_form>즉, <s_guest_input_form> 이 정상적으로 치환되려면 아래 같이 사용되어야 합니다.
<s_guest>
<s_guest_input_form>
...
</s_guest_input_form>
</s_guest>
tistory에서 제공하는 그룹 치환자 종류
아래 제공되는 "그룹 치환자"를 이용해서 tistory의 구조를 잡은 후 "그룹 치환자"안의 내용을 채워 나가면 됩니다.
| 최상위 그룹 치환자 종류 | 그룹 치환자 |
| 공통 | <s_t3> |
| 홈커버 | <s_cover_group> |
| 태그 클라우드 | <s_tag> |
| 방명록 | <s_group> |
| 글 | <s_article_rep> |
| 글 - 댓글 | <s_rp> |
| 글 - 공지사항 | <s_notice_rep> |
| 글 - 보호글 | <s_article_protected> |
| 글 - 페이지 | <s_page_rep> |
| 리스트 | <s_list> |
| 리그스 - 페이징 | <s_paging> |
| 사이드 바 | <s_sidebar> |
그 외 고급 수정 가능 사항
1. 스킨 정보 파일 (index.xml)을 통하여 스킨의 설정 값을 변경할 수 있습니다.
2. 추가로 필요한 파일은 파일 업로드 쪽에 올려서 사용 가능합니다.
'프로젝트 > tistory-skin' 카테고리의 다른 글
| [skin] 스킨 만들때 사용한 기술 정리 (0) | 2021.12.27 |
|---|