各ヘルプセンターテーマは、編集可能なページテンプレートとカスタムページのコレクションで構成されています。また、ヘルプセンターの「Curlybars」テンプレート言語を使用してヘルプセンターデータにアクセスし、ページ内のコンテンツを編集することもできます。
この記事では、使用できるコードスニペット付きのレシピのリストを提供します。ここで紹介するレシピの一部の機能は、標準テーマとカスタムテーマのどちらを使用しているか、またヘルプセンターを導入した日付に応じて、ヘルプセンターにすでに搭載されていることがあります。
- Curlybarsテンプレート言語について
- 特定のカテゴリ、セクション、記事についてページテンプレートをカスタマイズする
- 言語セレクタの言語名をカスタマイズする
- 言語セレクタで1つ以上の言語を非表示にする
- 日付順または投票数順に、ユーザーが記事のコメントを並べ替えられるようにする
- 書式ツールバーを記事のコメントエディタに追加する
- 記事のコメントにユーザーが投票できるようにする
- 「瞬時に検索」（自動補完）の結果をヘルプセンターに追加する
- ヘルプセンターの検索に外部コンテンツを含めるために横串検索を追加する
- 「マイアクティビティ」の「フォロー中」ページでサブスクリプションタイプ別の並べ替えを追加する
- 「マイアクティビティ」のリクエスト用に「作成日時」と「更新日時」の並べ替えオプションを追加する
- 共有化が行われている組織のユーザーのために「フォローする/フォローを止める」ボタンを追加する
- サポートリクエストでユーザーがほかのユーザーをCCに含められるようにする
- 補足リクエストに元リクエストへのリンクを追加する
- カスタマーポータルで解決済みチケットのCSATを有効にする
- 記事に投票ボタンを追加する
- コンテンツタグを記事および投稿に追加する
- バッジをカスタムヘルプセンターのテーマに追加する
- ヘルプセンターのユーザープロフィールをユーザーが参照できるようにする
- ヘルプセンターテーマのサブセクションを有効化する
- 検索結果ページに複数のヘルプセンター用のサイドバーフィルターと結果を追加する
Curlybarsテンプレート言語について
ヘルプセンターは、テーマフレームワークに基づいて作成されており、このフレームワークには高度なカスタマイズのための専用テンプレート言語が含まれています。各ヘルプセンターテーマは、編集可能なテンプレートとオプションのカスタムページのコレクションで構成されています。
編集可能なページテンプレートは、各ページのレイアウトを定義します。たとえば、ナレッジベースの記事用のテンプレートや、リクエストのリスト用のテンプレートなどがあります。テンプレートは、ユーザーが表示した場合にHTMLページとして描画される、シンプルなテキストファイルです。各テンプレートは、HTMLマークアップと、テンプレート内で二重の波かっこで囲んで表される式（例：{{post.title}}）で構成されます。
カスタムページは、ヘルプセンターのテーマのコードベースに組み込まれており、ヘルプセンター内のどこからでもリンクできる特定の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にアクセスし、編集することができます。
特定のカテゴリ、セクション、記事についてページテンプレートをカスタマイズする
特定のカテゴリ、セクション、記事に合わせて、「カテゴリ」、「セクション」、「記事」のテンプレートをカスタマイズできます。
- カテゴリ
- セクション
- 記事
-
isブロックで、カテゴリ、セクション、または記事IDを指定します。{{#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}}参照情報
言語セレクタの言語名をカスタマイズする
ヘルプセンターのすべてのページの言語セレクタで、言語名をカスタマイズできます。「English」などのバリアントである個々の言語に対して、「English (U.S.)」のように言語バリアントであることを個別に示す場合に便利です。
- ヘッダー
{{#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}}参照情報
言語セレクタで1つ以上の言語を非表示にする
特定の言語だけを言語セレクタで非表示にする機能は、その言語のコンテンツがリリースに間に合わない場合に便利です。
- ヘッダー
{{#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 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}}
- search式に
instant=trueを追加します。{{search instant=true}}
例
<div class="search-box">
<h1 class="help-center-name">{{help_center.name}}</h1>
{{search instant=true}}
</div>ヘルプセンターの検索に外部コンテンツを含めるために横串検索を追加する
ヘルプセンターの検索結果テンプレートで横串検索を有効にするには、次の2つの作業を行います。
サイドバーフィルターを追加する
サイドバーのフィルターで使用されているプロパティを更新することで、検索結果のテンプレートを更新する必要があります。
で、以下のコードを更新します。<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 24 24" width="12px" height="12px" id="zd-svg-icon-12-new-window-fill"><path d="M 19.980469 2.9902344 A 1.0001 1.0001 0 0 0 19.869141 3 L 15 3 A 1.0001 1.0001 0 1 0 15 5 L 17.585938 5 L 8.2929688 14.292969 A 1.0001 1.0001 0 1 0 9.7070312 15.707031 L 19 6.4140625 L 19 9 A 1.0001 1.0001 0 1 0 21 9 L 21 4.1269531 A 1.0001 1.0001 0 0 0 19.980469 2.9902344 z M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 13 A 1.0001 1.0001 0 1 0 19 13 L 19 19 L 5 19 L 5 5 L 11 5 A 1.0001 1.0001 0 1 0 11 3 L 5 3 z"/></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}}参照情報
サポートリクエストでログインユーザーがほかのユーザーをCCに含められるようにする
ヘルプセンターの新規や既存のサポートリクエストに、ログインしたユーザーがCCを追加する機能を有効にできます。サポートリクエストにCCを追加した場合、CCに含められたユーザーはチケットの更新時にメール通知を受け取ります。
コードをカスタムテーマに追加した後、機能を有効にする必要があります（「CCのアクセス許可を設定する」を参照）。
- リクエストページ
{{#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}}
カスタマーポータルで解決済みチケットのCSATを有効にする
- リクエストページ
-
{{#with satisfaction_response}}...{{/with}}ブロックを request_page.hbs テンプレートに追加します。
-
GitHubのCopenhagen theme request page.hbsを参照してください。
- 次のテンプレートコードを追加します。
{{#with satisfaction_response}} {{#with rating}} <dl class="request-details"> <dt>{{t 'rating'}}</dt> <dd> <div> {{#is scale_type 'numeric'}} {{t 'numerical_rating' value=value max_value=max_value}} {{else}} {{scale_value}} {{/is}} </div> {{#link 'survey_response' id=../id}} {{#if ../editable}} {{t 'edit_feedback'}} {{else}} {{t 'view_feedback'}} {{/if}} {{/link}} </dd> </dl> {{else}} {{#if editable}} <dl class="request-details"> <dt>{{t 'rating'}}</dt> <dd> {{#link 'survey_response' id=id}} {{t 'add_feedback'}} {{/link}} </dd> </dl> {{/if}} {{/with}} {{/with}}
記事に投票ボタンを追加する
記事に表示される投票ボタンは、ヘルプセンターの標準の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ヘルパー宣言を見つけます。
{{edit}} - editヘルパー宣言を新しいactionsヘルパー宣言に置き換えます。
{{actions}}
これで、エージェントがバッジを授与できるようになります。新しいボタンは、個人設定に従ってCSSでスタイル設定されます。ヒントについては、Zendeskのサンプルテーマを参照してください。
投稿リストのページに役職バッジを表示する
役職バッジは、投稿リストページの作成者名の横に表示されるラベルとして追加できます。シンプルにするためにスタイリングクラスを再利用しているため、これは投稿のステータスラベルに似ています。
投稿リストのページに役職バッジを表示するには
- テーマのオンラインコードエディタを開きます。
Page filename: community_topic_page.hbs
-
author name宣言を見つけます。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
-
author name宣言を見つけます。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 helperを参照）、以下のテンプレートを更新することを含みます。
記事記事ページテンプレートに、次の更新を適用します。
記事の作成者名を更新する次の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}}ヘルパーの両方と、関連する検索結果の小見出しH3を{{#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テーマに基づいています。
次のCSSルールがstyle.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);
}
});
});