Ghost

Ghost의 내장 Code Injection 기능을 사용하면 출판물의 전역 <head> 및 </body>에 스크립트를 추가할 수 있습니다. 모든 Ghost 플랜에서 코드 인젝션을 지원하므로 Wink 구성 요소를 모든 페이지나 게시물에 쉽게 삽입할 수 있습니다.

사이트 전체에 Wink 스크립트 로드하기

Ghost 관리자 패널에서 Settings → Code Injection으로 이동합니다.

Site Header 상자에 스타일시트를 추가합니다:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

Site Footer 상자에 스크립트와 애플리케이션 로더를 추가합니다 (YOUR_CLIENT_ID를 교체하세요):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Save를 클릭합니다.

게시물 또는 페이지에 구성 요소 추가하기

Ghost 편집기는 콘텐츠 어디에나 원시 HTML을 삽입할 수 있는 HTML 카드를 지원합니다.

Ghost 편집기에서 게시물 또는 페이지를 엽니다.
/를 입력하여 카드 선택기를 열고 HTML을 선택합니다.

예를 들어 다음과 같이 구성 요소 HTML을 붙여넣습니다:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

카드 외부를 클릭하여 미리보기한 후 게시합니다.

페이지별 코드 인젝션

한 페이지에만 표시할 구성 요소의 경우, Ghost는 페이지별 코드 인젝션도 지원합니다:

편집기에서 게시물 또는 페이지 설정(톱니바퀴 아이콘)을 엽니다.
Code Injection으로 스크롤합니다.
Footer 필드에 구성 요소 태그를 추가합니다 (전역 app-loader는 사이트 전체 푸터에만 필요합니다).
저장합니다.

사용 가능한 구성 요소

구성 요소	HTML 태그	용도
Content loader	`<wink-content-loader>`	호텔 카드, 그리드, 지도 표시
Lookup	`<wink-lookup>`	목적지 검색 바
Search button	`<wink-search-button>`	여행 일정 선택기 열기
Account button	`<wink-account-button>`	로그인 / 사용자 메뉴
Itinerary button	`<wink-itinerary-button>`	현재 여행 일정 표시
Itinerary picker	`<wink-itinerary-picker>`	전체 여행 일정 양식
Shopping cart	`<wink-shopping-cart-button>`	장바구니 요약 버튼

전체 속성 참조는 Web Components를 참조하세요.