Guideの管理者がWebに精通しているなら、ヘルプセンターのカスタマイズテーマの構築に使用されるページコードを直接編集してもかまいません。ページコードは、ヘルプセンターのグローバルヘッダーとフッターと同様に、ページタイプごとのレイアウトを定義する編集可能なテンプレートに格納されています。また、Curlybarsというフル機能のテンプレート言語を使用してヘルプセンターにアクセスし、ページテンプレート内のコンテンツを操作することもできます。特別なテンプレートでは、JavaScriptを追加したり、CSSをカスタマイズすることができます。
この記事では、次のトピックについて説明します。
関連記事:
ページテンプレートをHTMLとCurlybarsでカスタマイズする
ヘルプセンターのHTMLは、グローバルヘッダーとフッターと同様に、ページタイプごとのレイアウトを定義する編集可能なテンプレート内に格納されています。また、Curlybarsというフル機能のテンプレート言語を使用してヘルプセンターにアクセスし、ページテンプレート内のコンテンツを操作することもできます。
以下のページタイプまたはページ要素のテンプレートをカスタマイズできます。
- 記事ページ(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):ユーザーに割り当てられた/ユーザーがCCに含まれているリクエストおよびチケットのリスト
- 検索結果(search_results.hbs):検索結果の表示フォーマット
- セクションページ(section_page.hbs):ランディングページ
- フォローしているページ(subscriptions_page.hbs):ユーザーがフォローしているカテゴリ、セクション、記事のリスト
- ユーザープロフィールページ(user_profile_page.hbs)
ページテンプレートを編集するには
- Guideで、サイドバーにあるデザインをカスタマイズアイコン(
)をクリックします。
- 編集するテーマをクリックして、開きます。
- 「コードを編集」をクリックします。
- 「テンプレート」セクションで、編集するテンプレートをクリックします。
コードエディタにページが開きます。
- コードビューを使用して、テンプレートを編集します。
以下のものは、追加、削除、並べ替えを行うことができます。
-
テンプレート式:ページ内のコンテンツを表示し、操作するために使用します。
たとえば、breadcrumbsテンプレートヘルパーの
{{breadcrumbs}}
は、ページに階層リンクナビゲーション要素を表示します。テンプレート式の詳しい使い方については、「Help Center Templates(ヘルプセンターのテンプレート)」を参照してください。 - 動的コンテンツのプレースホルダ(「翻訳されたテキストを追加する」を参照)
- サードパーティによって作成された埋め込み可能なウィジェット(Twitter検索ウィジェットなど)
- 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;
}
次のように、1組の中括弧を使用してヘルパーをCSS式に埋め込むこともできます。
max-width: #{$search_width}px
HTML内のCurlybarsにおける変数の使用例
色、フォント、およびテーマ画像用に設定したプロパティは変数に格納され、HTMLページテンプレートのCurlybars式で参照できます。
変数は、Curlybars内のsettings
オブジェクトのプロパティになります。ほかのすべてのCurlybarsオブジェクトと同様に、二重中括弧とドット表記を使用して、プロパティをページテンプレートに挿入できます。
例:
-
{{settings.color_1}}
:色の16進数値。以下はその例です。#FF00FF
-
{{{settings.font_1}}
:フォントスタック。たとえば、systemは「'-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}}
0 コメント
サインインしてコメントを残してください。