그누보드5 작업준비

그누보드5를 이용해서 원하는 테마를 만들때 우선적으로 수행하고 있는 몇가지 팁을 작성합니다. 이것은 필자의 편의를 위해 추가하는 것이니 참고정도로 생각하시길 바랍니다.

jQuery Migrate

그누보드5에서 사용하고 있는 jQuery 버전은 1.8.3버전으로 구버전의 jQuery를 기준으로 작성되어 있다. 이 버전으로 인해 미묘한 차이가 발생할 수 있는데 가령 대중적인 jQuery 플러그인들이 1.9 버전 이후대를 지원하고 있는 등 최신의 플러그인들과 호환성 문제를 야기시킬 수 있다.

필자는 jQuery Migrate를 이용해 1.12.4 버전을 사용하고 있으며, theme/js 폴더를 만들어두고 그 곳에 자바스크립트 및 jQuery 소스를 넣어둔다. 경로 접근방법은 G5_THEME_JS_URL php 상수로 지정할 수 있다

theme/테마명/head.sub.php의 jQuery 링크를 변경한다(기존의 링크를 주석처리하거나 삭제하자).

/* 기존 */
<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>

/* 변경 */
<script src="<?php echo G5_THEME_JS_URL ?>/jquery-1.12.4.min.js"></script>
<script src="<?php echo G5_THEME_JS_URL ?>/jquery-migrate-1.4.1.min.js"></script>

자세한 정보는 jQuery 구버전과 최신버전의 혼용 - jQuery Migrate를 참고하자.

jquery-1.12.4.min.js

jquery-migrate-1.4.1.min.js

기능검사 및 브라우저 체크

브라우저별 기능검사 및 브라우저 버전체크등을 위해 Modernizr 과 Detectizr 를 혼합해서 사용하고 있다. 두 소스를 단순 붙여넣어 하나의 support.min.js로 만들어 theme/js에 넣어둔다.

Modernizr의 경우 원하는 검사기능이 다를 수 있기에 스스로가 https://modernizr.com/ 에서 만들어 쓰도록하자.

theme/테마명/head.sub.php의 html 시작부분을 수정하고 기능검사 파일을 링크한다.

/* 기존 */
<html lang="ko">

/* 변경 */
<html lang="ko" class="no-js">
.....
<script src="<?php echo G5_THEME_JS_URL ?>/jquery-1.12.4.min.js"></script>
<script src="<?php echo G5_THEME_JS_URL ?>/jquery-migrate-1.4.1.min.js"></script>
<script src="<?php echo G5_THEME_JS_URL ?>/support.min.js"></script>

정상적으로 추가하였다면 아래와 같이 각종 기능검사 및 브라우저 체크 결과를 html의 class명으로 확인할 수 있게 된다.

support.min.js

페이지명 및 유저상태명 붙이기

디자인적으로 편리함을 위해서 body 요소에 class 명으로 현재 상태를 표기한다. 가령, 게시판일경우에는 bc-board의 공통 클래스와 bc-board-게시판 테이블명의 각각을 구분하는 클래스가 붙게된다. 또한, 로그인여부에 따라 guest, user, super로 각각을 구분한다.

/* 기존 */
<?php
if(G5_IS_MOBILE) {
    echo '<script src="'.G5_JS_URL.'/modernizr.custom.70111.js"></script>'.PHP_EOL; // overflow scroll 감지
}
if(!defined('G5_IS_ADMIN'))
    echo $config['cf_add_script'];
?>
</head>
<body>

/* 변경 */
<?php
if(G5_IS_MOBILE) {
    echo '<script src="'.G5_JS_URL.'/modernizr.custom.70111.js"></script>'.PHP_EOL; // overflow scroll 감지
}
if(!defined('G5_IS_ADMIN')) {
    echo $config['cf_add_script'];
}

//body class name add
$page_name = basename($_SERVER['PHP_SELF'],".php");
    switch ($page_name) {
        case "board" :
            $bclass .= "bc-board bc-board-".$bo_table;
            break;
        case "content" :
            $bclass .= "bc-coid bc-coid-".$co_id;
            break;
        default :
            $bclass .= "bc-".$page_name;
            break;
    }

    if ($is_member) {
       if ($is_admin == 'super') {
           $bclass .= " super";
       } else {
           $bclass .= " user";
       }
    } else {
        $bclass .= " guest";
    }
?>
</head>
<body class="<?php echo $bclass ?>">

'그누보드 > GNU 팁' 카테고리의 다른 글

그누보드5 메뉴 현재 위치 설정 (0)	2017.02.07

WEBDIR