소개
이번 강좌에서는 앞서 만들었던 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 소스를 건드리지 않고 간단한 편집 도구만을 사용하여 이러한 기능을 구현하는 방법에 대해서 살펴보았습니다.
끝.
관련글
- 0. Orchard CMS 소개
- 1. Orchard CMS 개발 환경 구축–WebPlatformInstaller 3 다운 및 설치
- 2. Orchard CMS 설치
- 3. 페이지(Pages) 추가하기
- 4. 블로그 모듈 추가 및 아티클 작성하기
- 5. 위젯(Widet)으로 메인에 HTML 조각 삽입하기
- 6. 다국어 처리 : 한글 언어팩 설치
- 7. 미디어(이미지…) 관리
- 8. 레이어(Layer) 만들기
- 9. Windows Live Writer를 사용하여 블로그 아티클 작성하기
- 10. 위젯(Widget) 추가 및 빙맵(BingMap) 모듈 적용하기
- 11. Chapters 모듈 설치 및 적용
- 12. 검색(Search) 기능 구현하기
- 13. Content Localization(컨텐트에 대한 다국어 처리)
- 14. 테마(Theme) 다운로드 및 적용
- 15. 새로운 나만의 테마(Theme) 만들기(자식 테마 만들기)
- 16. 사용자 정의 Content Type 만들기
- 17. 리스트(List)로 Content Type 그룹화
- 18. Designer Tools로 UI의 원하는 부분 변경하기
- 19. Placement.info 파일 이해하기
- 20. 리스트(List)를 위젯(Widget)으로 표현하여 요약 출력하기
- 21. Orchard 사이트 설정 변경
- 22. Orchard.exe 소개 및 사용 데모
- 23. 사용자(Users)와 역할(Roles) 관리
- 24. 초간단 모듈 제작 : HelloWorld 모듈 만들기
- 25. 추가 모듈 다운 및 적용 : FollowMe 모듈
- 26. 최근 트위터(Twitter) 목록 나열하기
- 27. 파일 필드 모듈 적용하기(파일 업로드 및 다운로드)
- 28. Orchard CMS를 원격 서버로 배포
- 29. Orchard CMS를 SQL Server R2에 설치하기
- 30. Orchard CMS 테마 시안 잡기(순수 HTML/CSS 레벨)
- 31. 페이지 추가시 “add a widget layer” 링크를 사용하여 페이지에 특화된 레이어 만들기
- 32. Command-Line Interface 사용하기
관련 동영상 참고 자료
- 1. Orchard CMS 개발 환경 구축–WebPlatformInstaller 3 다운 및 설치
- 2. Orchard CMS 설치
- 3. 페이지(Pages) 추가하기
- 4. 블로그 모듈 추가 및 아티클 작성하기
- 5. 위젯(Widet)으로 메인에 HTML 조각 삽입하기
- 6. 다국어 처리 : 한글 언어팩 설치
- 7. 미디어(이미지…) 관리
- 8. 레이어(Layer) 만들기
- 9. Windows Live Writer를 사용하여 블로그 아티클 작성하기
- 10. 위젯(Widget) 추가 및 빙맵(BingMap) 모듈 적용하기
- 11. Chapters 모듈 설치 및 적용
- 12. 검색(Search) 기능 구현하기
- 13. Content Localization(컨텐트에 대한 다국어 처리)
- 14. 테마(Theme) 다운로드 및 적용
- 15. 새로운 나만의 테마(Theme) 만들기(자식 테마 만들기)
- 16. 사용자 정의 Content Type 만들기
- 17. 리스트(List)로 Content Type 그룹화
- 18. Designer Tools로 UI의 원하는 부분 변경하기
- 19. Placement.info 파일 이해하기
- 20. 리스트(List)를 위젯(Widget)으로 표현하여 요약 출력하기
- 21. Orchard 사이트 설정 변경
- 22. Orchard.exe 소개 및 사용 데모
- 23. 사용자(Users)와 역할(Roles) 관리
- 24. 초간단 모듈 제작 : HelloWorld 모듈 만들기
- 25. 추가 모듈 다운 및 적용 : FollowMe 모듈
- 26. 최근 트위터(Twitter) 목록 나열하기
- 27. 파일 필드 모듈 적용하기(파일 업로드 및 다운로드)
- 28. Orchard CMS를 원격 서버로 배포
- 29. Orchard CMS를 SQL Server R2에 설치하기
- 30. Orchard CMS 테마 시안 잡기(순수 HTML/CSS 레벨)