윅스 (Wix) 코딩 예제 - 동적 카테고리 인덱스 페이지 만들기 (Wix Code Tutorial: Creating a Dynamic Category Index Page)

윅스 (Wix) 코딩 예제 - 동적 카테고리 인덱스 페이지 만들기 (Wix Code Tutorial: Creating a Dynamic Category Index Page)

 

 

 

설명)

노트 :

이 글은 예제 : 동적 항목 페이지를 사용하여 컨텐츠를 표시 와 연결되는 내용입니다. 카테고리 페이지를 작성하는 방법을 배우기 전에 해당 예제을 참고합니다.

 

이전 예제에서는 동적 항목 페이지를 사용하여 컬렉션의 항목을 표시하고 갤러리를 사용하여 모든 항목 페이지를 링크했습니다. 하지만 컬렉션의 일부 항목만 표시하고 연결하려면 어떻게 해야합니까? 여기서 동적 카테고리 페이지를 사용할 수 있습니다.

 

이 예제에서는 정의한 기준에 따라 컬렉션의 콘텐츠 그룹만 표시하는 동적 카테고리 페이지를 만드는 방법을 보여줍니다. 그런 다음 다른 튜토리얼에서 설명한대로 페이지를 디자인하고 링크를 추가할 수 있습니다.

 

1. 개발자 도구 활성화 (Turn on Developer Tools)

윅스 코드(Wix Code)는 윅스 에디터(Wix Editor)에 고급 기능을 추가하여 보다 상호작용하는 동적인 사이트를 만들 수 있도록 합니다.

 

개발자 도구를 사용하려면 다음 단계를 따릅니다.

에디터 맨 위 상단 메뉴에서 코드를 클릭한 다음 [개발자 도구 활성화]를 클릭합니다.

 

이 작업을 완료하면 에디터에서 몇 가지 변경 사항을 확인할 수 있습니다.

• 속성 패널이 나타납니다. 창을 닫으면 도구 메뉴에서 다시 열 수 있습니다.

• 코드 패널이 에디터의 맨 아래에 추가됩니다.

• 사이트 구조 사이드 바가 에디터의 왼쪽에 추가됩니다.

• 데이터베이스 및 사용자 입력을 포함하여 추가 메뉴에서 더 많은 요소들을 사용할 수 있습니다.

 

 

 

 

2. 컬렉션을 분류하는 입력란(필드) 추가 (Add a Field to Categorize Your Collection)

이제 우리는 생각 중인 음식에 따라 다른 요리법을 표시하는 카테고리 페이지를 만듭니다. 이렇게하려면 요리법 컬렉션에 아침 식사, 점심 식사 또는 저녁 식사를 위한 식사 입력란(필드)를 추가합니다.

 

입력란(필드)을 추가하려면 다음 단계를 따릅니다.

1. 데이터의 헤더 행에서 + 아이콘을 클릭하여 Recipes 컬렉션에 새 입력란(필드)를 추가합니다.

2. 새 입력란(필드)의 이름을 Meal로 지정하고 텍스트를 입력란(필드) 유형으로 선택합니다.

3. 각 레시피에 대한 식사 정보를 입력란(필드)에 입력합니다.

 

 

 

 

3. 카테고리 페이지 만들기 (Create a Category Page)

이제 카테고리 페이지를 작성하여 각 카테고리에 속한 모든 레시피를 표시할 수 있습니다.

 

동적 카테고리 페이지를 만들려면 다음을 수행합니다.

1. 사이트 구조 사이드 바에서 컬렉션 옆에 있는 설정 아이콘을 클릭한 다음 동적 페이지 추가를 클릭합니다.

2. 동적 페이지 유형 선택 화면에서 카테고리를 선택합니다. 동적 카테고리 페이지 설정 화면이 나타납니다.

 

이전에는 하나의 항목만 표시하고 제목 입력란(필드)를 사용하여 URL을 설정하는 페이지를 정의했습니다. 이제 페이지에 여러 항목이 표시되기를 원하므로 컬렉션의 항목을 두 개 이상 식별하는 새 식사 입력란(필드)를 사용합니다. 이 URL은 고유해야하므로 수동으로 섹션을 추가합니다. 그렇지 않으면 이전 예제에서 만든 동적 항목 페이지와 동일한 URL을 갖게 됩니다.

 

페이지에 여러 항목이 표시될 수 있도록 수동으로 URL에 섹션을 추가하고 입력란(필드)를 추가하려면

1. URL 입력란(필드)를 클릭하여 수동으로 편집합니다.

2. Recipes 후에 /meal을 입력합니다. 이렇게 하면 URL이 고유합니다.

3. 입력란(필드) 추가를 클릭하고 meal을 선택합니다.

이 입력란(필드) 이름이 URL 끝에 추가되었음을 알 수 있습니다.

4. 페이지 작성을 클릭합니다.

 

새 동적 카테고리 페이지가 이전 예제에서 만든 항목 페이지와 동일한 섹션의 사이트 구조 세로 막대에 추가됩니다.

 

 

 

 

 

4. 카테고리 페이지 디자인 (Design Your Category Page)

이제 연관된 콘텐츠를 표시할 페이지를 디자인할 것입니다. 이를 위해 갤러리를 사용하여 하나의 요소에 여러 항목을 표시할 수 있습니다. 표(테이블)이나 반복 레이아웃을 사용하여 동일한 효과를 얻을 수도 있습니다.

 

이전 예제에서 색인 목록 페이지를 설정하는 것과 같은 방법으로 카테고리 페이지를 설정합니다.

1. 갤러리 요소를 페이지에 추가합니다. 다른 갤러리는 윅스 코드(Wix Code)와 다르게 작동하므로 이 예제에서 작업을 단순하게 유지하고 아래로 스크롤하여 그리드 (세로) 갤러리를 선택합니다.

2. 요소를 선택하고  

 데이터 아이콘에 연결합니다.

3. 연결 패널에서 컬렉션의 항목을 표시하도록 갤러리를 구성합니다. 링크가 동적 항목 페이지에 연결되도록 설정해야 합니다.

 

노트 :

표(테이블) 또는 갤러리 대신 반복 레이아웃을 추가하도록 선택한 경우 윅스 (Wix) 코딩 - 반복 레이아웃에 데이터베이스 내용 표시하기(About Displaying Database Content in a Repeater)에서 설정하는 방법에 대해 설명합니다.

 

 

 

 

5. 카테고리 페이지에 대한 링크 만들기 (Create Links to Your Category Pages)

이전 예제에서 동적 항목 페이지를 만들 때 갤러리가 있는 색인 목록 페이지를 추가했습니다. 이 갤러리는 컬렉션의 항목에 대한 각 동적 항목 페이지에 대한 링크를 제공했습니다.

 

이제 사용자가 각 카테고리의 동적 페이지에 접근할 수 있는 방법을 제공해야합니다. 일반적인 링크를 통해 일반 페이지를 설정합니다. 또한 반복 레이아웃를 사용하여 이 작업을 수행 할 수 있습니다.

 

카테고리 페이지에 대한 링크를 만들려면 :

1. 사이트에 일반 페이지를 추가합니다.

2. 페이지에 버튼을 추가하고 입력란(필드)의 식사 중 하나인 아침, 점심 또는 저녁 식사와 일치하도록 텍스트를 변경합니다.

3. 버튼에 대한 링크 아이콘을 클릭하고 페이지를 선택합니다.

4. 페이지 선택 메뉴에서 카테고리 페이지를 선택합니다. 페이지의 이름 중 일부가 동적 페이지인 것을 알 수 있습니다.

5. 아이템 선택 메뉴 섹션에서 버튼과 일치하는 카테고리 페이지를 선택합니다. 예를 들어, 아침 식사 버튼을 만드는 중이라면 "아침 식사"를 선택합니다.

6. 컬렉션에 있는 각 식사 유형에 대해 이 단계를 반복합니다.

 

팁 :

윅스 (Wix) 코딩 - 동적 페이지에 연결하기 (About Linking to a Dynamic Page)에서는 페이지 메뉴를 비롯하여 여러 항목 요소(갤러리, 표, 반복 레이아웃)를 사용하여 동적 페이지에 링크하기 위한 다른 옵션에 대해 설명합니다.

 

 

 

 

6. 사이트 미리보기 (Preview Your Site)

이제 카테고리 페이지가 설정되었고 각 카테고리 페이지에 대한 링크가 있는 색인 목록 페이지가 만들어 졌으므로 사이트를 미리보고 어떻게 함께 사용하는지 확인할 수 있습니다. 동시에 항목 페이지에 대한 링크를 확인하는 것도 좋은 기회입니다.

 

사이트 미리보기 :

1. 미리보기를 클릭한 다음 링크를 추가한 페이지로 이동합니다. 링크 중 하나를 클릭합니다

2. 정의한 식사 기준과 일치하는 항목만 카테고리 페이지에 표시되는지 확인합니다.

3. 테이블이나 갤러리의 링크를 확인하여 컬렉션의 특정 항목에 대한 항목 페이지로 이동했는지 확인합니다.

4. 각 카테고리에 대해 이 단계를 반복합니다.

 

 

 

 

 

 

7. 컬렉션을 동기화하여 카테고리 콘텐츠 복사하기 (Sync Your Collections to Copy the Category Content)

이제 모든 것이 원하는 대로 작동하기 때문에 새로운 식사 입력란(필드)의 컨텐츠를 라이브 데이터베이스에 추가해야합니다. 이렇게하려면 먼저 사이트를 게시해야 새 입력란(필드)가 스키마에 추가되고 컬렉션을 동기화해야 값이 라이브 데이터베이스에 복사됩니다. 그렇게하면 게시된 사이트가 미리보기 모드에서와 동일한 방식으로 작동합니다.

 

샌드박스 컬렉션에 대한 변경 사항을 동기화하려면 다음 단계를 따릅니다.

1. 사이트를 게시합니다. 그러면 방금 추가한 새 입력란(필드)가 라이브 컬렉션에서 사용 가능하게 됩니다.

2. 에디터에서 컬렉션으로 이동하십시오.

3. 도구 모음에서 동기화를 클릭한 다음 모든 항목을 라이브로 복사를 선택합니다. 이렇게하면 새 입력란(필드)에 추가한 값이 라이브 컬렉션에 복사됩니다.

4. 라이브 사이트의 페이지를 테스트하여 모든 것이 제대로 작동하는지 확인합니다.

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-creating-a-dynamic-category-index-page