[Orchard 강좌] 8. 레이어(Layer) 만들기


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

 

소개

안녕하세요. 박용준입니다.

이번 시간에는 특정 페이지의 레이아웃을 결정지어주는 레이어를 만드는 과정에 대해서 설명을 드리도록 하겠습니다.

따라하기 : 블로그 페이지에 사용할 블로그 전용 레이어 만들기

블 로그 페이지의 오른쪽 사이드바 영역에 블로그 관리자에 대한 소개 내용과 블로그 아카이브에 대한 내용을 포함하고자 할 때, 기존의 레이아웃 소스를 건드리는 방식이 아닌, CMS 솔루션에서 해당 레이아웃의 사이드바 영역(Zone)을 사용하여 해당 부분에 원하는 위젯 및 모듈을 삽입할 수 있습니다. 이러한 절차를 순서대로 알아보도록 하겠습니다.

1. Blog 페이지의 오른쪽 사이드 바 영역에 관리자 페이지를 만들어 보도록 하겠습니다. 아래 그림의 블로그 기본 경로는 ~/our-blog입니다.

image_thumb.png

2. 또한, 블로그 상세 보기 페이지에서도 동일하게 보여질 수 있도록 처리하도록 하겠습니다. 아래 그림의 블로그 상세보기 페이지의 경로는 ~/our-blog/my-first-post입니다.

image_thumb_1.png

3. 새로운 레이어를 만들기 위하여 [대시보드]-[위젯]으로 들어가서 아래 그림과 같이 [새 레이어 추가] 링크를 클릭합니다.

image_thumb_2.png

4. [레이어 추가] 화면에서 아래와 같이 3가지 항목을 입력합니다.

image_thumb_3.png

레이어 추가 설정 정보

  • 이름 : 특정 레이아웃에 해당하는 레이어(Layer)의 전용 이름입니다.
  • 설명 : 레이어에 대한 간단 설명을 입력하면 됩니다.
  • 레이어 룰 : 어떤 URL이 적용될 때 현재 레이어가 적용될지를 결정시켜 줍니다.
    • url “~/our-blog” : 웹 사이트 루트에서 “~/our-blog”라고 지정된 경로로 설정되면 현재 레이어가 자동 적용됩니다.
    • url “~/our-blog*” : “~/our-blog”로 시작하는 모든 하위 URL까지를 포함해서 레이어가 적용되도록 설정할 수 있습니다.

5. 레이어를 추가한 후 [위젯] 메뉴로 돌아와서 [현재 레이어] 항목 드롭다운리스트를 열어보면 아래 그림처럼 “BlogLayer”가 추가된 확인할 수 있습니다.

image_thumb_4.png

6. 앞서 생성한 “BlogLayer”란 이름의 레이어를 선택한 후 아래 그림과 같이 [AsideSecond] 영역(Zone)에 블로그 사용자 정보를 입력하기 위해서 [추가] 버튼을 클릭합니다.

image_thumb_5.png

7. [위젯 선택] 페이지에서 [Html Widget]으로 사용자에 대한 사진과 간단 소개 글을 입력할 수 있고, [Blog Archives] 위젯을 통해서 블로그 아카이브를 등록할 수 있습니다.

image_thumb_6.png

8. [Html Widget]를 통해서 아래와 같이 간단히 사진과 텍스트를 입력합니다.

image_thumb_8.png

9. [BlogLayer] 레이어의 [AsideSecond] 영역에 [Html Widget]이 하나 추가된 것을 알 수 있습니다. 이 위젯은 메인 페이지와 같은 다른 페이지에서는 보여지지 않고, 블로그 페이지에서만 보여집니다.

image_thumb_11.png

10. 블로그 페이지에 와서 앞서 설정한 [Html Widget]이 적용되었는지를 확인합니다.

image_thumb_13.png

11. 현재까지 설정으로는 블로그에 대한 상세보기 페이지로 이동했을 때에는 아직 AsideSecond 영역에 위젯이 표시가 되지 않습니다.

image_thumb_14.png

12. 블로그 상세 페이지에서도 위젯이 표시가 되려면, 다시 위젯 설정 메뉴의 [BlogLayer] 항목을 선택 후, [편집] 버튼을 클릭합니다.

image_thumb_15.png

13. [레이어 편집] 화면에서 [레이어 룰] 항목을 [url “~/our-blog”]에서 [url “~/our-blog*”]로 변경 설정합니다. 이렇게 설정하면 블로그 하위 페이지에서도 동일한 레이어가 적용됩니다. 설정 후 [저장] 버튼을 클릭합니다.

image_thumb_16.png

14. 다시 블로그 페이지 및 블로그 상세 페이지로 접속해보면 이제는 하위 페이지까지도 동일하게 [Html Widget]이 적용됨을 알 수 있습니다. 참고로 아래 사진은 몇 년전에 제가 휴대폰 카메라로 찍은 셀카 사진입니다.^^ 이럴 때 사용하게 될 줄은 몰랐네요…

image_thumb_17.png

마무리

Orchard CMS에서 사용되는 기본 테마(Theme)는 TheThemeMachine인데요… 이는 어찌보면 상당히 잘 만들어진 레이아웃 구조를 가지고 있습니다. 테마가 가지고 있는 모든 영역이 모든 페이지에서 사용되는 것은 아니기에 특정 페이지에서만 사용되는 레이아웃 구조를 따로 레이어(Layer)라는 단위로 관리하고 있습니다.

관련글


Comments (0)

Skip to main content