메인화면에 원하는 문구 집어넣기

FastBoot 메인화면에 원하는 HTML로 꾸미기

  우선, HTML에 대한 기본적인 이해를 하시고 있다는 가정 하에 시작하겠습니다. 지식이 있으심에도 FastBoot의 구조가 타 스킨과 다른 탓에 메인화면을 마음대로 커스텀하지 못하시는 분들이 많으신 것 같아 포스팅하게 되었습니다. 아시다시피, FastBoot는 다른 스킨과 다르게 RSS를 사용해서 메인화면을 가져올 수 있도록 세팅을 할 수가 있습니다. 우선 시작하기 전에 아래처럼 세팅되어 있는지 skin.html을 확인해보시기 바랍니다.

	
<script>
/* ----------------- FastBoot Setting Variables ---------------*/
/* 
---------- Category Setting 
			0: Gallery (Default)
			1: List
			2: Simple Title
-------------------------------
*/
var f_categoryDefaultMode = 0;
/* 
---------- T-Edition Enable
			false: Use FastBoot Index (Default)
			true: Use T-edition
-------------------------------
*/
var f_enableTedition = false;
</script> 
	

  스킨을 적용하신 후에 다른 것을 건드리시지 않았다면 f_enableTedition = false;인 채로 있을 것입니다. 아무튼 티에디션을 사용하시려고 이것을 true로 해두셨다면 이 강의 내용은 적용하실 수 없습니다.

1. 환영문구 넣어보기

 간단한 인삿말을 넣어보도록 하겠습니다. 다음 부분을 찾아봅시다.

	
<div id="coverDiv"><div class="info col-md-12 hidden"><h3>Readiz - Read easy</h3><p class="text-muted">Read everything in the world easily. http://readiz.com/</p></div><div class="loading"></div></div> 
	

  여기에서, coverDiv라고 되어있는 사이 부분이 FastBoot이 RSS를 불러오면서 추가하는 부분입니다. 여기에 인삿말을 넣으신다면 넣어지게 되는 구조입니다. 정확히는 앞부분에 밀어넣으시면 인삿말이 들어갑니다.

	

<div id="coverDiv"><div style="border-left: 10px solid #5ac8fa; padding: 10px; font-size:0.8em;">안녕하세요? ^^</div><div class="info col-md-12 hidden"><h3>Readiz - Read easy</h3><p class="text-muted">Read everything in the world easily. http://readiz.com/</p></div><div class="loading"></div></div> 
	

  위처럼 수정하시면 결과는 아래처럼 됩니다.

  기타 소셜광고나, 메인에서만 나오는 구글 애드센스를 넣으시려고 할 때도 이 위치를 사용하시면 될 것입니다.

2. 블로그 소개 넣어보기

 블로그 소개는 원래 Default로 나타나게 하려고 했습니다만, 마지막에 제가 생각을 바꿔서 hidden처리되어있습니다. 유사하지만 hidden만 제거하면 숨겨져 있던 것이 나오게 됩니다.

	
<div id="coverDiv"><div style="border-left: 10px solid #5ac8fa; padding: 10px; font-size:0.8em;">안녕하세요? ^^</div><div class="col-md-12"><h3>Readiz - Read easy</h3><p class="text-muted">Read everything in the world easily. http://readiz.com/</p></div><div class="loading"></div></div> 
	

  다른 것은 변한 것 없고 info, hidden 속성만 제거하였습니다. (info class가 있었던 div를 보세요)

 물론 이 상태로 쓸만한 디자인은 아닙니다만, 차후에 이 부분을 어떻게 더 수정하실 수 있게되는지 더 다루도록 하겠습니다. 아쉽지만 오늘은 여기서 일단 맛보기정도로 끝내도록 하겠습니다.