Open1
Zendesk Guide のレイアウトを hack する方法
概要
以下で、Zendesk Guide で作成した記事のレイアウトをカスタマイズする方法を概説する。
記事のレイアウトのカスタマイズ
Zendesk Guide の記事が読み込む script.js
のコードに、任意の操作を追加することで、記事のレイアウトをカスタマイズできる。
以下では、ヘッダーなどの表示させたくない項目に対して、jQuery による DOM 操作で CSS の display: none
を付与する方法をまとめた(以下のコードは jQuery がインポートされている前提のコードになります)
pageId
は、記事の URL の hc/ja/articles/
以下の数字(添付図だと 4408829274906
)に該当します。
この方法の注意点として、DOM ツリーが完全に構築された後にコードが実行されるため、一瞬、ヘッダーなどの見せたくない項目が見えるという難点はある。
この方法は Hack になるので、できれば使いたくないところ… 😭
/*
* jQuery v1.9.1 included
*/
$(document).ready(function() {
// 該当ページのリンクをヘルプページから削除する - 設定1
// MEMO: $('a[href^="/hc/ja/articles/${pageId}-"]').parent().remove();
$('a[href^="/hc/ja/articles/4409091363737-"]').parent().remove();
// 特定のページで、ヘッダー、検索窓と表示履歴を削除する - 設定2
// MEMO: location.pathname.match(/hc\/ja\/articles\/${pageId}/) を条件に追加
if (location.pathname.match(/hc\/ja\/articles\/360024353214/)) {
// ヘッダーの削除
$('.header').css('display', 'none');
$('.container-divider').css('display', 'none');
$('.article-sidebar').css('display', 'none');
// 検索窓の削除
$('.sub-nav').css('display', 'none');
// 記事のmargin調整(必要に応じて調整)
$('.article').css('margin', '0 auto');
$('.article-content').css('margin-top', 0);
// 記事のタイトルを削除
$('.article-header').css('display', 'none');
// 最近表示した記事・関連記事を削除
$('.article-relatives').css('display', 'none');
// 「この記事は役に立ちましたか?」を削除
$('.article-votes').css('display', 'none');
// 「他にご質問がございましたら、リクエストを送信してください」を削除
$('.article-more-questions').css('display', 'none');
}
})
jQuery のインポート
GuideのテンプレートV2を使っている場合は、別途 jQuery をインポートする必要がある。
jQueryのインポートとアップグレード – Zendeskヘルプ