소개

이번 강좌에서는 앞서 만들었던 Lecture Reviews와 같은 리스트의 값 중 최근 자료 5개의 제목과 링크를 홈페이지 메인의 특정 영역에 요약해서 출력해주는 기능을 구현해 보도록 하겠습니다.

 

절차

Step 1: 리스트를 메인의 사이드바 영역에 출력하기

1. Lecture Reviews 메뉴로 이동합니다. 5개 이상을 테스트 해보기 위해서 더 많은 내용을 입력하려고 대시보드로 이동합니다.

image_thumb.png

 

2. 대시보드로 들어가서 [Lecture Review] Content Type을 여러 개 더 입력합니다.

image_thumb_1.png

 

3. 아래 그림의 오른쪽 하단 영역에 리스트를 요약해서 출력하고자 합니다.

image_thumb_2.png

 

4. 아래 그림처럼 [위젯]-[AsideSecond]에 [추가] 버튼을 클릭합니다.

image_thumb_3.png

 

5. [Container Widget] 항목을 클릭합니다.

image_thumb_4.png

 

6. 앞서 만들어놓은 [Lecture Reviews] 리스트를 선택하고 최근 자료부터 내림차순으로 5개 출력하도록 설정합니다.

image_thumb_5.png

 

7. 일단 메인 페이지에 전체 데이터가 다 출력됨을 확인 합니다.

image_thumb_6.png

 

Step 2: 메인페이지에 보여지는 UI 변경

1. [Shape Tracing] 도구를 사용하여 메인 페이지에 보여지는 내용의 한 영역(Zone)을 선택합니다. 아래 그림은 Content-LectureReview-rul-homepage.Summary.cshtml이 선택되었고, 이 항목의 왼편에 있는 [Create] 버튼을 클릭하여 물리적인 소스 파일을 생성합니다.

image_thumb_7.png

 

2. WebMatrix로 돌아와서 아래 그림과 같이 <header>와 <footer>를 제외한 중간 영역을 제거합니다. 이러한 소스 편집 부분에 대해서는 우리가 ASP.NET MVC 3를 모른다고 가정하기에 간단히 설명하고 넘어가겠습니다. ASP.NET MVC 3를 안다면 편집 관련해서는 더 많은 방법이 존재합니다.

image_thumb_8.png

 

3. 다시 메인으로 돌아와서 확인해보면 아래와 같이 간단히 링크 제목과 작성일 정도만이 표시됩니다.

image_thumb_9.png

 

4. 메타 태그 및 요약해서 출력되어지는 이 부분 또한 앞선 강좌에서 다뤄본 Placement.info 파일을 편집해서 없애거나 수정할 수 있습니다.

image_thumb_10.png

 

5. 아래 그림은 메인에 보여질 리스트의 메타데이터를 삭제하는 모습입니다.

image_thumb_11.png

 

6. 최종적으로 메인으로 왔을 때에는 메타데이터가 표시되지 않음을 확인할 수 있습니다.

image_thumb_12.png

 

마무리

한국형 스타일의 홈페이지들을 살펴보면 메인 페이지에 [공지사항 5개 요약 리스트] 등을 많이 표현합니다. 이처럼 Orcahrd를 사용하여 C#과 ASP.NET 소스를 건드리지 않고 간단한 편집 도구만을 사용하여 이러한 기능을 구현하는 방법에 대해서 살펴보았습니다.

 

끝.

 

 

 

관련글



관련 동영상 참고 자료

번호 제목 글쓴이 날짜 조회 수
공지 SQL강좌: 챗GPT와 함께 배우는 SQL Server 무료 강좌 목차와 소개 (2023년 9월 업데이트) 코난(김대우) 2023.08.18 38730
공지 Python 무료 강좌 - 기초, 중급, 머신러닝(2023년 6월 업데이트) 코난(김대우) 2021.01.01 20805
58 [Umbraco 강좌] 1. Umbraco 소개 [1] 레드플러스(박용준) 2011.06.19 12870
57 [Orchard 강좌] 32. Command-Line Interface 사용하기 [3] 레드플러스(박용준) 2011.06.16 9879
56 [Orchard 강좌] 31. 페이지 추가시 [add a widget layer] 링크를 사용하여 페이지에 특화된 레이어 만들기 레드플러스(박용준) 2011.06.16 8393
55 [Orchard 강좌] 30. Orchard CMS 테마 시안 잡기(순수 HTML/CSS 레벨) 레드플러스(박용준) 2011.06.16 9811
54 [Orchard 강좌] 29. Orchard CMS를 SQL Server R2에 설치하기 레드플러스(박용준) 2011.06.16 7790
53 [Orchard 강좌] 28. Orchard CMS를 원격 서버로 배포 레드플러스(박용준) 2011.06.16 8084
52 [Orchard 강좌] 27. 파일 필드 모듈 적용하기(파일 업로드 및 다운로드) [1] 레드플러스(박용준) 2011.06.16 8266
51 [Orchard 강좌] 26. 최근 트위터(Twitter) 목록 나열하기 레드플러스(박용준) 2011.06.16 7983
50 [Orchard 강좌] 25. 추가 모듈 다운 및 적용 : FollowMe 모듈 레드플러스(박용준) 2011.06.16 8021
49 [Orchard 강좌] 24. 초간단 모듈 제작 : HelloWorld 모듈 만들기 레드플러스(박용준) 2011.06.16 10174
48 [Orchard 강좌] 23. 사용자(Users)와 역할(Roles) 관리 레드플러스(박용준) 2011.06.16 9249
47 [Orchard 강좌] 22. Orchard.exe 소개 및 사용 데모 레드플러스(박용준) 2011.06.16 7968
46 [Orchard 강좌] 21. 사이트 설정(Settings) 변경 레드플러스(박용준) 2011.06.16 7430
» [Orchard 강좌] 20. 리스트(List)를 위젯(Widget)으로 표현하여 요약 출력하기 레드플러스(박용준) 2011.06.16 8082
44 [Orchard 강좌] 19. Placement.info 파일 이해하기 레드플러스(박용준) 2011.06.16 7848
43 [Orchard 강좌] 18. Designer Tools로 UI의 원하는 부분 변경하기 레드플러스(박용준) 2011.06.16 8533
42 [Orchard 강좌] 17. 리스트(List)로 Content Type 그룹화 레드플러스(박용준) 2011.06.16 7760
41 [Orchard 강좌] 16. 사용자 정의 Content Type 만들기 레드플러스(박용준) 2011.06.16 8080
40 [Orchard 강좌] 15. 새로운 나만의 테마(Theme) 만들기(자식 테마 만들기) 레드플러스(박용준) 2011.06.16 9909
39 [Orchard 강좌] 14. 테마(Theme) 다운로드 및 적용 레드플러스(박용준) 2011.06.16 9363





XE Login

서버에 요청 중입니다. 잠시만 기다려 주십시오...