문서에서 키워드를 검색합니다
작성자 : 박찬영
마지막 업데이트 : 2024년 03월 22일
HubSpot의 CMS는 HubL("허블"로 발음)이라고 하는 HubSpot 마크업 언어를 사용합니다.
Hubl은 Jinja를 기반으로 하는 템플릿 엔진인 Jinjava를 바탕으로 만들었습니다.
(Jinja의 모든 기능을 지원하지는 않습니다)
Hubl은 3가지 주요 기호를 사용합니다.
코드에 주석을 중첩할 경우 후행 주석 태그가 텍스트로 렌더링될 수 있으므로 주의하세요.
명령문은 함수 정의, 변수 정의, 루프 설정 등에 사용됩니다.
페이지에 아무것도 출력하지 않습니다.
정의된 값들을 출력합니다.
보이지 않는 코멘트용으로 사용합니다.
-배열-
1. set 명령어를 통해 navitgaion 이라는 배열을 정의합니다.
2. append 명령어를 통해 navigation 배열의 마지막 항목에 아이템을 추가합니다.
3. 해당 배열을 출력합니다.
-객체-
1. set 명령어를 통해 book이라는 객체를 정의합니다.
2. update 명령어를 통해 book 객체의 마지막 항목에 아이템을 추가합니다.
3. 해당 객체를 출력합니다.
{@# 배열 정의 및 활용(추가) #@}
{@% set navigation = ["Home", "About"] %@}
{@% do navigation.append("Contact Us") %@}
{@{ navigation }@}
{@# 객체 정의 및 활용(추가) #@}
{@% set book = {"name" : "Rocking HubL", "author" : "John Smith" }@ %@}
{@% do book.update ({"ebook" : "yes"}) %@}
{@{ book }@}
primaryColor 를 정의한 후 CSS에서 출력하여 사용합니다.
변수의 값을 변환하거나 변경하기 위해 HubL에 필터를 추가할 수 있습니다. 필터는 | (파이프라인 기호)를 사용하며 변수에 공백 없이 적용됩니다.
아래 예시에서는 3월 15일에 게시된 블로그를 datetimeformat 필터를 사용하여 날짜 형식을 바꾸어 출력합니다. 여기에서 전체 필터 목록을 볼 수 있습니다.
{@{content.publish_date_local_time | datetimeformat ('%Y.%m.%d')}@}
2024.03.15
필터는 변수가 렌더링되는 방식에 영향을 주지만 함수는 값과 계정정보를 처리하고 처리한 값을 반환합니다. 아래 예시에서는 blog_total_post_count 함수를 사용하여 가지고 해당 블로그의 총 게시물 수를 반환합니다. 블로그 ID를 매개변수로 사용합니다. 여기에서 전체 함수 목록을 볼 수 있습니다.
{@% macro trans(value) %@}
-webkit-transition: {@{value}@};
-moz-transition: {@{value}@};
-o-transition: {@{value}@};
-ms-transition: {@{value}@};
transition: {@{value}@};
{@% endmacro %@}
a {
{@{ trans("all .2s ease-in-out") }@}
}