간단히 설치하는 반응형 스킨! FastBoot v1.6.2

비교적 오랜만에 새로운 기능들을 가지고 판올림합니다. 조금 실험적인 기능도 추가되어 있습니다. 여러 글들을 찾아다니시면서 설치하는 수고를 덜어드리고자, 이번에는 최대한 핵심만 짚어서 FastBoot v1.6의 특징부터 설정 과정까지 한번에 소개해드리려고 합니다.

14/05/06: 몇가지 수정사항 판올림하여 1.6.1로 다시 올립니다. 글 하단부에서 수정사항 확인하실 수 있습니다.

16/02/17: 1.6.2 마이너 패치 실시합니다. 티스토리 운영팀의 권고를 받아 하는 간단한 패치입니다. 역시 글 하단부에서 수정사항 확인하세요. (2월 17일 10시에 재 패치 실시합니다. 파일 다시 적용시켜주시면 감사드리겠습니다)

FastBoot 1.6 버전 주요 특징

티에디션 없는 Flipboard 스타일의 메인화면

티에디션이 요즘 웹과는 잘 안맞는 기능으로 생각이 되는 기능입니다. 속도도 느리고 반응형 스킨과의 궁합도 좋지 않습니다. 본 블로그에는 이를 해결하고자 티스토리 반응형 스킨에 어울리는 티에디션 셋팅법에 관해서 여러차례 포스팅 했었고, 이는 여전히 사용가능합니다. 하지만 장기적으로는 설정하기 힘든 이런 티에디션을 계속 쓰는 것보다, 스킨을 사용하는 분께서 아무런 설정 없이도 메인화면을 구성하실 수 있게 하는게 낫지 않냐는 생각을 했습니다. 위 스크린샷은 아무런 설정없이도 FastBoot 스킨을 설치하시게 되면 기본적으로 보실 수 있는 메인 화면입니다. 현재는 한가지 템플릿으로만 메인 화면을 사용하실 수 있습니다만 차후에 여러 포스팅을 해서 다른 형태의 Flipboard로 사용하실 수 있게 해드리겠습니다. 이 기능 추가는 티에디션을 사용하지 않고도 설정없이 메인화면을 꾸민다는 것에 의의를 두셨으면 합니다. 밑에 설명하겠습니다만 마음에 들지 않으시면 손쉽게 이 기능을 끄고 기존의 티에디션을 사용하실 수 있습니다.

카테고리와 Locator를 합친 새로운 상단바

v1.5부터 있던 Locator는 좌측에, 카테고리를 우측에 배치하여 새로운 상단바를 만들었습니다. 데스크탑 화면에서만 등장하며, 모바일에서는 좌측의 Offcanvas로 카테고리에 접근이 가능합니다.

스크롤시 나타나는 고정 상단바

데스크탑 모드에서 상단바가 스크롤시 고정되게 하였습니다. 요즘 웹에서 자주 나타나는 기능이라서 어색하지는 않으실 겁니다. 모바일에서는 이전과 동일한 상단바가 나타나지만 PC에서만 스크롤시 고정되는 상단바를 나타나게 하였습니다.

기본 설정

설치하기

설치는 기본적인 내용이기 때문에 링크로 대체합니다. 주의하실 점은 image 폴더에 있는 파일들도 올리셔야 한다는 것입니다.

2014/03/08 - [반응형 티스토리/FastBoot] - FastBoot v1.3 반응형 스킨 블로그에 적용하기

모바일스킨 OFF

위 링크에 같이 설명되어 있습니다. 반응형 스킨이기 때문에 모바일 스킨이 켜져있으면 의미가 퇴색됩니다. 물론 경우에 따라서 모바일스킨을 그대로 쓰고 싶으신 분이 계시다면 그대로 쓰셔도 무방합니다.

화면출력 '목록만' 설정

갤러리형으로 쓰시거나, 목록에 이미지를 출력하는 List 형태로 카테고리를 나타나게 하고 싶으시다면 화면출력을 '목록만' 으로 설정하셔야 합니다.

추가 설정

티에디션 사용하기

기본적으로 1.6버전부터 티에디션을 사용설정 하셔도 티에디션을 무시합니다. 기존의 티에디션을 사용하시려면 다음처럼 skin.html의 head부분에 있는 FastBoot 설정 부분의 변수를 수정하시면 됩니다.

	
/* 
---------- T-Edition Enable
			false: Use FastBoot Index (Default)
			true: Use T-edition
-------------------------------
*/
var f_enableTedition = false;

f_enableTedition이 false로 되어 있고, 이것을 true로 수정하시면 기존의 티에디션을 계속 이용하실 수 있습니다. false로 그대로 두시면, FastBoot이 지원하는 Index가 출력됩니다. 이는 RSS를 사용하여 페이지를 구성하는 것이며, 아무런 설정 없이도 Flipboard형태의 메인을 사용하실 수 있는 기능입니다. 이것의 다른 탬플릿은 차후에 하나씩 추가해나갈 예정입니다.

카테고리 갤러리형에서 다른 것으로 사용하기

갤러리형

리스트형

심플 타이틀형

기본적으로 갤러리형 카테고리가 적용이 되어 있습니다. 기본값을 바꾸실 수 있고 이 설정 역시 skin.html의 head부분에 들어 있습니다. 아래 부분입니다.

	
/* ----------------- FastBoot Setting Variables ---------------*/
/* 
---------- Category Setting 
			0: Gallery (Default)
			1: List
			2: Simple Title
-------------------------------
*/
var f_categoryDefaultMode = 0;

코드를 보신다면 별다른 설명이 필요할까 싶지만, f_categoryDefaultMode의 값의 수정하시면 됩니다. 0이 갤러리형이고, 1이 리스트형, 2가 심플타이틀형입니다. 위 숫자를 바꾸시면 기본값이 변경됩니다.

주요 스펙

0. 반응형 스킨

FastBoot은 반응형 스킨입니다. 모바일, 태블릿, PC 가리지 않고 블로그를 기기에 최적화시켜 출력시켜 줍니다.

1. IE7이상 지원

IE7은 읽기 전용이며 레이아웃은 조금 달라집니다. 덧글 쓰기 및 일부 기능은 제한됩니다. IE8부터는 레이아웃이 달라지는 것 없이 똑같이 지원됩니다.

2. Offcanvas 지원

Offcanvas는 특정 버튼을 누르면 화면한쪽이 밀러나면서 메뉴가 나타나는 기능입니다. 별다른 설정 없이도 Offcanvas기능이 지원되어 모바일에서 편하게 블로그를 볼 수 있습니다.

3. 갤리리형 카테고리 지원

기본적으로 갤러리형 카테고리를 지원하여 카테고리 화면에서 썸네일을 보실 수 있습니다.

데모 사이트 및 다운로드, 기타 사항

Lisence

이 스킨의 최대 목표는 모바일 지원이 좋지 않은 티스토리에 널리 퍼져나가서, 티스토리가 더더욱 Awesome한 서비스가 되도록 하는 것입니다. 검색엔진 순위에서 티스토리가 네이버 블로그 등에 밀리고 있는데, 이러한 상황에서도 티스토리가 1등 블로그가 되었으면 하는 바람에서 제작중인 스킨입니다. 따라서 스킨이 퍼지기 위해서라도 스킨 적용을 하시는 분께서는 다른 접속자가 자신의 스킨을 어디서 받을 수 있는지 명기하셔야 합니다. Footer를 수정하실 때, 특히 이점 지켜주셨으면 합니다. 아무런 대가없이 무료로 배포하고 있는 스킨인 만큼, 이 부분 만큼은 꼭 지켜주십시오.

FastBoot은 티스토리 정복이 목표인 스킨입니다. 티스토리를 정복하여 아예 티스토리 블로그 서비스 자체가 반응형 서비스를 구현할 때까지 버전업은 계속됩니다. 이를 위한 의견 표출의 방법이 반응형 스킨의 적용이라고 생각합니다. 여러분들께서 FastBoot을 적용하고, 개선되어야 할 점을 피드백 해주시고, 스킨을 주변에 알려주는 것이 저에게 가장 큰 힘을 보태주실 수 있는 방법입니다. 지속적인 성원 해주시는 분들께 감사의 말씀드립니다.

1.6.1 마이너 업데이트

한번에 완벽하게 업로드 해야 하는데 항상 그렇게 되지를 못하네요. 이미 1.6을 받으신 분들은 새로 받으실 필요 없고 아래 부분을 수정해주시면 됩니다. 1.6.1을 받으신 분들은 아래 부분을 적용하실 필요 없습니다.

1. Offcanvas 스크롤 문제

아래 부분을 style.css에 추가해주세요.

	
/* Offcanvas Scroll */
#lnav>ul {
  height:100%;
  overflow-y:auto;
}

2. Locator가 제대로 출력되지 않는 경우

Locator는 블로그 제목 아래부분에 현재 문서의 위치를 표시해주는 부분입니다. 이 부분이 특수문자가 카테고리에 포함되어 있는 경우 제대로 출력되지 않는 문제가 있습니다. 해당되는 분만 수정해주시면 됩니다. skin.html에 article부분에 다음과 같은 부분이 있습니다.

(current_category로 찾아가시면 편합니다)

	
<a id="current_category" class="label-default label" href="[$$_article_rep_category_link_$$]" style="display:inline">
    <i class="fa fa-folder-open"></i>
    [$$_article_rep_category_$$]
    <span class="caret"></span>
</a>

이 부분을 아래처럼 바꿔주세요.

	
<a class="label-default label" href="[$$_article_rep_category_link_$$]" style="display:inline">
    <i class="fa fa-folder-open"></i>
    [$$_article_rep_category_$$]
    <span class="caret"></span>
</a>
<div id="current_category" class="hidden">[$$_article_rep_category_$$]</div>

$$는 ##로 바꿔주셔야 하구요(티스토리 치환자라서 글쓰기로 제가 이 글에 집어넣으면 출력이 안되어 ##를 $$로 표현하였습니다) <a>태그의 id부분을 삭제하고, 새로 <div>태그에 카테고리를 넣는 방식으로 수정한 것입니다.

이 외에 고정 상단 네비게이션의 아이콘을 우측으로 옮기는 수정사항이 있었는데 이는 디자인적인 문제라서 설명에서는 생략합니다.

1.6.2 마이너 업데이트

~~티스토리 운영팀으로부터 권고받은 보안 패치입니다. 아래 부분 한줄 수정해주시면 됩니다. 원 소스 기준 43번째 줄입니다.~~


/* FastBoot Index by Readiz */
var urlAddr = decodeURIComponent(location.href);urlAddr = urlAddr.replace('http://','').replace('https://','');urlAddr = urlAddr.split('#')[0]; urlAddr = urlAddr.split('?')[0];
var url = urlAddr.split('/');
var rssLogFlag;
if(!f_enableTedition && url[1] == '') {

~~/* FastBoot Index by Readiz */ 바로 다음줄 수정해주시면 됩니다. 아래처럼요..~~

	
/* FastBoot Index by Readiz */
var urlAddr = escape(decodeURIComponent(location.href));urlAddr = urlAddr.replace('http%3A//','').replace('https%3A//','');urlAddr = urlAddr.split('%23')[0]; urlAddr = urlAddr.split('%3F')[0];
var url = urlAddr.split('/');
var rssLogFlag;
if(!f_enableTedition && url[1] == '') {

16/02/17: 위 사항 적용시 Tag 탭에서 한글 태그로 진입할 때 Locator (카테고리 좌측에 나오는 것)이 깨지는 문제가 있습니다. 상단 사항 수정하신 분 있으시면 원상복구 부탁드립니다.

대신에 fastboot.min.js 업데이트 된 하단 파일을 스킨 폴더에 덮어씌워주시면 됩니다.

fastboot.min.js

(업데이트 방법: Admin -> 꾸미기 -> HTML/CSS 편집 -> 파일 업로드 에서 상단 파일 업데이트)

[데스크탑 우상단 메뉴 오류 관련]

16/02/18: Tistory 측에서 메뉴바 위치를 변경하여 하단 코드 수정 필요합니다. (http://blog.readiz.com/236 글 수정부분 반영)

아래 코드를 찾아주세요.

	

	<!--F Login Button Mapping -->
	<script>
		var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
		tmpLogin.className = "";
		tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그아웃",'<i class="fa fa-unlock fa-fw"></i> Logout');
		tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그인",'<i class="fa fa-lock fa-fw"></i> Login');
		document.getElementById("loginout_append").innerHTML = tmpLogin.outerHTML;
	</script>

기존 코드 지워주시고, skin.html (혹은 HTML 수정 들어가셔서) 에 아래 처럼 추가시켜 주세요. (위치이동 + 약간의 코드 수정이 있습니다)

	
	<!--F OffCanvas -->
	<div id="lnav"></div>
	<div class="hidden" id="category_tmp"> 분류 전체보기 (229) 
   반응형 티스토리 (85) 
   Tistory (40) 
 FastBoot (45) 


 연재 (31) 
   Mobile (15) 
 오토핫키 (7) 
 정규표현식 (2) 
 Project Jarvis (7) 


 Creation (56) 
   Programming (25) 
 Design (20) 
 Python (6) 
 Internet Service (5) 


 Study and Tip (40) 
   Study (17) 
 Common (23) 
 MyPin (0) 


 Enjoy (17) 
   Music (10) 
 Video (2) 
 9gag Best (5) 





</div>
	<script>if (ielt9 == 1) window.jQuery || document.write('<script src="./images/jquery-1.11.0.min.js"><\/script>');
	else if(ielt9 == 0) window.jQuery || document.write('<script src="./images/jquery-2.1.0.min.js"><\/script>');</script>
	<!--F Login Button Mapping -->
	<script>
	$(document).ready(function(){
		var tmpLogin = document.getElementsByClassName("tt_menubar_logout")[0].getElementsByTagName("a")[0];
		tmpLogin.className = "";
		tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그아웃",'<i class="fa fa-unlock fa-fw"></i> Logout');
		tmpLogin.innerHTML = tmpLogin.innerHTML.replace("로그인",'<i class="fa fa-lock fa-fw"></i> Login');
		document.getElementById("loginout_append").innerHTML = tmpLogin.outerHTML;
	});
	</script>
	<!--F FastBoot_Plugins -->
	<script>if(rssLogFlag==1)document.write('<script src="./images/fastboot_index.js"><\/script>');</script>
        <script src="./images/fastboot.min.js"></script>
        <!--[if (gt IE 8)|!(IE)]><!--><script src="./images/fastboot_offcanvas.min.js"></script><!--<![endif]-->
	<div id="toTop" onclick="window.scrollTo(0, 0);"><i class="fa fa-angle-double-up fa-2x"></i></div>
</body></html>

또는 이동시키시지 마시고 삭제만 해주셔도 자바스크립트 에러는 해결됩니다. (티스토리 메뉴바 사용 안하시는 분들은 그냥 지워주시면 됩니다)

오랜만에 글 작성하는데 어썸한 패치가 아니라 이런 마이너한 패치를 하게 되네요, 부족하지만 아직까지 제 스킨 사용 중인 분들께 감사드립니다.

저작자표시 비영리 변경금지

'반응형 티스토리 > FastBoot' 카테고리의 다른 글

메인화면 구성 마음대로 바꾸기 (66)	2014.05.21
메인화면 커스텀 기초 - 사이드바 나타나게 하기 (59)	2014.05.15
[FAQ] 메인화면에 글이 뜨지 않아요 (37)	2014.05.12
상단바 배경 넣기 / 상단바 색상 변경하기 (33)	2014.05.09
데스크탑 상단바 개선 (22)	2014.05.07
티에디션 없애기 / Flipboard Layout (29)	2014.04.18
블로그를 사이트로 보이게하는 Second Navigation (19)	2014.04.11
FastBoot 색상 세부 조정 중 / FastBoot 앞으로의 방향 (25)	2014.04.09
[임시] FastBoot Offcanvas 상하 스크롤 만들기 (6)	2014.04.06
사이드바와 본문 크기/위치 조절하기 (Bootstrap 기반 스킨) (41)	2014.04.05

Readiz - Read easy

간단히 설치하는 반응형 스킨! FastBoot v1.6.2

티에디션 없는 Flipboard 스타일의 메인화면

카테고리와 Locator를 합친 새로운 상단바

스크롤시 나타나는 고정 상단바

설치하기

모바일스킨 OFF

화면출력 '목록만' 설정

티에디션 사용하기

카테고리 갤러리형에서 다른 것으로 사용하기

FastBoot v1.5.1(참고)

데모사이트

다운로드

1.6.1 마이너 업데이트

1.6.2 마이너 업데이트

'반응형 티스토리 > FastBoot' 카테고리의 다른 글

티스토리툴바

간단히 설치하는 반응형 스킨! FastBoot v1.6.2

티에디션 없는 Flipboard 스타일의 메인화면

카테고리와 Locator를 합친 새로운 상단바

스크롤시 나타나는 고정 상단바

설치하기

모바일스킨 OFF

화면출력 '목록만' 설정

티에디션 사용하기

카테고리 갤러리형에서 다른 것으로 사용하기

FastBoot v1.5.1(참고)

데모사이트

다운로드

1.6.1 마이너 업데이트

1.6.2 마이너 업데이트

'반응형 티스토리 > FastBoot' 카테고리의 다른 글

'반응형 티스토리/FastBoot' Related Articles

티스토리툴바