[Tistory] 스킨 만들기 - 2. skin.html
사실상 중요기능들은 설명서만 잘 읽어봐도 다 구현할 수 있다. 하지만 다음에 변경할 때 내가 편하기위해 정리해두는 글이다.
1. 사이드바
사이드바의 그룹치환자는 <s_sidebar> 다. 즉, 사이드바를 구현하기 위해서는 <s_sidebar>를 먼저 작성해줘야 한다.
사이드바의 개별 엘리먼트 기룹치환자는 <s_sidebar_element>다.
즉, 사이드바의 기본 구조는 아래와 같다.
<s_sidebar>
<s_sidebar_element>
</s_sidebar_element>
</s_sidebar>
+) 치환자 - 출처: 공식설명
티스토리의 치환자는 그룹치환자, 값치환자의 2가지 형태를 가지고 있습니다. 그룹치환자는 내부에 스킨 데이터를 포함하며 렌더링된 값으로 변환됩니다. 값치환자는 해당하는 값으로 변환됩니다
- 그룹치환자: <s_tag>, <s_tag_rep>
- 값치환자: , ,
나는 사이드바를 카테고리를 표현해주기 위해 활용할 예정이기에 카테고리 리스트 표현 값치환자를 작성해주었다.
값치환자는 2가지 형식이 있는데 폴더 형식의 카테고리
과 리스트 형식의 카테고리
다. 나는 리스트 형식의 카테고리를 선택하고 CSS를 이용해서 원하는 모양으로 변경해주었다.
2. 글 - 댓글
댓글의 그룹 치환자는 <s_rp>다. 사용자가 댓글로 접근 시 이 영역 내부의 치환자가 출력되는 것이다.
댓글의 경우 입력폼과 출력폼 2가지로 구성했으며 그룹 치환자는 각각 <s_rp_input_form>, <s_rp_container>이다.
입력 폼
입력 폼의 구성은 댓글을 입력해줄 textArea와 댓글 등록 버튼을 기본으로 만일 guest일 경우 아이디, 패스워드 및 비밀글 여부 체크박스를 추가해줬다.
이름 위해 <s_rp_member> 그룹 치환자로 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역을 설정해준 후 값 치환자를 활용했다.
사용한 값 치환자는 다음과 같다.
- : 댓글 입력 박스
- : 댓글 입력 클릭 이벤트
- : 비밀글 체크박스 이름
- : 이름 입력 박스
- : 이름
- : 비밀번호 입력 박스 이름
- : 비밀번호
<s_rp_input_form>
<div class="commentWrite">
<s_rp_member>
<s_rp_guest>
<p>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</p>
<p>
<input type="password" maxlength="8" name="" value="" />블로그 관리자일 경우 password field에 미리 비밀번호를 넣어놓기 위해 만들어 놓았던 치환자였으나, 지금은 사용되지 않음.. (현재는 블로그 관리자일 경우 password field가 나타나지
않음.)
<label for="password"> : 패스워드 </label>
</p>
</s_rp_guest>
<p class="secretWrap">
<input type="checkbox" name="" class="checkbox" />
<label for="secret"> 비밀글 </label>
</p>
</s_rp_member>
<p>
<textarea name="" rows="10" cols="50"></textarea>
</p>
<p>
<input type="submit" value="댓글 달기" onclick="" />
</p>
</div>
</s_rp_input_form>
출력폼
등록된 댓글 리스트를 출력하기 위해서는 <s_rp_container>그룹 치환자를 사용해 영역을 먼저 구성해준다. 댓글 영역에 표시할 내용은 댓글 작성자, 작성일, 글 내용, 수정, 삭제. 답글 기능이다.
사용한 값 치환자 목록
- [##_rp_rep_name_##]: 글쓴사람 이름
- : 글쓴 날짜
- : 글 내용
- : 답글 삭제 클릭 이벤트
- : 답글 수정 클릭 이벤트
<div class="commentList">
<s_rp_container>
<ol>
<s_rp_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
<a href="#" onclick="" class="write">
<span>댓글쓰기</span>
</a>
</span>
<p></p>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id=''>
<div class="">
<span class="image"></span>
<span class="name"></span>
<span class="date"> </span>
<span class="control">
<a href="" class="address">
<span>댓글주소</span>
</a>
<a href="#" onclick="" class="modify">
<span>수정/삭제</span>
</a>
</span>
<p></p>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>
</div>
3. 페이징
리스트, 글 등 여러곳에서 사용되는 기능으로 <s_paging>으로 시작한다.
<s_paging>
<div class="paging">
<a class="">이전 </a>
<span class="numbox">
<s_paging_rep>
<a class="num">[]</a>
</s_paging_rep>
</span>
<a class=""> 다음</a>
</div>
</s_paging>
4. 검색
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<s_search>
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"
/>
<input value="검색" type="button" onclick="" class="submit" />
</s_search>
</div>
</s_sidebar_element>
사실 자세한 내용은 공식문서에 다 나와있기때문에 공식문서를 확인하고 만드는 것이 제일 좋다
공식 문서: https://tistory.github.io/document-tistory-skin/
소개 · GitBook
티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토�
tistory.github.io