웹마스터 팁

빨갛게 표시된 부분만 잘 보시면 됩니다. 나머지는 잡설입니다.

제로보드 사이트를 잘 살펴보면 두 종류의 메뉴가 사용된 것을 알 수 있습니다. 방문자에게 컨텐츠를 제공하는 상단과 우측의 메뉴 한 종류와 홈페이지 운영과 관계된 내용을 연결하는 하단의 메뉴 한 종류 해서 두 가지 메뉴가 사용되고 있습니다.
이 팁에서는 이와같이 두 종류 이상의 메뉴를 생성하고 연결하는 방법을 기본 레이아웃인 xe_official과 제로보드 사이트를 예를 들어 소개하겠습니다.

보통 레이아웃과 메뉴를 연동하기 위해서는 다음의 과정을 거칩니다.
1. info.xml 에서 메뉴에 대한 변수를 설정
2. 관리자 페이지에서 메뉴를 생성
3. 레이아웃 생성시에 메뉴와 변수를 연결시킴
4. layout.html에서 변수를 불러옴


1번과 4번은 레이아웃 제작자가 신경 쓸 부분이고 2번과 3번은 레이아웃 사용자가 신경 써야 할 부분이죠.

0. 메뉴 구상
   - 아래와 같이 제로보드 홈페이지 상단 및 좌측에 나타나는 컨텐츠와 연결되는 main menu 와
      하단에 나타나는 사이트 운영과 관계된 bottom menu 로 메뉴로 구성할 예정입니다.


1. info.xml에서 메뉴 변수 설정
레이아웃을 만들 때 conf폴더에 있는 info.xml은 보통 별로 신경을 쓰지 않습니다. 하지만 이 파일에서
레이아웃에 필요한 여러가지 확장변수를 설정할 수 있으므로 잘 사용한다면 매우 유용할 것입니다.
여기서 우리가 다루게 될 메뉴 부분은 info.xml 파일내에 <menus>... </menus>로 구분되어 있습니다.

    <menus>
        <menu name="main_menu" default="true">
            <title xml:lang="ko">상단 메뉴</title>
            <maxdepth>3</maxdepth>
        </menu>
        <menu name="bottom_menu">
            <title xml:lang="ko">하단 메뉴 </title>
            <maxdepth>1</maxdepth>
        </menu>
   
</menus>

하위 메뉴를 포함하는 한 개의 메뉴집단(또는 덩어리?)은 <menu name="...">...</menu> 부분과 일대일 대응됩니다.
우리는 상단 및 우측 메뉴 와 하단 메뉴 이렇게 두 개의 메뉴를 사용 할 것이므로 <menu> 태그가 두 개 필요합니다.
더 많은 종류의 메뉴를 사용할 것이라면 여기에서 <menu> 부분을  그 만큼 더 정의해주면 됩니다.
menu태그의 name 속성은 중요합니다. 나중에 layout에서 불러 쓸 이름이 되므로 고유하게 붙여줘야 합니다.
(<menu> 태그의 name은 layout.html에서 사용될 변수명이라고 생각하시면 됩니다.)
default="true" 는 정확히 무슨 뜻인지 모르겠습니다만, 여기서는 있으나 없으나 별 차이 없을거 같은 생각이 듭니다.
<title>은 관리자페이지에서 레이아웃 생성시에 메뉴 항목에 표시되는 제목입니다.
레이아웃을 쓰는 사람이 알기 쉽게 하는 것이 좋겠네요.
<title> 부분 바로 아래에 <description xml:lang="ko">설명</description> 을 추가하여 제목에 설명서를 달아도 될거 같은데
해보지 않아서 정확하지 않습니다.
<maxdepth>3</maxdepth>는 메뉴의 단계(깊이?)
입니다. 즉 3단계까지의 메뉴를 만들거라는 이야기입니다.

2. 관리자 페이지에서 메뉴 생성하기
메뉴 생성하는 방법은 다들 아실거라고 생각되므로 따로 설명드리지 않겠습니다.
다만 '0.메뉴구상' 에서 보신 것같이 main, bottom 두 개의 메뉴를 만들어 주면 됩니다.
이 때 메뉴 이름은 위의 name에서 정한 것과 일치하지 않아도 됩니다. 자신이 알기쉽게 붙여주면 됩니다.

3. 레이아웃 생성시에 메뉴와 변수를 연길시키기

관리자페이지에서 레이아웃을 생성하면 위와같은 설정화면이 나옵니다. 위 설정화면의 내용은 info.xml에 따라서
달라집니다. 위 그림의 표시된 부분이 info.xml에서 정의한 변수와 생성시킨 메뉴를 각각 연결시켜주는 모습입니다.
"상단 메뉴"는 info.xml의 title에서 정의해준 것이고 그 아래 괄호에 있는 main_menu는 <menu>태그의 name임을
쉽게 알 수 있습니다.  그 옆에 나온 것은 메뉴관리에서 만들어준 메뉴의 이름입니다. 이름을 똑같이 만들었더니
연결하기가 편합니다. <menu>태그를 더 많이 만든다면 "하단 메뉴" 아래로 그 내용이 더 나올 것입니다.

4. layout.html 에서 메뉴 불러다 쓰기
기본 레이아웃인 xe_official의 layout.html중간에 다음과 같은 부분이 있습니다.

<!--@foreach($main_menu->list as $key => $val)-->

위의 코드가 바로 info.xml에서 지정한 name을 이용해서 레이아웃 생성시에 연결시킨 메뉴를 불러오는 것입니다.
이제는 붉게 표시된 것이 name에서 정한 이름임을 말하지 않아도 아실 겁니다.
그리고 layout.html 마지막 부분에는 아래와 같은 코드가 있습니다.

<!--@foreach($bottom_menu->list as $key => $val)-->

보시다시피 $main_menu 와 $bottom_menu는 생성시킨 메뉴와 연결되는 열쇠가 됩니다.
다른 반복제어문을 쓰더라도 이것들만 있으면 얼마든지 메뉴를 가져다가 쓸 수 있습니다.

지금까지가 메뉴를 가져오는 방법에 대한 설명이었습니다.
 "어디다가 어떻게 붙일 것인가"라는 것은 디자인을 어떻게 하고 반복-제어문을 어떻게 다룰 것인가의 문제입니다.

주~욱 길게 쓰긴 했는데 속을 들여다보니 별 내용 없네요..ㅠㅠ
다만 누구에게라도 도움이 되었으면 합니다.