프로그램 영역의 빌더와 디자인 영역의 테마 구조를 설명합니다.
빌더 구조는 그누보드5(영카트5)의 소스를 수정하지 않고 프로그램 영역을 구축합니다.
테마 구조는 HTML, CSS, JS, 이미지 파일등을 이용한 내용과 디자인 영역을 구축합니다.

빌더 구조

  • 그누보드 Root
    • adm
      • eyoom_admin
      • admin.menu800.eyoom.php
    • admin
    • bbs
      • respond_chk.php
      • respond.php
      • banner.php
    • extend
      • xeyoom.extend.php
    • eyoom
      • classes
      • core
      • inc
      • install
      • misc
      • theme
      • user_program
      • _common.php
      • common.php
      • head.php
      • index.php
      • tail.php
    • mypage
    • page

디렉토리 구조

빌더의 기본 디렉토리 구조

image그누보드와 빌더의 중간에서 중요한 역할을 수행하는 파일은 xeyoom.extend.php 및 eyoom 폴더의 common.php 파일입니다.

그누보드의 소스를 변형하지 않고서 빌더에서 처리할 수 있도록 하는 핵심적인 영역인 eyoom/core 쪽으로 역할을 넘겨주는 중요한 기능을 하는 파일들입니다.

eyoom/core 디렉토리에는 빌더와 그누보드/영카트를 연결하는 핵심기능의 파일들이 위치하고 있습니다.
전반적인 프로그램의 영역을 담당하는 곳이라고 보시면 됩니다.

eyoom/classes 디렉토리에는 기능별로 함수를 묶어놓은 라이브러리 영역입니다.
프로그래밍 영역과 디자인 영역을 분리하는 역할을 하는 Template_ 및 다양한 클래스 파일들이 위치하고 있습니다.

eyoom/inc 디렉토리에는 클래스화 하기에는 다소 간단한 역할을 수행하는 파일들을 모아두었습니다.

빌더에서 홈페이지의 디자인을 담당하는 곳이 바로 eyoom/theme 디렉토리입니다.

테마 구조

  • eyoom / theme / 테마명
    • css 1
      • common.css
      • custom.css
      • style.css
    • emoticon 2
    • image 3
    • js 4
    • layout 5
      • head_bs.html
      • side_bs.html
      • tail_bs.html
      • misc_bs.html
      • tail_sub.html
    • main 6
      • index_bs.html
    • page 7
    • plugins 8
    • skin_bs 9
      • board
      • connect
      • emoticon
      • faq
      • hotpost
      • latest
      • member
      • mypage
      • nameview
      • new
      • newpost
      • newwin
      • outlogin
      • paging
      • poll
      • popular
      • push
      • qa
      • ranking
      • respond
      • search
      • shop
      • signature
      • tag
      • visit

디렉토리 구조

유토 테마 디렉토리 구조

image유토 테마폴더 내 총9개의 폴더가 구성되어 있으며 각각의 폴더 내 포함된 파일들의 역활에 대해 알아봅니다.

1 css

테마의 전체적인 레이아웃 및 기초가 되는 스타일 설정 파일들로 구성되어 있습니다.

  • common.css: 유토테마에 공통적으로 사용되는 CSS 스타일 파일
  • custom.css: css폴더 내 우선순위가 제일 높은 파일입니다. 테마에 이미 적용되어 있는 스타일을 변경하고자 할때 다른 css파일의 클래스를 넣어 재설정 해 주면 적용됩니다.(또는 본인만의 스타일설정을 이 파일에서 만들면 관리가 편합니다.)
  • style.css: 해당 테마에 사용된 CSS 스타일 파일
2 emoticon

글쓰기 / 댓글쓰기 시 나오는 이모티콘 이미지

3 image

테마에 사용되는 이미지파일을 업로드

4 js

테마에 사용되는 기본적인 js 파일

  • app.js: 테마에 사용되는 스크립트 소스들을 담음.
5 layout

테마의 전체적인 레이아웃을 구성하는 html 파일

  • head_bs.html: 상단 레이아웃 영역, css 경로 등
  • side_bs.html: 사이드 레이아웃 영역
  • tail_bs.html: 하단 레이아웃 영역, script 경로와 소스, 푸시 출력, misc_bs 출력 등
  • misc_bs.html: 기본모달, 프로필사진, 정보수정, 스크랩, 포인트, 쪽지등의 모달과 게시판 설정 및 테마정보 바 등
  • tail_bs.html: 팔로우 버튼 스크립트
6 main

테마의 메인을 구성하는 html 파일

  • index_bs.html: 메인 레이아웃 영역
7 page

개별 일반페이지를 추가하여 작업하실 수 있습니다.

  • page 폴더 내 aboutus.html 파일을 생성하였다면 아래와 같이 페이지를 불러옵니다.
  • ex) http://사이트주소/page/?pid=aboutus
8 plugins

테마에 사용된 자바스크립트 플러그인들 모음

9 skin_bs

게시판, 최신글, 아웃로그인 등 테마의 모든 개별 스킨들을 모아둔 폴더입니다.

  • board: 게시판 스킨(basic,gallery,webzine)
  • connect: 현재 접속자 스킨
  • emoticon: 이모티콘 스킨
  • faq: FAQ스킨(관리자 > FAQ관리)
  • hotpost: 게시판 내 베스트글 스킨
  • latest: 최신글 스킨
  • member: 로그인, 회원가입, 쪽지, 포인트, 스크랩등
  • mypage: 마이페이지, 마이홈, 팔로우등 커뮤니티 특화기능
  • nameview: 회원 닉네임 클릭시 출력 메뉴(게시판등에 사용)
  • new: 새글 게시판 스킨(회원 아이디로도 게시물 검색 출력)
  • newpost: 새글/새댓글 최신글 스킨
  • newwin: 팝업레이어
  • outlogin: 아웃로그인 스킨
  • paging: 페이징 스킨(게시판등에 사용)
  • poll: 투표 스킨
  • popular: 인기검색어 스킨
  • push: 푸쉬 메세지
  • qa: QA 게시판 스킨(1:1문의)
  • ranking: 랭킹 스킨
  • respond: 내글반응 스킨
  • search: 검색 스킨
  • shop: 쇼핑몰 스킨(쇼핑몰 테마에만 사용)
  • signature: 서명 스킨(게시판에 사용)
  • tag: 태그 스킨
  • visit: 방문 스킨

테마 레이아웃 출력 부분

메인 레이아웃
image
서브 레이아웃
image
  • /eyoom/theme/테마명/layout/head_bs.html
  • /eyoom/theme/테마명/main/index_bs.html
  • /eyoom/theme/테마명/layout/side_bs.html
  • /eyoom/theme/테마명/layout/tail_bs.html