부트스트랩3.x 용 레이아웃 퍼블리싱_부가기능1(네이버xe레이아웃을위한)

이번포스트 목표: 다국어지원 기능(영어추가)을 사용했을때, 부트스트랩3로 디자인을 맞추는 작업 (게시판에서 jquery충돌로 글쓰기에디터 나오지 않는 문제 처리)

수정한 파일명: xe/layouts/new(신규레이아웃)/layout.html (이전 포스트 작업파일과 동일, 혹시 헛갈리까봐 다시 명시 했습니다.)

#모바일에서 확인시 PC버전이 보여서 메타태그를 추가 했습니다.(아래)

{@ Context::addMetaTag('viewport','width=device-width, initial-scale=1.0');}

#다국어지원 기능을 위한 선택아이콘이 지원되는 부분의 코드는 아래와 같습니다.(부트스트랩3로 적용했음)

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
    <span style="cursor:pointer;" >Language:<i class="flag flag-{$lang_type}"></i></span>
    <b class="caret"></b>
    </a>
    <ul class="dropdown-menu" id="langselect">
     <li loop="$lang_supported =>$key, $val" class="language {$key}">
     <a href="#" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></a>
     </li>
    </ul>
   </li>

위에서 아이콘은 <i class="flag flag-{$lang_type}"></i>로 정의했는데요, 스프라이트 이미지라는 기술을 사용합니다.(참조: http://blog.daum.net/web_design/289 ) 해당 CSS는 <!-- 사용자 스타일 추가 --> 부분 하단에 있습니다.
서브페이지확인 URL: http://timespace12.dothome.co.kr/xe/ (아래그림에서 국기를 선택하면, 다국어버전으로 변경 가능합니다.)

- 오늘 수정한 layout.html 소스 전문

{@ Context::set('admin_bar', 'false')} <!-- 관리자로 로그인시 #adminBar 때문에 레이아웃이 깨져서 숨김처리 css로 display:none 해도됨 -->
{@ Context::addMetaTag('viewport','width=device-width, initial-scale=1.0');}
<!-- 부트스트랩3 관련 -->
<link href="/publish/assets/css/bootstrap.css" rel="stylesheet">
<link href="/publish/assets/css/docs.css" rel="stylesheet">
<link href="/publish/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="/publish/assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- 아이콘 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/publish/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/publish/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/publish/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/publish/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/publish/assets/ico/favicon.png"><!-- /부트스트랩3 관련 -->

<!-- 상단 네비 -->
<div class="navbar navbar-fixed-top navbar-inverse">
 <!-- 컨테이너 -->
 <div class="container">
  <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse" href="#">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>
  <a class="navbar-brand" href="{geturl('')}" id="siteTitle">
   <img src="siteTitle.png" alt="XpressEngine" cond="!Context::getSiteTitle() && !$layout_info->LOGO_IMG && !$layout_info->LOGO_TEXT">
   <block cond="Context::getSiteTitle() && !$layout_info->LOGO_IMG && !$layout_info->LOGO_TEXT">{Context::getSiteTitle()}</block>
   <img src="{$layout_info->LOGO_IMG}" alt="{$layout_info->LOGO_TEXT}" cond="$layout_info->LOGO_IMG">
   <block cond="!$layout_info->LOGO_IMG && $layout_info->LOGO_TEXT">{$layout_info->LOGO_TEXT}</block>
  </a>
  <div class="nav-collapse collapse">
    <ul class="nav">
      <li class="dropdown"|cond="$val1['list']" loop="$GNB->list=>$key1,$val1" class="active"|cond="$val1['selected']">
   <a class="dropdown-toggle"|cond="$val1['list']" data-toggle="dropdown"|cond="$val1['list']" href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">
   {$val1['link']}<b class="caret" cond="$val1['list']"></b>
   </a>
   <ul cond="$val1['list']" class="dropdown-menu">
    <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
    <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
    </li>
   </ul>
      </li>
    </ul>
    <ul class="nav user-right">
      <!--@if($is_logged)-->
       <li><a href="{getUrl('act','dispMemberLogout')}">로그아웃</a></li>
       <!--@if($logged_info->is_admin)-->
       <li><a href="{getUrl('','mid','admin')}">관리</a></li>
       <!--@end-->
      <!--@else-->
       <li><a href="{getUrl('','mid','loginPage','act','dispMemberLoginForm')}">로그인</a></li><!--{getUrl('','mid','loginPage')}-->
      <!--@end-->
       <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
    <span style="cursor:pointer;" >Language:<i class="flag flag-{$lang_type}"></i></span>
    <b class="caret"></b>
    </a>
    <ul class="dropdown-menu" id="langselect">
     <li loop="$lang_supported =>$key, $val" class="language {$key}">
     <a href="#" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></a>
     </li>
    </ul>
   </li>
    </ul>
    <form class="navbar-form" role="search">
   <div class="input-group">
   <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
   <div class="input-group-btn">
   <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
   </div>
   </div>
    </form>
  </div><!-- /.nav-collapse -->
 </div><!-- /컨테이너 -->
</div><!-- /상단 네비 -->

{@ $_is_indexmodule = ($site_module_info->module_srl === $current_module_info->module_srl)}
<!-- XE엔진에서 {@ 구문 } 은 <?php 구문 ?> 으로 해석됨 -->
<!--@if($_is_indexmodule)-->
<!-- 메인 비주얼 -->
<div id="myCarousel" class="carousel slide">
 <ol class="carousel-indicators">
   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
   <li data-target="#myCarousel" data-slide-to="1"></li>
   <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
   <div class="item active">
     <a href="#" title="링크1">
     <img src="/publish/assets/img/examples/slide-01.jpg" alt="">
     </a>
   </div>
   <div class="item">
     <a href="#" title="링크2">
     <img src="/publish/assets/img/examples/slide-02.jpg" alt="">
     </a>
   </div>
   <div class="item">
     <a href="#" title="링크3">
     <img src="/publish/assets/img/examples/slide-03.jpg" alt="">
     </a>
   </div>
 </div>
 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
   <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div><!-- /메인 비주얼 -->
<!--@else-->
<!-- 서브 비주얼 -->
<header class="bs-docs-jumbotron subhead">
 <div class="container">
 <h1 loop="$GNB->list=>$key1,$val1" cond="$val1['selected']">{$val1['link']}</h1>
 <p class="lead">Overview of the project, its contents, and how to get started with a simple template.</p>
 </div>
</header><!-- /서브 비주얼 -->
<!--@end-->

<!-- 컨테이너_본문 -->
<div class="container">
<!--@if($_is_indexmodule)-->
 {$content}
<!--@else-->
 <div class="row">
  <!-- 왼쪽메뉴 -->
  <div class="span3 bs-docs-sidebar">
   <!-- LNB -->
   <h1 loop="$GNB->list=>$key1,$val1" cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></h1>
   <ul class="nav nav-list bs-docs-sidenav" loop="$GNB->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">
    <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
     <ul cond="$val2['list']">
      <li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']"><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
     </ul>
    </li>
   </ul>
   <!-- /LNB -->
  </div><!-- /왼쪽메뉴 -->
  <div class="span9">
  {$content}
  </div>
 </div>
<!--@end-->
</div><!-- /컨테이너_본문 -->
 
<!-- 컨테이너_푸터 -->
<div class="container">
     <p>Powered by <a href="http://xpressengine.com/">XE</a>.</p>
</div><!-- /컨테이너_푸터 -->

<!-- 부트스트랩3 관련
<script src="/publish/assets/js/jquery.js"></script> XE제이쿼리와 충돌나서 주석처리-->
<script src="/publish/assets/js/bootstrap-transition.js"></script>
<script src="/publish/assets/js/bootstrap-alert.js"></script>
<script src="/publish/assets/js/bootstrap-modal.js"></script>
<script src="/publish/assets/js/bootstrap-dropdown.js"></script>
<script src="/publish/assets/js/bootstrap-scrollspy.js"></script>
<script src="/publish/assets/js/bootstrap-tab.js"></script>
<script src="/publish/assets/js/bootstrap-tooltip.js"></script>
<script src="/publish/assets/js/bootstrap-popover.js"></script>
<script src="/publish/assets/js/bootstrap-button.js"></script>
<script src="/publish/assets/js/bootstrap-collapse.js"></script>
<script src="/publish/assets/js/bootstrap-carousel.js"></script>
<script src="/publish/assets/js/bootstrap-typeahead.js"></script>
<script src="/publish/assets/js/bootstrap-affix.js"></script>

<script src="/publish/assets/js/holder/holder.js"></script>
<script src="/publish/assets/js/google-code-prettify/prettify.js"></script>
<!--[if lt IE 9]>
<script src="/publish/assets/js/respond/respond.min.js"></script>
<![endif]-->

<script src="/publish/assets/js/application.js"></script><!-- /부트스트랩3 관련 -->

<!-- 사용자 js추가 -->
<script type="text/javascript" language="javascript">
//!를 사용하면 함수는 단항(논리적) NOT연산자의 단일 피연산자가됨. 이렇게하면 함수가 표현식으로 평가되므로 강제로 인라인으로 호출 할 수 있습니다.
!function($){
  $(function(){
    var $window = $(window)
    $('.carousel').carousel({
     interval:2000
    });
})
}(window.jQuery)
//(window.jQuery)는 원래 jQuery Object에 $대한 별칭을 만들고, 다른 라이브러리가 충돌없이 항상 그 jQuery object내부를 참조 하도록 보장함.
</script><!-- /사용자 js추가 -->

<!-- 사용자 스타일 추가 -->
<style>
/* 너비값 사용자 지정시 참조-나중에 기본모니터가 풀FD급 이상일때는 변경하시면 됩니다.
 .container { max-width:1170px !important; }
*/
.user-right { float:right !important; margin-top:0px !important;  }
.navbar-form { margin-top:0px; width:250px;float:right; }
@media (max-width: 979px) {
 /* 아래코드는 모바일에서 상단메뉴부분을 고정하지 않을때(서브메뉴가 많을때 필요) */
  body {padding-top:0px !important;}
 .navbar-fixed-top { position:relative !important; }
 .dropdown-menu { position:relative !important; }
 /* 위에서 모바일에서 상단메뉴부분 고정할때는...position; */
 .user-right { width:100%; }
 <!--@if($_is_indexmodule)-->
 .container { text-align:center; }
 <!--@end-->
 .navbar-form { width:100%; }
 section { text-align:left; }
}
.xe_mobile {display: none}
select, textarea { min-height:inherit !important; }
/* flags */
.flag {width: 32px; height: 32px; background:url(/xe/layouts/new/flags.png) no-repeat}
.flag {margin-top:-12px;display:inline-block;overflow:hidden;font-size:0;line-height:0;vertical-align:middle;}
.flag.flag-zh-CN {background-position: -32px 0}
.flag.flag-de {background-position: -64px 0}
.flag.flag-es {background-position: -96px 0}
.flag.flag-fr {background-position: 0 -32px}
.flag.flag-jp {background-position: -32px -32px}
.flag.flag-ko {background-position: -64px -32px}
.flag.flag-mn {background-position: -96px -32px}
.flag.flag-ru {background-position: 0 -64px}
.flag.flag-tr {background-position: -32px -64px}
.flag.flag-zh-TW {background-position: -64px -64px}
.flag.flag-en {background-position: -96px -64px}
.flag.flag-vi {background-position: 0 -96px}
</style><!-- /사용자 스타일 추가 -->

- 다음 포스트에서는 메뉴추가로 위젯페이지를 생성하면서, loginPage모듈선택해서 생성한 페이지를 수정해 보도록 하겠습니다.