헬프 센터 테마 사용자 지정하기

Suite Growth 플랜 이상에서 사용 가능 모든 Guide 플랜에서 사용 가능

빠른 보기: Guide 관리 > 디자인 사용자 지정 > 사용자 지정 > 코드 편집

웹 기술에 박식한 Guide 관리자는 페이지 코드에서 직접 헬프 센터용으로 사용자 지정된 테마를 구축할 수 있습니다. 사용자 지정 테마는 다음을 포함할 수 있습니다.

각 페이지(예: 문서 페이지, 카테고리 페이지 또는 커뮤니티 주제 페이지)의 레이아웃을 정의하는 편집 가능 기본서식
처음부터 새로 만들어 헬프 센터 어디에든 배치하는 사용자 지정 페이지
헬프 센터의 전체 머리글 및 바닥글

Curlybars라고 하는 전 기능을 갖춘 기본서식 작성 언어를 사용하여 헬프 센터 데이터에 액세스하고 페이지 기본서식 및 사용자 지정 페이지의 콘텐츠를 수정할 수 있습니다. 테마와 함께 포함된 JavaScript와 CSS 파일을 사용하여 사이트 전체에서 테마의 모양과 동작을 변경할 수도 있습니다. 자체 HTML 코드를 사용하여 헬프 센터 테마를 편집하려는 경우 헬프 센터 문서의 소스 코드 편집하기를 읽어보세요.

테마의 코드(예: 기본서식, JavaScript 또는 CSS)를 수정하면 테마 미리 보기에 </> 아이콘이 표시되어 테마의 코드가 수정되어 더 이상 새로운 기능과 업데이트를 받지 못함을 나타냅니다.

팁: 헬프 센터 브랜딩 및 사용자 지정에 도움이 필요한 경우에는 Zendesk 마켓플레이스를 방문하여 Zendesk 및 타사 개발자가 만든 새 테마를 구매하세요.

참고: 평가판 사용자에게는 Professional 플랜이 제공되며, 이 플랜에는 코드 편집 옵션이 포함되어 있지만 Suite Team을 구매하는 경우에는 더 이상 이 기능을 사용할 수 없습니다.

이 문서에서 다루는 주제는 다음과 같습니다.

HTML 및 Curlybars로 페이지 기본서식 사용자 지정하기
CSS 또는 JavaScript 사용자 지정하기
CSS 및 HTML에서 변수 사용하기

HTML 및 Curlybars로 페이지 기본서식 및 사용자 지정 페이지 사용자 지정하기

헬프 센터의 HTML은 페이지 유형, 사용자 지정 페이지 및 전체 머리글과 바닥글의 레이아웃을 정의하는 편집 가능한 기본서식에 들어 있습니다. Curlybars라는 전 기능을 갖춘 기본서식 작성 언어를 사용하여 이러한 요소의 콘텐츠를 만들거나 수정할 수도 있습니다.

참고: Enterprise 플랜에서는 문서, 섹션 및 카테고리에 대한 여러 버전의 페이지 기본서식이 필요한 경우 이들의 추가 페이지 기본서식은 물론 사용자 지정 페이지도 만들 수 있습니다.

다음 페이지 유형이나 요소의 기본서식을 사용자 지정하거나 직접 사용자 지정 페이지를 만들 수 있습니다.

사용자 지정 페이지(custom_page.hbs): 처음부터 새로 만들어 헬프 센터 어디에든 배치하는 사용자 지정 페이지
문서 페이지(article_page.hbs): 지식창고의 개별 문서 페이지
카테고리 페이지(category_page.hbs): 시작 페이지
커뮤니티 게시물 목록 페이지(community_post_list_page.hbs)
커뮤니티 게시물 페이지(community_post_page.hbs)
커뮤니티 주제 목록 페이지(community_topic_list_page.hbs)
커뮤니티 주제 페이지(community_topic_page.hbs)
기여 페이지(contributions_page.hbs): 최종 사용자의 게시물, 커뮤니티 댓글 및 문서 댓글 목록
문서 헤드(document_head.hbs): 문서의 head 태그
오류 페이지(error_page.hbs): 사용자가 존재하지 않는 페이지에 도착할 때 표시되는 메시지
바닥글(footer.hbs): 모든 헬프 센터 페이지 맨 아래에 표시되는 것
머리글(header.hbs): 모든 헬프 센터 페이지 맨 위에 표시되는 것
홈 페이지(home_page.hbs): 헬프 센터의 최상위 시작 페이지
새 커뮤니티 게시물 페이지(new_community_post_page.hbs)
새 요청 페이지(new_request_page.hbs): 지원 요청 또는 티켓 제출 양식
요청 페이지(request_page.hbs): 개별 지원 요청 또는 티켓 페이지
요청 목록 페이지(requests_page.hbs): 사용자에게 배정되었거나 사용자가 참조에 포함된 지원 요청이나 티켓의 목록
검색 결과(search_results.hbs): 검색 결과 표시 형식
섹션 페이지(section_page.hbs): 시작 페이지
팔로잉 페이지(subscriptions_page.hbs): 사용자가 팔로우하는 카테고리, 섹션 및 문서 목록
사용자 프로필 페이지(user_profile_page.hbs)

참고: 테마 편집기를 사용하여 표준 테마의 페이지 기본서식, CSS 또는 JavaScript를 편집하거나, 자체 테마를 개발하면 사용자 지정 테마로 저장됩니다. 사용자 지정 테마는 Zendesk에서 지원되지 않으며 새 기능이 출시될 때 자동으로 업데이트되지 않습니다(헬프 센터의 표준 테마 및 사용자 지정 테마에 대한 정보 참조).

페이지 기본서식을 편집하려면 다음과 같이 하세요.

Guide의 사이드바에서 디자인 사용자 지정 아이콘()을 클릭합니다.
편집하려는 테마에서 사용자 지정을 클릭합니다.
코드 편집을 클릭합니다.
기본서식 섹션에서 수정하려는 기본서식이나 사용자 지정 페이지를 클릭합니다.
코드 편집기에 페이지가 열립니다.
코드 보기를 사용하여 기본서식이나 페이지를 편집합니다.
다음 항목을 추가, 제거 또는 다시 정렬할 수 있습니다.
- 페이지의 콘텐츠를 표시하고 수정하기 위한 기본서식 표현식
  예를 들어 이동 경로 기본서식 도우미인 {{breadcrumbs}}는 페이지의 이동 경로 탐색 요소를 표시합니다. 기본서식 표현식에 대한 자세한 안내는 헬프 센터 기본서식을 참조하세요.
- 동적 콘텐츠 자리 표시자(번역된 텍스트 추가하기 참조)
- 제3자가 만든 임베드 가능 위젯
- HTML 마크업
오른쪽 위에 있는 저장을 클릭하여 변경 내용을 저장합니다.
기본서식을 편집하면 수정한 기본서식을 기반으로 하는 테마의 모든 페이지에 변경 내용이 적용됩니다.
변경 내용을 미리 보려면 미리 보기를 클릭합니다. 헬프 센터에서 테마 미리 보기를 참조하세요.

참고: 테마를 미리 볼 때에는 작동하지 않는 기능이 있을 수 있습니다. 미리 보기 기능은 디자인 변경을 보여주기 위한 것으로 인터랙티브 테마 기능의 엔드 투 엔드 테스트를 위한 것이 아닙니다. 엔드 투 엔드 테스트를 위해서는 샌드박스 사용을 권합니다.
필요에 따라 다른 코드 변경을 한 다음 저장을 클릭합니다.
페이지 기본서식이나 사용자 지정 페이지의 편집을 마쳤으면 닫으면 됩니다.

팁: 지식창고 문서 기본서식 아이디어에 대한 자세한 내용은 이 Zendesk 블로그 게시물을 참조하세요.

CSS 또는 JavaScript 사용자 지정하기

JavaScript 코드를 추가하거나 사이트의 CSS를 사용자 지정할 수 있습니다. 약간의 코딩 작업을 통해 헬프 센터에서 할 수 있는 것들을 맛보기 식으로 경험하려면 다음 리소스를 확인해 보세요.

참고: 테마 편집기를 사용하여 표준 테마의 페이지 기본서식, CSS 또는 JavaScript를 편집하거나, 자체 테마를 개발하면 사용자 지정 테마로 저장됩니다. 사용자 지정 테마는 Zendesk에서 지원되지 않으며 새 기능이 출시될 때 자동으로 업데이트되지 않습니다. 헬프 센터의 표준 테마 및 사용자 지정 테마에 대한 정보를 참조하세요.

CSS 또는 JavaScript를 사용자 지정하려면 다음과 같이 하세요.

Guide의 사이드바에서 디자인 사용자 지정 아이콘()을 클릭합니다.
편집하려는 테마에서 사용자 지정을 클릭합니다.
코드 편집을 클릭합니다.
script.js를 클릭하여 JavaScript를 수정하거나 style.css를 클릭하여 CSS를 수정합니다.
코드 편집기에 파일이 열립니다.
코드 보기에서 JavaScript 또는 CSS를 추가하거나 수정합니다.
오른쪽 위에 있는 저장을 클릭하여 변경 내용을 저장합니다.
변경 내용이 테마에 적용됩니다.
변경 내용을 미리 보려면 미리 보기를 클릭합니다(헬프 센터에서 테마 미리 보기 참조).
필요에 따라 다른 코드 변경을 한 다음 저장을 클릭합니다.
이러한 단계를 모두 마쳤으면 파일을 닫을 수 있습니다.

CSS 및 HTML에서 변수 사용하기

색, 글꼴 및 테마 이미지에 대해 설정 창에서 선택하거나 매니페스트 파일에서 설정하는 특성들은 변수로 저장됩니다. 테마의 style.css 파일에서 그러한 변수를 사용할 수 있습니다. HTML 페이지 기본서식에서 Curlybars 표현식을 사용하여 변수를 참조할 수도 있습니다.

이러한 변수는 여러 곳에서 같은 값을 지정하여 신속하게 업데이트하려는 경우 유용합니다. 특성을 업데이트하면 변수가 사용되는 모든 곳에서 업데이트됩니다. 기본 Copenhagen 테마에는 색과 글꼴에 대한 몇 가지 변수가 포함되어 있습니다. 이름과 레이블을 변경하거나, 변수를 삭제하거나, 직접 추가할 수 있습니다(설정 매니페스트 참고자료 참조).

표준 Copenhagen 테마에는 기본적으로 다음과 같은 변수가 있습니다.

brand_color 변수는 주요 탐색 요소의 브랜드 색입니다.
brand_text_color 변수는 호버 및 활성 상태의 브랜드 색입니다.
text_color 변수는 본문과 머리글 요소의 텍스트 색입니다.
link_color 변수는 링크 요소의 텍스트 색입니다.
background_color 변수는 헬프 센터의 배경 색입니다.
heading_font 변수는 머리글의 글꼴입니다.
text_font 변수는 본문 텍스트의 글꼴입니다.
logo 변수는 회사 로고입니다.
favicon 변수는 브라우저 주소 표시줄에 표시되는 아이콘입니다.
homepage_background_image 변수는 홈 페이지의 히어로 이미지입니다.
community_background_image 변수는 커뮤니티 주제 페이지의 히어로 이미지입니다.
community_image 변수는 홈 페이지 커뮤니티 섹션의 이미지입니다.

CSS 및 HTML에서 변수를 사용하려면 다음을 참조하세요.

CSS에서 변수 사용 예
HTML의 Curlybars에서 변수 사용 예

CSS에서 변수 사용 예

색, 글꼴 및 테마 이미지에 대해 설정하는 특성은 테마의 style.css 파일에서 사용할 수 있는 변수로 저장됩니다.

예를 들어 다음 구문으로 CSS에서 몇 가지 기본 변수를 사용할 수 있습니다.

$brand_color
$brand_tex_color
$heading_font
$text_font

CSS 파일에서 보통 값을 배정하는 것과 같은 방식으로 CSS 특성에 변수를 배정할 수 있습니다. 예:

.button {
  label-color: $text_font;
}

다음과 같이 단일 중괄호를 사용하여 CSS 표현식에 도우미를 임베드할 수도 있습니다.

max-width: #{$search_width}px

HTML의 Curlybars에서 변수 사용 예

색, 글꼴 및 테마 이미지에 대해 설정하는 특성은 HTML 페이지 기본서식에서 Curlybars 표현식으로 참조할 수 있는 변수로 저장됩니다.

변수는 Curlybars에서 settings 개체의 특성이 됩니다. 모든 Curlybars 개체와 마찬가지로 이중 중괄호와 점 표기법을 사용하여 페이지 기본서식에 특성을 삽입할 수 있습니다.

예:

{{settings.color_1}} 특성은 색의 HEX 값입니다. 예: #FF00FF
{{{settings.font_1}} 특성은 글꼴 스택입니다. 예를 들어 시스템은 다음과 같이 정의됩니다. '-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
{{settings.homepage_background_image}} 특성은 이 필드에 저장된 파일에 대한 경로입니다. 예: p8.zdassets.com/theme_assets/...
{{settings.range_input}} 특성은 범위 입력의 값입니다.

settings 개체는 모든 도우미에 대한 입력으로 사용될 수 있습니다. 예:

{{is settings.enabled}} ... {{/is}}