Webflow 웹사이트에 Soundcloud 트랙을 통합하세요

중요한: 이 가이드에서는 Webflow의 포함 기능을 활용하여 맞춤형 코드를 포함합니다. 포함 기능은 모든 유료 사이트 플랜과 Core, Growth, Agency 및 Freelancer Workspace 플랜에서 액세스할 수 있습니다. 

동적 포함을 사용하면 CMS 컬렉션 필드를 활용하여 포함된 코드를 동적으로 새로 고칠 수 있습니다. 이 가이드에서는 동적 임베딩을 활용하여 사이트의 각 노래 리뷰에 대한 Soundcloud 트랙을 표시하는 음악 웹 사이트를 디자인합니다. 

당신은 우리를 방문할 수 있습니다 라이브 음악 사이트 또는 Designer에서 사이트 미리보기. 

이 튜토리얼에서는 다음 내용을 다룹니다. 

1. 노래 리뷰를 위한 Webflow 컬렉션 제작 지침
2. Soundcloud 트랙을 Webflow CMS에 통합 
3. 동적 삽입 구성

노래 리뷰를 위한 Webflow 컬렉션 만들기

처음에는 해당 Soundcloud 트랙 ID(예: Soundcloud 트랙의 고유 식별자)와 함께 노래 리뷰를 저장하기 위한 CMS 컬렉션을 설정합니다. 

필수 필드를 사용하여 컬렉션을 설정하려면: 

1. 액세스 CMS 패널
2. “를 탭하세요.새 컬렉션 만들기"상
3. 할당 제목 컬렉션에 추가(예: '노래 리뷰') 
4. 때리다 새 필드 추가 
5. 선택하다 일반 텍스트 
6. 필드에 'Soundcloud 트랙 ID'라는 라벨을 지정하세요.
7. 누르다 필드 저장
8. (선택사항) 추가 컬렉션 필드(예: 아티스트, 앨범 아트, 리뷰, 평가 등)를 추가합니다.
9. 딸깍 하는 소리 컬렉션 만들기, 나중에 참조할 수 있도록 이 탭을 열어 두는 것을 잊지 마세요! 

Soundcloud 트랙을 Webflow CMS에 통합 

Soundcloud 트랙을 Webflow CMS에 삽입하려면 Soundcloud에서 트랙 ID를 얻어야 합니다. 이러한 ID는 Soundcloud 트랙에 대한 고유한 마커 역할을 하며 컬렉션 내의 각 노래 리뷰에 대한 정확한 트랙 표현을 보장합니다. Soundcloud 삽입 코드에서 트랙 ID를 추출합니다. 

Soundcloud 삽입 코드 생성 

Soundcloud 삽입 코드를 생성하려면: 

1. Soundcloud 트랙을 방문하세요. 
2. 다음을 클릭하세요. 공유하다 상
3. 선택하다 포함시키다
4. (선택사항) Soundcloud 플레이어의 모양, 크기 등을 맞춤설정하세요.
5. 다음에서 코드를 복사하세요. 암호 섹션을 참조하고 이 탭을 보관하세요! 

중요한: Webflow 사이트의 탭을 닫은 경우에는 CMS 패널 이전 단계에서 노래 리뷰 컬렉션을 선택하세요.

Soundcloud 트랙 ID를 사용하여 노래 리뷰 작성하기 

Soundcloud 트랙 ID 값을 가져오려면: 

1. 일련의 문자 포스트 "/tracks/"를 복사하세요. 암호 부분
2. Webflow에서 노래 리뷰 컬렉션으로 돌아가기
3. 노래 리뷰를 위한 새 컬렉션 항목 시작
4. (선택 사항) 추가 컬렉션 필드(예: 아티스트, 앨범 아트, 리뷰, 평가 등)를 채웁니다. 
5. 사운드클라우드에서 복사한 캐릭터 시리즈를 Soundcloud 트랙 ID 필드 
6. 딸깍 하는 소리 만들다

주요 제안사항: Soundcloud 코드를 다음과 같은 코드 편집기에 삽입할 수 있습니다. 숭고한 텍스트 또는 비주얼 스튜디오 코드 더 쉽게 트랙 ID를 식별할 수 있습니다. 

포함 코드를 생성하고 Webflow에 포함하려는 각 노래 리뷰에 대해 Soundcloud 트랙 ID를 사용하여 노래 리뷰를 작성하는 과정을 반복합니다. 즉, 나중에 더 많은 노래 리뷰를 추가하려면 새 컬렉션 항목을 작성해야 합니다. , Soundcloud 포함 코드에서 Soundcloud 트랙 ID를 검색하고 해당 컬렉션 필드에 삽입합니다. 

동적 삽입 구성

동적 임베딩은 동적 콘텐츠에서만 독점적으로 작동하여 컬렉션 페이지 또는 정적 페이지의 컬렉션 목록 내에 적용됨을 나타냅니다. 노래 리뷰 컬렉션을 참조하는 경우 노래 리뷰 컬렉션과 연결된 컬렉션 페이지에 삽입물을 삽입하거나 노래 리뷰 컬렉션에 컬렉션 목록을 첨부해야 합니다. 

중요한: Soundcloud 삽입 코드로 탭을 닫은 경우 Soundcloud로 이동하여 이전 단계에서 만든 삽입 코드를 복사하세요.

동적 임베드를 생성하려면 Soundcloud 임베드 코드를 Webflow 사이트에 삽입하고 임베드 내의 Soundcloud 트랙 ID를 해당 컬렉션 필드로 대체하세요. 

1. 로 이동 패널 추가 > 고급의
2. 포함 포함시키다 Soundcloud 트랙을 표시하려는 영역에 요소를 추가합니다.
3. Webflow 코드 편집기에 Soundcloud 임베드 코드를 붙여넣으세요. 
4. "/tracks/" 게시물의 문자 및 문자 시리즈를 강조표시하세요. 
5. 딸깍 하는 소리 필드 추가
6. 선택 Soundcloud 트랙 ID 필드 
7. 누르다 저장하고 닫기 

이 프로세스를 통해 임베드에는 각 노래 리뷰에 해당하는 노래가 표시됩니다.

준비가 되면 웹사이트를 게시하여 새로 통합된 Soundcloud 트랙을 확인하세요! 

주요 제안사항: Soundtrack 트랙 ID가 없는 노래 리뷰 항목에 대해 내장된 Soundcloud 플레이어를 숨기려면 컬렉션 페이지 및 컬렉션 목록 내에서 조건부 표시 사용을 확장합니다.

중요한: Soundcloud 플레이어는 디자이너 캔버스에 표시되지 않습니다. 디자이너에 포함된 플레이어의 미리 보기에 액세스할 수 없으며 자리 표시자가 이를 대체합니다. 게시 또는 사이트 내보내기 이후 플레이어는 지정된 위치에 표시됩니다. 사용자 정의 도메인에 사이트를 배포하기 전에 내장된 플레이어를 미리 보려면 webflow.io 준비 하위 도메인에 사이트를 게시할 수 있습니다.