본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.
오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)
소개
안녕하세요. 박용준입니다.
이번 시간에는 특정 페이지의 레이아웃을 결정지어주는 레이어를 만드는 과정에 대해서 설명을 드리도록 하겠습니다.
따라하기 : 블로그 페이지에 사용할 블로그 전용 레이어 만들기
블로그 페이지의 오른쪽 사이드바 영역에 블로그 관리자에 대한 소개 내용과 블로그 아카이브에 대한 내용을 포함하고자 할 때, 기존의 레이아웃 소스를 건드리는 방식이 아닌, CMS 솔루션에서 해당 레이아웃의 사이드바 영역(Zone)을 사용하여 해당 부분에 원하는 위젯 및 모듈을 삽입할 수 있습니다. 이러한 절차를 순서대로 알아보도록 하겠습니다.
1. Blog 페이지의 오른쪽 사이드 바 영역에 관리자 페이지를 만들어 보도록 하겠습니다. 아래 그림의 블로그 기본 경로는 ~/our-blog입니다.
2. 또한, 블로그 상세 보기 페이지에서도 동일하게 보여질 수 있도록 처리하도록 하겠습니다. 아래 그림의 블로그 상세보기 페이지의 경로는 ~/our-blog/my-first-post입니다.
3. 새로운 레이어를 만들기 위하여 [대시보드]-[위젯]으로 들어가서 아래 그림과 같이 [새 레이어 추가] 링크를 클릭합니다.
4. [레이어 추가] 화면에서 아래와 같이 3가지 항목을 입력합니다.
레이어 추가 설정 정보
- 이름 : 특정 레이아웃에 해당하는 레이어(Layer)의 전용 이름입니다.
- 설명 : 레이어에 대한 간단 설명을 입력하면 됩니다.
- 레이어 룰 : 어떤 URL이 적용될 때 현재 레이어가 적용될지를 결정시켜 줍니다.
- url “~/our-blog” : 웹 사이트 루트에서 “~/our-blog”라고 지정된 경로로 설정되면 현재 레이어가 자동 적용됩니다.
- url “~/our-blog*” : “~/our-blog”로 시작하는 모든 하위 URL까지를 포함해서 레이어가 적용되도록 설정할 수 있습니다.
5. 레이어를 추가한 후 [위젯] 메뉴로 돌아와서 [현재 레이어] 항목 드롭다운리스트를 열어보면 아래 그림처럼 “BlogLayer”가 추가된 확인할 수 있습니다.
6. 앞서 생성한 “BlogLayer”란 이름의 레이어를 선택한 후 아래 그림과 같이 [AsideSecond] 영역(Zone)에 블로그 사용자 정보를 입력하기 위해서 [추가] 버튼을 클릭합니다.
7. [위젯 선택] 페이지에서 [Html Widget]으로 사용자에 대한 사진과 간단 소개 글을 입력할 수 있고, [Blog Archives] 위젯을 통해서 블로그 아카이브를 등록할 수 있습니다.
8. [Html Widget]를 통해서 아래와 같이 간단히 사진과 텍스트를 입력합니다.
9. [BlogLayer] 레이어의 [AsideSecond] 영역에 [Html Widget]이 하나 추가된 것을 알 수 있습니다. 이 위젯은 메인 페이지와 같은 다른 페이지에서는 보여지지 않고, 블로그 페이지에서만 보여집니다.
10. 블로그 페이지에 와서 앞서 설정한 [Html Widget]이 적용되었는지를 확인합니다.
11. 현재까지 설정으로는 블로그에 대한 상세보기 페이지로 이동했을 때에는 아직 AsideSecond 영역에 위젯이 표시가 되지 않습니다.
12. 블로그 상세 페이지에서도 위젯이 표시가 되려면, 다시 위젯 설정 메뉴의 [BlogLayer] 항목을 선택 후, [편집] 버튼을 클릭합니다.
13. [레이어 편집] 화면에서 [레이어 룰] 항목을 [url “~/our-blog”]에서 [url “~/our-blog*”]로 변경 설정합니다. 이렇게 설정하면 블로그 하위 페이지에서도 동일한 레이어가 적용됩니다. 설정 후 [저장] 버튼을 클릭합니다.
14. 다시 블로그 페이지 및 블로그 상세 페이지로 접속해보면 이제는 하위 페이지까지도 동일하게 [Html Widget]이 적용됨을 알 수 있습니다. 참고로 아래 사진은 몇 년전에 제가 휴대폰 카메라로 찍은 셀카 사진입니다.^^ 이럴 때 사용하게 될 줄은 몰랐네요…
마무리
Orchard CMS에서 사용되는 기본 테마(Theme)는 TheThemeMachine인데요… 이는 어찌보면 상당히 잘 만들어진 레이아웃 구조를 가지고 있습니다. 테마가 가지고 있는 모든 영역이 모든 페이지에서 사용되는 것은 아니기에 특정 페이지에서만 사용되는 레이아웃 구조를 따로 레이어(Layer)라는 단위로 관리하고 있습니다.
관련글