부트스트랩 5 티스토리 스킨 만들기 10 -스킨 정보 파일 / 홈커버
스킨 정보 파일
스킨 정보 파일은 스킨 초기화 정보를
담고 있는 xml 파일입니다.
기본적인 분류를 하면 skin 태그 안에
- 스킨에 대한 정보는 information
- 저자 기본 정보 author
- 스킨 기본 설정 default
- 커버 정보인 cover
이렇게 들어간다고 보면 됩니다.
옵션을 하는 variables 태그도 있는데
그건 필수적이진 않으나까
추가 포스팅에서 다루도록 합니다.
여기서 기능적으로 default가
가장 중요합니다. cover는 실질적으로
skin.html 파일에 작성하기 때문에
index.xml 에서는 default를
중심으로 보겠습니다.
티스토리 기본 스킨들이나 또
티스토리 치환자 문서에 있는
기본 태그를 사용하면 무난합니다.
그냥 갖다가 써도 되지만
의미는 알고 있어야 하니까
아래 주석들을 참고합니다.
<!-- 스킨 기본 설정 s -->
<default>
<entriesOnPage>3</entriesOnPage>
<entriesOnList>3</entriesOnList>
<recentEntries>5</recentEntries>
<recentComments>5</recentComments>
<recentTrackbacks>5</recentTrackbacks> <!-- 트랙백 서비스 중단 -->
<itemsOnGuestbook>7</itemsOnGuestbook>
<tagsInCloud>15</tagsInCloud>
<sortInCloud>1</sortInCloud>
<expandComment>0</expandComment>
<expandTrackback>0</expandTrackback> <!-- 트랙백 서비스 중단 -->
<lengthOfRecentNotice>15</lengthOfRecentNotice>
<lengthOfRecentEntry>15</lengthOfRecentEntry>
<lengthOfRecentComment>15</lengthOfRecentComment>
<lengthOfRecentTrackback>10</lengthOfRecentTrackback> <!-- 트랙백 서비스 중단 -->
<lengthOfLink>30</lengthOfLink>
<showListOnCategory>2</showListOnCategory>
<showListOnArchive>1</showListOnArchive>
<commentMessage>
<none>댓글이 없습니다.</none>
<single>댓글 <span class="cnt">하나</span> 달렸습니다.</single>
</commentMessage>
<!-- 트랙백 서비스 종료 -->
<trackbackMessage>
<none>받은 트랙백이 없고</none>
<single>트랙백이 <span class="cnt">하나</span>이고</single>
</trackbackMessage>
<tree>
<color>000000</color>
<bgColor>ffffff</bgColor>
<activeColor>0000ff</activeColor>
<activeBgColor>eeeeee</activeBgColor>
<labelLength>20</labelLength>
<showValue>1</showValue>
</tree>
</default>
<!-- 스킨 기본 설정 s -->
<!-- 스킨 기본 설정 <default> 에 대한 설명 -->
<!--
*- 사이드바 그룹 -*
[블로그 관리자] - [사이드바]에서 변경가능
변경해도 xml 파일은 변경되지 않음
index.xml은 default 파일
recentEntries: 최근글 표시 개수
recentComments: 최근 댓글 표시 개수
recentTrackbacks: 트랙백 개수
- 현재 서비스 종료
tagsInCloud: 사이드바 태그 개수 (랜덤태그)
sortInCloud: 태그 정렬 방식 (1:인기, 2:이름, 3:랜덤)
expandComment: 댓글 방식 (0:감추기, 1:펼치기)
expandTrackback: 트랙백 방식 (0:감추기, 1:펼치기)
- 현재 트랙백 서비스 종료
lengthOfRecentNotice: 최근 공지사항 글자수
lengthOfRecentEntry: 최근 글 글자수
lengthOfRecentComment: 최근 댓글 글자수
- 이 세가지도 블로그관리 - 사이드바에서 변경가능
lengthOfRecentTrackback: 최근 트랙백 글자수
lengthOfLink: 링크 글자수
*- 홈화면 & 글 -*
entriesOnPage: 홈 화면 글 수
entriesOnList: 글 목록 글 수
showListOnCategory: 커버 미사용 홈 - 글목록 표현 (0:글, 1:목록, 2:글+목록)
showListOnArchive: ?
commentMessage: 댓글 메시지
*- 카테고리 설정 -*
tree
color: 카테고리 글자색
bgColor: 카테고리 배경색
activeColor: 선택시 글자색
activeBgColor: 선택시 배경색
labelLength: 카테고리 글자 수
showValue: 카테고리 글 수 표현(0:숨김, 1:보임)
contentWidth: 콘텐츠영역 가로 사이즈
*- 방명록 그룹 -*
itemsOnGuestbook: 방명록 개수
-->
default xml의 값 중에는 블로그
관리자에서 변경할 수 있는게 꽤 됩니다.
쉽게 말하면 xml 값을 기초로
초기 블로그 관리자 값들이
결정되는 것이라 보면 됩니다.
티스토리 치환자 구조가 나온 것은
꽤 오래전 일이라서 지금은 사용을
안하는 트랙백이라던가, 과거의
웹기술이 남아 있습니다.
삭제해도 문제는 없겠지만
혹시 모르니까 그냥 두는 이유는
레가시 코드는 왜 있는지 잘
모르기 때문에 그냥 내버려 둡니다.
홈커버
index.xml 에서 홈커버를 선언합니다.
실제 구현은 skin.html 에서 합니다.
여기서는 name와 label이 중요합니다.
여기의 name이 <s_cover> 태그의
name 속성으로 들어갑니다.
또 label은 블로그 관리자 스킨편집에서
커버 선택하는 콤보박스에 나옵니다.
프로그래밍 언어라면 변수나
객체를 선언하는 것과 비슷합니다.
이 커버를 만들어서 쓸거니까
구체적인 내용은 skin.html의
name 이 일치하는 것을 참조한다 -
와 같은 뜻 입니다.
<!-- 커버 s -->
<cover>
<!-- 커버 1 : 썸네일 기본 -->
<item>
<name>cover-thumbnail-basic</name>
<label>
<![CDATA[ 썸네일 리스트 기본 ]]>
</label>
<description>
<![CDATA[ 썸네일과 제목, 요약으로 리스트를 구성 ]]>
</description>
</item>
<!-- 커버 2 : 카드 기본 -->
<item>
<name>cover-card-basic</name>
<label>
<![CDATA[ 카드 리스트 기본 ]]>
</label>
<description>
<![CDATA[ 부트스트랩 5 카드로 썸네일, 제목 리스트 ]]>
</description>
</item>
<!-- 커버 : 텍스트 리스트 -->
<item>
<name>cover-text-list</name>
<label>
<![CDATA[ 텍스트 리스트 기본 ]]>
</label>
<description>
<![CDATA[ 글의 제목만으로 구성한 기본 텍스트 리스트 ]]>
</description>
</item>
<!-- 커버 : 테스트용 임시 커버 -->
<item>
<name>cover-temp-list</name>
<label>
<![CDATA[ 임시 커버 ]]>
</label>
<description>
<![CDATA[ 테스트용 임시 커버 ]]>
</description>
</item>
</cover>
<!-- 커버 e -->
홈커버 구현
아래 치환자를 참고하여 구현합니다.
홈 커버 · GitBook (tistory.github.io)
홈 커버 · GitBook
홈 커버 홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다. : 커버 그룹 치환자 : 개별 커버 표시 : 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지
tistory.github.io
홈커버는 홈화면 메인에 띄울 내용입니다.
아래와 같이 반응형 썸네일을 만들거나,
원하는데로 수정할 수 있습니다.
아래와 같이 두개 이상의 홈커버를
적용해서 블로그 홈화면을
예쁘게 개선할 수 있습니다.
부트스트랩을 쓰니까
당연히 반응형이지요.
skin.html 의 홈커버 예시 코드입니다.
여러 스타일을 입맛대로 만들 수 있습니다.
s_cover 의 name 속성에
xml 에 정의한 name을 입력하면
스킨편집의 커버에서 사용가능합니다.
홈커버는 만들기 나름이기 때문에
세부적인 설명을 덧붙이지는 않겠습니다.
부트스트랩의 카드 썸네일과
그리드 카드를 사용해서 만들었습니다.
시간이 그렇게 많이 안걸려서
앞으로도 가끔 부트스트랩으로
홈커버를 만들 수 있을 것 같습니다.
<!-- 홈커버 cover s -->
<s_cover_group>
<!-- cover repeat s -->
<s_cover_rep>
<!-- 기본 썸네일 리스트 s -->
<s_cover name='cover-thumbnail-basic'>
<p>
커버 타이틀:
</p>
<s_cover_item>
<s_cover_item_article_info>
<div class="card mb-3 shadow-sm">
<div class="row g-0 bg-light">
<div class="col-sm-4 col-md-3 col-xxl-2 bg-light">
<s_cover_item_thumbnail>
<div class="custom-frame">
<img src="" alt="thumbnail" class="rounded"
onclick="javascript:location.href='';">
</div>
</s_cover_item_thumbnail>
</div>
<div class="col-sm-8 col-md-9 col-xxl-10 align-self-center">
<div class="card-body pb-0 pt-1">
<h2 class="card-title custom-line-clamp-1">
<a href="">
</a></h2>
<hr>
<p class="card-text custom-line-clamp-2">
</p>
<p class="text-end custom-admin">
<a href="">
</a>
<span>
|
</span>
</p>
</div>
</div>
</div>
</div>
</s_cover_item_article_info>
</s_cover_item>
</s_cover>
<!-- 기본 썸네일 리스트 e -->
<!-- 테스트용 커버 s -->
<s_cover name='cover-temp-list'>
<p>
커버 타이틀:
</p>
<!-- s_cover_item이 반복 구간 -->
<!-- 그리드 썸네일 커버 s -->
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
<s_cover_item>
<div class="col">
<div class="card just-frame">
<s_cover_item_thumbnail>
<img src="" class="card-img-top"
style="max-height: 250px;" alt="...">
</s_cover_item_thumbnail>
<div class="card-body pt-2">
<h2 class="card-title custom-line-clamp-1 m-0">
<a href="">
</a>
</h2>
<hr>
<p class="card-text custom-line-clamp-2"></p>
</div>
</div>
</div>
</s_cover_item>
</div>
</div>
<!-- 그리드 썸네일 커버 e -->
</s_cover>
<!-- 테스트용 커버 e -->
</s_cover_rep>
<!-- cover repeat e -->
</s_cover_group>
<!-- 홈커버 cover e -->
전체 스킨코드
