웹 기술에 박식한 Guide 관리자는 페이지 코드에서 직접 헬프 센터용으로 사용자 지정된 테마를 구축할 수 있습니다. 사용자 지정 테마는 다음을 포함할 수 있습니다.
- 각 페이지(예: 문서 페이지, 카테고리 페이지 또는 커뮤니티 주제 페이지)의 레이아웃을 정의하는 편집 가능 기본서식
- 처음부터 새로 만들어 헬프 센터 어디에든 배치하는 사용자 지정 페이지
- 헬프 센터의 전체 머리글 및 바닥글
Curlybars라고 하는 전 기능을 갖춘 기본서식 작성 언어를 사용하여 헬프 센터 데이터에 액세스하고 페이지 기본서식 및 사용자 지정 페이지의 콘텐츠를 수정할 수 있습니다. 테마와 함께 포함된 JavaScript와 CSS 파일을 사용하여 사이트 전체에서 테마의 모양과 동작을 변경할 수도 있습니다. 자체 HTML 코드를 사용하여 헬프 센터 테마를 편집하려는 경우 헬프 센터 문서의 소스 코드 편집하기를 읽어보세요.
테마의 코드(예: 기본서식, JavaScript 또는 CSS)를 수정하면 테마 미리 보기에 </> 아이콘이 표시되어 테마의 코드가 수정되어 더 이상 새로운 기능과 업데이트를 받지 못함을 나타냅니다.
이 문서에서 다루는 주제는 다음과 같습니다.
관련 문서:
HTML 및 Curlybars로 페이지 기본서식 및 사용자 지정 페이지 사용자 지정하기
헬프 센터의 HTML은 페이지 유형, 사용자 지정 페이지 및 전체 머리글과 바닥글의 레이아웃을 정의하는 편집 가능한 기본서식에 들어 있습니다. Curlybars라는 전 기능을 갖춘 기본서식 작성 언어를 사용하여 이러한 요소의 콘텐츠를 만들거나 수정할 수도 있습니다.
다음 페이지 유형이나 요소의 기본서식을 사용자 지정하거나 직접 사용자 지정 페이지를 만들 수 있습니다.
- 사용자 지정 페이지(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)
페이지 기본서식을 편집하려면 다음과 같이 하세요.
- Guide의 사이드바에서 디자인 사용자 지정 아이콘(
)을 클릭합니다. - 편집하려는 테마에서 사용자 지정을 클릭합니다.
-
코드 편집을 클릭합니다.
-
기본서식 섹션에서 수정하려는 기본서식이나 사용자 지정 페이지를 클릭합니다.
코드 편집기에 페이지가 열립니다.
- 코드 보기를 사용하여 기본서식이나 페이지를 편집합니다.
다음 항목을 추가, 제거 또는 다시 정렬할 수 있습니다.
-
페이지의 콘텐츠를 표시하고 수정하기 위한 기본서식 표현식
예를 들어 이동 경로 기본서식 도우미인
{{breadcrumbs}}는 페이지의 이동 경로 탐색 요소를 표시합니다. 기본서식 표현식에 대한 자세한 안내는 헬프 센터 기본서식을 참조하세요. - 동적 콘텐츠 자리 표시자(헬프 센터 콘텐츠 현지화하기 참조)
- 제3자가 만든 임베드 가능 위젯
- HTML 마크업
-
페이지의 콘텐츠를 표시하고 수정하기 위한 기본서식 표현식
- 오른쪽 위에 있는 저장을 클릭하여 변경 내용을 저장합니다.
기본서식을 편집하면 수정한 기본서식을 기반으로 하는 테마의 모든 페이지에 변경 내용이 적용됩니다.
- 변경 내용을 미리 보려면 미리 보기를 클릭합니다. 헬프 센터에서 테마 미리 보기를 참조하세요.
참고: 테마를 미리 볼 때에는 작동하지 않는 기능이 있을 수 있습니다. 미리 보기 기능은 디자인 변경을 보여주기 위한 것으로 인터랙티브 테마 기능의 엔드 투 엔드 테스트를 위한 것이 아닙니다. 엔드 투 엔드 테스트를 위해서는 샌드박스 사용을 권합니다.
- 필요에 따라 다른 코드 변경을 한 다음 저장을 클릭합니다.
페이지 기본서식이나 사용자 지정 페이지의 편집을 마쳤으면 닫으면 됩니다.
CSS 또는 JavaScript 사용자 지정하기
JavaScript 코드를 추가하거나 사이트의 CSS를 사용자 지정할 수 있습니다. 약간의 코딩 작업을 통해 헬프 센터에서 할 수 있는 것들을 맛보기 식으로 경험하려면 다음 리소스를 확인해 보세요.
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에서 변수 사용 예
색, 글꼴 및 테마 이미지에 대해 설정하는 특성은 테마의 style.css 파일에서 사용할 수 있는 변수로 저장됩니다.
예를 들어 다음 구문으로 CSS에서 몇 가지 기본 변수를 사용할 수 있습니다.
-
$brand_color -
$brand_tex_color -
$heading_font -
$text_font
CSS 파일에서 보통 값을 배정하는 것과 같은 방식으로 CSS 특성에 변수를 배정할 수 있습니다. 예:
.button {
label-color: $text_font;
}다음과 같이 단일 중괄호를 사용하여 CSS 표현식에 도우미를 임베드할 수도 있습니다.
max-width: #{$search_width}pxHTML의 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}}
댓글 179개
로그인하세요.