티스토리 반응형 스킨 | JB All In One > 설치 및 설정

JB All In One은 JB Skin 3 For Tistory로 이름을 바꾸어 개발합니다.

설치

티스토리 스킨 설치는 http://www.cmsfactory.net/node/10244를 참고하세요. 주의할 점은 images 폴더 안의 파일도 모두 업로드해야 한다는 것입니다.

모바일웹 스킨 설정

티스토리 관리자에서 모바일웹 스킨을 Off로 설정합니다.

스킨 옵션

skin.html 파일에 스킨 옵션 코드가 있습니다. HTML/CSS 편집에서 숫자 등 값을 변경 후 저장하면 적용됩니다.

티스토리 툴바

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

티스토리 툴바를 보여줄지 정합니다. 0은 보여주고, 1은 보여주지 않습니다.

블로그 제목

var jbUseTitleBlock = 1;          // No -> 0, Text -> 1, Logo -> 2

메뉴바 아래에 블로그 제목을 보여줄지 정합니다. 0은 보여주지 않고, 1을 글자로 보여줍니다. 이미지를 타이틀로 사용하려면 2로 정하고, 타이틀 이미지를 jbLogo.png로 저장 후 업로드하면 됩니다.

슬라이더 (0.7에서 변경)

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

슬라이더를 보여줄지 정합니다. 0은 항상, 1은 첫페이지에만 보여주고, 2는 보여주지 않습니다.

정적인 첫페이지

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

0으로 설정하면 첫페이지에 최신 글 목록이 아닌 정적인 페이지가 나옵니다.

정적인 페이지에서는 skin.html 파일의 다음 두 코드 사이의 내용을 보여줍니다.

<!-- Frontpage Start -->
<!-- Frontpage End -->

샘플 내용이 들어 있는데, 적절히 수정하여 사용하시면 됩니다.

SNS

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

사이트바에 트위터 아이콘을 사용할지 정합니다. 0은 사용하지 않고 1은 사용합니다.

var jbTwitterUrl = '#';

트위터 주소를 입력합니다. 페이스북, 구글플러스, 유투브, RSS도 같은 방법으로 설정합니다.

요약글

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

요약글 사용여부를 정합니다. 0을 사용, 1은 사용하지 않음입니다.

요약글 타입 (0.7에서 추가)

var jbExcerptType = 0;            // Magazine -> 0, RSS -> 1

요약글 모양 또는 방식을 정합니다. 0은 기본 모양이고, 1로 설정하면 RSS를 이용하여 요약글을 만듭니다.

RSS를 이용한 요약글은 첫화면에만 적용되며, 요약글이 있는 페이지 로딩 속도가 느리거나, 본문에 애드센스를 넣을 때 사용합니다.

RSS 요약글을 이용하는 순서는 다음과 같습니다.

  • 티에디션 사용
  • 티에디션 구성요소 한개만 남기고 모두 삭제 후 저장
  • jbExcerptType을 1로 설정

RSS 요약글 개수 (0.7.1에서 추가)

var jbExcerptNumber = 6;          // if jbExcerptType = 1

요약글 타입을 RSS로 했을 때, 몇 개를 보여줄지 정합니다. [글 설정 - 글환경 - 공개정책]의 RSS 갱신 개수보다 작거나 같게 정합니다.

첫화면은 RSS로 발행된 글을 이용하여 만듭니다. 따라서 글을 작성해도 RSS로 발행되지 않았다면 첫화면에 나오지 않습니다. 또한 RSS 갱신 글 개수는 스킨 옵션의 첫화면 글 출력 개수(jbExcerptNumber)보다 크거나 같아야 합니다.

글 공개/발행과 RSS 출력과의 관계는 http://www.cmsfactory.net/node/11714를 참고하세요.

요약글 길이

var jbExcerptSize = 100;

요약글에 출력될 글자수를 정합니다.

썸네일 크기

var jbThumbnailWidth = 150;
​var jbThumbnailHeight = 150;

요약글에 나오는 썸네일의 크기를 정합니다.

사이드바

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

사이드바 사용 여부를 정합니다. 0으로 설정하면 사이드바가 없는 1단 레이아웃이 됩니다.

디자인 옵션

var jbOptionPack = 0;             // 0 -> Default, 1 -> No Border, 2 -> Dark

0은 기본 모양입니다. 1로 설정하면 포스트나 사이드바의 테두리가 사라집니다. 2로 정하면 어두운 배경의 디자인으로 바뀝니다.

슬라이더

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

<a href="#"><img src="./images/slider-01.png" title="Lorem Ipsum Dolor" /></a>
<img src="./images/slider-02.png" />
<img src="./images/slider-03.png" />

빨간색 부분에 슬라이더로 사용할 이미지 경로를 넣으면 됩니다. a 태그로 링크를 걸 수 있고, title 속성으로 캡션을 넣을 수 있습니다. img 태그를 추가하여 더 많은 슬라이더를 추가할 수도 있습니다.

skin.html 아래에 다음의 코드가 있습니다.

// NivoSlider Option
$( '#jbSlider' ).nivoSlider( {
  effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
  slices: 15, // For slice animations
  boxCols: 8, // For box animations
  boxRows: 4, // For box animations
  animSpeed: 500, // Slide transition speed
  pauseTime: 5000, // How long each slide will show
  startSlide: 0, // Set starting Slide (0 index)
  directionNav: true, // Next & Prev navigation
  controlNav: true, // 1,2,3... navigation
  controlNavThumbs: false, // Use thumbnails for Control Nav
  pauseOnHover: true, // Stop animation while hovering
  manualAdvance: false, // Force manual transitions
  prevText: 'Prev', // Prev directionNav text
  nextText: 'Next', // Next directionNav text
  randomStart: false, // Start on a random slide
  beforeChange: function(){}, // Triggers before a slide transition
  afterChange: function(){}, // Triggers after a slide transition
  slideshowEnd: function(){}, // Triggers after all slides have been shown
  lastSlide: function(){}, // Triggers when last slide is shown
  afterLoad: function(){} // Triggers when slider has loaded
} );

슬라이더 효과를 변경할 수 있습니다.

2차 주소 사용시 추가할 코드

2차 주소를 사용한다면 http://www.cmsfactory.net/node/11660의 안내대로 몇 줄의 코드를 추가하는 것이 좋습니다.

Created on 2015-10-14 02:21 | Updated on 2016-03-20 01:15

이 글을 공유하기

Kakao

티스토리 스킨

Book navigation