SITECORE MANIA 技術ブログ

2021.02.17 SXA

キム・ヒョドン

キム・ヒョドン

SXAでサイト構築#08_エクスポートとインポート

環境

  • Sitecore 9.0.2 rev. 180604
  • Sitecore Experience Accelerator 1.7.1 rev. 180604 for 9.0

エクスポートとインポート

今までSXAのワイヤーフレームで書いたものを静的HTMLとしてもエクスポートができます。
エクスポートしてコードを確認し、HTMLにclassを追加したり、CSSやJSなどを修正することができます。

前回紹介したSXAでサイト構築#05_モジュール作成_Header編でスタイルを準備して入れたり、CSSやJSをメディアのテーマに直接入れましたが、今回はCreative Exchangeを使ってエクスポートしたファイルを一気に修正してインポートまでやってみたいと思います。

目次

今回はエクスポートとインポートをしてみましょう。

01.準備

バリアント作成

エクスポートする前にRich Textモジュールを作成するので、そのモジュールに必要なバリアントを作成します。

Presentation/Rendering Variants/Rich Text/のバリアントを定義します。

H2のバリアントを定義します。

H2のバリアント定義に下の画像のようにtextフィールドを挿入します。

タグをh2に変更します。

CSSクラスを下の画像のようにtitleを入力します。

モジュール作成

Category Aページをエクスペリエンス エディターで開きます。

開きましたら下の画像のように /main/sxa-1col-category/container-1/container-2/row-1-3Rich Textモジュールを入れましょう。

Rich Textのスタイリングでさっき作成したバリアントH2を定義します。

テキスト内容を入力します。

Rich Test作成できましたら、Category Aページ下にDataアイテムとして保存されます。

02.Export

TestSite/Homeをクリックし、右上の エクスポートをクリックします。

下の画像と同じく設定して 次へボタンをクリックします。

zip化されたサイトをダウンロードします。

zipファイルを解凍します。

下のようにエクスポートされました。

Category Aページのindex.htmlファイルを修正します。

HTML編集

index.htmlをテキストエディターで開いてさっき作成したRich Text場所を探します。

add-your-css-classes-hereのclass名があるか確認します。

add-your-css-classes-here後ろに追加したいclassを追加します。(title-field)

CSS編集

下の画像のようにスタイルを書いてtest-css.cssCSSファイルで保存します。

格納場所は/-/media/Themes/SitecoreBlogSXA/TestSite/TestSiteTheme/styles/

編集が終わりましたら、エクスポートしたフォルダをまたzip化して圧縮します。

03.Import

TestSite/Homeをクリックし、右上の インポートをクリックします。

zip化したファイルをアップロードします。

アップロードボタンをクリックします。

アップロードしたパッケージ名を確認して次へボタンをクリックします。

次へボタンをクリックして、インポート完了します。

04.確認

add-your-css-classes-hereの後ろに入れたclassは自動的に設定されています。

追加したCSSファイルtest-cssもちゃんとインポートされました。

ちゃんとクラスとスタイルが適用されています。


最後に

これでSXAのブログは終了となります。軽くSXAでサイト構築する流れをまとめてました。足りない部分もいっぱいありますが、少しでもSXAについて役に立てましたら幸いです。今までご覧いただきありがとうございました。

次は、SXAのノウハウなとブログ化する予定です。これからもよろしくお願いいたします。

今回も作成フローを動画でまとめましたので、ぜひご覧ください。

参考動画

この記事を読んだ人はこちらの記事も読んでます

お問い合わせ・資料請求

LYZONにご相談下さい

ご依頼ご質問等まずは私達にお気軽にご相談下さい。

お電話でのお問い合わせ

03-5803-0587平日9:00~18:00