[Umbraco 강좌] 18. 문서 타입(Document Types) 자식 노드 허용
이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================
소개
안녕하세요. 박용준입니다. 벌써 18번째 강좌 시간입니다.
이번 강좌에서는 문서 타입의 [자식 노드 허용]이라는 옵션 기능을 설명하고자 합니다.
특정 문서 타입으로 만들어진 콘텐트 페이지 하위로 또 다른 페이지(서브 페이지)를 두고자 할 때에는 반드시 해당 문서 타입의 하위로 둘 문서 타입에 대한 [자식 노드 허용] 옵션을 체크해야 합니다.
말보다는 그림과 절차를 통해서 이를 살펴보도록 하죠.
따라하기 : [Simple website] 하위로 [MyBlog] 문서 타입 페이지 생성하기
1. [Simple website]의 하위에는 [Textpage] 문서 타입을 갖는 페이지만을 생성할 수 있습니다.
2. [Simple website]을 클릭 후 [속성] 탭을 확인해 보면 아래 그림처럼 [문서 유형]이 [Homepage]로 설정되어있음을 알 수 있습니다.
3. [Simple website]에 마우스 오른쪽 버튼을 클릭하여 [생성(Create)] 메뉴를 클릭하면 아래와 같이 [Create] 화면이 나타나는데, 이때 [선택 문서 유형]에서 선택할 수 있는 항목이 [Textpage] 문서 타입 하나만 존재합니다. 즉, [Simple website] 하위로 [Textpage]가 아닌 다른 문서 타입의 페이지를 생성할 때 사용하는 게 바로 [문서 타입 자식 노드 허용] 옵션인 것입니다.
4. [Settings]-[문서 타입]-[Homepage]를 클릭 후 [Structure] 탭으로 이동합니다. 기본값은 [Textpage]만 추가되어있습니다. 여기에 [자식 노드 타입 허용] 옵션에서 아래 그림과 같이 나머지 항목도 모두 체크를 합니다.
5. 다시 컨텐츠 섹션으로 돌아와서 [Simple website]에 마우스 오른쪽 버튼을 클릭하여 [생성(Create)] 메뉴를 클릭하면 아래 그림과 같이 [Create] 화면에서 [선택 문서 유형] 항목 리스트에 앞서 체크한 [문서 타입]이 추가된 것을 알 수 있습니다.
6. 아래 그림과 같이 [Blog] 이름으로 [MyBlog] 선택 문서 유형을 선택하고 페이지를 생성합니다.
7. 아래 그림과 같이 단순히 bodyText만을 입력하는 화면이 아닌 BlogTitle, BlogTags와 bodyText를 입력하는 화면이 나타납니다. 데이터 입력 후 [저장 및 출판] 메뉴를 클릭하고, [미리보기] 메뉴를 클릭하여 실행합니다.
8. 웹 페이지로 실행된 [MyBlog] 문서 타입 형태의 웹 페이지 모습입니다.
9. [Content] 영역에서 보여지는 페이지의 아이콘을 변경하려면, 해당 문서 타입의 [Info] 탭에서 원하는 모양의 아이콘 이미지와 썸네일 이미지를 변경할 수 있습니다.
10. 필자는 아래 그림과 같이 아이콘과 썸네일을 Doc과 doc.png 파일로 각각 변경하였습니다.
11. 다시 [백오피스]의 컨텐츠 섹션으로 이동한 후 [Blog] 페이지 왼쪽의 아이콘을 보면, 다른 페이지와 동일하게 아이콘의 모양이 변경되었음을 알 수 있습니다.
12. 이런 방식을 사용하여 [Simple website]와 같이 [문서 유형]이 Homepage로만 설정된 상태에서 추가적인 문서 타입을 하위로 두고자 할 때에는 [자식 문서 타입 허용] 옵션을 사용하는 것입니다.
13. 아래 그림은 [Simple website] 페이지 하위에 [MyBlog] 문서 타입을 갖는 [Blog] 페이지를 최종적으로 만들고 아이콘까지 변경한 모습입니다.
마무리
이번 강좌까지 해서 Umbraco의 Document Type(문서 타입, 문서 유형)에 대한 전반적인 설명을 다 하였습니다.
이러한 내용을 기반으로 문서 타입과 템플릿 그리고 페이지 간의 유기적인 연결을 통해서 하나의 페이지를 만들고 또한, 해당 페이지의 하위 페이지로 또 다른 문서 타입을 생성 하는 등등의 일련의 작업을 진행할 수 있으리라 봅니다.
끝.
관련글
- Umbraco-1. Umbraco 소개
- Umbraco-2. Umbraco 개발 환경 구축
- Umbraco-3. Umbraco 설치
- Umbraco-4. 사용자 모드와 관리자 모드(백오피스)
- Umbraco-5. 새로운 페이지(Page) 만들기
- Umbraco-6. 한글 언어팩(Languages) 적용하기
- Umbraco-7. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개
- Umbraco-8. 캔버스 내용 편집
- Umbraco-9. 미디어 파일 관리
- Umbraco-10. 사용자(User) 관리
- Umbraco-11. 스타일 추가 및 변경
- Umbraco-12. 템플릿(Templates)과 마스터페이지(MasterPages)
- Umbraco-13. Umbraco 페이지 필드(태그(Tags))
- Umbraco-14. 문서 타입(Document Types)
- Umbraco-15. 문서 타입(Document Types)에 속성 추가
- Umbraco-16. 부모 문서 타입(Document Types) 사용하기
- Umbraco-17. 문서 타입(Document Types) 내보내기 및 가져오기
- Umbraco-18. 문서 타입(Document Types) 자식 노드 허용
- Umbraco-19. 기본 매크로(Macros) 사용하기
- Umbraco-20. 새로운 매크로(Macro) 만들기
- Umbraco-21. 매크로(Macro)에 파라미터 전달
- Umbraco-22. 사진 갤러리(Gallery) 만들기 1
- Umbraco-23. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기
- Umbraco-24. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용
- Umbraco-25. 회원(Members) 관리
- Umbraco-26. 사전(Dictionaries)
- Umbraco-27. 패키지(Packages)
- Umbraco-28. HTML 레벨의 스킨 파일 적용 1
- Umbraco-29. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴
- Umbraco-30. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵
- Umbraco-31. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀
- Umbraco-32. 배포 : Umbraco CMS를 원격 서버에서 실행