Bubble.io에서 동적 브레드크럼을 어떻게 설정하나요?

1단계 : 페이지에 새 텍스트 요소를 만듭니다. 이것은 빵 부스러기를위한 컨테이너로 사용됩니다.

2단계 : 빵 부스러기를 디자인합니다. 그룹 요소를 사용하여 앱의 디자인에 맞는 구조화되고 스타일이 있는 빵 부스러기 표시를 만들 수 있습니다. 화살표 또는 기타 탐색 기호를 포함하려면 아이콘을 추가하십시오.

3단계 : 조건부 서식을 사용하여 빵 부스러기의 텍스트 내용을 동적으로 설정합니다. 텍스트 요소를 클릭한 다음 "동적 데이터 삽입"을 클릭하여 데이터베이스 또는 URL 매개 변수의 값을 사용하여 현재 페이지의 이름 또는 카테고리를 표시합니다.

4단계 : 각 빵 부스러기 부분을 클릭 가능하게 만들기 위해 워크 플로우를 추가하세요. 예를 들어, 빵 부스러기가 "홈 > 카테고리 > 아이템"인 경우 "카테고리"를 클릭하면 사용자를 카테고리 페이지로 돌려 보냅니다.

5단계 : 동적 데이터에 대해 URL 매개 변수(고유 ID 또는 슬러그 등)를 사용하는 경우, 빵 부스러기 링크가 클릭되면 URL 매개 변수를 추출하고 사용자를 해당하는 곳으로 이동하는 워크 플로우를 만듭니다. 워크 플로우에서 "페이지 URL에서 데이터 가져오기" 작업을 사용하여 필요한 정보를 가져옵니다.

6단계 : 빵 부스러기 링크가 클릭될 때 적절한 페이지로 이동하기 위해 “Go to page” 워크 플로우 작업을 활용합니다. 대상 페이지가 관련 콘텐츠를 로드할 수 있도록 필요한 데이터를 전달하세요.

7단계 : 페이지 콘텐츠 유형이 올바르게 설정되어 있는지 확인하여 동적 콘텐츠 로딩을 가능하게 하십시오. 예를 들어, "제품" 데이터 유형이 있는 경우 해당 페이지의 콘텐츠 유형을 "제품"으로 설정하여 URL의 슬러그를 기반으로 동적 페이지 콘텐츠를 허용합니다.

8단계 : 앱의 다양한 페이지와 섹션을 통해 빵 부스러기를 테스트합니다. 빵 부스러기의 각 링크가 각각의 페이지로 올바르게 이동하고 동적으로 올바른 텍스트를 표시하는지 확인하세요.

9단계 : (선택 사항) 경량 페이지 로드를 유지하려면 당신의 빵 부스러기를 위한 다중 페이지 탐색 대신 숨겨진 그룹과 표시된 그룹을 사용한 단일 페이지 탐색을 고려해 보세요. 이렇게 하면 페이지가 다시 로드되는 것이 방지되고 사용자 경험이 더욱 원활해질 수 있습니다.

10단계 : 사용자 피드백과 테스트 중 관찰된 탐색 패턴에 따라 빵 부스러기의 디자인과 기능을 계속 수정하세요.