www.gajija.kr No.1

테마 & 레이아웃 만들기

1. 테마(Theme) 설정

- 디렉토리 위치 : theme/template1

- 설정파일 : conf/global.conf.php

[design]
theme = "template1"    ; 디자인 테마

2. 메인페이지 레이아웃 설정

- 설정파일 : conf/global.conf.php

; 3. 레이아웃 설정을 참고해주세요.
; "@" 는 테마 기본디렉토리를 가리킵니다.
[layout]
main = "@main"

3. 레이아웃 설정

1) 설정

기본 레이아웃 폴더는 html/_layout/ 입니다.

"@" 를 삽입한경우 theme/테마명/_layout/ 폴더를 가리킵니다.

- 설정파일 : conf/layout.conf.php

- 설정내용 예제 :

; 메인페이지
[main]
LAYOUT = "@_layout/gajija/main/layout.main.html"
HEAD_COMMON_INC = "@_layout/gajija/head_common.html" ;head의 css, javascript include 영역
HEAD_MAIN_INC = "@_layout/gajija/head_main.html" ;헤더 메인 영역
NAV_COMMON = "@_layout/gajija/nav_common.html"; 네비게이션 메뉴
TOP_COMMON_INC = "@_layout/gajija/top_common.html" ;상단 영역
FOOTER = "@_layout/gajija/footer.html" ;하단메뉴 영역
; 기본페이지
[base]
LAYOUT = "@_layout/base.html"
HEAD_COMMON_INC = "@_layout/gajija/head_common.html" ;head의 css, javascript include 영역
HEAD_MAIN_INC = "@_layout/gajija/head_main.html" ;헤더메인 영역
...
...

theme/테마명/_layout/gajija/main/layout.main.html 파일 내용

<!DOCTYPE html>
<html lang="ko">
<head>
<title>{_SERVER['HTTP_HOST']} No.1</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
{# HEAD_COMMON_INC {*css,javascript 인크루드*}}
{# HEAD_MAIN_INC {*css,javascript 인크루드*}}
</head>
<body class="d-flex flex-column">

	<!--header Start-->
	<header class="header flex0">
	{# TOP_COMMON_INC {*인크루드*}}
	</header>
	
	<!--body Start-->
	<main class="d-flex flex-row">
		<article class="flex1">
			<div class="body-container">
			{# CONTENT {*본문내용 들어가는 영역*}}
			</div>
		</article>
		<aside class="d-flex flex-column bg-info" style="flex:0 0 15em;background-color:rgba(23, 162, 184, 0.27)!important;">
		fdsasfd
		</aside>
	</main>
	
	<footer class="flex0">
	{# FOOTER {*맨하단내용 들어가는 영역*}}
	</footer>
	
</body>
</html>

테마 & 레이아웃 만들기

댓글 등록하기