메인화면 커스텀 기초 - 사이드바 나타나게 하기

Posted by Readiz
2014.05.15 22:37 반응형 티스토리/FastBoot

이 문서는 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='[##_title_##]';
	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라는 것을 이용하면 좀 더 편하게 읽을 수 있습니다. 여러가지가 있지만 다음 사이트를 추천합니다.


http://cssbeautify.com/



 위 사이트에서 돌려보시면 읽기 편한 형태의 CSS로 만들어줍니다. 이 상태로 수정을 하신 다음에 거꾸로 넣으실 때에는 다시 한줄로 만드셔야 합니다. 이것을 위해서는 CSS Minifier를 사용합니다.



http://cssminifier.com/






 추가적인 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라는 숫자를 추가한 예입니다.




사이드바가 나타난 모습





  위 두가지 수정사항을 적용하시면 위 그림처럼 메인화면에 사이드바가 다시 돌아온 것을 확인할 수 있습니다.

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 이전 댓글 더보기
  2. "다른 블로그에도 Readiz의 썸네일 불러오기 기능을 적용해 보기 위해
    ajax 소스를 빌려서 사용해 보려고 합니다. 부디 허락해 주시옵소서...."

    일단 지금 제 블로그 하단에 적용을 해보았는데요.
    http://music666.tistory.com/11307
    최신글 썸네일을 50개씩이나 뿌릴수 있도록 소스를 잘 꾸며주셔서
    큰 어려움 없이 적용해 보았습니다.
    먼저 양해를 구하고 사용했어야 하는데 될지 않될지 확신이 없어서 적용부터 먼저 해보았네요.
    FastBoot스킨 이외의 다른 스킨 사용자분들도 썸네일 기능을 이용하실수 있도록 했으면 좋겠습니다.
    • 말씀만 해주신다면야 상관없습니다. ㅎㅎ
      잘 꾸미셨네요..
    • 소스를 워낙 간결하고 알아보기 쉽게 만들어 주셔서 거의 그대로 적용하였습니다.
      전부터 장착하고 싶던 기능이라 욕심을 내서 썸네일을 50개씩이나 불러오려니 조금 느려지긴 했지만 대 만족입니다.
      감사히 잘 쓰겠습니다.
  3. 위의 두 누리집 쓸만하겠네요 ^^ 제가 직접 하면 알겠는데 글로 보니 어렵네요 ㅠㅠ 자바스크립트라 그런가;;
    • ㅎㅎ 링크를 누리집이라고 하시는군요...
    • 웹 사이트가 누리집입니다. 순우리말이 웃기긴 하겠지만.. 우리나라에서 우리말로 표현할 수 있는 부분이라 말이죠. 쓰다보니 습관화되었네요 ㅎㅎ
  4. 안녕하세요?
    좋은 스킨 공유해주셔서 고맙습니다.

    알려주신 방법대로 하니 메인페이지에 사이드바도 나오고 Writings에 썸네일 이미지도 잘 나오더라구요.
    그런데 화면 분할을 8:4로 해서 사이드바의 폭을 넓히니까 메인페이지 사이드바 Writings의 썸네일 이미지가 안 나오네요. ㅠㅠ
    이 분야 지식이 없다 보니까 원인을 못 찾고 있습니다. 도와주세요...

    아, 그리고 메인페이지 본문 영역의 길이가 사이드바에 비해 너무 짧아서 모양이 좀 이상하다고 생각되는데요, 메인페이지에 보여지는 포스팅의 개수를 늘리려면 어떻게 해야 하는지요?

    감사합니다.
    • 음 말씀하신 문제는 글쎄요.. 일단 적용하신 모습을 봐야 알 것 같은데요. 지금은 확인이 되질 않네요.
      메인페이지 포스팅 늘리는 법은 차후에 올리도록 하겠습니다.. 빨리 올렸으면 좋겠네요 저도 ㅠㅠ
    • 이미지가 안 나와 사이드바를 뺐었는데, 잠시 동안 메인페이지에 사이드바를 보이게 해두겠습니다.
      한번 봐주세요.
      고맙습니다.^^
    • 본문에 있는 fastboot_index.js 수정 후 업로드를 안하신 것 같습니다. 지금 확인해보니까 수정을 안하신 것으로 나오는데요..
    • 고맙습니다. 해결했습니다.
      fastboot_index.js 파일에 rssLogFlag = 0; 를 추가하긴 했었는데, 좌측에서 한 tab 띄우지 않은게 원인이었던 것 같습니다. 띄우고 다시 업로드 하니까 되네요. 음,,, 한 tab 띄우는게 어떤 역할을 하는지 저는 알 수가 없네요...ㅠㅠ
      도움 주셔서 감사합니다.^^
  5. 죄송한데요~ 블로그 홈화면 맨아래 페이지에 skin info와 tistory link 이부분이 한줄로 나오게 하려면 어떻게 해야하나요..?
    블로그 스킨에 너무 지식이 없어서 죄송합니다.ㅠ
    • skin.html에서 <br>태그를 적절히 지워주세요. ㅎㅎ
  6. 이것과 관련있을지 모르지만 커스텀으로 버튼을 누르면 사이드바가 나타나고 사라지게 하는 것을 보고 싶습니다. 네이버 블로그는 그렇게 할 수 있거든요. 예로 http://blog.naver.com/js_kimmin를 보세요. 제가 설정 처음부터 사이드바를 나타나게 할 수 있고 없게 할 수도 있는데 저는 처음에 사이드바를 나타나게 했습니다. 이것과 비슷한 것이 티스토리에도 있는데 http://demun.tistory.com/ 블로그를 보면 됩니다.

    PS. Readiz님의 실력이면 충분히 하실 수 있을 것 같습니다.
    • ^^ 좋은 의견 주셔서 감사합니다.
      추후에 풀스크린으로 제작을 계획하고 있는데 이 때 사이드바를 접을 수 있게 해볼 계획입니다.
      감사합니다~
  7. 드뎌 어제 메인화면에 사이드바를 넣었네요 감사합니다.
    글구 요새 제 블로그가 느린거 같다고 지난번에도 문의드렸었는데 크롬,스윙,익스8,모바일 에서는 전혀 문제가 없는데
    유독 익스11에서만 문제가 있는거 같습니다. 1.5버젼해도 똑같고 티스토리 기본스킨으로하면 느리지 않구요
    싹다지우고 다시 스킨다운받아서 적용해봐도 꼭 2~3초정도 멈췄다가 그러는데 뭐가 문제일까요....
    다른브라우져들에서는 문제없고 익스11에서만 그러는걸로봐선 이미지문제는 아닌듯한데 몇일동안 이거때문에 골머리아프네요....혹시 어떤문제인지 짐작가시는게 있는지 여쭤봅니다...
    • 속도문제는 저도 민감한 사안입니다. 말씀하신것 확인해보도록 하겠습니다.
  8. 지금 달아 봤는데, 제 컴퓨터로는 잘 보이는것 같네요.
    한번만 확인해 주시겠어요??

    jhyecheol.tistory.com
  9. 올때 마다
    새로운 기능을 업뎃 해 놓으셔서
    정말 많이 배우고 가네요
    야간에 일하느라 낮에는 자주 들르지 못해
    좀 아쉽네요

    일하다 짬짬히 눈팅하고 있네요
    티스토리를 빛내 주시는 분으로
    다음에 강력 추천 하는 바입니다.
    수고 하세요
  10. 메인 사이드 없이 광고를 달 수 있는 방법을 해보는것도 좋을것 같습니다.
    잘 사용하고 있습니다.
    수고하세요!
  11. 덕분에 많이 배우고 있습니다~
    메인화면 사이드바 넣고싶었는데 포스팅이 딱! 있었네요~
    감사합니다~
  12. 사이드바 잘 넣었습니다^^ 한가지 질문이 있는데요. 사이드바에 반응형광고를 넣었습니다.
    크기에따라 200x200/ 250x250/ 300 x250/ 336x280/ 160x600/ 300x600 이렇게 넣었는데요.
    다른 모든 광고는 정상적으로 잘 나오는데, 딱 한가지 아쉬운게 300X600이 넓이가 커서 끝이 조금 잘립니다.
    그래서 최대 사이드바 넓이를 조금 더 늘리고 싶은데(10px 정도) 무엇 수정해야하는지 모르겠네요..
  13. 파이어 폭스(PC/모바일 모두)에서는 사이드바가 옆에서 아래로 이동이 되지 않네요. 무언가 문제가 있는걸까요?
    익스플로러, 크롬, 안드로이드 기본 브라우저 등 타 브라우저에서는 멀쩡한데 유독 불여우만 속상하게 하네요. ;ㅅ;
  14. 감사합니다.
    무슨 말인지 하나도 모르는 상태였는데, 몇 번 잘 읽어 보고 그대로 따라 해서 무사히 잘 변경했습니다. ^^
  15. 사이드바 나오게끔 바꾸려고 하는데
    1. 메인 전용 CSS

    2. fastboot_index.js
    에서 js파일은 수정하였는데 1번 항목의 css는 어떤 파일인지요? zip 안에 css란 파일들은 다 뒤져봐도 안나오고,,
    다른 파일도 뒤적거려봐도 보이지 않습니다. 1.6.1 버전입니다.


    죄송합니다. 제 불찰이네요. skin.html 파일에 있군요..
  16. 스킨 수정한 두 파일을 교체하려고 하니, 제한된 파일이라고 되지 않습니다. 그래서 결국 새 스킨 등록으로 하여 다시 재차 전체를 업로드 했는데요. 사용중인 스킨이라 그런것 같습니다만,, 방법이 없는지요?
  17. 사이드바는 나타났는데 오른쪽 반응형이 안됩니다..ㅠㅠ
    • http://nightsky21.tistory.com/227
      참고하시길..
    • 안녕하세요
    • 2015.06.27 12:15 신고
    사이드바를 왼쪽으로 옮긴경우는 어떻게 적용을해야 할까요?

    사이드바를 왼쪽으로 옮겨서 적용시켜보니 겹쳐서 나오네요

    수정하려고 했는데 쉽지가 않네요 이것저것 아는 한도내에서 해봤는데..
  18. 감사합니다^^

    덕분에 오랜만에 블로깅하는 재미에 빠져사네요ㅎㅎ
  19. 사이드바에 반응형광고를 넣었습니다.
  20. 이미지안나오는건 어떻게 해결해야될

티스토리 툴바