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

이번포스트 목표: layout.html 파일1개로 XE메인과 서브페이지 비주얼 구분 및 상단 로그인부분 로그인전/후+관리자 체크기능 추가

메인페이지확인 URL: http://timespace12.dothome.co.kr/xe/

서브페이지확인 URL: http://timespace12.dothome.co.kr/xe/loginPage

오늘의 핵심은 XE엔진에서 PHP구문을 사용하는 방식에 있습니다.

- XE엔진에서 {@ 구문 } 은 <?php 구문 ?> 으로 해석됩니다.(예, {@ if($_is_indexmodule) :}출력html문{@ else :}출력html문{@ endif } )

- XE엔진에서 <!--@ 구문 --> 은 <?php 구문 ?> 으로 해석됩니다.(전 이 방식을 선호합니다.)

XE구문참조 URL: https://www.xpressengine.com/tip/22931124

로그인 후 상단메뉴에 로그아웃, 관리 메뉴가 추가로 보이는 부분확인(아래)

오늘 적용한 소스 코드 전문(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 loop="$GNB->list=>$key1,$val1" class="active"|cond="$val1['selected']">
   <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
   <ul cond="$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></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>Getting started</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 content">
 {$content}
</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><!-- /사용자 스타일 추가 -->

#다음포스트에서는 전제에서 마지막 시간으로 서브페이지에서 왼쪽메뉴가 연동되서 나오도록 하는 작업을 할 예정 입니다.