サインインページの追加
ユーザーは現在、ヘッダーのユーザーメニューにある Sign In をクリックしてClarityにログインできます。
-
ログアウトする。 どのページでも、ユーザーアイコンをクリックし、ドロップダウンメニューから Sign Out を選択します。 現在、ログアウトリンクを制御するカスタムフラグメントはデフォルトの Liferay ログアウト URL を使用しています：
c/portal/logoutです。 -
サインインページをテストする。 どのページでも、ユーザーアイコンと Sign In リンクをクリックしてください。 現在、サインインリンクを制御するカスタムフラグメントはデフォルトの Liferay ログイン URL を使用しています：
c/portal/loginを使用しています。 これは、デフォルトのSign Inウィジェットを起動したページで有効にします。 しかし、クラリティのマスターページが適用されている現状では醜い：
クラリティはサインイン体験をもっと良くする必要がある。 次に、カスタムサインインページを追加します。
-
空白テンプレートを使用してサインインページを追加します。 Add_をクリックすると、コンテンツ・ページ・エディターがロードされます。
-
ページ上部の管理バーにある Options メニュー(
)を開き、 Configure をクリックします。
-
一般ページ設定画面で、もう一度 Hidden from Menu Display を有効にして、サインインページがメニュー表示ウィジェットのナビゲーションメニューに表示されないようにします。 フレンドリーURL、
/sign-inをメモし、 Save をクリックする。 -
メニューから Design リンクをクリックし、テーマオプションを見てください。 これらは現在、ページ管理の設定によってすべてのページに設定されています（同様にオプションメニューからアクセスできます(
）。 -
このページのカスタムテーマを定義する をクリックして、継承されたテーマオプションを上書きします。 以下の設定のチェックを外してください：フッターの表示]と[ヘッダーの表示]。 検索バーを表示させたくないので、 Show Header Search_のチェックを外すこともできるが、ヘッダーを完全に非表示にすることでそれも達成できる。
-
下にスクロールして設定を保存します。
-
ページ上部の戻る矢印を使ってコンテンツページエディタに戻り、インポートしたフラグメント「Sign In」を追加します。
-
ページを公開する。
-
ここで、カスタムユーザーナビゲーションフラグメントを編集して、
/c/portal/loginの代わりに新しいサインインページを指すようにします。 サイトメニューへ (**
) →Design→*Fragments . -
user-nav_Dropdownフラグメントを開く。 HTMLペインで、ログインURLを設定する行を見つける：<a class="user-sign-in" href="/c/portal/login"> -
サインインページのフレンドリーURLである
sign-inを指すように行を置き換える：<a class="user-sign-in" href="${publicFriendlyURL}/sign-in">この
publicFriendlyURL変数は、FreeMarkerの構文を使ってHTMLの最初の行に設定されます：[#assign publicFriendlyURL = themeDisplay.getPathFriendlyURLPublic() + themeDisplay.getSiteGroup().getFriendlyURL() /] -
Publish をクリックする。
-
ページまたはマスターページで使用中のフラグメントに、新しいフラグメントコードを伝搬する。 フラグメントの Actions(
) メニューを開き、 View Usages をクリックします。 -
リストアップされた使用法をすべて選択し、 Propagate(
)をクリックします。 詳しくは フラグメントの変更のプロパゲート を参照のこと。 -
どのページからでもログアウトし、 サインイン をクリックしてください。 新しいページが表示されますので、そこでサインインしてください。
今はグレーの背景を気にする必要はない。 カスタムサインインフラグメントのCSSは、form-boxクラスを次のようにスタイルする：
.form-box {
align-items: flex-start;
background-color: var(--brand-color-2);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--spacer-6) var(--spacer-7) var(--spacer-4);
width: 35%;
}
このように背景色をブランドカラー変数に設定することは、後でサイトをスタイリングする際に影響を与えることができるため、良い習慣である。 今のところ、brand-color-2という変数はグレーに解決され、見た目は良くない。 この問題を解決するために色をハードコードするのは良い解決策ではないので、今はグレーのままにしておく。
これでクラリティのサイト構造は整った。 しかし、ナビゲーションメニューはもう少し改良が必要だろう。
次ページ： 新しいナビゲーション・メニューの作成.