이 문서는 FastBoot v1.6 버전과 관련이 있습니다.
FastBoot의 메인화면에는 sidebar가 기본적으로 나오지 않게 되어 있습니다. 오늘은 간단한 수정으로 이 sidebar가 다시 나타나도록 해보겠습니다. 앞으로도 계속 그럴 것인데, FastBoot 메인화면을 수정하기 위해서는 크게 두 부분을 수정해야 합니다.
1. 메인 전용 CSS
2. fastboot_index.js
메인 전용 CSS 수정
1번의 경우에는 FastBoot 메인에서만 적용되는 CSS를 뜻합니다. CSS는 <head>부분의 다음부분에 한줄로 들어있습니다.
<script> /* 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] == '') { document.title='Readiz - Read easy'; rssLogFlag=1; document.write('<style>#sidebar,#content{display:none}#coverDiv{min-height:100%;margin-bottom:50px;display:block;}#coverDiv img{float:right; padding-left:10px; max-width:100%}#coverDiv .info p{margin-bottom:50px;}#coverDiv .col-md-12,#coverDiv .col-md-6{padding:10px}#coverDiv .col-md-3 img{float:none;display:block;margin:auto;padding:0;}#coverDiv .col-md-12 img{max-height:200px;}#coverDiv .col-md-6 img{max-height:150px;}#coverDiv p.des{font-size:12px;}#coverDiv .col-md-12 img{float:left;padding-left:0;padding-right:10px;}#coverDiv div.thumbImages{margin:30px 10px;height:185px;overflow:hidden;text-align:center;}#coverDiv div.thumbImages img{padding:0;margin:5px;float:none;}#coverDiv h5{margin-bottom:5px;}#coverDiv .pubDate{float:right;font-weight:bold;}#coverDiv .loading{height:1080px;}#coverDiv img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}#coverDiv img:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}#outer_btn_left,#outer_btn_right{display:none !important;}@media screen and (max-width: 767px) {#coverDiv .col-md-12 p.des, #coverDiv .col-md-6 p.des{display:none}#coverDiv .col-md-12 img, #coverDiv .col-md-6 img{padding:0;width:100%;height:auto;max-height:none;}}.contentPadding{background-color:#ffffff;padding:10px;margin:5px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);box-shadow: 0 1px 2px rgba(0, 0, 0, .2);}</style>') } </script>
document.write에서 <style>로 CSS를 삽입하고 있음을 볼 수 있습니다. 메인화면에 대해서만 다른 스타일을 적용하여, 사이드바와 본문을 감추고 있는 것입니다. 기존의 티에디션이 나타나지 않는 원인도 여기에 있습니다. 처음에 나오는 부분 보이시죠? #sidebar,#content{display:none} 으로 정의를 해두었기 때문에 사이드바가 나오지 않는 것입니다. 추가적으로 본문의 크기도 조절을 해야하고 여러가지 수정할 부분들이 더 있어서 sidebar가 나오고 왼쪽에 기존의 메인이 나오게 하는 형태의 CSS를 하나 작성해보았습니다.
document.write('<style>#leftContent{display:none;}#coverDiv{float:left;width:75%;margin-top:-15px;}@media screen and (max-width: 991px){#coverDiv{width:100%;margin-top:0}}#coverDiv{min-height:100%;margin-bottom:50px;display:block;}#coverDiv img{float:right; padding-left:10px; max-width:100%}#coverDiv .info p{margin-bottom:50px;}#coverDiv .col-md-12,#coverDiv .col-md-6{padding:10px}#coverDiv .col-md-3 img{float:none;display:block;margin:auto;padding:0;}#coverDiv .col-md-12 img{max-height:200px;}#coverDiv .col-md-6 img{max-height:150px;}#coverDiv p.des{font-size:12px;}#coverDiv .col-md-12 img{float:left;padding-left:0;padding-right:10px;}#coverDiv div.thumbImages{margin:30px 10px;height:185px;overflow:hidden;text-align:center;}#coverDiv div.thumbImages img{padding:0;margin:5px;float:none;}#coverDiv h5{margin-bottom:5px;}#coverDiv .pubDate{float:right;font-weight:bold;}#coverDiv .loading{height:1080px;}#coverDiv img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}#coverDiv img:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}#outer_btn_left,#outer_btn_right{display:none !important;}@media screen and (max-width: 767px) {#coverDiv .col-md-12 p.des, #coverDiv .col-md-6 p.des{display:none}#coverDiv .col-md-12 img, #coverDiv .col-md-6 img{padding:0;width:100%;height:auto;max-height:none;}}.contentPadding{background-color:#ffffff;padding:10px;margin:5px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);box-shadow: 0 1px 2px rgba(0, 0, 0, .2);}</style>')
위 코드가 제가 수정한 사이드바를 다시 복구하는 코드입니다. 이것으로 대체해주시면 사이드바가 복구됩니다.
혹시라도 이것을 한번 직접 수정하고 싶으신 분들을 위해 부연설명을 하면, 위 코드가 한줄로 되어 있어서 바로 읽기는 불편합니다. CSS Beautifier라는 것을 이용하면 좀 더 편하게 읽을 수 있습니다. 여러가지가 있지만 다음 사이트를 추천합니다.
위 사이트에서 돌려보시면 읽기 편한 형태의 CSS로 만들어줍니다. 이 상태로 수정을 하신 다음에 거꾸로 넣으실 때에는 다시 한줄로 만드셔야 합니다. 이것을 위해서는 CSS Minifier를 사용합니다.
추가적인 CSS수정이 필요하실 때에는 위 두 사이트를 이용하셔서 CSS를 변환하면 간단합니다.
fastboot_index.js 수정
fastboot_index.js의 경우 메인화면에서만 삽입되도록 설정된 JS파일입니다. 이 파일은 사용자 커스텀 편의를 위해 압축되어 있지 않으며 해당 파일을 열어보시면 코드를 바로 보실 수 있습니다.
if(rssLogFlag){
$.ajax({
url:"/rss",
dataType:"xml",
success:function(rss){
var tmpMediaContents = new Array;
var tmpMediaImages='';
$('#coverDiv .loading').remove();
$(rss).find('item').each(function() {
var link = $(this).children('link').text();
var title = $(this).children('title').text();
var des = $(this).children('description').text();
var date = $(this).children('pubDate').text();
var img = '';
date = date.substr(0, date.length - 6)
if(des.match("http://cfile(.*?)\"")!=null){
var a = des.match("http://cfile(.*?)\"")[0];
a = a.substring(0,a.length-1);
img = a;
a = a.replace('image', 'C80x80');
a = a.replace('original', 'C80x80');
tmpMediaImages+='<a href="'+link+'"><img src="' + a + '"/></a>';
}
if(tmpMediaContents.length==0) des = des.replace(/(<([^>]+)>)/ig,"").substring(0,800);
else if(tmpMediaContents.length<5) des = des.replace(/(<([^>]+)>)/ig,"").substring(0,600);
else des = des.replace(/(<([^>]+)>)/ig,"").substring(0,400);
tmpMediaContents.push('<a href="' + link + '"><img src="'+img+'"/><h5>'+title+'</h5></a>'+'<p class="des">'+des+'</p>'+'<h6 class="pubDate">'+date+'</h6><div class="clearfix"></div>');
})
for (i=0; i<tmpMediaContents.length; ++i) {
if(i==0) $('#coverDiv').append('<div class="col-md-12"><div class="contentPadding">'+tmpMediaContents[i]+'</div></div>');
if(i==1||i==3) $('#coverDiv').append('<div class="row">');
if(i>=1&&i<5) $('#coverDiv').append('<div class="col-md-6"><div class="contentPadding">'+tmpMediaContents[i]+'</div></div>');
if(i==1||i==3) $('#coverDiv').append('</div>');
}
$('#coverDiv').append('<div class="clearfix"></div><div class="thumbImages">'+tmpMediaImages+'</div>');
},
error:function() {
}
});
rssLogFlag = 0;
}
맨 마지막줄에 보시면 rssLogFlag = 0;이 추가되어 있는 것을 볼 수 있는데 이번 사이드바 예제에서는 이것만 추가해주시면 됩니다. fastboot_index.js의 구조는 나중에 좀 더 설명해드릴 것이고, 이번에는 그냥 본다는 생각으로만 보시면 될 것 같습니다. 커스텀하기 위해서는 제가 fastboot_index.js 파일을 따로 제공해드릴 것이기 때문에 구체적으로 알아야할 필요는 없으십니다.
이렇게 수정한 파일을 아래와 같이 업로드 하세요.
스크립트가 업로드 하신 직후에는 브라우저 캐싱 때문에 바로 적용이 되지 않는 것처럼 보입니다. 바로 적용되는 모습을 보고 싶으시다면 skin.html에서 아래 부분처럼 파일이름 끝에 ?와 아무 숫자를 붙이시면 새로운 파일로 브라우저가 인식해서 수정된 모습 바로 적용되는 것 보실 수 있습니다. (아래 코드부분은 skin.html의 거의 최하단에 위치합니다. 찾으실 때 참고하세요.)
<!--F FastBoot_Plugins -->
<script>if(rssLogFlag==1)document.write('<script src="./images/fastboot_index.js?0515"><\/script>');</script>
원래는 fastboot_index.js까지만 있었지만 제가 0515라는 숫자를 추가한 예입니다.
사이드바가 나타난 모습
위 두가지 수정사항을 적용하시면 위 그림처럼 메인화면에 사이드바가 다시 돌아온 것을 확인할 수 있습니다.
'반응형 티스토리 > FastBoot' 카테고리의 다른 글
| 사이드바 구글 애드센스 예제소스 (27) | 2014.06.10 |
|---|---|
| 데스크탑 상단 메뉴 바꾸기 / 블로그 제목에 홈링크 넣기 (39) | 2014.06.02 |
| 사이드바에 추천글 넣기 (26) | 2014.05.26 |
| 모바일 상단바 / 데스크탑 네비게이션바 색상 변경하기 (19) | 2014.05.23 |
| 메인화면 구성 마음대로 바꾸기 (66) | 2014.05.21 |
| [FAQ] 메인화면에 글이 뜨지 않아요 (37) | 2014.05.12 |
| 상단바 배경 넣기 / 상단바 색상 변경하기 (33) | 2014.05.09 |
| 데스크탑 상단바 개선 (22) | 2014.05.07 |
| 간단히 설치하는 반응형 스킨! FastBoot v1.6.2 (675) | 2014.05.06 |
| 티에디션 없애기 / Flipboard Layout (29) | 2014.04.18 |
