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

이번포스트 목표: 서브페이지에서 왼쪽메뉴가 연동되서 나오도록 하는 작업

수정한 파일명: xe/layouts/new(신규레이아웃)/layout.html (이전 포스트 작업파일과 동일, 혹시 헛갈리까봐 다시 명시 했습니다.)
서브페이지확인 URL: http://timespace12.dothome.co.kr/xe/board_idwe13
오늘의 핵심도 역시 XE엔진의 전용구문을 사용하는 방식에 있습니다.(상단 메뉴에 서브메뉴를 추가할때, 부트스트랩3 드롭다운 CSS클래스가 필요합니다.

그때 class="dropdown"|cond="$val1['list']" 이런방식으로 드롭다운 서브메뉴가 존재하면 조건을 달아서 CSS 클래스를 호출합니다.

아래 예)

<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>

코드 전문은 하단에 별도로 표시 하겠습니다. 아래는 결과 이미지 입니다.

위 결과가 나오기 전에 물론 당연히 관리자 단에서 메뉴를 추가 해야 겠지요(아래화면)

-아래는 layout.html에 사용된 코드 전체 입니다.

{@ Context::set('admin_bar', 'false')} <!-- 관리자로 로그인시 #adminBar 때문에 레이아웃이 깨져서 숨김처리 css로 display:none 해도됨 -->
<!-- 부트스트랩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-->
    </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>
<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%; }
 .container { text-align:center; }
 .navbar-form { width:100%; }
 section { text-align:left; }
}
</style><!-- /사용자 스타일 추가 -->

############### 지금까지 네이버XE(제로보드xe)에서 부트스트랩3을 이용한 기본적인 레이아웃을 적용하는 방법을 알아 보았습니다.

다음 시간에는 부가적으로 2가지를 작업해 보려고 합니다.

1. 다국어지원 기능(영어추가)을 사용했을때, 부트스트랩3로 디자인을 맞추는 작업

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

(말로 하니 복잡한데요, 결과적으론 loginPage모듈에 적용된 CSS를 수정한다는 말입니다.)