다음을 통해 공유

[Umbraco 강좌] 15. 문서 타입(Document Types)에 속성 추가

  • 아티클

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

소개

이번 강좌에서는 새로운 문서 타입을 생성한 후 해당 문서 타입에 속성(Properties)을 추가하고, 이를 Umbraco 페이지 필드를 사용하여 템플릿에 추가한 후 이러한 문서 타입을 바탕으로 새로운 페이지를 만들어 웹 페이지로 보여주는 일련의 과정을 설명하도록 하겠습니다.

따라하기

Step 1: Document Type 만들기

1. [백오피스]-[Settings]-[Document Types]을 열고 새로운 문서 타입을 생성하려면, 문서 타입에 마우스 오른쪽 버튼클릭 후 [Create] 버튼을 클릭합니다. 아래 그림과 같이 [MyBlog]란 이름으로 문서 타입을 생성합니다.

062311_1302_15Docum1.png

2. [MyBlog] 문서 타입을 선택 후 [Generic properties] 탭을 선택하면 페이지 필드로 사용될 기본적으로 제공되는 속성이 따로 지정되어져 있지 않습니다.

062311_1302_15Docum2.png

3. 새로운 페이지 필드를 생성하기 전에 특정 카테고리로 관리하기 위한 탭을 생성하겠습니다. [MyBlog] 문서 타입에 [Tabs]탭에서 "MyBlogProperties"란 이름으로 아래 그림과 같이 새로운 탭을 하나 생성합니다. 생성 후 반드시 저장 아이콘을 클릭합니다.

062311_1302_15Docum3.png

4. [MyBlogProperties] 탭을 생성 후 [Generic properties] 탭을 선택한 후 속성 추가 링크를 클릭하면 아래 그림과 같이 새로운 속성을 추가할 수 있는 입력 화면이 나타납니다. 아래 그림의 [BlogTitle] 속성 추가를 위한 4가지 항목을 입력 또는 선택 후 저장 아이콘을 클릭합니다.

062311_1302_15Docum4.png

5. 아래 그림은 [BlogTags] 속성을 입력하는 화면입니다.

062311_1302_15Docum5.png

6. 최종적으로 [MyBlog] 문서 타입에 3개의 속성을 아래와 같이 추가합니다.

062311_1302_15Docum6.png

  • BlogTitle, Type : TextString
  • BlogTags, Type : Tags
  • BodyText, Type : Richtext editor

Step 2: 템플릿 만들기

1. [Settings]-[템플릿]-[MyBlog] 템플릿을 선택 후 [Umbraco 페이지 필드 삽입] 아이콘을 클릭하여 [필드 선택] 드롭다운리스트를 열어보면, 아래 그림처럼 앞서 문서 타입에서 추가한 3개의 속성이 목록으로 나열됨을 알 수 있습니다. 이처럼, 문서 타입에서의 속성은 Umbraco 페이지 필드를 사용하여 원하는 부분에 해당 데이터를 출력할 수 있습니다.

062311_1302_15Docum7.png

2. 3개의 Umbraco 태그를 추가하여 아래와 같은 식으로 blogTitle, bodyText, blogTags 속성이 추가되도록 설정합니다.

062311_1302_15Docum8.png

Step 3: 새로운 페이지(Page) 만들기

1. 앞서 만든 문서 타입 유형을 따르는 페이지를 생성합니다. 아래 그림과 같이 [컨텐츠]에 마우스 오른쪽 버튼을 클릭하여 [생성(Create)] 메뉴를 클릭하여 "Blog website"란 이름의 페이지를 "MyBlog" 문서 타입 유형으로 생성합니다.

062311_1302_15Docum9.png

2. [MyBlog] 타입으로 문서를 생성하면 아래 그림과 같이 3개의 항목이 입력되는 폼이 나타납니다. 간단히 데이터 입력 후 [저장 및 출판] 아이콘을 클릭합니다.

062311_1302_15Docum10.png

3. 새롭게 생성된 [Blog website]의 [속성] 탭을 살펴보면 문서 유형이 [Textpage]가 아닌 [MyBlog]로 선택된 것을 알 수 있고, 템플릿도 [MyBlog]로 선택되어 있습니다. 현재 페이지를 출력하려면, [저장 및 출판] 아이콘 옆에 있는 [미리 보기] 아이콘을 클릭합니다.

062311_1302_15Docum11.png

4. 앞서 생성된 3개의 속성을 가지는 문서 타입과 템플릿 그리고 이를 사용한 페이지를 만들어 웹으로 정상적으로 출력됨을 확인할 수 있습니다.

062311_1302_15Docum12.png

마무리

아~ 이제는 조금 감이 잡히고 있는 듯 합니다.

기존에 생성된 [Textpage] 문서 타입이 아닌 우리가 만든 새로운 문서 타입을 만들어서 적용해 보았습니다. 하지만, 약간 아쉬운 것은 기존 메뉴에 등록된 것이 아닌 새로운 웹 사이트 형태로 하나의 페이지만을 표현해 본 것입니다.

다음 시간에는 이어서 새로운 문서 타입을 적용하는 페이지는 기존 웹 사이트의 하위로 생성하는 방법에 대해서도 고민해 보는 시간을 갖도록 하겠습니다.

끝.

관련글