Silver Library

[티스토리 스킨 제작기] 0. 개요, 시작 본문

Face the fear, build the future/Laboratory

[티스토리 스킨 제작기] 0. 개요, 시작

Silver Archmage 2022. 6. 26. 18:47

개요.

'지금이라면 티스토리도 그냥 구조만 조금 알고나면 바로 원하는 기능 들을 넣어서 customising 가능할텐데?' 였다.

 

비록 디자인 학과가 아니면 어떤가. 미적 감각은 최대한 css 로 전부 뒤덮어서 해결하면 포토샵에 전적으로 의존 안 해도 어느정도는 커버 가능 할 거라는 판단이 생겼다. 아니, 사실 css 와 js, html 정도가 전부 일 것이다.

 

그렇다면 나머지 일은 tistory 서버와의 연동, 구성 정도라고 추측이 된다.

 

목표는 하나다.

1. 유료가 아니라는 전제하에, 5시나 7시 방향에 메신저 채팅 창 하나 만들어보기.

만약 유료라면, 방명록을 변조해서 (비실시간) 메신저 같은 형태로 UI 구축.

 

기존의 현재 스킨(#2, 또는 Poster)에다가 적용 해 보면 어떨까 싶다.

메뉴 UI 디자인의 경우, 추후를 도모.

 

0. 파일 구조

이 블로그 시작을 위한 최초이자, 기본 뼈대. 

즉, 기존 스킨에서의 수정이 싫다면 '이 파일 구조(가이드)대로 구축' 하는 것이 안정적 일 것이다.

핵심은, (1) index.xml (2) skin.html (3) style.css 이고, 부가 요소로는 (4) images (5) preview (사이즈별 파일) 이다.

 

파일 구조 · GitBook

파일구조 SKIN ─┬─ index.xml ├─ skin.html ├─ style.css ├─ preview.gif ├─ preview256.jpg ├─ preview560.jpg ├─ preview1600.jpg └─ images ─┬─ script.js ├─ background.jpg ├─ background.jpg └─ background.jp

tistory.github.io

1. 스킨 정보 파일 (index.xml)

꽤 당혹스러운데, 사실 여기에서 해야 하는 것은 기본값 태그를 변조하지 않으면서 최대한 css 를 우선 적용 후, js 로 추가 기능을 넣던 변조를 하던 하는 것이라고 보여진다.

 

왜냐면 이건 wordpress 가 아닌, 다른 국내 서버 제공 대로 치장을 해야 하니까. 적어도 그런 생각이 든다.

 

 

스킨 정보 파일 (index.xml) · GitBook

스킨 정보 파일 스킨에 필요한 정보를 담고 있는 xml 파일로 이 파일이 변경되면 스킨의 모든 설정이 초기화됩니다. 기본 스킨 1.1 tistory http://notice.tistory.com tistoryblog@daum.net 5 5 5 10 30 3 0 0 25 27 30 30

tistory.github.io

2. 치환자 구조

'태그의 꾸러미'. 즉 요컨데 변수 이름을 통한 메크로가 아닌가(by wrapping, hoisting) 라고 추측. 백엔드 내 이미 작업이 된 것을 가정하고, 그 정해진 치환자명(?) 에 맞게 빌트인 가구 배치하듯이 작성 해 나가면 될 듯 하다.

 

티스토리 스킨 제작 도움말 : 그룹 치환자와 값 치환자

티스토리는 index.xml 문서와 HTML 문서가 밀접하게 연결되어 동작하는 플랫폼입니다. 앞서 두 개의 강좌를 다 살펴보셨다면 index.xml은 티스토리 스킨을 제어하는 목적으로 사용한다는것을 알 수 있

rgy0409.tistory.com

그리고 이걸 보니, 거의 확신으로 든다.

 

공통 · GitBook

카테고리 글 리스트 tt-body-category

tistory.github.io

3. 스킨 옵션

자, 대망의 css 영역이다. 라고 생각 했는데, css 외에도, 옵션 정의(index.xml) 라는 것이 있다. type 을 정해두는 것도 있는데, json 객체로 정의 라고 되어 있다. 확실하진 않으나, 저 ![CDATA] 가 주석 치고는 css 요소가 담겨져있다.

확실 치 않으니 작업시 주의.

 

이 사항은 하단의 태그 클라우드, 방명록 등, 대다수에 해당된다. 치환자가 핵심인 듯 하다.

 

2번의 공통 치환자 페이지를 기반으로 작업을 진행 할 필요가 있어보인다.

 

외부 링크.

 

[Tistory] 스킨 만들기 - 1.기본구조

시간이 남을 때 공부할 겸 티스토리 블로그 스킨을 직접 제작해보기로 했다. 먼저 구성을 확인하기 위해 티스토리 스킨 가이드를 확인했다. 파일 구조 순서대로 하나씩 작성해보자. 1. index.xml 스

bonggang.tistory.com

 

0 Comments
댓글쓰기 폼