Freigeben über


[Umbraco 강좌] 30. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

이번 강좌에서는 디자인 시안을 적용한 Umbraco의 좌측 메뉴 부분인 서브 메뉴와 사이트 맵 패스(Bread crumb) 기능을 추가하는 방법에 대한 설명입니다.

따라하기

1. 아래 그림은 29회차 강좌까지의 Skin3 페이지를 실행한 결과입니다. 상단에 메뉴가 정상적으로 적용되어 출력됨을 확인할 수 있습니다. 이번 강좌에서는 아래 2개의 영역인 서브 메뉴 영역과 Message 영역에 사이트 맵 패스를 출력하는 기능을 꾸며 보도록 하겠습니다.

062611_1603_30HTML1.png

2. [Skin3] 문서 타입 하위로 [Skin3] 문서 타입을 사용하도록 [자식노드 타입 허용] 옵션을 줍니다.

062611_1603_30HTML2.png

3. [Skin3] 콘텐트 페이지 하위로 Sub1과 Sub2로 2개의 새로운 페이지를 생성합니다. 이 때 [선택 문서 유형은] 반드시 [Skin3] 문서 타입으로 설정합니다.

062611_1603_30HTML3.png

4. 아래 그림과 같이 [Skin3] 페이지 하위로 [Sub1]과 [Sub2] 만들어진 모습입니다. 내용은 간단하게 입력합니다.

062611_1603_30HTML4.png

5. [Skin3] 템플릿을 열고 왼쪽 메뉴의 타이틀 하단에 아래 그림과 같이 [Umbraco 매크로]를 사용하여 2nd Level Navigation을 삽입합니다.

062611_1603_30HTML5.png

위 코드의 일부는 아래와 같습니다.

<div id="aside-first" class="aside-first group">

<div id="ub_main_comm">

<div class="comm_menu">

<h1><umbraco:Item field="leftTitle" recursive="true" runat="server"></umbraco:Item></h1>

<umbraco:Macro Alias="umb2ndLevelNavigation" runat="server"></umbraco:Macro>

<p><img src="../Styles/images/@banner1.jpg"></p>

<p><img src="../Styles/images/@banner2.jpg"></p>

</div>

</div>

</div>

6. 웹 브라우저를 열고 [Skin3], [Sub1], [Sub2] 페이지를 실행시켜보면 아래와 같이 3개 페이지 공통으로 서브 메뉴가 출력됩니다.

062611_1603_30HTML6.png

7. 이번에는 디자인 시안 중 [messages] 영역에 아래 그림과 같이 또 다른 매크로인 [Bread Crumb]를 추가합니다.

062611_1603_30HTML7.png

위에서 사용한 코드의 일부는 아래와 같습니다.

<div id="messages">

<umbraco:Macro Alias="BreadcrumbNav" runat="server"></umbraco:Macro>

</div>

8. 사이트 맵 패스 기능을 추가한 후의 실행 모습입니다. [Skin3], [Sub1], [Sub2] 페이지 모두 해당 위치가 정상적으로 Message 영역에 출력됨을 확인할 수 있습니다. 여기까지의 단계를 거치면서 상단 메뉴와 왼쪽의 서브 메뉴 그리고 콘텐트 상단에 현재의 위치를 보여주는 사이트 맵 패스 기능까지 모두 구현을 해 보았습니다.

062611_1603_30HTML8.png

마무리

앞선 강좌들에서 다루었던 [문서 타입], [템플릿], [페이지] 등을 만들고 [템플릿]에 [Umbraco 페이지 필드] 및 [Umbraco 매크로] 기능을 사용하여 HTML 영역에 새로운 기능을 삽입하는 과정을 거치다 보니 어느덧 조금씩 생동감 있는 사이트로 변경되는 듯 합니다.

제가 따로 다뤄드리지 않겠지만, 더 많은 페이지 필드와 매크로 등의 기능을 사용하면 만들려고 하는 어떤 사이트가 되었든지 모두 Umbraco CMS로 충분히 구현할 수 있으리라 봅니다.

수많은 사이트가 Umbraco CMS로 구축된 이유가 이런 여러 가지 장점을 모두 갖추어서 그렇지 않을까 합니다.

끝.

관련글