각 헬프 센터 테마는 편집 가능한 페이지 기본서식 및 사용자 지정 페이지 모음으로 구성되어 있습니다. Curlybars라고 하는 헬프 센터 기본서식 작성 언어를 사용하여 헬프 센터 데이터에 액세스하고 페이지의 콘텐츠를 수정할 수 있습니다.
이 문서에서는 사용 가능한 코드 스니펫과 함께 사용법 목록을 제공합니다. 이러한 사용법의 일부 기능은 헬프 센터를 사용하기 시작한 날짜와 기본 테마 또는 사용자 지정 테마를 사용하는지에 따라 헬프 센터에 이미 있을 수 있습니다.
- 기본서식 작성 언어 Curlybars 정보
- 특정 카테고리, 섹션 또는 문서의 페이지 기본서식 사용자 지정
- 언어 선택기에서 언어 이름 사용자 지정
- 언어 선택기에서 하나 이상의 언어 숨기기
- 사용자가 날짜 또는 투표별로 문서 댓글을 정렬하도록 허용
- 문서 댓글 편집기에 서식 툴바 추가
- 사용자가 문서 댓글에서 투표할 수 있도록 허용
- 헬프 센터에 바로 검색(자동 완성) 결과 추가
- 연계 검색을 추가하여 헬프 센터 검색에 외부 콘텐츠 포함
- 내 활동 팔로잉 페이지에서 플랜 유형 정렬 방법 추가
- 내 활동에서 요청의 “만든 시간” 및 “업데이트한 시간” 정렬 옵션 추가
- 공유 조직의 사용자를 위해 팔로우/언팔로우 추가
- 사용자가 지원 요청에 다른 사용자를 참조로 포함할 수 있는 기능 추가
- 후속 작업 요청에 상위 요청 링크 추가
- 문서에 투표하기 버튼 추가
- 문서 및 게시물에 콘텐츠 태그 추가
- 사용자 지정 헬프 센터 테마에 배지 추가
- 사용자가 헬프 센터에서 사용자 프로필을 볼 수 있도록 허용
- 헬프 센터 테마에서 하위 섹션 사용 설정
- 여러 헬프 센터의 사이드바 필터 및 결과를 검색 결과 페이지에 추가
기본서식 작성 언어 Curlybars 정보
헬프 센터는 고급 사용자 지정을 위한 자체 기본서식 작성 언어가 포함되어 있는 테마 프레임워크에 구축됩니다. 각 헬프 센터 테마는 편집 가능한 기본서식 및 선택적 사용자 지정 페이지 모음으로 구성되어 있습니다.
편집 가능 페이지 기본서식은 각 페이지의 레이아웃을 정의합니다. 예를 들어 지식창고 문서의 기본서식, 요청 목록의 기본서식 등이 있습니다. 기본서식은 텍스트 파일로 HTML 페이지로 렌더링되어 사용자에게 표시됩니다. 각 기본서식은 {{post.title}}과 같이 이중 중괄호로 식별할 수 있는 HTML 마크업과 표현식으로 구성되어 있습니다.
사용자 지정 페이지는 헬프 센터 테마의 코드 베이스에 구축되며 헬프 센터의 어디에서든 연결할 수 있는 특정 URL을 가집니다. 사용자 지정 페이지를 사용하여 개별 요구 사항에 맞는 페이지를 처음부터 새로 만들고 코딩할 수 있습니다. 예를 들어 사용자 지정 페이지를 사용하여 헬프 센터의 특정 시작 페이지를 만들거나 Zendesk 외부 소스의 콘텐츠를 임베드하는 새 페이지를 만들 수도 있습니다.
기본서식 작성 언어를 Curlybars라고 하며 대규모 Handlebars 언어 하위 집합을 구현합니다. 클라이언트 측에서 렌더링되는 Handlebars와는 달리, Curlybars는 서버 측에서 렌더링됩니다.
헬프 센터 기본서식 작성 언어를 사용하여 헬프 센터 데이터에 액세스하고 페이지의 콘텐츠를 수리할 수 있습니다. 다음 예에서는, 헬프 센터가 페이지에 댓글을 남긴 모든 사람들의 이름과 아바타 목록을 제공합니다.
{{#each comments}}
<li>
<div class="comment-avatar">
<img src="{{author.avatar_url}}" alt="Avatar" />
</div>
<div class="comment-author">
{{author.name}}
</div>
</li>
{{/each}} 이전에는 구성 요소를 사용해서 헬프 센터를 사용자 지정할 수 있었지만 구성 요소 자체를 사용자 지정할 수는 없었습니다. 단, JavaScript를 통해서는 구성 요소를 수정할 수 있었습니다. Curlybars를 사용하면 이전에 구성 요소 내에 숨겨져 있었던 HTML에 액세스하여 편집할 수 있습니다.
특정 카테고리, 섹션 또는 문서의 페이지 기본서식 사용자 지정
특정 카테고리, 섹션, 문서에 사용할 카테고리, 섹션 및 문서 기본서식을 각각 사용자 지정할 수 있습니다.
- 카테고리
- 섹션
- 문서
- 카테고리, 섹션 또는 문서 ID를
is블록에 지정합니다.{{#is id 200646205}} ... {{/is}}
예
섹션 기본서식에 다음 블록을 삽입하여 200646205 및 203133596 섹션의 기본서식을 사용자 지정합니다.
{{#is section.id 200646205}}
<p><strong>This is important security information! Pay attention!</strong></p>
{{/is}}
{{#is section.id 203133596}}
<p>Videos available at <a href="https://www.somelink.com">Learning to fly</a></p>
{{/is}}참조
언어 선택기에서 언어 이름 사용자 지정
헬프 센터의 모든 페이지에서 언어 선택기의 언어 이름을 사용자 지정할 수 있습니다. 이 기능은 “영어(미국)” 등과 같이 1개 언어 변형 또는 “영어” 등과 같은 모든 언어 변형을 사용할 때 유용합니다.
- 헤더
{{#if alternative_locales}}...{{/if}}
-
{{current_locale.name}}표현식을 다음 조건식으로 바꿉니다.{{#is current_locale.name 'English (US)'}} English {{else}} {{current_locale.name}} {{/is}}또한 대체 로캘
{{name}}표현식을 다음 조건식으로 바꿉니다.{{#is name 'English (US)'}} English {{else}} {{name}} {{/is}}
예
{{#if alternative_locales}}
<div class="dropdown language-selector" aria-haspopup="true">
<a class="dropdown-toggle">
{{#is current_locale.name 'English (US)'}}
English
{{else}}
{{current_locale.name}}
{{/is}}
</a>
<span class="dropdown-menu dropdown-menu-end" role="menu">
{{#each alternative_locales}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{#is name 'English (US)'}}
English
{{else}}
{{name}}
{{/is}}
</a>
{{/each}}
</span>
</div>
{{/if}}참조
언어 선택기에서 하나 이상의 언어 숨기기
언어 선택기에서 언어 숨기기 기능은 해당 언어로 된 콘텐츠를 아직 출시할 준비가 되지 않은 경우에 도움이 될 수 있습니다.
- 헤더
{{#each alternative_locales}}...{{/each}}
-
{{name}}표현식을 다음 조건식으로 바꿉니다.{{#is name 'Français'}} {{! do nothing }} {{else}} <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a> {{/is}}
예
{{#each alternative_locales}}
{{#is name 'Français'}}
{{! do nothing }}
{{else}}
<a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
{{name}}
</a>
{{/is}}
{{/each}}참조
사용자가 날짜 또는 투표별로 문서 댓글을 정렬하도록 허용
기본적으로 문서 댓글은 가장 최근 날짜부터 가장 오래된 날짜 순으로 정렬됩니다. 날짜 및 투표 링크를 추가할 수 있습니다. 사용자가 이 링크를 클릭하여 날짜 또는 투표 수별로 댓글을 정렬할 수 있습니다.
- 문서
...
- div 태그를 댓글 섹션의 헤딩 태그
{{t 'comments'}}
{{#if comments}}표현식이 있으면, 아직 아무도 댓글을 남기지 않은 경우에 정렬기가 표시되지 않도록 하기 위해 이 표현식 뒤에 div 태그를 삽입하는 것이 좋습니다.<div class="comment-sorter"> Sort by: {{#each comment_sorters}} <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a> {{/each}} </div>
예
<section class="article-comments">
<h2>{{t 'comments'}}</h2>
{{#if comments}}
<div class="comment-sorter">
Sort by:
{{#each comment_sorters}}
<a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
{{/each}}
</div>
<ul class="comment-list">
{{#each comments}}
...참조
문서 댓글 편집기에 서식 툴바 추가
문서 댓글 편집기에 서식 툴바를 추가할 수 있습니다. 사용자는 굵게 및 기울임꼴, 순서가 지정되지 않은 목록 또는 순서가 지정된 목록, 이미지 및 링크를 추가할 수 있습니다.
- 문서
{{#form 'comment'}}...{{/form}}
- 양식 개체에서
{{textarea 'body'}}표현식을 찾아{{wysiwyg 'body'}}로 바꿉니다.
예
{{#form 'comment' class='comment-form'}}
<div class="comment-avatar">
{{user_avatar class='user-avatar'}}
</div>
<div class="comment-container">
{{wysiwyg 'body'}}
<div class="comment-form-controls">
{{input type='submit'}}
</div>
</div>
{{/form}}참조
사용자가 문서 댓글에서 투표할 수 있도록 허용
기본적으로 사용자는 문서에서 투표할 수 있습니다. 사용자가 문서 댓글에서도 투표하도록 허용할 수 있습니다.
- 문서
{{#each comments}}...{{/each}}
- 다음 div 태그를
태그 뒤에 삽입합니다.<div class="comment-vote vote"> {{vote 'up' class="article-vote-up" selected_class="vote-voted"}} {{vote 'sum' class="article-vote-sum"}} {{vote 'down' class="article-vote-down" selected_class="vote-voted"}} </div>위의 vote 헬퍼는 문서 투표에 CSS 클래스를 차용하여 댓글 투표 링크의 스타일을 지정합니다. 고유한 클래스를 정의하여 댓글 투표의 스타일을 지정할 수 있습니다.
예
{{#each comments}}
<li id="{{anchor}}" class="comment">
<div class="comment-vote vote">
{{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
{{vote 'sum' class="article-vote-sum"}}
{{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
</div>
<div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}">
<img src="{{author.avatar_url}}" alt="Avatar">
</div>
...참조
사용자 지정 헬프 센터 테마에 바로 검색(자동 완성 검색) 결과 추가
사용자 지정 테마에 바로 검색을 추가하여 사용자가 검색 상자에 입력할 때 추천 문서의 링크를 표시할 수 있습니다.
바로 검색이 사용 설정되어 있으면 사용자가 검색 상자에 검색어를 입력할 때 최대 6개의 추천 문서가 나타나며, 검색어가 문서의 제목에 들어간 문서를 찾습니다. 사용자는 검색 결과 페이지로 이동하지 않고도 일치하는 문서를 검색 상자에서 바로 선택할 수 있습니다.
- 검색 표현식이 포함된 모든 기본서식에 적용할 수 있습니다(주로 헤더 또는 홈 페이지 기본서식에 적용).
해당 표현식
- {{search}}
-
instant=true를 검색 표현식에 추가합니다.{{search instant=true}}
예
<div class="search-box">
<h1 class="help-center-name">{{help_center.name}}</h1>
{{search instant=true}}
</div>연계 검색을 추가하여 헬프 센터 검색에 외부 콘텐츠 포함
헬프 센터 검색 결과 기본서식에서 연계 검색을 사용 설정하는 작업은 다음 두 가지 부분으로 구성됩니다.
사이드바 필터 추가하기
사이드바 필터에서 사용된 특성을 업데이트하여 검색 결과 기본서식을 업데이트해야 합니다.
<section class="search-results-sidebar">
{{#if source_filters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each source_filters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
<buttonclass="see-all-filters"aria-hidden="true"aria-label="{{t'show_more_sources'}}">{{t'show_more_sources'}}</button> </ul>
</section>
{{/if}}
{{#if type_filters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each type_filters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if subfilters}}
<section class="filters-in-section collapsible-sidebar" aria-expanded="false">
<button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
</button>
{{#is current_filter.identifier 'knowledge_base'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
{{/is}}
{{#is current_filter.identifier 'community'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
{{/is}}
<ul class="multibrand-filter-list multibrand-filter-list--collapsed">
{{#each subfilters}}
<li>
{{#if selected}}
<a href="{{url}}" class="sidenav-item current" aria-current="page">
{{else}}
<a href="{{url}}" class="sidenav-item">
{{/if}}
<span class="sidenav-subitem filter-name">{{name}}</span>
<span class="sidenav-subitem doc-count">({{count}})</span>
</a>
</li>
{{/each}}
{{#is current_filter.identifier 'knowledge_base'}}
<button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
{{/is}}
{{#is current_filter.identifier 'community'}}
<button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
{{/is}}
</ul>
</section>
{{/if}}
</section>
결과 반복 실행하기
이 스니펫은 연계 검색 결과를 반복 실행하기 위해 {{results}} 헬퍼를 사용하는 방법의 예입니다.
{{#if results}}
<ul class="search-results-list">
{{#each results}}
<li class="search-result-list-item result-{{type}}">
<h2 class="search-result-title">
<a href="{{url}}" class="results-list-item-link"{{#if is_external}}
target=”_blank” {{/if}}>
{{title}}
{{#if is_external}}
<svg viewBox=”0 0 12 12” height=”12”
id=”zd-svg-icon-12-new-window-fill”>
<path fill=”none” stroke=”currentColor” stroke-linecap=:round”
d=M10.5 8.5V10c0 .28-.22.5-.5.5H2c-28
0-.5-.22-.5-.5V2c0-.28.22-.5.5-.5h1.5M6 614-4”></path>
</svg>
{{/if}}
</a>
</h2>
<article>
<div class="search-result-icons">
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
{{#if comment_count}}
<span class="search-result-meta-count">
{{comment_count}}
</span>
{{/if}}
</div>
<ul class="meta-group">
<li>
<ol class="breadcrumbs search-result-breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}" target="{{target}}">{{name}}</a></li>
{{/each}}
</ol>
</li>
<li class="meta-data">{{author.name}}</li>
<li class="meta-data">{{date created_at}}</li>
</ul>
<div class="search-results-description">{{text}}</div>
</article>
</li>
{{/each}}
</ul>
{{else}}
<p>
{{t 'no_results_unified'}}
{{#link 'help_center'}}
{{t 'browse_help_center'}}
{{/link}}
</p>
{{/if}}내 활동 팔로잉 페이지에서 플랜 유형 정렬 방법 추가
내 활동 > 팔로잉 페이지에서 사용자가 플랜을 유형별로 정렬할 수 있도록 설정하면 사용자가 플랜을 보다 쉽게 확인할 수 있습니다.
- 팔로잉 페이지
-
태그 아래에 다음 코드를 삽입합니다.<div class="my-activities-following-header"> <span class="dropdown"> <span class="dropdown-toggle"> {{current_filter.label}} </span> <span class="dropdown-menu" role="menu"> {{#each filters}} <a href="{{url}}" aria-selected="{{selected}}" role="menuitem"> {{name}} </a> {{/each}} </span> </span> </div>
내 활동에서 요청의 “만든 시간” 및 “업데이트한 시간” 정렬 옵션 추가
내 활동의 요청 페이지에서 최종 사용자를 위한 “만든 시간” 및 “업데이트한 시간” 정렬 옵션을 추가할 수 있습니다.
- 요청 목록 페이지
사용법
-
{{t 'created'}}를 다음으로 바꿉니다.{{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}} -
{{t 'last_activity'}}를 다음으로 바꿉니다.{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}
공유 조직의 사용자를 위해 팔로우/언팔로우 추가
사용자가 공유 조직에서 요청에 대한 이메일 알림을 받을 수 있도록 설정할 수 있습니다. {{subscribe}} 헬퍼는 “팔로우” 버튼을 삽입합니다. 사용자가 이 버튼을 클릭하면 공유 조직에서 요청이 생성되거나 업데이트될 때 이메일 알림을 받을 수 있습니다. 이메일 알림을 더 이상 받지 않으려는 경우에는 언팔로우 옵션을 사용할 수 있습니다.
- 요청 목록 페이지
{{#form 'requests_filter'}}...{{/form}}
-
{{subscribe}}헬퍼를 form 개체에 추가합니다.
예
{{#form 'requests_filter' class='request-table-toolbar'}}
{{input 'query' id='quick-search' type='search' class='requests-search'}}
<div class="request-table-filters">
{{label 'organization' for='request-organization-select' class='request-filter'}}
{{select 'organization' id='request-organization-select' class='request-filter'}}
{{subscribe}}
{{label 'status' for='request-status-select' class='request-filter'}}
{{select 'status' id='request-status-select' class='request-filter'}}
</div>
{{/form}}참조
로그인한 사용자가 지원 요청에 다른 사용자를 참조로 포함할 수 있는 기능 추가
로그인한 사용자가 헬프 센터의 신규 및 기존 지원 요청에 다른 사용자를 참조로 포함할 수 있는 기능을 추가할 수 있습니다. 참조 옵션이 지원 요청에 추가되면, 참조로 포함된 사용자는 티켓 업데이트에 대한 이메일 알림을 받습니다.
사용자 지정 테마에 이 코드를 추가한 후에는 이 기능을 사용 설정해야 합니다. 참조 권한 설정하기를 참조하세요.
- 요청 페이지
{{#form 'comment' class='comment-form'}}...{{/form}}
- 다음 스니펫을 댓글 양식 내부에 삽입합니다.
{{#if help_center.request_ccs_enabled}} <div class="comment-ccs"> {{token_field 'ccs' class="ccs-input"}} </div> {{/if}}
후속 작업 요청에 상위 요청 링크 추가
후속 작업 요청에 상위 요청(있는 경우)으로 연결되는 링크를 표시할 수 있습니다.
- 요청 페이지
사용법
- 상위 티켓(있는 경우)으로 연결되는 링크를 표시하려는 요청 페이지 기본서식에 다음 스니펫을 추가합니다.
{{#if request.followup_source_id}} <dl class="request-details"> <dt>{{t 'followup'}}</dt> <dd>{{link 'request' id=request.followup_source_id}} </dd> </dl> {{/if}}
문서에 투표하기 버튼 추가
문서에 투표하기 버튼은 기본 Copenhagen 테마에 포함되어 있습니다. 문서에 투표할 수 있는 옵션이 표시되지 않으면 테마에서 이 버튼을 제거한 것일 수 있습니다.
투표하기 버튼을 추가하는 코드는 테마마다 다를 수 있지만, 이 코드는 필요한 경우를 위해 기본 Copenhagen 테마에서 가져온 것입니다.
- 문서
- 다음 코드를 문서 페이지 기본서식에 추가합니다.
{{#with article}} <div class="article-votes"> <span class="article-votes-question">{{t 'was_this_article_helpful'}}</span> <div class="article-votes-controls" role='radiogroup'> {{vote 'up' role='radio' class='button article-vote article-vote-up'}} {{vote 'down' role='radio' class='button article-vote article-vote-down'}} </div> <small class="article-votes-count"> {{vote 'label' class='article-vote-label'}} </small> </div> {{/with}}
문서 및 게시물에 콘텐츠 태그 추가
기본 Copenhagen 테마는 기본적으로 문서, 커뮤니티 게시물 및 검색 페이지에 콘텐츠 태그를 표시합니다. 사용자 지정 또는 마켓플레이스 테마를 사용하는 경우에는 이러한 페이지에 콘텐츠 태그를 표시하도록 테마를 업데이트해야 할 수 있습니다. 시작하려면 Copenhagen 테마에서 다음 기본서식 파일을 가이드로 사용할 수 있습니다.
익숙해지면 다른 페이지에 콘텐츠 태그를 추가할 수 있습니다. 예를 들어 다음 스니펫은 커뮤니티 주제 페이지 기본서식에 콘텐츠 태그 목록을 추가합니다.
{{#each posts}}
...
{{#if (compare content_tags.length ">" 0)}}
<ul class="content-tag-list">
{{#each content_tags}}
<li class="content-tag-item">
{{#link "search_result" content_tag_id=id}}
{{name}}
{{/link}}
</li>
{{/each}}
</ul>
{{/if}}
...
{{/each}}사용자 지정 헬프 센터 테마에 배지 추가
이 주제에서 다루는 내용은 다음과 같습니다.
신규 사용자 프로필 작업 헬퍼 추가하기
상담사에게 배지를 수여하려면 배지 수여 옵션을 추가해야 합니다. 단, 먼저 새 작업 헬퍼를 추가해야 합니다.
작업 헬퍼 선언을 추가하려면 다음과 같이 하세요.
- 테마 온라인 코드 편집기를 열고 상담사의 사용자 프로필 페이지로 갑니다.
Page filename: user_profile_page.hbs
-
편집 헬퍼 선언을 찾습니다.
{{edit}} - 편집 헬퍼 선언을 새 작업 헬퍼 선언으로 바꿉니다.
{{actions}}
새 상담사가 배지를 수여할 수 있습니다. 기본 설정에 따라 CSS로 새 버튼에 스타일이 적용됩니다. 영감을 더 얻으려면 Zendesk예제 테마를 참조하세요.
게시물 등록 페이지에 직책 배지 표시하기
게시물 등록 페이지에서 작성자 옆에 표시되는 레이블로 직책 배지를 추가할 수 있습니다. 단순성을 위해 스타일링 클래스가 재사용된다는 점에서 게시물 상태 레이블과 비슷하게 보입니다.
게시물 등록 페이지에 직책 배지를 표시하려면 다음과 같이 하세요.
- 테마 온라인 코드 편집기를 열고 다음으로 갑니다.
Page filename: community_topic_page.hbs
-
작성자 이름 선언을 찾습니다. Copenhagen 테마에서 라인은 다음과 비슷합니다.
<li class="meta-data">{{author.name}}</li> - 이 스니펫을 그 뒤 라인에 추가합니다.
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
고급 사용자의 경우 이 시나리오에서는 status-label CSS 클래스를 (재)사용하지 말고 대신 상태 레이블의 스타일과 별도로 수정할 수 있는 새로운 전문 CSS 클래스를 만드세요.
다음은 커뮤니티 구성원에 대한 직책 배지의 예입니다.
게시물 및 댓글 페이지에 직책 배지 표시하기
게시물 등록 페이지에 직책 배지를 표시하려면 다음과 같이 하세요.
- 테마 온라인 코드 편집기를 열고 다음으로 갑니다.
Page filename: community_post_page.hbs
-
작성자 이름 선언을 찾습니다. Copenhagen 테마에서 라인은 다음과 비슷합니다.
<li class="meta-data">{{author.name}}</li> - 이 스니펫을 그 뒤 라인에 추가합니다.
{{#each author.badges}} <li class="meta-data"> {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} </li> {{/each}}
사용자 프로필 페이지에 직책 및 업적 배지 표시하기
예를 들어 직책 배지 이상의 것을 추가할 사용자 프로필 페이지에서 사용자의 업적을 추가할 수도 있습니다. 다음 예에서는 각 업적 배지에 대한 그래픽 아이콘이 있다고 가정합니다. Copenhagen 테마를 기준으로 업적 배지는 다음과 같이 보일 수 있습니다.
사용자 프로필 페이지에 직책 및 업적 배지를 표시하려면 다음과 같이 하세요.
- 테마 온라인 코드 편집기를 열고 다음으로 갑니다.
Page filename: user_profile_page.hbs
- 파일에서 사용자의 이름이 렌더링되는 라인을 찾습니다. 예:
<h1 class="name"> {{#if user.url}} <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a> {{else}} {{user.name}} {{/if}} </h1> - 스니펫을 다음으로 바꿉니다.
<h1 class="name"> {{#if user.url}} <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a> {{else}} {{user.name}} {{/if}} {{#each user.badges}} {{#is category_slug "titles"}} <span class="status-label">{{name}}</span> {{/is}} {{/each}} </h1> <div style="margin-top: 1em;"> {{#each user.badges}} {{#is category_slug "achievements"}} <div style="float: left; text-align: center; padding: 0.5em; margin: 0.5em; background: white; border-radius: 0.2em;"> <img src="{{icon_url}}" height="40"><br> <span style="font-size: 0.8em;">{{name}}</span> </div> {{/is}} {{/each}} </div>
이 예에서는 예를 간단하게 유지하기 위해 모든 CSS 스타일링이 인라인됩니다. 성공 사례로서 이 예제들을 영감을 얻기 위해 사용하되, 스타일링이 테마에 적합한지 반드시 확인하세요.
사용자가 헬프 센터에서 사용자 프로필을 볼 수 있도록 허용
이 섹션에서는 헬프 센터의 사용자들이 작성자 이름 또는 아바타를 클릭해서 사용자 프로필을 볼 수 있도록 필요한 기본서식을 업데이트하는 방법에 대해 설명합니다.
link 헬퍼(기본서식 작성 문서에서 link 헬퍼 참조)를 사용하여 다음 기본서식을 업데이트합니다.
문서
문서 페이지 기본서식을 다음과 같이 업데이트하세요.
문서의 작성자 이름 업데이트하기다음 if 블록을
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
다음 link 헬퍼로 바꾸세요.
{{#link "user_profile" id=article.author.id class="user-profile"}}
{{article.author.name}}
{{/link}}
댓글 작성자 이름 업데이트하기
다음 if 블록을
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
다음 link 헬퍼로 바꿉니다.
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
문서 및 댓글 작성자의 아바타 업데이트하기
다음 이미지 태그를
<img src="{{article.author.avatar_url}}" alt="Avatar"/>
다음 link 헬퍼로 바꾸세요.
{{#link "user_profile" id=article.author.id class="user-profile"}}
<img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}
커뮤니티 게시물
커뮤니티 게시물 페이지 기본서식을 다음과 같이 업데이트하세요.
게시물 작성자의 이름 업데이트하기다음 if 블록을
{{#if post.author.url}}
<a href="{{post.author.url}}" target="_zendesk_lotus">
{{post.author.name}}
</a>
{{else}}
{{post.author.name}}
{{/if}}
다음 link 헬퍼로 바꾸세요.
{{#link "user_profile" id=post.author.id class="user-profile"}}
{{post.author.name}}
{{/link}}
댓글 작성자의 이름 업데이트하기
다음 if 블록을
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
다음 link 헬퍼로 바꾸세요.
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
게시물 작성자의 아바타 업데이트하기
다음 이미지 태그를
<img src="{{post.author.avatar_url}}" alt="Avatar"/>
다음 link 헬퍼로 바꾸세요.
{{#link "user_profile" id=post.author.id class="user-profile"}}
<img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}
댓글 작성자의 아바타 업데이트하기
다음 이미지 태그를
<img src="{{author.avatar_url}}" alt="Avatar"/>
다음 link 헬퍼로 바꾸세요.
{{#link "user_profile" id=author.id class="user-profile"}}
<img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}
검색 결과
검색 결과 기본서식을 다음과 같이 업데이트하세요.
결과에서 문서의 작성자 이름 업데이트하기다음 if 블록({{#each article_results}} 블록 내)을
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
다음 link 헬퍼로 바꾸세요.
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
결과에서 게시물의 작성자 이름 업데이트하기
다음 if 블록({{#each post_results}} 블록 내)을
{{#if author.url}}
<a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
{{author.name}}
{{/if}}
다음 link 헬퍼로 바꾸세요.
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
오래된 테마에서 검색 결과 업데이트하기
오래된 테마에서는 검색 결과에 {{meta}} 헬퍼가 대신 사용될 수 있습니다. 이 경우에는 이 섹션에 설명된 코드를 사용해서 작성자 이름을 헬프 센터의 프로필 페이지에 연결할 수 있습니다.
검색 결과 페이지가 일관되도록 하려면 CSS 스타일을 업데이트해야 할 수도 있습니다.
결과에서 문서의 작성자 이름 업데이트하기다음 div 태그를
<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>
다음으로 바꿉니다.
<ol
class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
</div>
최종 결과는 다음과 같습니다.
{{#each article_results}}
<li class="search-result">
<a href="{{url}}" class="search-result-link">{{title}}</a>
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
</div>
</li>
{{/each}}
결과에서 게시물의 작성자 이름 업데이트하기
다음을 추가합니다.
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
최종 결과는 다음과 같습니다.
{{#each post_results}}
<li class="search-result">
<a href="{{url}}" class="search-result-link">{{title}}</a>
<ol class="breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
<div class="search-result-description">
{{text}}
</div>
<div class="search-result-meta">
<span dir="auto" class="search-result-meta-name">
{{#link "user_profile" id=author.id class="user-profile"}}
{{author.name}}
{{/link}}
</span>
<span class="search-result-meta-time">{{date created_at}}</span>
<span class="search-result-meta-count">
{{t 'comments_count' count=comment_count}}
</span>
</div>
</li>
{{/each}}
헬프 센터 테마에서 하위 섹션 사용 설정
헬프 센터 지식창고에 하위 섹션을 추가하여 콘텐츠 계층 구조에 더 많은 계층을 만들 수 있습니다. 2019년 3월 29일 이전에 사용자 지정된 테마를 사용하는 경우에는 헬프 센터 사용자 지정 테마에 코드를 추가해야 하위 섹션을 사용 설정할 수 있습니다. Copenhagen 테마의 나중 버전에 다음 코드가 제공됩니다.
- 섹션
section.sections
- 다음 스니펫을 Zendesk 섹션 페이지 기본서식인 section_page.hbs에 삽입하되, 헤더 태그(
... {{pagination}}) 전에 삽입해야 합니다.{{#if section.sections}} <ul class="section-list section-list--collapsed"> {{#each section.sections}} <li class="section-list-item"> <a href="{{url}}"> <span>{{name}}</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/> </svg> </a> </li> {{/each}} <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a> </ul> {{/if}} {{#if section.articles}} <ul class="article-list"> {{#each section.articles}} <li class="article-list-item {{#if promoted}} article-promoted{{/if}}"> {{#if promoted}}<span data-title="{{t 'promoted'}}" class="icon-star"></span>{{/if}} <a href="{{url}}" class="article-list-link">{{title}}</a> </li> {{/each}} </ul> {{else}} <i class="section-empty"> <a href="{{section.url}}">{{t 'empty'}}</a> </i> {{/if}}
여러 헬프 센터의 사이드바 필터 및 결과를 검색 결과 페이지에 추가
헬프 센터 검색 기능은 헬프 센터가 여러 개인 경우 사용자들이 여러 헬프 센터를 검색할 수 있도록 하며, 헬프 센터 및 지식창고와 커뮤니티의 검색 결과를 검색 결과 페이지에 필터가 포함된 하나의 통합된 피드로 제시합니다.
2019년 3월 29일 이전에 사용자 지정된 테마를 사용하는 경우에는 통합 검색 결과 및 여러 헬프 센터 검색을 지원하기 위해 헬프 센터 사용자 지정 테마에 코드를 추가해야 합니다. 헬프 센터가 여러 개 있는 경우에는 각 헬프 센터의 테마를 업데이트해야 합니다.
테마에 필요한 변경 작업을 하는 가장 빠른 방법은 통합 검색 결과를 지원하는 Copenhagen 테마의 최신 버전을 가져오는 것입니다. 그 방법은 Guide에 헬프 센터 테마 추가하기를 참조하세요.
help_center_filters, filters 및 subfilters 헬퍼를 사용하여 다음 파일을 업데이트해야 합니다.
사이드바 필터를 추가하도록 검색 결과 기본서식 업데이트하기
사이드바 필터를 추가하고 결과를 반복 실행하게 하려면 검색 결과 기본서식을 업데이트해야 합니다.
사이드바 필터 추가하기
이 스니펫은 새 필터 헬퍼를 사용하여 검색 결과 페이지 사이드바에 검색 패싯을 구현하는 방법의 예입니다.
검색 결과 기본서식에서 이 스니펫은 통합 검색 결과를 반복 실행하기 위해 {{results}} 헬퍼를 사용하는 방법의 예입니다. 검색 결과 기본서식에서 다음으로 바꿉니다.
<section class="search-results-sidebar">
{{#if help_center.community_enabled}}
<section class="filters-in-section collapsible-sidebar">
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_type'}}</h3>
<ul>
{{#each filters}}
<li>
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{#if subfilters}}
<section class="filters-in-section collapsible-sidebar">
{{#is current_filter.identifier 'knowledge_base'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
{{/is}}
{{#is current_filter.identifier 'community'}}
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
{{/is}}
<ul>
{{#each subfilters}}
<li>
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
</section>{{article_results}} 및 {{post_results}} 헬퍼와 관련 search-results-subheading H3s를{{#if results}}
<ul class="search-results-list">
{{#each results}}
<li class="search-result-list-item result-{{type}}">
<h2 class="search-result-title">
<a href="{{url}}" class="results-list-item-link">{{title}}</a>
</h2>
<article>
<div class="search-result-icons">
{{#if vote_sum}}
<span class="search-result-votes">{{vote_sum}}</span>
{{/if}}
{{#if comment_count}}
<span class="search-result-meta-count">
{{comment_count}}
</span>
{{/if}}
</div>
<ul class="meta-group">
<li>
<ol class="breadcrumbs search-result-breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ol>
</li>
<li class="meta-data">{{author.name}}</li>
<li class="meta-data">{{date created_at}}</li>
</ul>
<div class="search-results-description">{{text}}</div>
</article>
</li>
{{/each}}
</ul>
{{else}}
<p>
{{t 'no_results_unified'}}
{{#link 'help_center'}}
{{t 'browse_help_center'}}
{{/link}}
</p>
{{/if}}
검색 결과 페이지에서 사이드바 필터의 CSS 스타일 업데이트하기
사이드바 필터에 CSS 스타일을 추가할 수 있습니다. 다음 예는 Copenhagen 테마를 기준으로 합니다.
style.css 파일에 다음 CSS 규칙이 포함되어 있는지 확인하세요.
/***** Search results *****/
.search-results {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 1024px) {
.search-results {
flex-direction: row;
}
}
.search-results-column {
flex: 1;
}
@media (min-width: 1024px) {
.search-results-column {
flex: 0 0 75%;
}
}
.search-results-sidebar {
border-top: 1px solid #ddd;
flex: 1 0 auto;
margin-bottom: 20px;
padding: 0;
}
@media (min-width: 1024px) {
.search-results-sidebar {
border: 0;
flex: 0 0 20%;
height: auto;
}
}
.search-results-sidebar .sidenav-item[aria-selected="true"] {
background-color: $brand_color;
color: $brand_text_color;
text-decoration: none;
}
.search-results-subheading {
font-size: 18px;
font-weight: 600;
}
.search-results-list {
margin-bottom: 25px;
}
.search-results-list > li {
padding: 20px 0;
}
.search-results-list > li:first-child {
border-top: 1px solid #ddd;
}
.search-results-list > li h2 {
margin-bottom: 0;
}
.search-result-title {
font-size: 16px;
}
.search-result-description {
margin-top: 15px;
word-break: break-word;
}
.search-result-votes, .search-result-meta-count {
color: lighten($text_color, 20%);
display: inline-block;
font-size: 13px;
font-weight: 300;
padding: 4px 5px;
position: relative;
}
.search-result-votes::before, .search-result-meta-count::before {
color: $brand_color;
}
[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
margin-left: 5px;
}
[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
margin-right: 3px;
}
[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
margin-right: 5px;
}
[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
margin-left: 3px;
}
.search-result-votes::before {
content: "\1F44D";
}
.search-result-meta-count::before {
content: "\1F4AC";
}
.search-result .meta-group {
align-items: center;
}
.search-result-breadcrumbs {
margin: 0;
}
.search-result-breadcrumbs li:last-child::after {
content: "·";
display: inline-block;
margin: 0 5px;
}
/* Non-latin search results highlight */
/* Add a yellow background for Chinese */
html[lang|="zh"] .search-result-description em {
font-style: normal;
background: yellow;
}
/* Use bold to highlight for the rest of supported non-latin languages */
html[lang|="ar"] .search-result-description em,
html[lang|="bg"] .search-result-description em,
html[lang|="el"] .search-result-description em,
html[lang|="he"] .search-result-description em,
html[lang|="hi"] .search-result-description em,
html[lang|="ko"] .search-result-description em,
html[lang|="ja"] .search-result-description em,
html[lang|="ru"] .search-result-description em,
html[lang|="th"] .search-result-description em {
font-style: bold;
}
검색 결과 페이지에서 축소 가능한 사이드바에 대한 JavaScript 업데이트하기
검색 결과 페이지에서 축소 가능한 사이드바에 대한 JavaScript를 추가할 수 있습니다. 다음 예는 Copenhagen 테마를 기준으로 합니다.
사용자 지정 테마의 script.js 파일에서 다음 블록을
// Toggles expanded aria to collapsible elements
Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
});
});
다음 코드 스니펫으로 바꿉니다.
// Toggles expanded aria to collapsible elements
var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar');
Array.prototype.forEach.call(collapsible, function(el) {
var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle');
el.addEventListener('click', function(e) {
toggleNavigation(toggle, this);
});
el.addEventListener('keyup', function(e) {
if (e.keyCode === 27) { // Escape key
closeNavigation(toggle, this);
}
});
});