윅스 (Wix) 코딩 - 동적 페이지 예제 (Dynamic Page Example)

윅스 (Wix) 코딩 - 동적 페이지 예제 (Dynamic Page Example)

 

 

 

설명)

 

노트 :

계속하기 전, 동적 페이지에 대해 읽어봅니다.

 

 

동적 페이지는 데이터베이스 컬렉션과 다른 내용을 표시할 때마다 여러 번 사용되는 페이지 레이아웃입니다.

요리법 사이트가 있다고 가정해봅니다. 새 데이터베이스 컬렉션을 작성하면, 제목 입력란(필드)가 컬렉션에 자동으로 추가됩니다. 이 입력란(필드)를 사용하여 요리법의 이름을 저장한다고 가정해봅시다. 요리법이 아침, 점심 또는 저녁 식사일 경우 식사 내용을 메모장에 추가합니다. 또한 요리법이 애피타이저, 메인 또는 디저트인지 기록하는 코스 입력란(필드)를 추가합니다.

 

이제 각 요리법을 자체 페이지에 표시할 수 있도록 사이트를 디자인하고 싶습니다. 유사한 요리법 그룹을 한 페이지에 모두 표시하려고 합니다. 예를 들어 어떤 요리가 제공되는지에 따라 모든 요리법을 표시할 수 있는 페이지가 필요합니다.

 

이 예에서 각 개별 요리법을 표시하는 페이지는 동적 항목 페이지이고 식사를 기준으로 모든 요리법을 표시하는 페이지는 동적 카테고리 페이지입니다.

 

컬렉션의 일부 콘텐츠를 살펴보겠습니다.

 

 

 

이제 이 항목을 동적 항목 페이지에 표시하는 방법에 대해 알아 보겠습니다.

 

 

노트 :

이 예에서는 동적 페이지의 힘을 사용하여 수행할 수 있는 작업에 대해 설명합니다. 설정 방법을 배우려면 동적 항목 페이지 추가 및 동적 카테고리 페이지 추가하기를 참조합니다.

 

 

동적 항목 페이지 : 하나의 컬렉션 항목 표시 (Dynamic Item Page: Displays One Collection Item)

컬렉션의 각 항목을 표시하려면 동적 항목 페이지를 만들 수 있습니다. 다음과 같이 보일 수 있습니다.

 

 

 

이 레이아웃에서 실제 내용이있는 요소는 "Recipe", "Meal"및 "Course"라는 제목입니다. 텍스트가 "<>"인 제목 옆에 표시될 콘텐츠는 페이지에 아직 배치되지 않았습니다. "<recipe title>"은 실제 요리법 이름이 표시되는 텍스트 상자의 자리 표시자 텍스트입니다. 또한 중간에 있는 이미지는 자리 표시자 이미지 (컬렉션에 있는 이미지가 아님)입니다. 이러한 요소가 표시할 실제 콘텐츠는 컬렉션에서 가져옵니다.

 

이제 컵 케이크 요리법에 대한 동적 항목 페이지를 미리 보도록 하겠습니다.

 

 

 

각 자리 표시자가 컵케이크 레시피에 대한 특정 정보로 대체된 방법과 이미지가 컬렉션의 컵케이크 이미지를 표시하는 방법에 유의합니다.

 

동일한 페이지에서 달걀 베네딕트 요리법을 미리보고 자리 표시자 콘텐츠 변경 사항을 볼 수 있습니다.

 

 

 

 

이제 동적 카테고리 페이지에서 이 콘텐츠를 표시하는 방법에 대해 알아보겠습니다.

 

 

 

동적 카테고리 페이지 : 여러 컬렉션 항목 표시 (Dynamic Category Page: Display Multiple Collection Items)

선택한 기준에 따라 요리법의 여러 그룹을 표시하는 동적 카테고리 페이지를 만들 수 있습니다.

 

그들이 제공하는 식사를 기반으로 요리법을 표시할 수 있는 페이지가 필요하다고 가정해봅니다. 표(Table)를 사용하여 요리법을 표시할 수 있습니다.

 

 

 

 

항목 페이지와 마찬가지로 이 동적 카테고리 페이지에는 실제 콘텐츠가 없습니다. 점심 요리법을 미리볼 때 어떻게 생겼는지 봅니다.

 

 

 

 

저녁 식사 요리법을 표시할 때 동일한 표(Table)를 미리볼 수 있습니다.

 

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 동적 페이지 URL 설정하기 (About Setting Up Dynamic Page URLs)

윅스 (Wix) 코딩 - 내 동적 페이지는 어떤 콘텐츠를 표시합니까? (What Content Will My Dynamic Page Display?)

윅스 (Wix) 코딩 - 여러 동적 페이지에 고유한 URL을 부여하기 (About Making Multiple Dynamic Page URLs Unique)

윅스 (Wix) 코딩 - 동적 페이지에 연결하기 (About Linking to a Dynamic Page)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/dynamic-page-example