08. 테마파일 작성

이번 포스팅에서는 디폴트로 사용할 테마와 팝업등에서 사용할 테마를 따로 구분지어서 만들어보도록 하겠습니다.
CSS는 시간절약을 위해 bootstrap 을 이용하도록 하겠습니다.

desktop 과 mobile 작성방법이 동일하기에 desktop 생성만 가지고 진행하도록 하겠습니다.

desktop/theme.php 를 열어주고 아래와 같이 입력해줍시다.

<?php
// 테마 전체에서 사용할 CSS
$this->site->add_css('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css', TRUE); // 부트스트랩
$this->site->add_css('/static/css/desktop.min.css');    // 사용자 커스텀 CSS

// 테마 전체에서 사용할 javascript
$this->site->add_js('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js', TRUE); // JQUERY
$this->site->add_js('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js', TRUE);    // 부트스트랩
$this->site->add_js('/static/js/desktop.min.js');       // 사용자 커스텀 JS
?><!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <?=$this->site->display_meta()?>
</head>
<body>
<?=$contents?>
</body>
</html>

그리고 실제로 테마 레이아웃이 반영되었는지 확인하기위해 띄웠던 브라우져를 새로고침하여 확인해줍시다.
필자는 개발자도구를 열어 제대로 반영되었는지 확인했습니다.

위와같이 Site 라이브러리와 DisplayOverride 후킹 클래스가 제대로 적용된것을 확인할 수 있습니다.

테마를 좀더 꾸며보기위해 다음과 같이 변경해보았습니다.

<?php
// 테마 전체에서 사용할 CSS
$this->site->add_css('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css', TRUE); // 부트스트랩
$this->site->add_css('/static/css/desktop.min.css');    // 사용자 커스텀 CSS

// 테마 전체에서 사용할 javascript
$this->site->add_js('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js', TRUE); // JQUERY
$this->site->add_js('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js', TRUE);    // 부트스트랩
$this->site->add_js('/static/js/desktop.min.js');       // 사용자 커스텀 JS
?><!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <?=$this->site->display_meta()?>
</head>
<body>
<ul class="sr-only">
    <li><a href="#contents">본문 바로가기</a></li>
</ul>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="<?=base_url()?>"><?=$this->site->config('site_title')?></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<article id="contents">
    <?=$contents?>
</article>

</body>
</html>

기본형 테마를 만들었다면 이번엔 팝업등에 사용할 팝업용 테마를 만들어봅시다.

application/controllers/Main.php 파일을 열어 popup 함수를 추가해줍니다.

 /**
     * 테스트 팝업
     */
    public function popup()
    {
        // 해당 페이지의 메타 태그 설정
        $this->site->meta_title 		= "";   // 해당 페이지의 타이틀
        $this->site->meta_description   = "";   // 해당 페이지의 Description 메타태그
        $this->site->meta_keywords      = "";   // 해당 페이지의 키워드 메타태그
        $this->site->meta_image         = "";   // 해당 페이지의 대표이미지

        // 테마 및 view 파일 설정
        $this->theme = $this->site->layout();
        $this->theme_file = "popup";
        $this->view = "main/popup";
        $this->active = "main/popup";
    }

$this->theme_file 을 통해 기본 레이아웃파일이 아닌 불러올 새로운 레이아웃 파일이름을 ‘popup’으로 지정한걸 보실 수 있습니다.

views/themes/desktop 폴더에 popup.php 파일을 생성하고 theme.php 파일의 일부를 복사하여 다음과 같이 세팅합니다.
필자는 Navbar 부분만 제외하고 그대로 복사하였습니다.

views/themes/desktop/main 폴더에 popup.php 파일을 추가하고 간단하게 내용을 입력해줍니다.

자 이제 브라우져에서 /main/popup 을 입력하여 팝업용 레이아웃을 제대로 불러오는지 확인해줍니다.


기본테마 레이아웃이 아닌 popup용 레이아웃을 제대로 불러오는걸 확인할 수있습니다.

다음 포스팅부터는 회원관련 기능들을 하나씩 구현하도록 하겠습니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

This site uses Akismet to reduce spam. Learn how your comment data is processed.