소개
이번 강좌에서는 앞서 만들었던 Lecture Reviews와 같은 리스트의 값 중 최근 자료 5개의 제목과 링크를 홈페이지 메인의 특정 영역에 요약해서 출력해주는 기능을 구현해 보도록 하겠습니다.
절차
Step 1: 리스트를 메인의 사이드바 영역에 출력하기
1. Lecture Reviews 메뉴로 이동합니다. 5개 이상을 테스트 해보기 위해서 더 많은 내용을 입력하려고 대시보드로 이동합니다.
2. 대시보드로 들어가서 [Lecture Review] Content Type을 여러 개 더 입력합니다.
3. 아래 그림의 오른쪽 하단 영역에 리스트를 요약해서 출력하고자 합니다.
4. 아래 그림처럼 [위젯]-[AsideSecond]에 [추가] 버튼을 클릭합니다.
5. [Container Widget] 항목을 클릭합니다.
6. 앞서 만들어놓은 [Lecture Reviews] 리스트를 선택하고 최근 자료부터 내림차순으로 5개 출력하도록 설정합니다.
7. 일단 메인 페이지에 전체 데이터가 다 출력됨을 확인 합니다.
Step 2: 메인페이지에 보여지는 UI 변경
1. [Shape Tracing] 도구를 사용하여 메인 페이지에 보여지는 내용의 한 영역(Zone)을 선택합니다. 아래 그림은 Content-LectureReview-rul-homepage.Summary.cshtml이 선택되었고, 이 항목의 왼편에 있는 [Create] 버튼을 클릭하여 물리적인 소스 파일을 생성합니다.
2. WebMatrix로 돌아와서 아래 그림과 같이 <header>와 <footer>를 제외한 중간 영역을 제거합니다. 이러한 소스 편집 부분에 대해서는 우리가 ASP.NET MVC 3를 모른다고 가정하기에 간단히 설명하고 넘어가겠습니다. ASP.NET MVC 3를 안다면 편집 관련해서는 더 많은 방법이 존재합니다.
3. 다시 메인으로 돌아와서 확인해보면 아래와 같이 간단히 링크 제목과 작성일 정도만이 표시됩니다.
4. 메타 태그 및 요약해서 출력되어지는 이 부분 또한 앞선 강좌에서 다뤄본 Placement.info 파일을 편집해서 없애거나 수정할 수 있습니다.
5. 아래 그림은 메인에 보여질 리스트의 메타데이터를 삭제하는 모습입니다.
6. 최종적으로 메인으로 왔을 때에는 메타데이터가 표시되지 않음을 확인할 수 있습니다.
마무리
한국형 스타일의 홈페이지들을 살펴보면 메인 페이지에 [공지사항 5개 요약 리스트] 등을 많이 표현합니다. 이처럼 Orcahrd를 사용하여 C#과 ASP.NET 소스를 건드리지 않고 간단한 편집 도구만을 사용하여 이러한 기능을 구현하는 방법에 대해서 살펴보았습니다.
끝.
참고 자료
관련글
본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.
오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)