Webflow에서 쿼리 매개 변수에 따라 내용 나누기

개시하다

우리는 웹플로우에 동적 내용을 표시하는 방법을 토론했다.
이번 용례로 기존 서비스의 정적 웹페이지 일부를 웹플로우(Webflow)를 통해 호스팅하고, 기존 서비스에서 생성된 감지되지 않는 정도의 데이터의 링크 등을 URL 매개 변수로 교부해 내용을 추출하는 장면을 구상했다.

전제 사항

Webflow는 임의의 요금 방안을 사용할 것을 구상했다.이 문서의 방법은 Custom Code의 기능을 사용합니다.

설치 예

<script>
  const params = new URLSearchParams(location.search)

  // A. 要素の表示・非表示を切り替える
  updateVisibleElements('segment__only-guest', params.get('isGuest') === 'true')

  // B. 渡されたパラメータを表示する
  updateVariableElements('variable__age', params.get('age'))

  function updateVisibleElements(className, visible) {
    const elements = document.getElementsByClassName(className)
    for (element of elements) {
      element.style.display = visible ? 'block' : 'none'
    }
  }

  function updateVariableElements(className, text) {
    const elements = document.getElementsByClassName(className)
    if (elements.length > 0 && !text) {
      return console.error('Required parameter not present: text in showVariableElement')
    }
    for (element of elements) {
      element.innerText = text
    }
  }
</script>

URL 매개변수 해석 정보

URLSearchParams를 사용했기 때문에 IE가 지원되지 않습니다.IE에 대처하려면 직접 해석기 등을 써서 대응해야 한다.
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Custom Code 설정

Project Settings > Custom Code에서 사용자 정의 코드를 편집합니다.Footer Code에 위의 구현 사례를 붙여 저장합니다.
특정 페이지에서만 명확하게 사용한다면 Page settings 설정하는 것이 좋다.

위치 예 사용

Designer 화면의 기본 작업은 생략됩니다.

A. 요소 표시 및 숨기기 전환

예제 설정Container.셀렉터를 통해 클라스를 설정할 수 있는 요소라면 무엇이든 좋습니다.

JavaScript 정의segment__only-guest를 class로 설정합니다.

B. 전송된 매개변수 표시

예시에서 문장의 일부분을 교체하는 인상을 주어야 하기 때문에 설정해야 한다Paragraph.

Paragraph 일부 범위를 선택하면 메뉴가 표시됩니다.🖌 아이콘Span.이 XX 부분은 실질적으로 기본값이기 때문에 임의로 설정할 수 있습니다.

Span의 요소에 대해 variable__age를class로 설정한다.

Publish를 통해 표시 확인

질의 매개변수를 전달하지 않고 표시되는 경우

URL 예: https://xxx.webflow.io/연령부는 XX세로 나타났다.게스트 사용자에 대한 내용은 표시되지 않습니다.

isguest 추가=진짜 상황

URL 예: https://xxx.webflow.io/?isGuest=true게스트 사용자를 위한 내용을 표시합니다.

게다가age=20의 경우

URL 예: https://xxx.webflow.io/?isGuest=true&age=20나이 부분은 20으로 나타났다.

끝말

노코드계의 웹 제작 도구라면 자바스크립트를 자유롭게 기술할 수 없는 경우가 많아 확장성이 높은 도구를 연구하는 사람들에게 참고가 되길 바란다.
또한 URL 매개 변수를 내용으로 설정하는 것도 사용자가 의도하지 않은 표시일 수 있으므로 이용 용도를 좁게 제한한 토대에서 활용하는 데 주의해야 한다.