티스토리 스킨 | JB Portfolio > 설명서 > 설치 및 설정

설치

티스토리 스킨 설치는 http://www.cmsfactory.net/node/10244를 참고하세요.

주의할 점은 images 폴더 안의 파일도 모두 업로드해야 한다는 것입니다.

모바일웹 스킨 설정

모바일에서도 JB Portfolio를 사용하려면 모바일웹 스킨을 OFF로 설정해야 합니다.

첫페이지 구성

JB Portfolio의 첫화면은 Slogan, Frontpage, 최신 글, 사이드바로 구성되어 있습니다.

Slogan

skin.html의 Skin Options에 다음과 같은 코드가 있습니다.

var jbUseSlogan = 1;                // 0 -> All, 1 -> Frontpage, 2 -> No

0이면 모든 페이지에, 1이면 첫페이지에만 Slogan을 출력합니다. 2로 설정하면 출력하지 않습니다.

출력하는 내용은 skin.html에 있습니다.

<!-- Slogan - Start-->
<div id="jb-slogan">
  XXX
</div>
<!-- Slogan - End-->

XXX에 해당하는 부분이 Slogan으로 출력됩니다. 수정하실 땐 XXX 부분만 수정하셔야 합니다. 만약 Slogan을 사용하지 않는다면 위 코드를 전체를 삭제하는 게 좋습니다.

Frontpage

skin.html의 Skin Options에 다음과 같은 코드가 있습니다.

var jbUseFrontpage = 0;             // 0 -> Yes, 1 -> No

0이면 출력하고, 1이면 출력하지 않습니다.

출력하는 내용은 skin.html에 있습니다.

<!-- Frontpage - Start -->
<div id="jb-frontpage">
  XXX
</div>
<!-- Frontpage - End -->

XXX에 해당하는 부분이 Frontpage로 출력됩니다. 수정하실 땐 XXX 부분만 수정하셔야 합니다. 만약 Frontpage를 사용하지 않는다면 위 코드를 전체를 삭제하는 게 좋습니다.

최근 글

최근 글은 모든 페이지에 나오는 구성 요소입니다. 티스토리 치환자 중 최근 글을 변형한 것으로, 한 페이지에 한 번만 사용할 수 있어 사이드바 모듈에는 최근 글이 없습니다.

출력 갯수는 티스토리 관리자의 [화면 설정 - 화면출력]의 최근 글에서 정할 수 있습니다.

사이드바

티스토리 관리자의 [사이드바]에서 추가한 모듈이 출력되는 곳입니다. 왼쪽부터 차례대로 사이드바 1, 사이드바 2, 사이드바 3입니다.

첫페이지 설정하는 방법

jbUseFrontpage의 값을 1로 설정합니다.

var jbUseFrontpage = 1;             // 0 -> Yes, 1 -> No

티스토리 관리자 [화면 설정 - 티에디션]에서 [사용하기]를 클릭합니다.

블로그로 이동하여 티에디션 구성 요소를 하나만 남기고 저장합니다. (다 없애고 저장하면 티에디션이 적용되지 않습니다.)

jbUseFrontpage의 값을 0으로 설정합니다.

var jbUseFrontpage = 0;             // 0 -> Yes, 1 -> No

썸네일 비율 설정

skin.html의 Skin Options에 다음과 같은 코드가 있습니다.

var jbSearchThumbRatio = 1;         // 0 -> 1:1, 1 -> 4:3, 2 -> 16:9

최근 글 목록과 카테고리 등 검색 결과에 나오는 썸네일의 가로 세로 비율을 정합니다. 0이면 1:1, 1이면 4:3, 2이면 16:9 비율의 썸네일이 출력됩니다.

출력되는 이미지는 포스트에서 설정한 대표이미지입니다.

SNS 설정

SNS 아이콘은 skin.html에 있는 다음의 코드로 만듭니다.

<li class="jb-sns jb-sns-twitter"><a href="#"><i class="fa fa-twitter fa-fw"></i></a></li>
<li class="jb-sns jb-sns-facebook"><a href="#"><i class="fa fa-facebook fa-fw"></i></a></li>
<li class="jb-sns jb-sns-google-plus"><a href="#"><i class="fa fa-google-plus fa-fw"></i></a></li>
<li class="jb-sns jb-sns-instagram"><a href="#"><i class="fa fa-instagram fa-fw"></i></a></li>
<li class="jb-sns jb-sns-youtube"><a href="#"><i class="fa fa-youtube fa-fw"></i></a></li>
<li class="jb-sns jb-sns-vimeo"><a href="#"><i class="fa fa-vimeo-square fa-fw"></i></a></li>
<li class="jb-sns jb-sns-linkedin"><a href="#"><i class="fa fa-linkedin fa-fw"></i></a></li>
<li class="jb-sns jb-sns-pinterest"><a href="#"><i class="fa fa-pinterest fa-fw"></i></a></li>

주소는 모두 #으로 되어 있습니다. #대신 자신의 SNS 주소를 입력하고, 필요 없는 SNS는 삭제하세요.

FontAwesome

Frontpage나 SNS에 있는 아이콘은 FontAwesome을 이용하여 만들었습니다.

사용법은 http://www.cmsfactory.net/node/10314를 참고하세요.

Created on 2015-06-10 03:02 | Updated on 2016-05-10 02:48

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Book navigation