Partager via

[Umbraco 강좌] 13. Umbraco 페이지 필드(태그(Tags))

  • Article

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

소개

Umbraco에서 템플릿의 특정 위치에 미리 정의된 내용을 출력하는 기능을 표현할 때 Umbraco 태그(Tags)를 제공하는데, 아래 코드와 같은 식으로 표현합니다.

<umbraco:item field="" 기타속성="" runat="server" />

이번 강좌에서는 Umbraco에서 기본적으로 제공하는 Umbraco 태그를 삽입하는 과정을 보여줍니다.

따라하기

1. MyTemplate 템플릿의 하위 템플릿인 MyPage 템플릿에는 앞선 강좌에서 pageName과 bodyText라는 이름의 Umbraco 태그를 적용하였습니다. 아래 그림의 Umbraco 태그 삽입 아이콘을 클릭합니다.

062311_1140_13Umbraco1.png

2. Umbraco 태그 즉, Umbraco 페이지 필드를 삽입하는 화면입니다. 아래 2개의 내용을 입력합니다. [필드 선택] 항목에서 "siteName"을 [대체 필드] 항목은 "pageName"을 입력한 후 [삽입] 버튼을 클릭합니다. 만약, [필드 선택] 항목의 값이 널(NULL) 값이면 [대체 필드]의 값이 출력되도록 설정하는 내용입니다.

062311_1140_13Umbraco2.png

Umbraco 페이지 필드에 대한 간단 설명

  • 필드 선택 : 어떤 페이지 필드를 출력할 것인지 설정. 이 항목 사용해도 무관할 정도임
  • 대체 필드 : [필드 선택] 항목에 출력될 값이 없을때에는 [대체 필드]의 값이 출력됨
  • 대체 글꼴 : [필드 선택]과 [대체 필드]의 값이 없으면 [대체 글꼴]의 값이 출력됨
  • Recursive : meta keywords 처럼 앞서 정의된 내용이 없을 때 현재 필드의 값을 출력
  • 필드 앞에 삽입 : 특정 페이지 필드 앞에 문자열 붙임
  • 필드 뒤에 삽입 : 특정 페이지 필드 뒤에 문자열 붙임
  • 날짜 포맷으로 : 날짜에 대한 출력 형식을 지정
  • Cashing : 대, 소문자로 변환해서 출력
  • [encoding] : HTML로 표현할 지 코드로 출력될 지 결정
  • 줄바꿈문자 변환 : br 태그 출력 여부 결정
  • 단락 태그 삭제 : p 태그 제거

3. 위 순서에서 진행한대로 Umbraco 페이지 필드를 추가한 후의 모습입니다. 수작업으로 입력해도 되지만, Umbraco 페이지 필드 입력 아이콘을 활용하면 편리하겠지요?

062311_1140_13Umbraco3.png

4. MyPage 템플릿이 적용된 [시작하기] 페이지를 실행한 결과 아래 위치에 정상적으로 "siteName" 필드가 적용된 채로 출력됩니다.

062311_1140_13Umbraco4.png

5. MyPage 템플릿에 추가적으로 아래 그림과 같이 3개의 항목을 입력해 보았습니다. [필드 선택]과 [대체 필드] 항목의 값이 설정되지 않으면 [대체 글꼴]의 값이 출력되도록 설정하는 내용입니다.

062311_1140_13Umbraco5.png

6. 위 단계에서의 결과값이 아래와 같이 출력됩니다.

062311_1140_13Umbraco6.png

7. 앞서서 사용한 Umbraco 태그 중 "bodyText"와 같은 키워드는 어디에서 온 것일까요? 이것은 [Settings]-[문서 타입]-[Generic properities]에서 추가한 속성 중 아래 그림과 같이 [Alias] 항목의 "bodyText"에서 온것입니다. 이처럼, 사용자가 직접 추가한 속성의 별칭이 Umbraco 텍스트 필드의 이름으로 자동으로 적용되어 사용할 수 있습니다.

062311_1140_13Umbraco7.png

8. 아래 그림은 특정 템플릿에서 Umbraco 페이지 필드 삽입 아이콘을 클릭하여 "pageName"과 같은 페이지 필드를 추가하는 내용입니다.

062311_1140_13Umbraco8.png

마무리

Umbraco에서 템플릿(Template)은 페이지 레이아웃을 담당하는 부분이고, 각 레이아웃의 특정 위치에 HTML 또는 텍스트를 출력하는 위젯(Widgets) 역할을 하는 부분이 Umbraco 페이지 필드(태그)입니다. 또한, Umbraco 페이지 필드에 저장되는 값들에 대한 정의를 가지고 있는 곳이 문서 타입(Document Type)입니다. 앞으로 몇 개의 강좌를 더 반복하면서 이러한 단어에 대해서 더 확고한 정의를 하도록 하겠습니다.

필자는 누가 가르쳐주는 것도 아니고, Umbraco 영문 자료를 바탕으로 자료를 만들다 보니 이러한 용어에 대한 뜻을 알아가는 게 가장 어려웠던 것 같습니다. 그러다 보니, 무작정 떠라 하기로 템플릿, 페이지 필드, 문서 타입을 만들면서 연습하다 보니, Umbraco 제작자들이 의미하는 단어에 대해서 그 의미를 쉽게 이해할 수 있었습니다.

그런 의미에서 이 글을 읽으시는 여러분들도 만약 어떤 내용이 이해가 가지 않는다면, "무작정 따라 하기" 전법을 구사해 보기 바랍니다.

끝.

관련글