다음을 통해 공유

[Umbraco 강좌] 8. 캔버스 내용 편집

  • 아티클

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

소개

이번 강좌에서는 Umbraco CMS에서 제공하는 유용한 기능 중 하나인 캔버스(Canvas) 편집 기능에 대해서 설명 드리고자 합니다. 캔버스 편집 기능은 특정 아티클을 에디터 기반에서 편집을 하는 방식이 아닌 해당 콘텐트가 표시되는 영역에서 직접 내용을 보면서 편집하는 기능을 나타냅니다.

따라하기

1. Umbraco CMS 솔루션의 [백오피스]로 접근합니다. 특정 콘텐트에 대한 편집 기능은 기본적으로 해당 콘텐트의 메인 영역의 에디터를 사용하여 편집하면 됩니다. 만약, 실제로 출력되는 곳에서 전체 레이아웃을 보면서 편집하고자 한다면, 아래 그림처럼 해당 콘텐트에 마우스 오른쪽 버튼을 클릭하여 나타나는 메뉴 중 [캔버스 내용 편집] 항목을 클릭하면 됩니다.

062111_2048_81.png

2. [캔버스 내용 편집]을 선택한 후 메인 페이지로 이동하면 아래 그림처럼, 특정 콘텐트에 마우스를 올려보면 [Click to edit the pageName field of 'XXX'] 식으로 편집할 수 있는 메뉴가 선택됩니다.

062111_2048_82.png

3. 아래 그림은 [캔버스 내용 편집] 상태에서 제목과 내용을 변경하는 모습을 보여줍니다. 내용 편집 후 다른 영역을 마우스로 선택하면 자동으로 편집된 내용이 저장됩니다.

062111_2048_83.png

4. 최종 완성된 상태입니다. 메뉴의 텍스트와 내용이 변경되어 적용되었음을 알 수 있습니다.

062111_2048_84.png

마무리

이번 시간에 알아본 [캔버스 내용 편집] 기능은 개발자가 구현하기에는 힘이 들어도 일반 사용자가 페이지 내용 편집 시에는 상당히 편리한 기능일 듯 합니다.

여기까지 해서 일반적인 페이지를 생성하고 편집 및 삭제하는 기능에 대한 소개를 마치고 계속해서 Umbraco CMS의 여러 가지 주요한 기능들을 계속해서 살펴보도록 하죠. 간단하고 어렵지 않은 내용이기에 단숨에 다음 번 강좌까지 이동해 보겠습니다.

끝.

관련글