ホームページの追加
今現在、 http://localhost:8080 、デフォルトのサイトが表示される。 前回のモジュールでは、インスタンス名を変更し、ロゴを設定した。 これによって、サイトはカスタマイズされたルック＆フィールを持つようになった。
クラリティには独自のホームページが必要だ。 ページの作成と管理はサイト管理者の仕事であり、適切な権限があれば誰でも行うことができます。 すぐに使えるように、Liferayには必要なパーミッションを提供するSite Administratorというロールが用意されています。 このロールに割り当てられ、サイトのメンバーであるユーザーは、サイトの管理者として行動することができます。 最初のモジュールで実行されるセットアップスクリプトは、あなたのLiferayインスタンスに、まさにそのようなユーザーであるPreston Palmerを事前に入力しています。
-
サイト管理者としてログインし、Preston Palmer:
preston@clarityvisionsolutions.com、パスワードtest。 -
トップページに行き、管理用ヘッダーの 編集(
)をクリックする。コンテンツページエディターが表示されます。 ここでページにコンテンツ、機能、構造を追加する。
-
ブラウザを開き（
）、すべての要素を展開して、ページの構造のスナップショットを取得する：
-
一番外側のコンテナの Actions メニュー(
)をクリックし、 Delete をクリックする。これであなたのページは白紙に戻った。 次の練習で）変更しなければならないヘッダーとフッターは残っているが、デフォルトのページコンテンツはなくなっている！
-
プラスアイコン(
)をクリックして、フラグメントとウィジェットのサイドバーメニューを開きます。 -
Container フラグメントをページにドラッグする。
コンテナは、フラグメントやウィジェットのための設定可能なドラッグ＆ドロップゾーンを定義します。 すべてのコンテンツページ要素をコンテナに追加することで、ページのスタイリングがより便利になります。
-
コンテナにバナーを追加する。 サイドバーの「Fragments and Widgets」メニューから Banner を探し、すでに追加したコンテナの中にドラッグします。
バナーは2つのコンテナ、見出し、段落、ボタンで構成される。
ブラウザのサイドバー(
)で、要素を展開すると、現在のページ要素の階層が表示されます：
-
バナーのトップレベルコンテナの名前を変更する。 ブラウザのサイドバーで、 Actions メニュー(
)を開き、 Rename をクリックします。
-
バナーコンテナ に入る。
-
ブラウザのサイドバーにある Banner Container をクリックし、その設定（右サイドバーのメニュー）を開きます。 Generalセクションで、バナーの最小高さを80VHに設定する。 これにより、バナーは現在のデバイスのビューポートの高さの80％を占めるようになります。
-
バナーの内側のコンテナが中央に来るように設定する。 バナー・コンテナのコンテンツ表示を Flex Column に設定し、コンテンツのジャスティファイを Center に設定します。
-
内側のコンテナとその要素（見出し、段落、ボタン）の周りにパディングがあるように設定します。 サイドバーの一番内側の Container をクリックして設定を開き、 Styles をクリックします。
-
パディングを全周1レムに変更する。 スペーシングの設定で、要素の右、左、上、下のパディングに スペーサー3 を選択します。
各スペーサーの設定値は、ページの スタイルブック で定義されています。
-
バナーの背景に画像を設定します。 Background は、各コンテナ要素のコンフィギュレーションのプロパティである。 ブラウザのサイドバーにある Banner Container をクリックします。
-
右サイドバーの Styles メニューを開き、 Background Image を
clarity-banner-imageに設定します。 -
編集する要素をダブルクリックして、ページ上のテキストを変更します：
- 見出し： See Well, Look Good
- 段落： こんなに元気な自分、こんなに格好いい自分を見たことがないだろう。
- ボタン: 詳細はこちら
-
Publish ボタンをクリックします。
クラリティのホームページができた。 まだ完全には実装されていませんが、ユーザーはサイトにナビゲートできますし、明らかにLiferayではなくClarity用です。
次: 全ページにカスタムヘッダーとカスタムフッターを作成 .