티스토리 블로그를 시작하면서 처음에는 티스토리에서 제공되는 무료 스킨을 사용했다. 그러다 FastBoot 1.6.2 버전 스킨을 접하면서 FastBoot 스킨으로 변경하였고, 지금까지 사용중이다.
티스토리 시스템은 조금씩 변화가 있는데, FastBoot 스킨의 발전적인 변화는 없다. 그저 블로거들이 직접 오류를 수정하고, 포스팅한 글에 의존하면서 하루하루 조금씩 스킨을 수정하고 있는 실정이다.
티스토리 블로그가 어떤구조로 되어있는지 어떤 파일들이 있는지 모른채 시작했었다. 오류를 하나씩 수정하면서 어떤파일이 있는지 알게 되었고, html, css, js에 사용된 코드를 공부해야겠다는 생각이 들었다.
그래서 티스토리 블로그의 기본인 파일 구조부터 시작해서 티스토리 치환자에 대해 하나씩 알아보고 정리해보았다.
▶ 티스토리 스킨(공통 치환자)
1. 공통
2. 홈 커버
3. 스킨 옵션
1. 공통
2. 홈 커버
3. 스킨 옵션
티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션)
▷ 티스토리 블로그 robots.txt 확인 및 분석 : https://barista7.tistory.com/1150
▷ 티스토리 스킨 가이드 : https://tistory.github.io/document-tistory-skin/
▷ 티스토리 스킨 - 파일 구조, 스킨 정보 파일, 치환자 구조 : https://barista7.tistory.com/1159
▷ 티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션) : https://barista7.tistory.com/1162
▷ 티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) : https://barista7.tistory.com/1179
▷ 티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지) : https://barista7.tistory.com/1192
▷ 티스토리 스킨 - 글 치환자(구조, 최근공지, 최근글, 인기글, 댓글) : https://barista7.tistory.com/1203
▷ 티스토리 스킨 - 글 치환자(카테고리, 랜덤태그, 방문자수, 검색) : https://barista7.tistory.com/1237
▷ 티스토리 스킨 가이드 : https://tistory.github.io/document-tistory-skin/
▷ 티스토리 스킨 - 파일 구조, 스킨 정보 파일, 치환자 구조 : https://barista7.tistory.com/1159
▷ 티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션) : https://barista7.tistory.com/1162
▷ 티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) : https://barista7.tistory.com/1179
▷ 티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지) : https://barista7.tistory.com/1192
▷ 티스토리 스킨 - 글 치환자(구조, 최근공지, 최근글, 인기글, 댓글) : https://barista7.tistory.com/1203
▷ 티스토리 스킨 - 글 치환자(카테고리, 랜덤태그, 방문자수, 검색) : https://barista7.tistory.com/1237
=
스킨 공통 치환자(공통)
▶ 공통
1) 스킨 치환자 그룹
<s_t3> : 티스토리 공통 javascript 삽입 (필수)
<!-- 치환 전 -->
<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) 블로그 정보
Barista7: 블로그 제목
https://tistory1.daumcdn.net/tistory/2844767/attach/e981fb74976b4360ac7deeed13b7eabd: 블로그 대표 이미지 url
: 블로그 대표 이미지를 포함한 IMG 태그
B7(barista7)의 블로그에서는 영화 후기, 앱테크, 생활정보, 여행/맛집, 자격증, 티스토리/애드센스, 환율 관련 정보 등의 다양한 정보를 공유합니다.: 블로그 설명
Barista7: 블로그 소유자의 필명
2) 블로그 URL
https://barista7.tistory.com/: 블로그 url
https://barista7.tistory.com/rss: rss feed 주소
https://barista7.tistory.com/tag: 태그로그 url
https://barista7.tistory.com/guestbook: 방명록 url
3) 기타
티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션): 페이지 제목
: 블로그 메뉴 리스트
tt-body-page: 페이지 타입에 따른 id
▶ 광고 치환자
[##revenue_list_upper##] : 블로그 홈/목록 상단
[##revenue_list_lower##] : 블로그 홈/목록 하단
사용 예
<html>
<head>
<title>티스토리 스킨 - 공통 치환자(공통, 홈 커버, 스킨 옵션)</title>
</head>
<body id='tt-body-page'>
<s_t3>
<header>
<h1><a href="https://barista7.tistory.com/">Barista7</a></h1>
<!-- 블로그 홈/목록 상단 치환자 -->
<!-- blog_menu사용 -->
<!-- 메뉴 직접 구성 -->
<ul class="blogMenu">
<li><a href="https://barista7.tistory.com/rss">RSS구독</a></li>
<li><a href="https://barista7.tistory.com/tag">태그</a></li>
<li><a href="https://barista7.tistory.com/guestbook">방명록</a></li>
</ul>
</header>
<section class="sidebar">
<!-- blog_image 사용 -->
<div class="blogInfo">
<div class="blogImage"> </div>
<div class="blogDesc">B7(barista7)의 블로그에서는 영화 후기, 앱테크, 생활정보, 여행/맛집, 자격증, 티스토리/애드센스, 환율 관련 정보 등의 다양한 정보를 공유합니다. <span class="userID">Barista7</span></div>
</div>
<!-- image 사용 -->
<div class="blogInfo">
<div class="blogImage"><img src="https://tistory1.daumcdn.net/tistory/2844767/attach/e981fb74976b4360ac7deeed13b7eabd"></div>
<div class="blogDesc">B7(barista7)의 블로그에서는 영화 후기, 앱테크, 생활정보, 여행/맛집, 자격증, 티스토리/애드센스, 환율 관련 정보 등의 다양한 정보를 공유합니다. <span class="userID">Barista7</span></div>
</div>
</section>
<!-- 블로그 홈/목록 하단 -->
</s_t3>
</body>
</html>
=
스킨 공통 치환자(홈 커버)
▶ 홈 커버
홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다.
<s_cover_group>: 커버 그룹 치환자
<s_cover_rep>: 개별 커버 표시
<s_cover>: 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 않는다.
: 개별 커버 타이틀
<s_cover_url>: 커버 url이 있는 경우에만 치환
: 개별 커버 url
<s_cover_item>: 개별 커버 컨텐츠
<s_cover_item_not_article_info>: 컨텐츠가 글이 아닌 경우에만 치환 (내부 치환자는 s_cover_item에 직접 사용 가능)
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>: 컨텐츠 이미지가 있는 경우에만 치환
: 컨텐츠 이미지
<s_cover_item_article_info>: 컨텐츠가 글인 경우에만 치환
: 컨텐츠 타이틀
: 컨텐츠 요약/내용
: 컨텐츠 url
<s_cover_item_thumbnail>: 컨텐츠 이미지가 있는 경우에만 치환
: 컨텐츠 이미지
: 카테고리 명
: 카테고리 url
: 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)
: 글 발행 날짜 (yyyy.mm.dd)
: 댓글 수
치환자 사용 예
<s_cover_group>
<s_cover_rep>
<s_cover name='featured'>
<div class='featured'>
<s_cover_item>
<div class='featured-item'>
<s_cover_item_thumbnail>
<img class="image" src="">
</s_cover_item_thumbnail>
<strong class="title"></strong>
<a href="" class="action">자세히 보기</a>
</div>
</s_cover_item>
<button class='btn-prev'><</button>
<button class='btn-next'>></button>
</div>
</s_cover>
<s_cover name='list'>
<div id="mArticle" class="article_skin">
<s_cover_item>
<s_cover_item_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
<div class="detail_info">
<a href="" class="link_cate"></a>
<span class="txt_bar"></span>
</div>
</div>
</s_cover_item_article_info>
<s_cover_item_not_article_info>
<div class="list_content">
<s_cover_item_thumbnail>
<a href="" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname="></a>
</s_cover_item_thumbnail>
<a href="" class="link_post">
<strong class="tit_post"></strong>
<p class="txt_post"></p>
</a>
</div>
</s_cover_item_not_article_info>
</s_cover_item>
<s_cover_url>
<a class="btn-more" href="">더보기</a>
</s_cover_url>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
1) 정의(index.xml)
커버를 사용하기 위해서는 스킨 정보 파일에 커버 아이템을 정의해야 합니다.
<cover>
<item>
<name>커버 아이템 이름</name>
<label>사용자에게 표시할 이름</label>
<description>설명</description>
</item>
</cover>
정의 예
<cover>
<item>
<name>featured</name>
<label><![CDATA[Featured]]></label>
<description><![CDATA[강조할 글을 표시합니다.]]></description>
</item>
<item>
<name>list</name>
<label><![CDATA[리스트]]></label>
<description><![CDATA[글 리스트를 표시합니다.]]></description>
</item>
</cover>
2) 기본값
커버 적용 즉시 제작자가 추천하는 홈커버가 적용되도록 하기 위해서 기본값을 사용할 수 있습니다. 스킨 정보 파일의 기본값에 JSON 값을 string으로 설정합니다.
<default>
<cover>
<![CDATA[ 홈 커버 기본값 ]]>
</cover>
</default>
3) 기본값 JSON 구조
[
{
"name": "정의된 커버 아이템 name",
"title": "커버 타이틀",
"dataType": "내용의 데이터 타입",
"data": "타입에 해당하는 데이터"
},
...
]
- name: 정의된 커버 아이템으로 없는 커버를 사용할 경우 무시됩니다.
- title: 커버타이틀로 사용할 string 입니다.
- dataType: 내용유형으로 스킨 에디터에서 제공하는 유형 중 '최신 글', '직접 입력' 만 사용할 수 있습니다.
- RECENT: 최신 글
- CUSTOM: 직접 입력
- data: 커버 내용으로 유형별로 형태가 다릅니다.
- RECENT: 카테고리와 개수를 설정할 수 있습니다.
{
"category": "ALL",
"size": 5
}
- category: 사용자의 카테고리를 알 수 없으므로 전체(ALL), 공지사항(NOTICE)만 사용할 수 있습니다.
- size: 표시될 개수를 설정합니다. 1-100 까지 설정할 수 있습니다.
- CUSTOM: 표시될 내용을 모두 설정
{
"title": "컨텐츠 타이틀",
"summary": "컨텐츠 타이틀",
"url": "컨텐츠 요약/내용",
"thumbnail": "컨텐츠 이미지"
}
기본값 예
[
{
"name": "featured",
"title": "",
"dataType": "CUSTOM",
"data": [
{
"title": "첫번째 항목",
"summary": "첫번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
},
{
"title": "두번째 항목",
"summary": "두번째 항목의 summary",
"url": "https://www.tistory.com",
"thumbnail": "https://www.tistory.com/sample.png"
}
]
},
{
"name": "list",
"title": "",
"dataType": "LIST",
"data": {
"category": "ALL",
"size": 5
}
}
]
스킨 공통 치환자(스킨 옵션)
▶ 스킨 옵션
<s_if_var_{VARIABLE_NAME}>: 옵션의 값이 있으면 (bool 타입인 경우 true이면) 치환
<s_not_var_{VARIABLE_NAME}>: 옵션의 값이 없으면 (bool 타입인 경우 false이면) 치환
: 옵션의 값
<style>
.wrap_sub {
background-image: url('');
}
</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>
1) 옵션 정의 (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>
2) 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>
[ 사진 출처 ] 티스토리 가이드 캡쳐
지금까지 티스토리 스킨 공통 치환자(공통, 홈 커버, 스킨 옵션)에 대해 알아보았다.
도움이 되셨다면 로그인 없이 가능한
아래 하트♥공감 버튼을 꾹 눌러주세요!
반응형
'B7 블로그 > 티스토리' 카테고리의 다른 글
| 티스토리 스킨 - 글 치환자(댓글, 공지사항, 보호글, 페이지) (0) | 2019.03.30 |
|---|---|
| 티스토리 스킨 - 컨텐츠 치환자(태그 클라우드, 방명록) (0) | 2019.03.27 |
| 티스토리 스킨 - 파일 구조, 스킨 정보 파일(index.xml), 치환자 구조 (0) | 2019.03.21 |
| 티스토리 블로그 robots.txt 확인 및 분석 (1) | 2019.03.18 |
| 티스토리 블로그 2019년 2월 애드센스 수익공개 (0) | 2019.03.12 |
