티스토리 블로그를 이용하면서 누군가가 만들어준 스킨들을 감사하게 써왔지만 모든 스킨들 마다 뭔가 2% 아쉬운점 있었다. 전체 레이아웃이 맘에 드는 스킨은 코드 적기가 힘들다던지, 폰트나 자간이 마음에 안든다던지, 리스트를 사용하는데 들여 쓰기가 안된다던지 등등...이것이 좋으면 이것이 맘에 살짝 걸리는 그런것들 말이다.
그래서 직접 티스토리 스킨을 만들어 볼까 한다. 어떻게 만들어야 할까? 그동안 블로그를 사용하면서 내가 느꼈던 불편한 점들을 적어 보았다.
요구 사항
- <ol><li> 리스트 사용 시 뎁스가 있을 것
- 에디터 페이지에서 링크를 걸고 엔터를 치면 링크 미리 보기가 나오지 않을 것
- 코드 블럭에 라인을 표시 해줄 것
- 코드 블럭에 하이라이트를 사용 가능 할 것
- 자동으로 ToC(Table of Contents)를 만들어 줄 것
- 블로그 내 검색을 하기 위해 스크롤을 이동하지 않았으면 좋겠다..
- 포스트에 이미지가 없으면 리스트에서 글만 출력 할 것
리스트 사용 시 뎁스가 있을 것
티스토리 블로그 자체의 버그인지 사용하고 있는 스킨의 css가 잘못 되었는지는 모르겠지만 <ol><li>를 중첩해서 써도 레벨 차이 없이 같은 선상에 위치한다.
-> 사용하고 있던 스킨의 버그 였던것 같다. 스킨 변경 후 내가 원하는 리스트가 표현이 된다.
에디터 페이지에서 링크를 걸고 엔터를 치면 링크 미리 보기가 나오지 않을 것
밑으로 가고 싶어 엔터를 치는데 자꾸 링크 미리 보기가 로딩 되면 미쳐 버릴 것 같다.
코드 블럭에 라인을 표시 해줄 것
기존 코드 블럭도 괜찮지만 코드 블럭에 라인이 들어가면 코드를 설명하기 더 편할 것 같다.
코드 블럭에 하이라이트를 사용 가능 할 것
지금은 코드가 단순히 <pre> 태그 안에 들어서 있어서 어떻게 하이라이트를 넣어야 할지 모르겠다.
찾음 ->
자동으로 ToC(Table of Contents)를 만들어 줄 것
블로그 내 검색을 하기 위해 스크롤을 이동하지 않았으면 좋겠다..
블로그의 주 용도가 내가 모르던걸 알게 될때 정리하고 나중에 까먹으면 다시 찾는 용도기 때문에 위키 처럼 텍스트에 컨텐츠 링크는 못 걸더라도 최소한 검색창이 항상 옆에 있었으면 좋겠다.
필수 사항은 아니다. 그냥 그랬으면 좋겠다..
포스트에 이미지가 없으면 리스트에서 글만 출력 할 것
대부분의 내용이 코드 관련이라 그림이 들어가는 경우가 드물다. 갤러리형 블로그 같은 경우는 포스트에 이미지가 들어가 있지 않으면 해당 영역을 없애는게 아니라 기본 이미지로 대체하는데 보기 싫다.
이상으로 대충 정리가 끝났다. 이제 블로그를 내 입맛에 맞게 바꿔 보자!!
다음 글 보기 : 티스토리 스킨 만들기 #2 - 베이스 스킨
부록 1. 스킨을 만들기 위해 필요한 개념
- 인덱스 링크 페이지, 퍼머 링크 페이지 :
티스토리 치환자 중 <s_article_rep>는 내부에 <s_index_article_rep>와 <s_permalink_article_rep>를 가진다.
<s_index_article_rep>는 인덱스 링크 페이지를 디스플레이 할 때, <s_permalink_article_rep>는 퍼머 링크 페이지를 디스플레이 할 때 각각 사용된다. 인덱스 링크 페이지란, 블로그의 제일 처음 화면이고, 퍼머 링크 페이지는 각 블로그 포스트들을 나타낸다.
일반적으로 인덱스 링크 페이지에서는 포스트 제목과 컨텐츠의 일부를 보여주고, 실제 포스트에 들어 갔을 때 상세한 내용을 보여 주는 것을 구분 하기 위해 사용된다.
퍼머링크가 뭔지 몰라 한참 헤메었다. - [CSS] CSS 개념 및 기본 문법
- [CSS] Selectors - 이거 모르면 아무것도 못한다.
- [CSS] 프로퍼티 - 이걸 알아야 색깔도 변경하고 위치도 변경한다.
- 티스토리 에디터에서 CSS 변경 후, 변경 사항 적용이 안될때 해결 방법
※ 나의 경우는 skin.html에서 css link를 하지 않아 적용이 안되었던것이었다.
부록 2. 참고 링크
- 티스토리 스킨 가이드 - https://tistory.github.io/document-tistory-skin/
- TOC(Table of Contents) - https://aneok.tistory.com/16
- 구글 머트리얼 아이콘 - https://fonts.googleapis.com/icon?family=Material+Icons
- 헤더 태그 <header> - www.everdevel.com/HTML/header-tag/
- 티스토리 코드 블럭에 라인 번호 붙이기 - https://aneok.tistory.com/157
- CSS viewport - aboooks.tistory.com/352
- 프로젝트 github : github.com/ChoiIngon/tistory-skin.git
