Open1

Zendesk Guide のレイアウトを hack する方法

Naoto ImamachiNaoto Imamachi

概要

以下で、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ヘルプ