hellodigital - HubSpot Korea

키워드 검색

문서에서 키워드를 검색합니다

    작성자 : 박찬영

    마지막 업데이트 : 2024년 03월 22일

    for문

    For 문은 HubL에서 객체,딕셔너리,배열을 반복하는 데 사용될 수 있습니다. 블로그 콘텐츠를 목록 형식 으로 렌더링하는 데 가장 일반적으로 사용되지만 다른 변수를 정렬하는 데에도 사용할 수 있습니다.

    기본 for문

    • Hubl
    {@% for item in items %@}
        {@{ item }@}
    {@% endfor %@}

    for문 예시

    • Hubl
    {@% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %@}

    <h1>Languages</h1>;
    <ul>
        {@% for language in languages %@}
        <li>{@{ language }@}</li>
        {@% endfor %@}
    </ul>

    loop 속성

    if문을 사용하여 다양한 loop 속성을 사용할 수 있습니다.

    • 변수명

      타입

      설명

    • Integer

      현재 렌더링이 재귀 루프에서 몇 depth인지 나타냅니다. 1부터 시작

    • Integer

      현재 렌더링이 재귀 루프에서 몇 depth인지 나타냅니다. 0부터 시작

    • Boolean

      첫번째 loop인 경우 true를 반환합니다.

    • Boolean

      마지막 loop인 경우 true를 반환합니다.

    • Integer

      현재 loop의 index입니다. 1부터 계산을 시작합니다 

    • Integer

      현재 loop의 index입니다 0부터 계산을 시작합니다.

    • Integer

      시퀀스의 항목 수입니다.

    • Integer

      loop 끝에서부터의 횟수입니다. 1까지 계산합니다.

    • Integer

      loop 끝에서부터의 횟수입니다. 0까지 계산합니다.

    순환 함수

    cycle 태그는 loop 내에서 일련의 문자열 값을 순환하면서 출력합니다. 보통 교대로 클래스 적용이 필요한 경우 사용합니다.

    • Hubl
    • 출력값
    {@% for content in contents %@}
        <div class="post-item {@% cycle "odd","even" %@}">Blog post content</div>
    {@% endfor %@} 
    <div class="post-item odd">Blog post content</div>
    <div class="post-item even">Blog post content</div>
    <div class="post-item odd">Blog post content</div>
    <div class="post-item even">Blog post content</div>
    <div class="post-item odd">Blog post content</div>

    루프의 키,값 활용

    키와 값 쌍이 있는 딕셔너리의 경우에는 해당 값에만 엑세스할 수 있습니다. for문을 사용하여 키와 값 모두 액세스하려는 경우 Hubl의 형식은 다음과 같습니다.

    • Hubl
    • 출력값
    {@% set dict_var = {"name": "Cool Product", "price": "$20", "size":"XL"} %@}
    {@% for key, val in dict_var.items() %@}
        {@{ key }@}: {@{ val }@}<br>
    {@% endfor %@} 
    name: Cool Product <br>
    price: $20 <br>
    size: XL <br>

    정해진 횟수만큼 반복

    때로는 정해진 횟수만큼 반복하고 싶을 때가 있는데, 이는 HTML이나 CSS를 생성하는 데 유용할 수 있습니다. range 함수를 사용하면 이 작업을 수행할 수 있습니다.
    • Hubl
    • 출력값
    {@% for x in range(0,5) %@}
        {@{loop.index}@}
    {@% endfor %@} 
    1 2 3 4 5

    loop에서 Hubl 태그 사용

    페이지에 태그를 추가하면 HubSpot은 id래핑 HTML에 자동으로 할당합니다. 해당 태그는 태그 "이름"별로 고유합니다. for 루프에서 태그를 사용해야 하는 상황에서는 고유 이름을 설정하는 것이 실용적이지 않습니다. unique_in_loop고유 ID를 생성하려면 태그에 매개변수를 추가하세요 . 이 매개변수는 모듈 이름에 현재 루프 반복 번호를 추가하여 고유함을 보장합니다. 고유 ID는 유효한 HTML에 필요할 뿐만 아니라 접근성 에도 중요합니다 . 
    • Hubl

    {@% for item in module.icon_field %@}
        {@% icon
            name="{@{ item.name }@}",
            style="{@{ item.type }@}",
            unicode="{@{ item.unicode }@}",
            unique_in_loop=True
        %@}
    {@% endfor %@}