소개
Placement.info 파일
Orchard 웹 사이트내의 테마 또는 모듈 폴더의 루트에는 Placement.info 파일이 존재합니다.
이는 XML 파일로 각각의 Content Item의 위치를 지정할 수 있습니다. 즉, Orchard를 통해서 실행되는 모든 UI 영역에 대한 위치 설정을 Placement.info 파일을 통해서 수작업으로 변경할 수 있습니다.
Placement.info XML 파일은 Placement 루트 요소를 가지고 있고, 그 안에 Place 요소와 Match 요소를 정의할 수 있습니다.
“Place” 요소(Element)
Place 요소는 하나의 Shape(예를 들어, Parts_Tags_ShowTags)에 대한 위치 값을 지정합니다. 여기서 특정 Content Item에 보여지는 Shape에 대한 정보는 앞서 강좌에서 살펴본 Designer Tools 모듈을 통해서 쉽게 확인할 수 있습니다.
Place 요소에 포함되는 애트리뷰트는 중복되지 않은 어떤 Shape의 이름도 사용될 수 있습니다. 예를 들어 아래 코드는 Location이라는 이름으로 만들어진 텍스트필드(TextField)를 나타냅니다.
<Place Fields_Common_Text-Location=”-“ />
Place 요소에 포함된 애트리뷰트의 값(Value)은 Zone 이름(Header, Meta, Content, Footer, …)과 콜론(:) 그리고 위치값으로 표시됩니다. 위치값은 단일 숫자값으로 표현되는데, 1,5, 10, 42와 같은 형태 또는 1.2, 1.5, 2.3 식으로도 표현이 가능합니다.
위치값을 표현하는데, 숫자값 이외에 “before”와 “after”값을 사용하여 특정 Shape의 위치값을 결정할 수 있습니다.
“Match” Element
Match 요소는 특정 Place 태그 집합에 대해서 보여질 범위(Scope)를 결정지을 수 있습니다. 이와 관련된 속성들은 아래와 같습니다.
- DisplayType
- Detail 또는 Summary를 지정하여 어느 영역에서 보여질 지 결정
- ContentType
- BlogPost, Page, Widget 등의 Content Type 지정
- Path
- Path=”/About”와 같이 특정 URL에 해당하는 영역 지정 가능
- Path=”/MyBlog/*”로 지정하면 하위 모든 URL에 대한 영역 지정
샘플 예제
<Placement>
<!-- Event ContentType에 대해서만... -->
<Match ContentType="Event">
<Match DisplayType="Detail">
<Place Parts_Common_Metadata="-" />
<Place Fields_Common_Text-Location="Content:5" />
<Place Fields_Contrib_DateTime="Content:6.5" />
</Match>
</Match>
<!-- Lecture Review ContentType에 대해서만... -->
<Match ContentType="LectureReview">
<Match DisplayType="Detail">
<Place Parts_Common_Metadata="-" />
<Place Fields_Common_Text="Content:after" />
</Match>
</Match>
</Placement>
절차
Step 1: 특정 필드를 화면에서 없애기
1. 아래 그림의 Event 페이지에서 특정 Content Type이 출력될 때 항상 보여지는 메타 데이터인 작성날짜를 화면에서 보이지 않게 설정하고자 합니다.
2. WebMatrix와 같은 편집 도구를 사용하여 현재 Orchard에서 사용되는 테마의 루트에 위치하는 Placement.info 파일을 열고, 기본적으로 작성된 코드를 모두 삭제합니다.
3. [Shape Tracing] 도구를 사용하여 아래 그림의 메타 데이터(날짜 출력)을 마우스로 선택 후 오른쪽 하단의 [Shape] 탭의 Display Type과 Shape의 이름을 기억합니다.
위 그림에서의 Shape는 Parts_Common_Metadata이고, Display Type은 Detail입니다.
4. Placement.info 파일로 이동하여 아래와 같이 입력합니다. 간단히 설명하면 ContentType이 Event이고 DisplayType이 Details인 영역에 대해서만 메타데이터(Parts_Common_Metadata)를 “-“로 설정하여 보여지지 않도록 하라… 입니다.
위에서 작성할 코드:
<Placement>
<!-- Event ContentType에 대해서만... –>
<Match ContentType="Event">
<Match DisplayType="Detail">
<Place Parts_Common_Metadata="-" />
</Match>
</Match>
<!-- Lecture Review ContentType에 대해서만... –>
<Match ContentType="LectureReview">
<Match DisplayType="Detail">
<Place Parts_Common_Metadata="-" />
<Place Fields_Common_Text="Content:after" />
</Match>
</Match>
</Placement>
5. 메인 페이지로 돌아와서 새로고침하면 현재 Content Type에 대한 메타데이터가 보여지지 않음을 알 수 있습니다.
Step 2: 특정 필드의 보여지는 위치 변경
1. 이번에는 아래 그림의 Location 필드 영역을 Date 필드 영역 뒤로 보여지게 설정하는 부분에 대해서 살펴보도록 하겠습니다. [Shape Tracing] 도구로 Location 필드를 찍어보면, Fields.Common.Text-Location.cshtml 파일이 Location을 표시함을 알 수 있습니다. 이때 Fields.Common.Text-Location는 Placement.info 파일에서는 Fields_Common_Text-Location로 표시해야 합니다.
2. Placement.info 파일로 이동해서 아래와 같이 작성합니다. <Place Fields_Common_Text="Content:after" /> 식으로 입력해야하는 데 간단한 의미는 Fields_Common_Text 필드인 Location을 Content 출력 영역 다음(after)에 출력하라는 의미입니다.
위에서 작성할 코드:
<Placement>
<!-- Event ContentType에 대해서만... –>
<Match ContentType="Event">
<Match DisplayType="Detail">
<Place Parts_Common_Metadata="-" />
</Match>
</Match>
<!-- Lecture Review ContentType에 대해서만... –>
<Match ContentType="LectureReview">
<Match DisplayType="Detail">
<Place Parts_Common_Metadata="-" />
<Place Fields_Common_Text-Location="Content:after" />
</Match>
</Match>
</Placement>
3. 설정 완료 후 아래 그림처럼 Location이 하단에 출력됨을 알 수 있습니다.
4. 마찬가지로 아래 그림의 Date 필드의 위치값을 변경해서 Location 다음에 Date 필드가 나올 수 있도록 설정 가능합니다.
5. 현재까지 설정한 내용의 Placement.info 파일의 전체 구조입니다. Content:5보다 Content:6.5가 작기에 오름차순으로 먼저 보여지는 식입니다.
6. 또한, 리스트(메인) 페이지에서는 보여지고, 상세보기 페이지에서는 보여지지 않도록 설정할 수도 있습니다.
7. DisplayType이 Detail이면 상세보기 페이지에 대해서만 특정 설정을 진행할 수 있습니다.
마무리
Orchard의 대부분의 내용은 동적으로 생성되기에 특정 UI가 기본값으로 출력되는 경우가 있습니다. 이러한 경우에는 Orchard 원본 소스를 고쳐서 작성하는 게 아닌 Placement.info 파일에서 각각의 출력 개체(필드…)에 대한 위치값을 변경해서 사용할 수도 있습니다. 왜 이렇게 귀찮은 방법을 사용해야만 하는지 의구심도 들지만, 멈춰있는 소스 자체가 아닌 DB에서 만들어진 UI다 보니 이러한 방법으로 위치값을 변경해야 함을 이해하셔야 합니다.
Placement.info 파일에 대한 좀 더 많은 정보는 아래 공식 사이트(영문)를 참고하시기 바랍니다.
http://orchardproject.net/docs/Understanding-placement-info.ashx
끝.
참고 자료
관련글
본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.
오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)